preference component added

Merge branch 'settings-page-update' of WrenchBoard/Users-Wrench into master
currency code added
2024-10-09 15:21:03 +01:00 · 2024-10-08 21:27:10 +00:00 · 2024-10-08 20:09:56 +01:00 · 2024-10-08 16:10:52 +00:00 · 2024-10-08 16:58:26 +01:00 · 2024-10-08 15:46:51 +00:00
99 changed files with 4268 additions and 1258 deletions
@@ -6,9 +6,18 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

-
-    <meta name="description" content="wrenchboard.com is an online marketplace to make money from your skills, find, buy and sell professional services. Connect with freelancers to get work done faster. Trade your freelance services."/>
-    <meta name="title" content="WrenchBoard: Find a Freelancer  | Sell Professional Services"/><meta name="keywords" content="Online Jobs, Online Workers, work online Nigeria, hire a freelancer, hire freelancers, freelance marketplace, freelancer hire, freelance service, freelance professional services, How to make money online, find workers online, Online Services, digital services, freelancers community in Ghana, freelancers community in Nigeria, freelancer site in Africa, Best freelance website in Africa,  Freelance Designers, Photographers,  Writers in Nigeria, freelancers, freelance outsourcing in Nigeria, freelance IT services in Nigeria, hire freelancers online in Nigeria, freelance services online in Nigeria, freelance contractor in Nigeria, freelance sites in Nigeria, freelance jobs in Nigeria, freelance projects in Nigeria, freelance jobs online in Nigeria, professional freelancers in Nigeria, buy professional services in Nigeria, professional services jobs, professional business services, professional service providers in Nigeria, freelancing services, freelancing sites in Nigeria, freelancers for hire in Nigeria, freelancer search in Nigeria, search freelancer in Nigeria, find freelancers in Nigeria, Find workers US. Outsource from US to Nigeria, find a freelancer in Nigeria, freelancing projects in Nigeria, web freelancing in Nigeria, outsourcing sites freelancers in Nigeria, website for freelancers in Nigeria, marketplace for freelancers "/>
+    <meta
+            name="description"
+            content="WrenchBoard.com is the place to set family goals and reward achievements. Find tasks to earn from, or send tasks for others to perform for you."
+    />
+    <meta
+            name="title"
+            content="WrenchBoard: Reward Accomplishments | Get Family Engaged"
+    />
+    <meta
+            name="keywords"
+            content="Empower families to reward accomplishment, set goals, and encourage kids to understand goals, earning, and the benefit of savings – in one app experience."
+    />
    <link rel="manifest" href="/manifest.json"/>
    <script>
      !function(e,a,t,n,g,c,o){e.GoogleAnalyticsObject=g,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),o=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",o.parentNode.insertBefore(c,o)}(window,document,"script",0,"ga"),ga("create","UA-54829827-4","auto"),ga("send","pageview")</script><script defer="defer" src="/static/js/main.787e423f.js"></script><link href="/static/css/main.418eaf65.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body><script>var LHC_API=LHC_API||{};LHC_API.args={mode:"widget",lhc_base_url:"//chat.live.wrenchboard.com/",wheight:450,wwidth:350,pheight:520,pwidth:500,leaveamessage:!0,check_messages:!1},function(){var e=document.createElement("script");e.type="text/javascript",e.setAttribute("crossorigin","anonymous"),e.async=!0;var t=new Date;e.src="//chat.live.wrenchboard.com/design/defaulttheme/js/widgetv2/index.js?"+t.getFullYear()+t.getMonth()+t.getDate();var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}()
@@ -68,6 +68,8 @@ import FamilyWalletPage from "./views/FamilyWalletPage";
 import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
 import FamGamesPage from "./views/FamGamesPage";
 import FamilyRoutesPage from "./views/FamilyRoutesPage";
+import PromoPage from "./views/PromoPage";
+import LearnMorePage from "./views/LearnMorePage";

 export default function Routers() {
  return (
@@ -93,6 +95,7 @@ export default function Routers() {
            <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
            <Route exact path="/eoffer" element={<LoginPageTwo />} />
            <Route exact path="/invite" element={<LoginPageTwo />} />
+            <Route exact path="/promo/:name/:id" element={<PromoPage />} />
          </>
        ) : (
          <>
@@ -201,6 +204,7 @@ export default function Routers() {
          <Route exact path="/sell" element={<SellPage />} />
          <Route exact path="/saved" element={<SavedPage />} />
          <Route exact path="/history" element={<HistoryPage />} />
+          <Route exact path="/learnmore" element={<LearnMorePage />} />
          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
          <Route exact path="/my-uploads" element={<UploadProductPage />} />
          <Route exact path="/profile" element={<AuthProfilePage />} />
@@ -162,7 +162,7 @@ function AddJob({ popUpHandler, categories }) {
                      <div className="field w-full mb-[5px] xl:mb-0">
                        <InputCom
                          fieldClass="px-6 text-right flex"
-                          label="Price"
+                          label="Reward"
                          labelClass=""
                          type="number"
                          name="price"
@@ -51,7 +51,7 @@ const validationSchema = Yup.object().shape({
    .required("Price is required"),
  title: Yup.string()
    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
    .required("Title is required"),
  description: Yup.string()
    .min(5, "Minimum 5 characters")
@@ -13,11 +13,12 @@ export default function LoginLayout({ slogan, children }) {

  return (
    <div
-      className={`h-screen overflow-y-auto bg-cover bg-center`}
+      className={`min-h-screen overflow-y-auto bg-cover bg-center flex flex-col justify-between items-center`}
      style={{
        backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
      }}
    >
+      
      <div className={`w-full grid grid-cols-1 xl:grid-cols-2`}>
        {/* <div 
            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
@@ -29,47 +30,51 @@ export default function LoginLayout({ slogan, children }) {
            <div className="w-full flex justify-center items-center">
              {children && children}
            </div>
-            <div className="w-full flex flex-col justify-center items-center px-10">
-              <div className="w-full flex justify-center items-center pt-5">
-                <div className="flex items-center">
-                  <a
-                    href="https://www.wrenchboard.com/about-us"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    About
-                  </a>
-                  <a
-                    href="https://www.wrenchboard.com/service"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Services
-                  </a>
-                  <a
-                    href="https://www.wrenchboard.com/contact"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Contact Us
-                  </a>
-                </div>
-              </div>
-              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
-                <span className="dark:text-white">
-                  &copy; {new Date().getFullYear()} -
-                </span>
-                <Link to="/" className="text-[#009ef7] ml-1">
-                  WrenchBoard
-                </Link>{" "}
-              </p>
-            </div>
          </div>
        </div>
      </div>
+
+      <div className='w-full shadow-md bg-slate-50 dark:bg-dark-white'>
+        <div className="w-full flex flex-col md:flex-row justify-center items-center px-10 py-2">
+          <div className="flex justify-center items-center">
+            <div className="flex items-center">
+              <a
+                href="https://www.wrenchboard.com/about-us"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                About
+              </a>
+              <a
+                href="https://www.wrenchboard.com/service"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Services
+              </a>
+              <a
+                href="https://www.wrenchboard.com/contact"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Contact Us
+              </a>
+            </div>
+          </div>
+          <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
+            <span className="dark:text-white">
+              &copy; {new Date().getFullYear()} -
+            </span>
+            <Link to="/" className="text-[#009ef7] ml-1">
+              WrenchBoard
+            </Link>{" "}
+          </p>
+        </div>
+      </div>
+
    </div>
  );
 }
@@ -42,7 +42,7 @@ export default function ActivitiesTab({ className }) {
      <div className="relative w-full overflow-x-auto sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b  default-border-b dark:border-[#5356fb29] ottom ">
              <td className="py-4 pr-12">List</td>
              <td className="py-4 text-start px-2">Product Name</td>
              <td className="py-4 text-start px-2">Price</td>
@@ -63,7 +63,7 @@ export default function ForgotPassword() {
      setResetLoading(true);
      try {
        const res = await userApi.StartResetPassword(reqData);
-        if (res.status === 200) {
+        if (res.status === 200 && res?.data?.internal_return >= 0) {
          setMsgSuccess(true);
          setMail("");
          setValue(false);
@@ -16,6 +16,9 @@ import { updateUserDetails } from "../../../store/UserDetails";

 import ReCAPTCHA from "react-google-recaptcha";

+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
 export default function Login() {
  // eslint-disable-next-line no-restricted-globals
  const queryParams = new URLSearchParams(location?.search);
@@ -526,44 +529,47 @@ export default function Login() {
              {/* 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">
+                  <div className="w-32 lg:w-48">
                    <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"
+                      // 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"
                      rel="noreferrer"
                      href={process.env.REACT_APP_APPLE_APP}
                    >
-                      <i className="fa-brands fa-apple text-3xl"></i>
+                      {/* <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>
+                      </div> */}
+                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                    </a>
                  </div>
-                  <div className="w-28 lg:w-32">
+                  <div className="w-32 lg:w-48">
                    <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"
+                      // 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"
                      rel="noreferrer"
                      href={process.env.REACT_APP_ANDROID_APP}
                    >
-                      <i className="fa-brands fa-google-play text-2xl"></i>
+                      {/* <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>
+                      </div> */}
+                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
                    </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
+                    This site is protected by a Captcha. <br />Our Privacy Policy and
                    Terms of Service apply.
                  </div>
                </>
@@ -0,0 +1,252 @@
+import React, {useState, useEffect} from 'react'
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
+
+import usersService from "../../../services/UsersService";
+
+import PromoPageLayout from '../PromoPageLayout'
+import InputCom from "../../Helpers/Inputs/InputCom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
+
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
+export default function Promo() {
+
+  const api = new usersService()
+
+  const {name, id} = useParams() // PARAMETERS COMING FROM THE LINK
+  // console.log(name, id)
+
+  const navigate = useNavigate()
+
+  const dispatch = useDispatch();
+
+  const [requestStatus, setRequestStatus] = useState({loading:true, data:{}})
+
+  const [completeSignUp, setCompleteSignUp] = useState({loading:false, status:false, message: ''});
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [password, setPassword] = useState("");
+
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleContinue = () => {
+    let reqData = { // API REQUEST DATA/PAYLOAD
+      username: requestStatus?.data?.email,
+      promo: name,
+      promo_owner: id,
+      password: password,
+      sessionid: '24271A99426'
+      }
+    setCompleteSignUp({loading:true, status:false, message: ''})
+    if(!password){ // CHECKS FOR EMPTY PASSWORD
+      setCompleteSignUp({loading:false, status:false, message: 'Please Enter Password'})
+      return setTimeout(()=>{
+        setCompleteSignUp({loading:false, status:false, message: ''})
+      },2000)
+    }
+    api.loginPromo(reqData).then(res => { //loginPromo
+      console.log('RES', res)
+      if(res.data?.internal_return < 0 || !res?.data?.member_id || !res?.data?.uid || !res?.data?.session || res?.data?.status_message == 'VALID_LINK_NOT_FOUND'){
+        setCompleteSignUp({loading:false, status:false, message: 'Unable to login'})
+        return setTimeout(()=>{
+          setCompleteSignUp({loading:false, status:false, message: ''})
+        },4000)
+      }
+
+      // Do LOGIN HERE
+      localStorage.setItem("member_id", `${res.data.member_id}`);
+      localStorage.setItem("uid", `${res.data.uid}`);
+      localStorage.setItem("session_token", `${res.data.session}`);
+      localStorage.setItem("wallet_available_status", `${res.data.wallet_available_status}`);
+      if (res.data?.account_type == "FAMILY") {
+        sessionStorage.setItem("family_uid", res.data?.family_uid);
+        sessionStorage.setItem("parent_uid", res.data?.parent_uid);
+      }
+      dispatch(updateUserDetails({ ...res.data }));
+      setTimeout(() => {
+        navigate("/", { replace: true });
+        setCompleteSignUp({loading:false, status:true, message: ''})
+      }, 2000);
+
+    }).catch(err => {
+      setCompleteSignUp({loading:false, status:false, message: 'Opps! try again'})
+      setTimeout(()=>{
+        setCompleteSignUp({loading:false, status:false, message: ''})
+      },4000)
+    })
+  }
+
+  useEffect(()=>{
+    let reqData = { // API REQUEST DATA/PAYLOAD
+      promo: name,
+      promo_owner: id,
+      sessionid: '79970A12501'
+      }
+    api.verifyPromo(reqData).then(res => {
+      if(res?.data?.internal_return < 0 || !res?.data?.email || res?.data?.status_message != 'VALID_LINK_FOUND'){
+        return setRequestStatus({loading:false, data:{}})
+      }
+      setRequestStatus({loading:false, data:res?.data})
+    }).catch(err => {
+      setRequestStatus({loading:false, data:{}})
+    })
+  },[])
+
+  return (
+    <PromoPageLayout>
+      <div className="w-full">
+        <div className="mb-5">
+          <Link to="#">
+            <img
+              src={WrenchBoard}
+              alt="wrenchboard"
+              className="h-10 mx-auto"
+            />
+          </Link>
+        </div>
+        {requestStatus.loading ?
+          <div className='flex flex-col justify-center items-center'>
+            <LoadingSpinner height='h-40' size='8' />
+            <p>Loading...</p>
+            <p>please do not refresh</p>
+          </div>
+          : Object.keys(requestStatus.data).length > 0 ?
+          <div className="flex place-content-center">
+              <div className="w-10/12 pb-3">
+                <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2"
+                      value={requestStatus?.data?.email}
+                      // inputHandler={handleEmail}
+                      placeholder="Your Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      iconName="message"
+                      disable={true}
+                    />
+                  </div>
+
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass="tracking-wider"
+                      fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                      value={password}
+                      inputHandler={handlePassword}
+                      placeholder="● ● ● ● ● ●"
+                      label="Set Password"
+                      name="password"
+                      type={showPassword ? "text" : "password"}
+                      onClick={togglePasswordVisibility}
+                      passIcon={showPassword ? "password" : "password"}
+                    />
+                  </div>
+
+                  {completeSignUp.message && (
+                    <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]">
+                      {completeSignUp.message}
+                    </div>
+                  )}
+
+                  <div className="flex justify-center">
+                    <button
+                      name="full"
+                      onClick={handleContinue}
+                      type="button"
+                      disabled={completeSignUp.loading}
+                      className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                    >
+                      {completeSignUp.loading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <>Continue</>
+                      )}
+                    </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-32 lg:w-48">
+                    <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"
+                      rel="noreferrer"
+                      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> */}
+                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
+                    </a>
+                  </div>
+                  <div className="w-32 lg:w-48">
+                    <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"
+                      rel="noreferrer"
+                      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> */}
+                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
+                    </a>
+                  </div>
+                </div>
+              </div>
+              </div>
+          </div>
+          :
+          <ErrorComponent onClick={() => navigate("/login")} />
+        }
+      </div>
+    </PromoPageLayout>
+  )
+}
+
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already verified this link or the
+        link has expired. Try login or reset password. If none worked, try to
+        create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);
@@ -0,0 +1,80 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+import DarkModeContext from "../Contexts/DarkModeContext";
+
+export default function PromoPageLayout({ children }) {
+  const bgImg = localImgLoad("images/left-wrenchboard.jpg");
+  const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg");
+  const bgImgCom = localImgLoad("images/wrench-promo-back-common.jpg");
+
+  const { countryMode } = useContext(DarkModeContext);
+
+  return (
+    <div
+      className={`min-h-screen overflow-y-auto bg-cover bg-center flex flex-col justify-between items-center`}
+      style={{
+        backgroundImage: `url(${countryMode == "NG" ? bgImgCom : bgImgCom})`,
+      }}
+    >
+      
+      <div className={`w-full grid grid-cols-1`}>
+        {/* <div 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div> */}
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='hidden w-full shadow-md bg-slate-50 dark:bg-dark-white'>
+        <div className="w-full flex flex-col md:flex-row justify-center items-center px-10 py-2">
+          <div className="flex justify-center items-center">
+            <div className="flex items-center">
+              <a
+                href="https://www.wrenchboard.com/about-us"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                About
+              </a>
+              <a
+                href="https://www.wrenchboard.com/service"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Services
+              </a>
+              <a
+                href="https://www.wrenchboard.com/contact"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Contact Us
+              </a>
+            </div>
+          </div>
+          <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
+            <span className="dark:text-white">
+              &copy; {new Date().getFullYear()} -
+            </span>
+            <Link to="/" className="text-[#009ef7] ml-1">
+              WrenchBoard
+            </Link>{" "}
+          </p>
+        </div>
+      </div>
+
+    </div>
+  );
+}
@@ -5,6 +5,9 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";

+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
 export default function SignUp() {
  // eslint-disable-next-line no-restricted-globals
  const queryParams = new URLSearchParams(location?.search);
@@ -347,36 +350,38 @@ export default function SignUp() {
                {/* 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">
+                    <div className="w-32 lg:w-48">
                      <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"
+                        // 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"
+                        href={process.env.REACT_APP_APPLE_APP}
                      >
-                        <i className="fa-brands fa-apple text-3xl"></i>
+                        {/* <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>
+                        </div> */}
+                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                      </a>
                    </div>
-                    <div className="w-28 lg:w-32">
+                    <div className="w-32 lg:w-48">
                      <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"
+                        // 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"
+                        href={process.env.REACT_APP_ANDROID_APP}
                      >
-                        <i className="fa-brands fa-google-play text-2xl"></i>
+                        {/* <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>
+                        </div> */}
+                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
                      </a>
                    </div>
                  </div>
@@ -42,10 +42,10 @@ export default function ActivitiesTab({ className }) {
      <div className="relative w-full overflow-x-auto sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
          <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b default-border-b dark:border-[#5356fb29] ottom ">
              <td className="py-4 pr-12">List</td>
              <td className="py-4 text-start px-2">Product Name</td>
-              <td className="py-4 text-start px-2">Price</td>
+              <td className="py-4 text-start px-2">Reward</td>
              <td className="py-4 text-start px-2">Quantity</td>
              <td className="py-4 text-start px-2">From</td>
              <td className="py-4 text-start px-2 pr-12">To</td>
@@ -28,21 +28,14 @@ export default function VerifyYou() {
                </span>
              </div>
              <div className="input-area">
-                <div className="mb-5">
+              <div className="mb-5">
                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
+                    Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
                  </p>
                </div>
                <div className="mb-5">
                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
+                    If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
                  </p>
                </div>
              </div>
@@ -26,9 +26,11 @@ export default function BlogItem(props) {
    const queryParams = new URLSearchParams(location?.search);
    const blog_id = queryParams.get("blog_id");
    
+    // console.log('MUMU', 'meta_value', blogdata, blogdata.data.image_url)
+
    useEffect(()=>{
        if(!blog_id){
-            navigate('/',{replace:true})
+            return navigate('/',{replace:true})
        }
        apiCall.getSingleBlogData({blog_id}).then(res => {
            setBlogdata({loading: false, data:res.data})
@@ -87,7 +89,11 @@ export default function BlogItem(props) {
                                <div className="slider-btns flex space-x-4">
                                </div>
                            </div> */}
-                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            {/* console.log('MUMU', 'meta_value', blogdata, blogdata.data.image_url) */}
+                            <div className='w-full mb-8'>
+                                <img src={`${blogdata.data.image_url}/${blogdata.data?.blogdata?.[0]?.meta_value}`} className='w-full h-auto' alt='Blog Image' />
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}} className='prose leading-relaxed'>
                            </div>
                    </div>
                    :
@@ -10,6 +10,7 @@ export default function AvailableJobsCard({
  hidden = false,
  contentDisplay,
  image_server,
+  marketPlaceProduct
 }) {
  //debugger;
  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -103,9 +104,10 @@ export default function AvailableJobsCard({
              {/* <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">
-                  <div>
-                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
+                  <div className='w-full'>
+                    <p className="w-full flex gap-1 items-center font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                      {/* {thePrice} | {datas.timeline_days} day(s) */}
+                      {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
                      {thePrice}
                    </p>
                    <p className="text-sm text-lighter-gray">
@@ -171,8 +173,9 @@ export default function AvailableJobsCard({
              </div>

              <div className="block sm:flex flex-wrap gap-4">
-                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
-                  Price: <span className="text-purple">{thePrice}</span>
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1 items-center">
+                  {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                  Reward: <span className="text-purple">{thePrice}</span>
                </p>
                <p className="text-sm text-thin-light-gray">
                  Duration:{" "}
@@ -220,6 +223,7 @@ export default function AvailableJobsCard({
            setMarketPopUp({ show: false, data: {} });
          }}
          situation={marketPopUp.show}
+          marketPlaceProduct={marketPlaceProduct}
        />
      )}

@@ -20,7 +20,7 @@ export default function OfferCard({
  let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`

  return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+    <div className="card-style-one flex flex-col gap-3 justify-between w-full bg-white dark:bg-dark-white p-3 rounded-2xl">
      <div className="content">
        <div className="w-full h-40">
          {/* thumbnail image/video */}
@@ -46,24 +46,24 @@ export default function OfferCard({
          </h1>

          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-1 gap-2">
-              {/* <div className="flex flex-col justify-between items-center border-r-2">
+            {/* <div className="grid grid-cols-1 gap-2">
+              <div className="flex flex-col justify-between items-center border-r-2">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Task Code
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {datas.contract}
                </p>
-              </div> */}
+              </div>
              <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-red-500 tracking-wide">Expires</p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  <CountDown lastDate={datas.expire} />
                </p>
              </div>
-            </div>
+            </div> */}

-            <hr className="my-2" />
+            {/* <hr className="my-2" /> */}

            <div className="grid grid-cols-2 gap-2">
              <div className="flex flex-col justify-between items-center border-r-2">
@@ -74,13 +74,19 @@ export default function OfferCard({
                  {thePrice}
                </p>
              </div>
-              <div className="flex flex-col justify-between items-center">
+              {/* <div className="flex flex-col justify-between items-center">
                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                  Timeline
                </p>
                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                  {`${datas.timeline_days} day(s)`}
                </p>
+              </div> */}
+              <div className="flex flex-col justify-between items-center">
+                <p className="text-sm text-red-500 tracking-wide">Expires</p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  <CountDown lastDate={datas.expire} />
+                </p>
              </div>
            </div>
          </div>
@@ -85,6 +85,7 @@ export default function SocketIOContextProvider({children}) {
            }
            console.log('data', data)
        });
+        // dispatch(tableReload({ type: "HOMEBANNERS" })); // RELOADS HOME BANNERS

    }, [socket]);

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { Suspense, lazy, useState } from "react";
 import { Link } from "react-router-dom";
+import VideoElement from '../../components/VideoCom/VideoElement'
+import OfferJobPopout from '../../components/jobPopout/OfferJobPopout'
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CountDown from '../Helpers/CountDown'
+
+const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => {
+
+  let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
+  let offersListLength = offersList?.length > 2 ? 2 : offersList?.length

-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);
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength);
+  const getLowerBanner = bannerList?.filter((value, idx) => !getUpperBanner?.map(item => item?.title)?.includes(value.title));

  let getImage = ({ banner_location, banner }) => {
    if (banner_location == "LOCAL") {
@@ -14,56 +23,115 @@ const AccountDashboard = ({ className, bannerList }) => {
    }
  };

-  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 grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
-        {getUpperBanner?.map((props, idx) => {
-          let image = getImage(props);
+    <>
+      <div
+        className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
+          className || ""
+        }`}
+      >

-          let { short_title, short_description, short_button_text, link_path } =
-            props;
+        {/* for normal banner section */}
+        <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
+          {/* OFFER LIST DISPLAY */}
+          <>
+            {(offersList && offersList?.length > 0) &&
+              offersList.map((item, index) => {
+                let thePrice = PriceFormatter(
+                  item?.price * 0.01,
+                  item?.currency_code,
+                  item?.currency
+                );
+              
+                let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
+                if(index < offersListLength){
+                  return (
+                    <div key={item.offer_uid}>
+                        <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                  )
+                }
+            })}
+          </>

-          return (
-            <div key={idx}>
-              <TopBanner
-                btn={short_button_text}
-                image={image}
-                title={short_title}
-                desc={short_description}
-                link_path={link_path}
-              />
-            </div>
-          );
-        })}
+          {getUpperBanner?.map((props, idx) => {
+            let image = getImage(props);
+
+            let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
+              props;
+
+            return (
+              <div key={idx}>
+                <TopBanner
+                  btn={short_button_text}
+                  image={image}
+                  title={short_title}
+                  desc={short_description}
+                  link_path={card_type=='BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+
+        {/* for flat banner section */}
+        <div className="w-full grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 grid items-center justify-center gap-2 md:gap-4">    
+          {/* OFFER LIST DISPLAY */}
+          {/* <>
+            {(offersList && offersList?.length > 0) &&
+              offersList.map((item, index) => {
+                let thePrice = PriceFormatter(
+                  item?.price * 0.01,
+                  item?.currency_code,
+                  item?.currency
+                );
+              
+                let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
+                if(index >= 3) {
+                    return(
+                    <div key={item.offer_uid}>
+                        <NewOfferCardFlat datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                    )
+                }
+            })}
+          </> */}
+          {getLowerBanner?.map((props, idx) => {
+            let image = getImage(props);
+
+            let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
+              props;
+
+            return (
+              <div key={idx}>
+                <LowerBanner
+                  btn={short_button_text}
+                  image={image}
+                  title={short_title}
+                  desc={short_description}
+                  link_path={link_path}
+                  card_type={card_type}
+                  blog_id={blog_id}
+                />
+              </div>
+            );
+          })}
+        </div>
      </div>
-      <div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
-        {getLowerBanner?.map((props, idx) => {
-          let image = getImage(props);

-          let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
-            props;
-
-          return (
-            <div key={idx}>
-              <LowerBanner
-                btn={short_button_text}
-                image={image}
-                title={short_title}
-                desc={short_description}
-                link_path={link_path}
-                card_type={card_type}
-                blog_id={blog_id}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+      {/* Offer Job Popout */}
+      {offerPopout.show && (
+        <OfferJobPopout
+          details={offerPopout.data}
+          onClose={() => {
+            setOfferPopout({ show: false, data: {} });
+          }}
+          situation={offerPopout.show}
+        />
+      )}
+      {/* End of Offer Job Popout */}
+    </>
  );
 };

@@ -71,25 +139,25 @@ export default AccountDashboard;

 const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
  return (
-    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]" key={key}>
-      <Link to={link_path} className="h-[12rem] rounded-t-xl">
+    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29] overflow-hidden" key={key}>
+      <Link to={link_path} className="h-[12rem] bg-white">
        <img
          src={image}
          alt="banner-img"
          loading="lazy"
-          className="w-full h-full rounded-t-xl object-cover"
+          className="w-auto mx-auto h-full"
        />
      </Link>
-      <div className="h-[7rem] rounded-b-xl bg-white dark:bg-dark-white">
+      <div className="rounded-b-xl bg-white dark:bg-dark-white">
        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
-          <Link to={link_path} className="font-bold text-lg">
+          <Link to={link_path} className="font-bold text-lg line-clamp-1">
            {title}
          </Link>
          <Link to={link_path} className="text-sm">
            {desc}
          </Link>
        </div>
-        <div className="flex justify-between w-full px-2 items-center pt-[0.2rem]">
+        <div className="flex justify-between w-full p-1 items-center">
          <Link to={link_path} className="text-slate-300 font-semibold text-sm">
            {btn}
          </Link>
@@ -104,6 +172,124 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
  );
 };

+const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) => {
+  return (
+    <div className="flex flex-col shadow-md bg-red-50 dark:bg-dark-white rounded-xl dark:border-[#5356fb29] overflow-hidden">
+      <div className="h-[12rem] bg-transparent">
+        {/* thumbnail image/video */}
+        {datas.job_type == "MEDIA" ?
+        <Suspense fallback={<p>Loading...</p>}>
+          <VideoElement videoId={datas?.media_uid} />
+        </Suspense>
+        :
+        <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+          style={{
+            // background: `url(${image}) center / contain no-repeat`,
+          }}
+        >
+          {/* <img src={image} className='' /> */}
+          <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden"
+          style={{
+            background: `url(${image}) center / contain no-repeat`,
+          }}
+        ></div>
+          {hidden && <div className="flex justify-center"></div>}
+        </div>
+        }
+      </div>
+      <div className="rounded-b-xl bg-transparent dark:bg-dark-transparent">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
+          <h1 className="font-bold text-lg line-clamp-1 text-center">
+            {datas?.title}
+          </h1>
+          <div className="card-buttons flex justify-center items-center space-x-2">
+            <button
+              type="button"
+              onClick={() =>
+                setOfferPopout({ show: true, data: { ...datas, image } })
+              }
+              className="btn-shine w-2/3 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+            >
+              Start Now
+            </button>
+          </div>
+        </div>
+        <div className="flex justify-between w-full p-1 items-center">
+          <div className="flex gap-1 items-center">
+            <p className="text-[12px] text-red-500 tracking-wide">Expires</p>
+            <p className="text-[12px] font-semibold tracking-wide text-dark-gray dark:text-white">
+              <CountDown lastDate={datas.expire} />
+            </p>
+          </div>
+          <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 NewOfferCardFlat = ({ datas, hidden = false, price, setOfferPopout, image }) => {
+  return (
+    <div className="flex flex-col shadow-md bg-red-50 dark:bg-dark-white rounded-xl dark:border-[#5356fb29] overflow-hidden">
+      <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
+        <div className="min-h-[130px] sm:min-h-[100px] flex justify-between items-center">
+          <div className="px-2 flex flex-col gap-2 dark:text-white">
+            <h1 className="font-bold text-lg line-clamp-1 text-center">
+              {datas?.title}
+            </h1>
+            <div className="card-buttons flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={() =>
+                  setOfferPopout({ show: true, data: { ...datas, image } })
+                }
+                className="btn-shine w-28 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+              >
+                Start Now
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className='w-[150px] h-[100px]'>
+          {datas.job_type == "MEDIA" ?
+          <Suspense fallback={<p>Loading...</p>}>
+            <VideoElement videoId={datas?.media_uid} />
+          </Suspense>
+          :
+          <div
+            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+            style={{
+              background: `url(${image}) center / contain no-repeat`,
+            }}
+          >
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
+          }
+        </div>
+      </div>
+      <div className="flex justify-between w-full p-1 items-center">
+        <div className="flex gap-1 items-center">
+          <p className="text-[12px] text-red-500 tracking-wide">Expires</p>
+          <p className="text-[12px] font-semibold tracking-wide text-dark-gray dark:text-white">
+            <CountDown lastDate={datas.expire} />
+          </p>
+        </div>
+        <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 LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type, blog_id, key }) => {
  const newLinkPath = card_type == 'BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path

@@ -113,7 +299,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type,
      className="flex flex-col bg-white shadow-md h-full rounded-xl dark:border-[#5356fb29] dark:bg-dark-white"
    >
      <div className="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
-        <div className="min-h-[150px] sm:min-h-[130px] flex justify-between items-center">
+        <div className="min-h-[130px] sm:min-h-[100px] flex justify-between items-center">
          <div className="px-2 flex flex-col gap-2 dark:text-white">
            <Link to={newLinkPath} className="text-lg font-bold">
              {title}
@@ -132,7 +318,7 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type,
          />
        </Link>
      </div>
-      <div className="flex justify-between w-full px-2 items-center">
+      <div className="flex justify-between w-full p-1 items-center">
        <Link to={newLinkPath} className="text-slate-300 font-semibold text-sm">
          {btn}
        </Link>
@@ -181,7 +367,7 @@ const BannerSection = ({ banners, variant }) => {
                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">
@@ -191,7 +377,7 @@ const BannerSection = ({ banners, variant }) => {
                  {short_description}
                </Link>
              </div>
-              <div className="flex justify-between w-full px-2 items-center">
+              <div className="flex justify-between w-full p-1 items-center">
                <Link to={link_path} className="text-slate-300 font-semibold">
                  {short_button_text}
                </Link>
@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function FamilyParentDashboard({
  className,
  bannerList,
-  nextDueTask,
 }) {
  const { userDetails } = useSelector((state) => state?.userDetails);

@@ -2,7 +2,7 @@ import React from "react";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";

-export default function HomeDashboard({ className, bannerList, nextDueTask }) {
+export default function HomeDashboard({ className, bannerList }) {
  const { userDetails } = useSelector((state) => state?.userDetails);

  let loginDate = userDetails?.last_login.split(" ")[0];
@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function JobOwnerDashboard({
  className,
  bannerList,
-  nextDueTask,
 }) {
  const { userDetails } = useSelector((state) => state?.userDetails);

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function WorkerDashboard({
  className,
  bannerList,
-  nextDueTask,
 }) {
  const { userDetails } = useSelector((state) => state?.userDetails);

@@ -21,14 +21,45 @@ const RelativePopout = ({

  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active

+  const [relativeSettings, setRelativeSettings] = useState({loading:true, data:[]})
+  const [reloadSettings, setReloadSettings] = useState(false)
+
+  const [relativeEditKids, setRelativeEditKids] = useState({loading:false, family_uid: ''})
+
  const apiCall = new usersService();

  let { pathname, state } = useLocation();

  const dispatch = useDispatch();

-  useEffect(()=>{
-  },[])
+  const handleUncheck = (e, family_uid) => { // FUNCTION TO EDIT RELATIVE KIDS
+    let isChecked = e.target.checked
+    const reqData = {
+      family_uid: family_uid,
+      relative_uid: relativeSelected.relative_uid,
+      add: isChecked ? '1' : '0'
+    }
+    // console.log('family_uid', isChecked)
+    setRelativeEditKids({loading:true, family_uid:family_uid})
+    apiCall.getRelativeEditKids(reqData).then(res => {
+      setReloadSettings(prev => !prev) // MAKE RELATIVE SETTINGS TO RELOAD IN ORDER TO SET RELATIVE EDIT KIDS LOADING TO FALSE
+      // setRelativeEditKids({loading:false, family_uid:''})
+    }).catch((err)=>{
+      setRelativeEditKids({loading:false, family_uid:''})
+      console.log(err)
+    })
+  }
+
+  useEffect(()=>{ // FUNCTION TO GET RELATIVE KIDS SETTINGS
+    apiCall.getRelativeSettings({relative_uid: relativeSelected.relative_uid}).then(res => {
+      setRelativeSettings({loading:false, data:res?.data?.kids_list || []})
+    }).catch((err)=>{
+      setRelativeSettings({loading:false, data:[]})
+      console.log(err)
+    }).finally(()=>{ // SET RELATIVE EDIT KIDS TO FALSE
+      setRelativeEditKids({loading:false, family_uid:''})
+    })
+  },[reloadSettings])

  return (
    <>
@@ -65,17 +96,27 @@ const RelativePopout = ({
            </button>
          </div>
          <div className="modal-body-wrapper">
-            <div className="w-full grid grid-cols-2 gap-2 space-x-2">
+            <div className="h-full w-full grid grid-cols-2 gap-2 space-x-2">
              <div className='col-span-2 md:col-span-1 overflow-y-auto h-[350px]'>
-                {familyList.loader ? 
-                <LoadingSpinner size='10' color='bg-sky-500' height='min-h-40' />
+                {familyList.loader || relativeSettings.loading ? 
+                <LoadingSpinner size='10' color='bg-sky-500' height='min-h-[300px]' />
                : (!familyList.loader && familyList?.familyList?.result_list?.length > 0) ?
                    familyList?.familyList?.result_list?.map(item => {
+                        const isChecked = relativeSettings?.data?.filter(value => value?.family_uid == item?.family_uid)
                        const image = localStorage.getItem("session_token") ? `${familyList?.imageServer}${localStorage.getItem("session_token")}/family/${item?.family_uid}` : "";
                        return (
                        <div key={item.family_uid || index} className="flex items-center border-b dark:border-[#5356fb29] hover:bg-gray-50">
                            <div className='p-2 flex justify-center items-center'>
-                                <input type="checkbox" className='w-4 h-4 border-2 border-blue-500 rounded-sm bg-white cursor-pointer' />
+                              {relativeEditKids.loading && relativeEditKids.family_uid == item.family_uid?
+                                <LoadingSpinner size='4' color='bg-sky-500' />
+                              :
+                                <input 
+                                  checked={isChecked?.length > 0}
+                                  type="checkbox" 
+                                  className='w-4 h-4 border-2 border-blue-500 rounded-sm bg-white cursor-pointer' 
+                                  onChange={(e) => handleUncheck(e, item.family_uid)}
+                                />
+                              }
                            </div>
                            <div className='p-2'>
                                <div className="flex space-x-2 items-center w-full">
@@ -0,0 +1,173 @@
+import React, { Suspense, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useOutletContext } from "react-router-dom";
+import usersService from "../../../../services/UsersService";
+import ModalCom from '../../../Helpers/ModalCom';
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import localImgLoad from '../../../../lib/localImgLoad'
+
+// import { tableReload } from "../../../store/TableReloads";
+// import { PriceFormatter } from "../../Helpers/PriceFormatter";
+
+
+const RelativeReminderPopout = ({
+    relativeSelected,
+    action,
+    situation,
+    familyList
+}) => {
+
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+  const [relativeReminder, setRelativeReminder] = useState({loading:false, status:false, msg:''})
+
+  const apiCall = new usersService();
+
+  let { pathname, state } = useLocation();
+
+  const dispatch = useDispatch();
+
+  const cancelInvite = (family_uid) => { // FUNCTION TO EDIT RELATIVE KIDS
+    const reqData = {
+        relative_uid: relativeSelected.relative_uid,
+        reminder: 'PENDING_ACCOUNT'
+    }
+  }
+
+  const sendRelativeReminder = ()=>{ // FUNCTION TO SEND REMINDER
+    setRelativeReminder({loading:true, status:false, msg:''})
+    const reqData = {
+        relative_uid: relativeSelected.relative_uid,
+        reminder: 'PENDING_ACCOUNT'
+    }
+    apiCall.sendRelativeReminder(reqData).then(res => {
+        if(res?.data?.internal_return < 0){
+            setRelativeReminder({loading:false, status:false, msg:'failed to send'})
+            return
+        }
+        setRelativeReminder({loading:false, status:true, msg:'Reminder Sent'})
+        setTimeout(()=>{
+            action() // CLOSE MODAL
+        }, 3000)
+    }).catch((err)=>{
+        setRelativeReminder({loading:false, status:false, msg:'Network error'})
+        console.log(err)
+    }).finally(()=>{
+        setTimeout(()=>{
+            setRelativeReminder({loading:false, status:false, msg:''})
+        }, 3000)
+    })
+  }
+
+  return (
+    <>
+      <ModalCom action={action} situation={situation}>
+        <div className="modal-container">
+          <div className="modal-header-con">
+            <h1 className="modal-title">
+                {relativeSelected.firstname && relativeSelected.firstname} {relativeSelected.lastname && relativeSelected.lastname}
+            </h1>
+            <button
+              type="button"
+              className="modal-close-btn"
+              onClick={action}
+            >
+              <svg
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                fill="none"
+                className="fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                  fill=""
+                  fillOpacity="0.6"
+                />
+                <path
+                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                  fill="#"
+                  fillOpacity="0.6"
+                />
+              </svg>
+            </button>
+          </div>
+          <div className="modal-body-wrapper">
+            <div className="h-full w-full grid grid-cols-4 gap-2 space-x-4">
+              <div className='col-span-4 md:col-span-3 overflow-y-auto h-full md:border-r-2'>
+                <div className='p-2 w-full md:max-w-xl flex flex-col gap-4 justify-center items-center rounded-2xl'>    
+                    <div className='py-2 w-full flex items-center gap-1'>
+                        <h1 className="min-w-[120px] text-xl text-right font-extrabold text-black dark:text-white tracking-wide">First name :</h1>
+                        {/* <p className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{'Dummy'}</p> */}
+                    </div>
+                    <div className='py-2 w-full flex items-center gap-1'>
+                        <h1 className="min-w-[120px] text-xl text-right font-extrabold text-black dark:text-white tracking-wide">Last name :</h1>
+                        {/* <p className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{'Dummy'}</p> */}
+                    </div>
+                    <div className='py-2 w-full flex items-center gap-1'>
+                        <h1 className="min-w-[120px] text-xl text-right font-extrabold text-black dark:text-white tracking-wide">Email :</h1>
+                        {/* <p className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{'Dummy'}</p> */}
+                    </div>
+                    <div className='py-2 w-full flex items-center gap-1'>
+                        <h1 className="min-w-[120px] text-xl text-right font-extrabold text-black dark:text-white tracking-wide">Family Type :</h1>
+                        {/* <p className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{'Dummy'}</p> */}
+                    </div>
+                </div>
+              </div>
+              <div className='col-span-4 md:col-span-1 min-h-[100px] flex md:flex-col justify-between items-center'>
+                <>
+                    {relativeReminder.loading ?
+                    <LoadingSpinner size='10' color='bg-sky-500' />
+                    :
+                    <button
+                        className={`p-4 w-200px md:w-full bg-emerald-700 text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl ${relativeReminder.status && 'opacity-50'}`}
+                        name='sendreminder'
+                        onClick={sendRelativeReminder}
+                        disabled={relativeReminder.status || relativeReminder.loading}
+                    >
+                        {/* {relativeReminder.msg ? relativeReminder.msg : <>Send <br />Reminder</>} */}
+                        Send <br />Reminder
+                    </button>
+                    }
+                </>
+                <>
+                    {relativeReminder.msg &&
+                        <p className={`hidden md:flex w-full break-words text-center ${relativeReminder.status ? 'text-emerald-500' : 'text-red-500'}`}>{relativeReminder.msg}</p>
+                    }
+                </>
+                <>
+                    {/* <LoadingSpinner size='10' color='bg-sky-500' /> */}
+                    <button
+                        className='p-4 w-200px md:w-full bg-orange-500 text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl'
+                        name='cancelreminder'
+                        onClick={cancelInvite}
+                    >
+                        Cancel <br />Invitation
+                    </button>
+                </>
+              </div>
+            </div>
+            <>
+                {relativeReminder.msg &&
+                    <p className={`md:hidden w-full break-words text-center ${relativeReminder.status ? 'text-emerald-500' : 'text-red-500'}`}>{relativeReminder.msg}</p>
+                }
+            </>
+          </div>
+          <div className="modal-footer-wrapper justify-end">
+            <button
+                onClick={action}
+                className="custom-btn border-gradient"
+            >
+                <span className='text-gradient'>Close</span>
+            </button>
+        </div>
+        </div>
+      </ModalCom>
+    </>
+  );
+};
+
+export default RelativeReminderPopout;
@@ -3,6 +3,7 @@ import { handlePagingFunc } from '../../../Pagination/HandlePagination';
 import PaginatedList  from '../../../Pagination/PaginatedList';

 import RelativePopout from './RelativePopout';
+import RelativeReminderPopout from './RelativeReminderPopout';

 export default function RelativeTable({relativeList, familyList}) {
  
@@ -15,9 +16,15 @@ export default function RelativeTable({relativeList, familyList}) {

    const [relativePopout, setRelativePopout] = useState({show:false, data:null})

+    const [reminderPopout, setReminderPopout] = useState({show:false, data:null})
+
    const closePopout = () => {
      setRelativePopout({show:false, data:null})
    }
+
+    const closeReminderPopout = () => {
+      setReminderPopout({show:false, data:null})
+    }
  
    const handlePagination = (e) => {
      handlePagingFunc(e, setCurrentPage);
@@ -32,6 +39,7 @@ export default function RelativeTable({relativeList, familyList}) {
                  <tr>
                    <th className='py-4 px-2'></th>
                    <th className='py-4 px-2'></th>
+                    <th className='py-4 px-2 text-center'>Status</th>
                    <th className='py-4 px-2 text-center'>Kids</th>
                    <th className='py-4 px-2'></th>
                  </tr>
@@ -55,9 +63,24 @@ export default function RelativeTable({relativeList, familyList}) {
                            {/* <span>Family Type</span> */}
                            <span>{value.family_type && value.family_type.toUpperCase()}</span>
                          </td>
+                          {value.status_action ?
+                          <td className='py-4 px-2 text-center'>
+                            <button
+                              type='button'
+                              className='p-1 cursor-pointer text-center bg-sky-50'
+                              onClick={() => setReminderPopout({show:true, data:{relativeSelected:value}})}
+                            >
+                              {value.status && value.status}
+                            </button>
+                          </td>
+                            :
                          <td className='py-4 px-2 text-center'>
                            {value.status && value.status}
                          </td>
+                          }
+                          <td className='py-4 px-2 text-center'>
+                            {value.kid_count && value.kid_count}
+                          </td>
                          <td className='py-4 px-2 flex items-center justify-end'>
                            <button
                              onClick={() => setRelativePopout({show:true, data:{relativeSelected:value}})}
@@ -116,6 +139,16 @@ export default function RelativeTable({relativeList, familyList}) {
            familyList={familyList}
          />
        }
+
+        {reminderPopout.show &&
+          <RelativeReminderPopout
+            situation={reminderPopout.show}
+            action={closeReminderPopout}
+            relativeSelected={reminderPopout.data.relativeSelected}
+            familyList={familyList}
+          />
+        }
+
      </>
      );
    };
@@ -20,6 +20,9 @@ export default function FamilyTableNew() {

  let { pathname } = useLocation();

+  const queryParams = new URLSearchParams(location?.search);
+  const preSelectedTab = queryParams.get("tab");
+
  // Initial state for family details
  const initialDetailState = {
    loading: false,
@@ -65,35 +68,43 @@ export default function FamilyTableNew() {

  // Function to handle tab changes
  const tabHandler = (value) => {
-    setTab(value);
+    setTab(value.toLowerCase());
  };

  // Object that maps tab names to their corresponding components
  const tabComponents = {
-    Tasks: (
+    tasks: (
      <FamilyTasks
        familyData={familyTasks}
        action={familyAssignPopUpHandler}
      />
    ),
-    Waiting: (
+    waiting: (
      <FamilyWaitlist
        familyData={familyWaitList}
        setUpdatePage={setUpdatePage}
      />
    ),
-    Pending: (
+    pending: (
      <FamilyPending
        familyData={familyPending}
      />
    ),
  };

-  const defaultTabComponent = tabComponents.Tasks;
+  const defaultTabComponent = tabComponents.tasks;

  // Selected tab component based on the current 'tab'
  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

+  useEffect(()=>{ // EFFECT TO CHECK FOR PRE SELECTED TAB AND DEFAULT TO IT OR TO DEFAULT IF NOT AVALIABLE
+    if(preSelectedTab && tabs.map(item => item.name.toLowerCase()).includes(preSelectedTab.toLowerCase())){
+      setTab(preSelectedTab)
+    }else{
+      setTab(tabs[0].name)
+    }
+  },[])
+

  // Effect to manage active family task details
  useEffect(() => {
@@ -189,7 +200,7 @@ export default function FamilyTableNew() {
        <Suspense
          fallback={
            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
-              <LoadingSpinner size="16" color="sky-blue" />
+              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
            </div>
          }
        >
@@ -202,7 +213,7 @@ export default function FamilyTableNew() {
                      <li
                        onClick={() => tabHandler(name)}
                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                          tab === name
+                          tab.toLowerCase() === name.toLowerCase()
                            ? "text-purple border-r"
                            : "text-thin-light-gray"
                        }`}
@@ -224,7 +235,7 @@ export default function FamilyTableNew() {
                <div className="flex-[0.9] h-full">
                  <div className="h-full relative overflow-y-auto">
                    <Suspense
-                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                      fallback={<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />}
                    >
                      {selectedTabComponent}
                    </Suspense>
@@ -74,7 +74,7 @@ export default function FamilyPending({ familyData }) {
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -97,7 +97,7 @@ export default function FamilyNewTasks({
                                    </h1>
                                    <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
-                                        Price:{" "}
+                                      Reward:{" "}
                                        <span className="text-purple">
                                          {thePrice}
                                        </span>
@@ -83,7 +83,7 @@ export default function FamilyPending({
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -87,7 +87,7 @@ export default function FamilyTasks({
                                    </h1>
                                    <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                      <span className="text-sm text-thin-light-gray flex flex-start gap-1">
-                                        Price:{" "}
+                                      Reward:{" "}
                                        <span className="text-purple">
                                          {thePrice}
                                        </span>
@@ -1,17 +1,16 @@
-import React, { useEffect, useState } from "react";
-import ModalCom from "../../../Helpers/ModalCom";
-import InputCom from "../../../Helpers/Inputs/InputCom";
 import { Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
 import * as Yup from "yup";
+import InputCom from "../../../Helpers/Inputs/InputCom";
+import ModalCom from "../../../Helpers/ModalCom";

-import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
-import usersService from "../../../../services/UsersService";
-import LoadingSpinner from "../../../Spinners/LoadingSpinner";
-import { PriceFormatter } from "../../../Helpers/PriceFormatter";
-import { tableReload } from "../../../../store/TableReloads";
 import { useDispatch, useSelector } from "react-redux";
 import { apiConst } from "../../../../lib/apiConst";
+import usersService from "../../../../services/UsersService";
+import { tableReload } from "../../../../store/TableReloads";
 import { SocketValues } from "../../../Contexts/SocketIOContext";
+import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";

 const validationSchema = Yup.object().shape({
  // amount: Yup.string()
@@ -31,10 +30,9 @@ const validationSchema = Yup.object().shape({
 });

 function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
+  const { userDetails } = useSelector((state) => state?.userDetails); // Gets User Detail

-  const {userDetails} = useSelector((state) => state?.userDetails); // Gets User Detail
-
-  const { parentAssignJobToKid } = SocketValues() // socket emit event from FULL account
+  const { parentAssignJobToKid } = SocketValues(); // socket emit event from FULL account

  const dispatch = useDispatch();

@@ -60,7 +58,6 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
  };
  // FUNCTION TO PERFORM FAMILY TRANSFER
  const handleAddFund = (values) => {
-
    setRequestStatus({ loading: true, status: false, message: "" });

    let senderBal = startTransfer?.data?.origing_current_balance || ""; // SENDER'S ACCOUNT BALANCE
@@ -143,12 +140,12 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
        //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
        // message, room
        let socketMsg = {
-          "audience": "MEMBER",
-          "action": "REFRESH_WALLET",
-          "family_uid": reqData.family_uid,
-        }
-        let socketRoom = `FAMILY-${userDetails.uid}`
-        parentAssignJobToKid(socketMsg, socketRoom) //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+          audience: "MEMBER",
+          action: "REFRESH_WALLET",
+          family_uid: reqData.family_uid,
+        };
+        let socketRoom = `FAMILY-${userDetails.uid}`;
+        parentAssignJobToKid(socketMsg, socketRoom); //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT

        setTimeout(() => {
          setRequestStatus({ loading: false, status: false, message: "" });
@@ -189,14 +186,8 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
    <ModalCom action={action} situation={situation}>
      <div className="relative logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
        <div className="modal-header-con">
-          <h1 className="modal-title">
-            Add Fund
-          </h1>
-          <button
-            type="button"
-            className="modal-close-btn"
-            onClick={action}
-          >
+          <h1 className="modal-title">Add Fund</h1>
+          <button type="button" className="modal-close-btn" onClick={action}>
            <svg
              width="36"
              height="36"
@@ -94,7 +94,7 @@ export default function InputCom({
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
            inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
          type={type}
          id={name}
@@ -75,4 +75,23 @@ export const AmountTo2DP = (

  // return formattedNumber;
  return formattedNumber;
+};
+
+
+
+// FUNCTION TO RETURN CURRENCY SYMBOL
+export const currencySymbol = (
+  currencyName = "naira",
+  amount = "00",
+) => {
+  // Cureency Array
+  let currencyArray = [
+    {currencyName:'naira', symbol:'₦'},
+    {currencyName:'usd', symbol:'$'},
+  ]
+
+  const matchedCurrency = currencyArray.filter(item => item.currencyName.toLocaleLowerCase() == currencyName.toLocaleLowerCase())
+  const amountTo2DP = AmountTo2DP(amount)
+  // return formattedNumber;
+  return  matchedCurrency.length ? <><span>{matchedCurrency[0].symbol}</span><span>{amountTo2DP}</span></> : <><span>$</span><span>{amountTo2DP}</span></>;
 };
@@ -7,7 +7,8 @@ import PaginatedList from '../../components/Pagination/PaginatedList';

 import LoadingSpinner from '../Spinners/LoadingSpinner';

-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';
+import {NewDateTimeFormatter} from '../../lib/NewDateTimeFormatter'

 function JobsCompleted() {

@@ -40,9 +41,6 @@ function JobsCompleted() {
        }).catch((error)=>{
            setJobHistory(prev => ({...prev, loading: false, error: true}))
        })
-        setTimeout(()=>{
-            setJobHistory(prev => ({...prev, loading: false, error:true}))
-        },3000)
    }

    useEffect(()=>{
@@ -50,8 +48,8 @@ function JobsCompleted() {
      }, [])

  return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
-    {jobHistory.loading ? 
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
+    {jobHistory?.loading ? 
    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
    : jobHistory?.data?.length ?
    <table className="wallet-activity w-full table-auto border-collapse text-left">
@@ -64,7 +62,7 @@ function JobsCompleted() {
            </tr>
        </thead>
        <tbody>
-            {currentReward.map((item, index) => {
+            {currentReward?.map((item, index) => {
                let date = new Date(item?.delivery_date).toLocaleDateString()
                return (
                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
@@ -74,19 +72,18 @@ function JobsCompleted() {
                                <div className='flex flex-col'>
                                    <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
                                    <p className='text-sm line-clamp-2'>{item?.description}</p>
+                                    <p className='text-sm line-clamp-2'>{NewDateTimeFormatter(item?.delivery_date)}</p>
                                </div>
                            </div>
                        </td>
-                        <td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
-                        {/* <td className="p-4">{date}</td>
-                        <td className="p-4">{item?.contract}</td> */}
+                        <td className="p-4 flex text-right justify-end items-center">{currencySymbol(item?.currency_code, item?.price*0.01)}</td>
                    </tr>
                )
            }
            )}
        </tbody>
    </table>
-    :jobHistory.error ?
+    :jobHistory?.error ?
    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
        <span>Opps! an error occurred. Please try again!</span>
    </div>
@@ -97,7 +94,7 @@ function JobsCompleted() {
    }

    {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
    {/* END OF PAGINATION BUTTON */}
    </div>
  )
@@ -7,7 +7,7 @@ import PaginatedList from '../../components/Pagination/PaginatedList';

 import LoadingSpinner from '../Spinners/LoadingSpinner';

-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';


 export const RewardsTable = memo(() => {
@@ -47,7 +47,7 @@ export const RewardsTable = memo(() => {
      }, [])

  return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px] w-full overflow-x-auto'>
    {familyRewardHistory.loading ? 
    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
    : familyRewardHistory.data.length ?
@@ -55,9 +55,9 @@ export const RewardsTable = memo(() => {
        <thead className='w-full'>
            <tr className='text-slate-600 dark:text-white'>
            <th className="p-4"></th>
-            <th className="p-4 text-right">Amount</th>
-            <th className="p-4">Date</th>
-            <th className="p-4">Confirmation</th>
+            <th className="p-4 text-center">Amount</th>
+            <th className="p-4 text-center">Date</th>
+            <th className="p-4 text-center">Confirmation</th>
            </tr>
        </thead>
        <tbody>
@@ -65,18 +65,18 @@ export const RewardsTable = memo(() => {
                let date = new Date(item.added).toLocaleDateString()
                return (
                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
-                        <td className="p-4">
-                            <div className='flex items-center gap-2'>
+                        <td className="p-4 min-w-[300px]">
+                            <div className='flex w-full items-center gap-2'>
                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
-                                <div className='flex flex-col'>
+                                <div className='flex flex-col w-full'>
                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
                                    <p className='text-sm'>{item.description}</p>
                                </div>
                            </div>
                        </td>
-                        <td className="p-4 text-right">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-4">{date}</td>
-                        <td className="p-4">{item.confirmation}</td>
+                        <td className="p-4 text-right flex-nowrap">{currencySymbol(item.currency, item.amount*0.01)}</td>
+                        <td className="p-4 text-center">{date}</td>
+                        <td className="p-4 text-center">{item.confirmation}</td>
                    </tr>
                )
            }
@@ -94,7 +94,7 @@ export const RewardsTable = memo(() => {
    }

    {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
    {/* END OF PAGINATION BUTTON */}
    </div>
  )
@@ -19,9 +19,32 @@ export default function History() {

    const apiCall = new usersService()

-    let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
    const [selectedTab, setSelectedTab] = useState("purchases");
-    const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+    // let [tab, setTab] = useState("purchases"); //STATE FOR SWITCHING BETWEEN TABS
+    // const tabs = ["purchases", "recent activity", "rewards", 'jobs completed'] //STATE FOR SWITCHING BETWEEN TABS
+
+    const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+        {
+            id: 1,
+            title: "purchases",
+            iconName: "history",
+          },
+          {
+            id: 2,
+            title: "recent activity",
+            iconName: "history",
+          },
+          {
+            id: 3,
+            title: "rewards",
+            iconName: "history",
+          },
+          {
+            id: 4,
+            title: "jobs completed",
+            iconName: "history",
+          },
+    ]

    let [paymentHistory, setPaymentHistory] = useState({ // FOR PAYMENT HISTORY
        loading: true,
@@ -74,255 +97,84 @@ export default function History() {
    <>
      <Layout>
        <div className="history-wrapper w-full mb-10">
-          <div className="w-full">
-              <div className="sm:flex justify-between items-center mb-6">
-                  <div className="mb-5 sm:mb-0">
-                      <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+            <div className="w-full">
+                <div className="sm:flex justify-between items-center mb-6">
+                    <div className="mb-5 sm:mb-0">
+                        <h1 className="text-26 font-bold   text-dark-gray dark:text-white">

-                  History
+                    History

-                      </h1>
-                  </div>
-                  <div className="slider-btns flex space-x-4">
+                        </h1>
+                    </div>
+                    <div className="slider-btns flex space-x-4">

-                  </div>
-              </div>
-            {/*<div className="quick-counters-widget w-full mb-11">*/}
-            {/*  <div className="grid xl:grid-cols-4 lg:grid-cols-2 grid-cols-1 gap-[30px]">*/}
-            {/*    <HistoryAnalyticsCard*/}
-            {/*      title="Total Sells"*/}
-            {/*      numberOfCount={71}*/}
-            {/*      numberOfAnalyse={324.75}*/}
-            {/*      primaryColor="#5356FB"*/}
-            {/*      iconBg="rgba(83, 86, 251, 0.16)"*/}
-            {/*    >*/}
-            {/*      <svg*/}
-            {/*        width="38"*/}
-            {/*        height="31"*/}
-            {/*        viewBox="0 0 38 31"*/}
-            {/*        fill="none"*/}
-            {/*        xmlns="http://www.w3.org/2000/svg"*/}
-            {/*      >*/}
-            {/*        <path*/}
-            {/*          d="M33.0451 12.6481C32.5478 14.368 32.1426 16.0074 31.5716 17.5846C31.4311 17.9737 30.7496 18.4066 30.3121 18.4112C25.1937 18.471 20.0754 18.4503 14.957 18.4526C14.1995 18.4526 13.716 18.0796 13.5433 17.3543C12.7328 13.9651 11.9154 10.5759 11.1418 7.17975C10.907 6.15285 11.3744 5.51968 12.3644 5.51277C16.5365 5.48514 20.7085 5.50125 24.9842 5.50125C24.9336 7.71622 25.5368 9.6526 27.2153 11.1285C28.857 12.579 30.7979 13.0142 33.0451 12.6481Z"*/}
-            {/*          fill="#5356FB"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M12.4851 19.636C15.9295 19.636 19.3142 19.636 22.6988 19.636C24.9138 19.636 27.1287 19.6314 29.3437 19.6383C30.3752 19.6406 30.96 20.1034 30.9877 20.9024C31.0153 21.7428 30.412 22.2539 29.3391 22.2539C23.4747 22.2585 17.6126 22.2585 11.7483 22.2539C10.5602 22.2539 10.2309 21.9638 9.97077 20.7642C8.85637 15.6113 7.73277 10.4607 6.6391 5.30318C6.51016 4.69763 6.27301 4.35686 5.64904 4.16576C4.21921 3.72829 2.81701 3.19872 1.4056 2.70139C0.219833 2.28234 -0.219938 1.64226 0.102407 0.820278C0.420147 0.00750794 1.10858 -0.199714 2.23449 0.191705C3.98666 0.799556 5.72272 1.45345 7.49332 2.00605C8.38667 2.28464 8.81263 2.78888 9.00143 3.69145C10.0813 8.81904 11.2026 13.9374 12.3147 19.0581C12.3492 19.2101 12.4045 19.362 12.4851 19.636Z"*/}
-            {/*          fill="#5356FB"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M25.8048 6.28397C25.7886 3.08815 28.3789 0.490967 31.5747 0.50248C34.7061 0.511689 37.2848 3.11347 37.2802 6.26094C37.2756 9.3992 34.6877 11.9941 31.5494 12.001C28.4112 12.0079 25.8209 9.43144 25.8048 6.28397ZM33.99 3.73514C32.9516 4.84723 31.9339 5.9386 30.7251 7.23489C30.1472 6.44974 29.6798 5.81887 29.1456 5.0959C28.6092 5.6577 28.2546 6.02839 28.0243 6.27245C29.0052 7.28554 29.9423 8.25027 30.808 9.14593C32.2125 7.73682 33.6585 6.28857 35.2264 4.71599C34.9709 4.51337 34.6646 4.26931 34.3561 4.02525C34.2594 3.94466 34.1627 3.86868 33.99 3.73514Z"*/}
-            {/*          fill="#5356FB"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M27.9144 23.32C29.9474 23.3016 31.6052 24.8995 31.6443 26.9164C31.6835 28.9679 30.0165 30.651 27.9489 30.651C25.9296 30.651 24.2788 29.0094 24.2696 26.9993C24.2626 24.9801 25.8859 23.3384 27.9144 23.32ZM29.5767 26.974C29.5744 26.0829 28.8745 25.36 27.9949 25.3415C27.0832 25.3208 26.3233 26.0737 26.328 26.9924C26.3326 27.8743 27.044 28.6064 27.9144 28.6295C28.8261 28.6525 29.579 27.8996 29.5767 26.974Z"*/}
-            {/*          fill="#5356FB"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M13.0216 30.6485C10.9908 30.6324 9.36064 29 9.36524 26.9853C9.37215 24.9062 11.0184 23.2922 13.1091 23.3152C15.126 23.3382 16.7446 25.0006 16.7216 27.0245C16.6963 29.0506 15.05 30.6647 13.0216 30.6485ZM14.6724 26.9899C14.6747 26.0643 13.9195 25.3206 13.0008 25.3437C12.1351 25.3667 11.396 26.115 11.396 26.9761C11.3937 27.8395 12.1259 28.597 12.987 28.627C13.8988 28.6569 14.6701 27.9086 14.6724 26.9899Z"*/}
-            {/*          fill="#5356FB"*/}
-            {/*        />*/}
-            {/*      </svg>*/}
-            {/*    </HistoryAnalyticsCard>*/}
-            {/*    <HistoryAnalyticsCard*/}
-            {/*      title="Active Customer"*/}
-            {/*      numberOfCount="7583k+"*/}
-            {/*      numberOfAnalyse={324.75}*/}
-            {/*      primaryColor="#F539F8"*/}
-            {/*      iconBg="#FEEBFE"*/}
-            {/*    >*/}
-            {/*      <svg*/}
-            {/*        width="28"*/}
-            {/*        height="30"*/}
-            {/*        viewBox="0 0 28 30"*/}
-            {/*        fill="none"*/}
-            {/*        xmlns="http://www.w3.org/2000/svg"*/}
-            {/*      >*/}
-            {/*        <path*/}
-            {/*          d="M13.8146 13.1935C13.3126 13.0277 12.8406 12.9333 12.4216 12.7261C8.70772 10.891 5.00536 9.03523 1.29839 7.18865C1.0267 7.05281 0.817179 6.87782 0.812574 6.55317C0.80797 6.21471 1.01749 6.02591 1.303 5.88315C4.98464 4.04809 8.66628 2.20842 12.3456 0.368751C13.4048 -0.160815 14.4478 -0.100951 15.4931 0.426313C17.8577 1.61669 20.2316 2.79555 22.6008 3.97901C23.8096 4.58226 25.0161 5.18781 26.2226 5.79336C26.2916 5.82789 26.3607 5.86013 26.4321 5.89467C26.7084 6.0236 26.8995 6.22392 26.8995 6.54396C26.8995 6.86861 26.6946 7.0505 26.4229 7.18405C24.7075 8.03826 22.9945 8.89708 21.2792 9.75129C19.2991 10.7391 17.3282 11.7406 15.3365 12.7031C14.8622 12.931 14.3234 13.0323 13.8146 13.1935Z"*/}
-            {/*          fill="#F539F8"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M12.8602 22.8893C12.8602 24.9477 12.8625 27.0061 12.8579 29.0645C12.8556 29.7966 12.4434 30.0545 11.7688 29.7437C8.39339 28.1895 5.01567 26.64 1.64717 25.0743C0.562705 24.5701 0.0101156 23.6882 0.00551066 22.4955C-0.0036992 18.5721 0.000903485 14.6487 0.00320595 10.7253C0.00320595 9.96783 0.429164 9.68692 1.10609 10.0001C4.59662 11.6095 8.08485 13.2281 11.5777 14.8306C12.4641 15.2382 12.874 15.9013 12.8671 16.8706C12.8533 18.8784 12.8625 20.8838 12.8625 22.8916C12.8625 22.8893 12.8602 22.8893 12.8602 22.8893Z"*/}
-            {/*          fill="#F539F8"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M14.848 22.8313C14.848 20.8121 14.8526 18.7928 14.8457 16.7736C14.8434 15.8618 15.2602 15.2332 16.0775 14.8556C19.5911 13.2347 23.107 11.6183 26.6205 9.99971C27.2606 9.705 27.7004 9.96978 27.7004 10.6674C27.705 14.63 27.7119 18.5902 27.6958 22.5527C27.6912 23.7661 27.0695 24.6135 25.9758 25.12C23.2451 26.3817 20.5121 27.6412 17.7814 28.9006C17.1965 29.17 16.614 29.4394 16.0315 29.7088C15.2394 30.0726 14.8457 29.8262 14.8457 28.9651C14.8457 26.9205 14.8457 24.8736 14.8457 22.829C14.8457 22.8313 14.8457 22.8313 14.848 22.8313Z"*/}
-            {/*          fill="#F539F8"*/}
-            {/*        />*/}
-            {/*      </svg>*/}
-            {/*    </HistoryAnalyticsCard>*/}
-            {/*    <HistoryAnalyticsCard*/}
-            {/*      title="Total Prodcuts"*/}
-            {/*      numberOfCount="6753"*/}
-            {/*      numberOfAnalyse={324.75}*/}
-            {/*      primaryColor="#27AE60"*/}
-            {/*      iconBg="#E9F7EF"*/}
-            {/*    >*/}
-            {/*      <svg*/}
-            {/*        width="31"*/}
-            {/*        height="31"*/}
-            {/*        viewBox="0 0 31 31"*/}
-            {/*        fill="none"*/}
-            {/*        xmlns="http://www.w3.org/2000/svg"*/}
-            {/*      >*/}
-            {/*        <path*/}
-            {/*          d="M15.0808 30.1824C10.7113 30.1824 6.3438 30.1824 1.97428 30.1824C0.641347 30.1824 -0.102099 29.364 0.0113425 28.0453C0.163273 26.3032 0.380025 24.5752 0.807456 22.8736C1.18424 21.3725 1.99859 20.3536 3.48345 19.7783C5.65302 18.9355 7.84892 18.182 10.0772 17.5155C10.1805 17.4851 10.3446 17.5358 10.4398 17.6046C11.9105 18.6702 13.3772 19.7398 14.8377 20.8195C15.018 20.9532 15.1355 20.9572 15.3178 20.8215C16.7784 19.7418 18.245 18.6722 19.7157 17.6067C19.8109 17.5378 19.973 17.4831 20.0763 17.5135C22.3694 18.2002 24.6382 18.9558 26.8584 19.8633C28.1306 20.384 28.8862 21.2591 29.2549 22.5596C29.7208 24.2025 29.9477 25.8798 30.1016 27.5733C30.1239 27.8265 30.1523 28.0818 30.1584 28.337C30.1867 29.364 29.421 30.1683 28.3919 30.1804C27.4094 30.1926 26.429 30.1824 25.4465 30.1824C21.9926 30.1824 18.5367 30.1824 15.0808 30.1824Z"*/}
-            {/*          fill="#27AE60"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M8.44531 7.35622C8.58509 4.27912 9.72152 2.01232 12.3205 0.671285C15.3146 -0.872326 18.969 0.337039 20.6929 3.36754C21.7443 5.21501 21.8962 7.17795 21.4323 9.21382C21.0008 11.1059 20.2108 12.8338 18.967 14.3389C18.3735 15.056 17.6908 15.6739 16.846 16.0811C15.2498 16.8488 13.7629 16.5774 12.4137 15.5118C10.4366 13.952 9.39133 11.8108 8.78563 9.43057C8.59724 8.6851 8.53444 7.90722 8.44531 7.35622Z"*/}
-            {/*          fill="#27AE60"*/}
-            {/*        />*/}
-            {/*      </svg>*/}
-            {/*    </HistoryAnalyticsCard>*/}
-            {/*    <HistoryAnalyticsCard*/}
-            {/*      title="Close Offer"*/}
-            {/*      numberOfCount="745"*/}
-            {/*      numberOfAnalyse={-324.75}*/}
-            {/*      primaryColor="#EB5757"*/}
-            {/*      iconBg="#FDEEEE"*/}
-            {/*    >*/}
-            {/*      <svg*/}
-            {/*        width="70"*/}
-            {/*        height="70"*/}
-            {/*        viewBox="0 0 70 70"*/}
-            {/*        fill="none"*/}
-            {/*        xmlns="http://www.w3.org/2000/svg"*/}
-            {/*      >*/}
-            {/*        <circle*/}
-            {/*          opacity="0.1"*/}
-            {/*          cx="35"*/}
-            {/*          cy="35"*/}
-            {/*          r="35"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M20.8416 32.9067C24.7077 32.9067 28.5465 32.9067 32.4127 32.9067C32.4127 38.4719 32.4127 44.0165 32.4127 49.616C32.2848 49.616 32.1637 49.616 32.0427 49.616C28.8753 49.616 25.7079 49.6183 22.5406 49.616C21.5084 49.616 20.8233 48.94 20.8233 47.9124C20.821 43.03 20.8233 38.1454 20.8233 33.263C20.8256 33.1465 20.8347 33.0346 20.8416 32.9067Z"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M36.8789 49.6137C36.8789 44.0143 36.8789 38.4696 36.8789 32.9067C40.7154 32.9067 44.529 32.9067 48.3906 32.9067C48.3906 33.062 48.3906 33.1968 48.3906 33.3315C48.3906 38.1796 48.3906 43.0277 48.3906 47.8736C48.3906 48.9377 47.7307 49.6137 46.6802 49.6137C43.5243 49.616 40.3706 49.6137 37.2146 49.6137C37.1118 49.6137 37.0091 49.6137 36.8789 49.6137Z"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M19.002 31.2053C19.002 30.6595 19.002 30.1434 19.002 29.6273C19.002 28.4193 18.9975 27.2089 19.002 26.0009C19.0043 25.0692 19.6734 24.359 20.5983 24.3567C24.4781 24.3453 28.358 24.3521 32.2379 24.3521C32.2836 24.3521 32.3292 24.3613 32.4046 24.3704C32.4046 26.6426 32.4046 28.9125 32.4046 31.2053C27.9515 31.2053 23.503 31.2053 19.002 31.2053Z"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M36.875 31.217C36.875 28.9197 36.875 26.6658 36.875 24.373C37.0052 24.3662 37.1262 24.3502 37.2449 24.3502C40.9878 24.3502 44.7306 24.3479 48.4735 24.3525C49.5719 24.3547 50.2228 25.0307 50.2182 26.1337C50.2136 27.6888 50.2182 29.244 50.2159 30.7968C50.2159 30.9316 50.2159 31.0663 50.2159 31.217C45.7491 31.217 41.3303 31.217 36.875 31.217Z"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*        <path*/}
-            {/*          d="M34.6091 21.749C35.8994 19.6001 37.6441 17.9947 39.6651 16.6565C40.8594 15.8664 42.0674 15.7385 43.2686 16.588C44.536 17.4855 45.0407 18.7483 44.7712 20.2669C44.5155 21.7033 43.6454 22.6533 42.241 23.0872C42.1017 23.1306 41.9464 23.1306 41.798 23.1306C37.1006 23.1328 32.4032 23.1214 27.7057 23.142C26.8905 23.1443 26.2145 22.8679 25.6391 22.3427C24.5384 21.3356 24.1661 20.0705 24.5475 18.641C24.9152 17.2617 25.824 16.3802 27.2376 16.0605C27.772 15.9394 28.2881 16.0011 28.7859 16.2363C30.1446 16.8826 31.2819 17.8326 32.3529 18.8693C33.2275 19.7188 34.0314 20.63 34.6091 21.749ZM34.0702 22.4158C34.0793 22.3861 34.0907 22.3564 34.0999 22.3267C33.0357 21.2078 31.903 20.171 30.526 19.4334C29.8295 19.0612 29.0805 19.1662 28.4913 19.7028C27.9798 20.1664 27.8062 20.7579 28.0209 21.3197C28.2607 21.9499 28.9161 22.4181 29.5555 22.4181C30.9371 22.4181 32.3187 22.4181 33.7003 22.4181C33.8258 22.4158 33.9492 22.4158 34.0702 22.4158ZM35.1184 22.3633C35.2166 22.3907 35.2577 22.4135 35.3011 22.4135C36.8197 22.4158 38.3383 22.4432 39.8569 22.4089C40.7681 22.3884 41.4988 21.3379 41.2727 20.4884C41.0284 19.5704 39.6559 18.8145 38.8064 19.3991C37.9752 19.97 37.1462 20.5501 36.3515 21.1689C35.9131 21.5069 35.5477 21.9408 35.1184 22.3633Z"*/}
-            {/*          fill="#EB5757"*/}
-            {/*        />*/}
-            {/*      </svg>*/}
-            {/*    </HistoryAnalyticsCard>*/}
-            {/*  </div>*/}
-            {/*</div>*/}
-            {/*<MarketHistorySection />*/}
-            {/* <TopHxBox className="mb-11" /> */}
-            <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
-                {/* switch button */}
-                <div className="grid grid-cols-4 mt-4">
-                {tabs.map((item) => (
-                    <TabButton 
-                        key={item}
-                        item={item}
-                        selectedTab={selectedTab}
-                        setSelectedTab={setSelectedTab}
-                    />
-                ))}
+                    </div>
                </div>
-                {/* switch button */}
-                {/* <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
-                    <button
-                    name="purchases"
-                    onClick={(e) => setTab(e.target.name)}
-                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "purchases" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                      }`}
-                    >
-                    Purchases
-                    </button>
-                    <button
-                    name="recent"
-                    onClick={(e) => setTab(e.target.name)}
-                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "recent" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                      }`}
-                    >
-                    Recent Activity
-                    </button>
-                    <button
-                    name="reward"
-                    onClick={(e) => setTab(e.target.name)}
-                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "reward" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                      }`}
-                    >
-                    Rewards
-                    </button>
-                    <button
-                    name="jobs_completed"
-                    onClick={(e) => setTab(e.target.name)}
-                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "jobs_completed" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                      }`}
-                    >
-                    Jobs Completed
-                    </button>
-                </div> */}
-                {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 dark:bg-dark-white overflow-x-auto">
-                    {/* PURCHASE SECTION */}
-                    {selectedTab == 'purchases' &&
-                        <div className="wallet w-full">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
-                            {purchaseHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-                            :
-                            <PurchasesTable purchase={purchaseHistory} />
+                <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+                    <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                        <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+                            {tabs.map((item) => (
+                                <div key={item.id} className='w-full'>
+                                    <TabButton 
+                                        key={item.id}
+                                        item={item.title}
+                                        iconName={item.iconName}
+                                        selectedTab={selectedTab}
+                                        setSelectedTab={setSelectedTab}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+                    <div className="w-full overflow-y-auto min-h-[520px]">
+                        <>
+                            {/* PURCHASE SECTION */}
+                            {selectedTab == 'purchases' &&
+                                <div className="wallet w-full">
+                                    {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Purchases</h1> */}
+                                    {purchaseHistory.loading ? 
+                                    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                                    :
+                                    <PurchasesTable purchase={purchaseHistory} />
+                                    }
+                                </div>
                            }
-                        </div>
-                    }
-                    {/* END OF PURCHASE SECTION */}
-                    
-                    {/* RECENT ACTIVITY SECTION */}
-                    {selectedTab == 'recent activity' &&
-                        <div className="wallet w-full">
-                            {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
-                            {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
-                            {paymentHistory.loading ? 
-                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-                            :
-                            <RecentActivityTable payment={paymentHistory} />
-                        }
-                        </div>
-                    }
-                    {/* END OF RECENT ACTIVITY SECTION */}
+                            {/* END OF PURCHASE SECTION */}
+                            
+                            {/* RECENT ACTIVITY SECTION */}
+                            {selectedTab == 'recent activity' &&
+                                <div className="wallet w-full">
+                                    {/* <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Recent Activity</h1> */}
+                                    {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
+                                    {paymentHistory.loading ? 
+                                    <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                                    :
+                                    <RecentActivityTable payment={paymentHistory} />
+                                }
+                                </div>
+                            }
+                            {/* END OF RECENT ACTIVITY SECTION */}

-                    {/* REWARD SECTION */}
-                    {selectedTab == 'rewards' &&
-                        <div className="wallet w-full">
-                            <RewardsTable />
-                        </div>
-                    }
-                    {/* END OF REWARD SECTION */}
+                            {/* REWARD SECTION */}
+                            {selectedTab == 'rewards' &&
+                                <div className="wallet w-full">
+                                    <RewardsTable />
+                                </div>
+                            }
+                            {/* END OF REWARD SECTION */}

-                    {/* JOBS COMPLETED SECTION */}
-                    {selectedTab == 'jobs completed' &&
-                        <div className="wallet w-full">
-                            <JobsCompleted />
-                        </div>
-                    }
-                    {/* END OF JOBS COMPLETED SECTION */}
+                            {/* JOBS COMPLETED SECTION */}
+                            {selectedTab == 'jobs completed' &&
+                                <div className="wallet w-full">
+                                    <JobsCompleted />
+                                </div>
+                            }
+                            {/* END OF JOBS COMPLETED SECTION */}
+                        </>
+                    </div>
                </div>
            </div>
-            {/*<HistoryTable />*/}
-          </div>
        </div>
      </Layout>
    </>
@@ -22,7 +22,6 @@ export default function FullAccountDash(props) {
            className="mb-4"
            data={userDetails}
            bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
          />
        );
      case "FAMILY_PARENT_DASH":
@@ -31,7 +30,6 @@ export default function FullAccountDash(props) {
            className="mb-4"
            data={userDetails}
            bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
          />
        );
      case "WORKER_HOME_DASH":
@@ -40,7 +38,6 @@ export default function FullAccountDash(props) {
            className="mb-4"
            data={userDetails}
            bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
          />
        );
      case "JOBOWNER_HOME_DASH":
@@ -49,7 +46,6 @@ export default function FullAccountDash(props) {
            className="mb-4"
            data={userDetails}
            bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
          />
        );
      default:
@@ -62,16 +58,18 @@ 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} />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} offersList={props.offersList} imageServer={props.imageServer} />
        )}

-        {props?.dashTypes !== "undefined" &&
+        {/* {props?.dashTypes !== "undefined" &&
        props.offersList?.data?.result_list?.length ? (
          <MyOffersTable
            MyActiveOffersList={props.offersList?.data}
            className="mb-10"
          />
-        ) : props.MyActiveJobList?.data?.length ? (
+        ) 
+        : 
+        props.MyActiveJobList?.data?.length ? (
          <>
            <div className="w-full mb-5 flex justify-between items-center gap-1">
              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
@@ -84,7 +82,7 @@ export default function FullAccountDash(props) {
              imageServer={props.offersList?.data?.session_image_server}
            />
          </>
-        ) : null}
+        ) : null} */}
      </div>
    </>
  );
@@ -5,68 +5,65 @@ import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
+import LoadingSpinner from '../../components/Spinners/LoadingSpinner'

 export default function Home(props) {
 // console.log("PROPS IN HOME->", props);
  const userApi = new usersService();
  const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);

-  let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
-
  const { userDetails } = useSelector((state) => state?.userDetails);

-  const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
-  // const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  // const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS

-  const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
-    try {
-      const res = await userApi.getMyActiveTaskList();
-      setMyActiveJobList({loading:false, data:res?.data?.result_list});
-      // setMyActiveJobList(res?.data?.result_list);
-    } catch (error) {
-      setMyActiveJobList({loading:false, data:[]});
-      // setMyActiveJobList([]);
-      console.log("Error getting tasks");
-    }
-  };
+  // const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
+  //   try {
+  //     const res = await userApi.getMyActiveTaskList();
+  //     setMyActiveJobList({loading:false, data:res?.data?.result_list});
+  //     // setMyActiveJobList(res?.data?.result_list);
+  //   } catch (error) {
+  //     setMyActiveJobList({loading:false, data:[]});
+  //     // setMyActiveJobList([]);
+  //     console.log("Error getting tasks");
+  //   }
+  // };

  // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
-  const getHomeDate = () => {
-    userApi
-      .getHomeDate()
-      .then((res) => {
-        if (res.status != 200 || res.internal_return < 0) {
-          return;
-        }
-        setNextDueTask(res.data);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
+  // const getHomeDate = () => {
+  //   userApi
+  //     .getHomeDate()
+  //     .then((res) => {
+  //       if (res.status != 200 || res.internal_return < 0) {
+  //         return;
+  //       }
+  //       setNextDueTask(res.data);
+  //     })
+  //     .catch((error) => {
+  //       console.log(error);
+  //     });
+  // };

-  const getMyOffersList = async () => {
-    try {
-      const res = await userApi.getOffersList();
-      setMyOffersList({loading:false, data:res.data});
-    } catch (error) {
-      setMyOffersList({loading:false, data:[]});
-      console.log("Error getting offers", error);
-    }
-  };
+  // const getMyOffersList = async () => {
+  //   try {
+  //     const res = await userApi.getOffersList();
+  //     setMyOffersList({loading:false, data:res.data});
+  //   } catch (error) {
+  //     setMyOffersList({loading:false, data:[]});
+  //     console.log("Error getting offers", error);
+  //   }
+  // };

-  useEffect(() => {
-    const fetchData = async () => {
-      await Promise.all([getHomeDate(), getMyOffersList(), getMyActiveJobList()]);
-    };
-    if(userDetails?.account_type == 'FULL'){
-      fetchData();
-    }
-  }, []);
+  // useEffect(() => {
+  //   if(userDetails?.account_type == 'FULL'){
+  //     getMyActiveJobList();
+  //   }
+  // }, []);

  return (
    <Layout>
+      {Object.keys(commonHeadBanner).length < 1 ?
+      <LoadingSpinner height='h-48' size='16' />
+      :
      <div className="w-full">
        {userDetails && userDetails?.account_type == "FAMILY" ? (
          <FamilyDash
@@ -78,11 +75,12 @@ export default function Home(props) {
          />
        ) : userDetails && userDetails?.account_type == "FULL" ? (
          <FullAccountDash
-            nextDueTask={nextDueTask}
            bannerList={props.bannerList}
            dashTypes={props.dashTypes}
-            offersList={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
+            // offersList={MyOffersList}
+            // MyActiveJobList={MyActiveJobList}
+            offersList={props.offersList}
+            imageServer={props.imageServer}
          />
        ) : (
          <div>
@@ -90,6 +88,7 @@ export default function Home(props) {
          </div>
        )}
      </div>
+      }
    </Layout>
  );
 }
@@ -0,0 +1,152 @@
+import React, {useState, useEffect} from "react";
+import Layout from "../Partials/Layout";
+
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import TabButton from "../customTabs/TabButton";
+
+export default function LearnMore() {
+
+    const apiCall = new usersService()
+
+    const [selectedTab, setSelectedTab] = useState("topic 1");
+
+    const [tabs, setTabs] = useState(
+        [  //STATE FOR SWITCHING BETWEEN TABS
+            {
+                id: 1,
+                title: "topic 1",
+                iconName: "history",
+              },
+              {
+                id: 2,
+                title: "topic 2",
+                iconName: "history",
+              },
+              {
+                id: 3,
+                title: "topic 3",
+                iconName: "history",
+              },
+              {
+                id: 4,
+                title: "topic 4",
+                iconName: "history",
+              },
+        ]
+    )
+
+    // const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+    //     {
+    //         id: 1,
+    //         title: "topic 1",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 2,
+    //         title: "topic 2",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 3,
+    //         title: "topic 3",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 4,
+    //         title: "topic 4",
+    //         iconName: "history",
+    //       },
+    // ]
+
+    let [topics, setTopics] = useState({ // FOR PAYMENT HISTORY
+        loading: true,
+        data: [],
+    })
+
+    //FUNCTION TO GET LEARN MORE TOPIC
+  
+  useEffect(()=>{
+    apiCall.getLearnmoreTopics().then((res)=>{
+        if(res.data.internal_return < 0){ // success but no data
+            setTopics(prev => ({...prev, loading: false}))
+            return
+        }
+        const resData = res?.data?.result_list
+        setTopics(prev => ({...prev, loading: false, data: resData}))
+        setTabs(prev => {
+           return prev.map((item, index) => ({...item, title:resData[index].topic}))
+        })
+        setSelectedTab(resData[0].topic)
+        // console.log('RES', resData)
+    }).catch((error)=>{
+        setTopics(prev => ({...prev, loading: false}))
+    })
+  }, [])
+
+
+  return (
+    <>
+      <Layout>
+        <div className="history-wrapper w-full mb-10">
+            <div className="w-full">
+                <div className="sm:flex justify-between items-center mb-6">
+                    <div className="mb-5 sm:mb-0">
+                        <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+
+                    Learn More
+
+                        </h1>
+                    </div>
+                    <div className="slider-btns flex space-x-4">
+
+                    </div>
+                </div>
+                <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+                    <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                        <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+                            {(!topics.loading  && topics?.data?.length > 0) && tabs.map((item) => (
+                                <div key={item.id} className='w-full'>
+                                    <TabButton 
+                                        key={item.id}
+                                        item={item.title}
+                                        iconName={item.iconName}
+                                        selectedTab={selectedTab}
+                                        setSelectedTab={setSelectedTab}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+                    <div className="flex-1 overflow-y-auto min-h-[520px]">
+                        <>
+                            {/* TOPICS SECTION */}
+                            <div className="w-full py-2 lg:py-8">
+                                {topics.loading ? 
+                                <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                                :
+                                <>
+                                    {(topics?.data && topics?.data?.length > 0) ?
+                                    <div dangerouslySetInnerHTML={{
+                                        __html: topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents,
+                                      }} className='prose dark:text-white dark:bg-dark-white'
+                                    >
+                                        {/* {topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents} */}
+                                    </div>
+                                    :
+                                    <p className='p-2 text-slate-500 flex flex-col grow justify-center items-center'>No Topics found</p>}
+                                </>
+                                }
+                            </div>
+                            {/* END OF TOPICS SECTION */}
+                        </>
+                    </div>
+                </div>
+            </div>
+        </div>
+      </Layout>
+    </>
+  );
+}
@@ -150,6 +150,7 @@ export default function MainSection({
                        contentDisplay={contentDisplay}
                        image_server={image_server}
                        datas={datum}
+                        marketPlaceProduct={marketPlaceProduct}
                      />
                    </div>
                  ))
@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from "react";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+export default function LockJob({
+  details,
+  marketPlaceProduct,
+  ManageInterest,
+  manageInt,
+  handleInputChange,
+  MarketDetail,
+  marketMsg,
+  errMsg,
+  textValue,
+}) {
+  const apiCall = new usersService();
+
+  const [completedTask, setCompletedTask] = useState({
+    loading: true,
+    data: [],
+  });
+
+  let thePrice = PriceFormatter(
+    details?.price * 0.01,
+    details?.currency_code,
+    details?.currency
+  );
+
+  let cleanedText = details?.job_description
+    ?.replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&amp;/g, "&");
+
+  let dependOn = marketPlaceProduct?.filter(
+    (item) => item?.job_uid == details?.offer_depend_uid
+  )[0];
+
+  useEffect(() => {
+    apiCall
+      .getVerifyCompletedTask({ offer_depend_uid: details?.offer_depend_uid })
+      .then((res) => {
+        console.log("RES", res.data);
+        setCompletedTask({ loading: false, data: res?.data?.result_list });
+      })
+      .catch((err) => {
+        setCompletedTask({ loading: false, data: [] });
+      });
+  }, []);
+
+  return (
+    <>
+      {completedTask.loading ? (
+        <div className="w-full md:col-span-4 flex justify-center items-center min-h-[500px]">
+          <LoadingSpinner size="10" />
+        </div>
+      ) : (
+        <>
+          <div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
+            <div className="min-h-[200px]">
+              <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
+                {details?.offer_depend_uid && (
+                  <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>
+                )}
+                {details?.title}
+              </h2>
+
+              {/* INPUT SECTION */}
+              {[
+                {
+                  name: "Description",
+                  content: details.description,
+                },
+                {
+                  name: "",
+                  content: {
+                    text: `Timeline: ${details.timeline_days} day(s) -- `,
+                    bold: `Budget: ${thePrice}`,
+                  },
+                },
+                // {
+                //     name: "Delivery Detail",
+                //     content: cleanedText,
+                //     danger: true,
+                // },
+              ].map(({ name, content, danger }, idx) => (
+                <div className={`my-1 flex flex-col items-start`} key={idx}>
+                  <label className="py-1 job-label w-full">{name}</label>
+                  <div
+                    className={`w-full p-2 text-slate-900 dark:text-white market-pop rounded-2xl ${
+                      name == "Description"
+                        ? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words bg-slate-50"
+                        : name == "Delivery Detail"
+                        ? " overflow-y-auto h-full min-h-[100px] max-h-[100px] bg-slate-50"
+                        : "h-full flex items-center"
+                    }`}
+                  >
+                    {danger ? (
+                      <p
+                        className={`dark:text-black`}
+                        dangerouslySetInnerHTML={{
+                          __html: danger && content,
+                        }}
+                      />
+                    ) : (
+                      <p className={`w-full text-slate-900 dark:text-black`}>
+                        {name !== "Delivery Detail" ? (
+                          <>
+                            {typeof content !== "object" ? content : null}
+                            {typeof content === "object" && (
+                              <>
+                                {/* <hr className="mb-1" /> */}
+                                <span className="flex w-full mb-1 h-[1px] bg-slate-500"></span>
+                                <span className="flex items-center gap-2 dark:text-white">
+                                  {content?.text}
+                                  <strong>{thePrice}</strong>
+                                </span>
+                                <span className="flex w-full mt-1 h-[1px] bg-slate-500"></span>
+                                {/* <hr className="mt-1" /> */}
+                              </>
+                            )}
+                          </>
+                        ) : (
+                          ""
+                        )}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* <hr className='my-3' /> */}
+            {completedTask.loading ? (
+              <p className="py-3 w-full text-center text-lg">Loading...</p>
+            ) : completedTask?.data?.filter(
+                (item) => item?.job_uid == details.offer_depend_uid
+              ).length > 0 ? (
+              <div className="w-full">
+                <label className="job-label w-full flex gap-2 items-center">
+                  If you have any questions about this task:
+                  <span
+                    className={`text-sm ${
+                      marketMsg.state ? "text-[#57cd89]" : "text-red-500"
+                    }`}
+                  >
+                    {marketMsg.state && "Message Sent!"}
+                    {errMsg.market && "Failed to send"}
+                  </span>
+                </label>
+                <div className="w-full flex items-center gap-3">
+                  <div className="w-full">
+                    <textarea
+                      className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                        marketMsg.loading && "italic text-[#9CA3AF]"
+                      } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                      rows="3"
+                      style={{ resize: "none" }}
+                      placeholder="Enter message here ..."
+                      value={marketMsg.loading ? "Sending..." : textValue}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className="relative flex flex-col">
+                    <button
+                      className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                      name="market-message"
+                      onClick={MarketDetail}
+                      disabled={marketMsg.loading}
+                    >
+                      {marketMsg.loading ? (
+                        <LoadingSpinner size={5} color="white" />
+                      ) : (
+                        // "Send Message"
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 11 20"
+                          id="Arrow"
+                          className="w-[0.7rem]"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                            // fill=""
+                            className="color000000 svgShape fill-[#fff]"
+                          ></path>
+                        </svg>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="w-full">
+                <h1 className="text-red-600 text-lg">
+                  This task depends on the task below
+                </h1>
+                <div className="rounded-2xl bg-red-50">
+                  <div className="my-1 w-full">
+                    <h2 className="p-2 w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-black tracking-wide">
+                      {dependOn?.offer_depend_uid && (
+                        <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>
+                      )}
+                      {dependOn?.title}
+                    </h2>
+                  </div>
+                  <div className={`p-2 flex flex-col items-start`}>
+                    <p className="py-1 job-label w-full dark:text-black">
+                      Description
+                    </p>
+                    <div
+                      className={`w-full p-2 text-slate-900 dark:text-black market-pop rounded-2xl bg-white break-words min-h-[100px] max-h-[100px]`}
+                    >
+                      {dependOn?.description}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
+              <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                <p className="job-label w-full">Interested?</p>
+                <hr />
+                {completedTask.loading ? (
+                  <p className="py-3 w-full text-center text-lg">Loading...</p>
+                ) : completedTask?.data?.filter(
+                    (item) => item?.job_uid == details.offer_depend_uid
+                  ).length > 0 ? (
+                  <button
+                    className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                    name="market-interest"
+                    onClick={ManageInterest}
+                  >
+                    {" "}
+                    <div className="flex md:flex-col justify-center gap-2">
+                      <span>Notify</span>
+                      <span>Owner</span>
+                    </div>
+                  </button>
+                ) : (
+                  <h1 className="text-red-600 text-base font-bold">
+                    This task depends on completion of another task
+                  </h1>
+                )}
+                <>
+                  {manageInt.loading ? (
+                    <p className="text-sm italic">please wait...</p>
+                  ) : (
+                    <>
+                      {manageInt?.msg !== "" && (
+                        <p
+                          className={`text-sm italic ${
+                            manageInt?.state ? "text-green-500" : "text-red-500"
+                          }`}
+                        >
+                          {manageInt?.msg}
+                        </p>
+                      )}
+                    </>
+                  )}
+                </>
+              </div>
+
+              <div className="text-slate-900">
+                <p className="flex items-center tracking-wide">
+                  <span className="job-label">Interest: </span>{" "}
+                  <b className="ml-1">{details.interest_count}</b>
+                </p>
+                <hr />
+                <p className="my-1 flex flex-col">
+                  <span className="job-label">Expire: </span>
+                  <span> {new Date(details.expire).toLocaleString()} </span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
@@ -1,12 +1,19 @@
 import { useEffect, useMemo, useState } from "react";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { SocketValues } from "../../Contexts/SocketIOContext";
+import LockJob from "./LockJob";

-const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduct }) => {
+
+  let { jobLists } = useSelector((state) => state.jobLists);
+  const interestCount = jobLists?.interest_list?.filter(item => item.job_uid == details.job_uid);
+  // console.log('interestList', interest_count)
+  // console.log('MEMO', jobLists?.interest_list, datas.job_uid)

  let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request
  const emitOfferInterest = () => {
@@ -143,165 +150,202 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
        </div>

        <div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
-          <div className="p-4 w-full md:col-span-3 md:border-r-1">
-            <div className="min-h-[240px]">
-              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
-                {details?.title}
-              </h2>
+          {details?.offer_depend_uid ?
+          <LockJob
+            marketPlaceProduct={marketPlaceProduct}
+            details={details}
+            ManageInterest={ManageInterest}
+            manageInt={manageInt}
+            marketMsg={marketMsg}
+            errMsg={errMsg}
+            textValue={textValue}
+            MarketDetail={MarketDetail}
+            handleInputChange={handleInputChange}
+          />
+          :
+          <>
+            <div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
+              <div className="min-h-[300px]">
+                <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
+                  {details?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                  {details?.title}
+                </h2>

-              {/* INPUT SECTION */}
-              {[
-                {
-                  name: "Description",
-                  content: details.description,
-                },
-                {
-                  name: "",
-                  content: {
-                    text: `Timeline: ${details.timeline_days} day(s) -- `,
-                    bold: `Budget: ${thePrice}`,
+                {/* INPUT SECTION */}
+                {[
+                  {
+                    name: "Description",
+                    content: details.description,
                  },
-                },
-                {
-                  name: "Delivery Detail",
-                  content: cleanedText,
-                  danger: true,
-                },
-              ].map(({ name, content, danger }, idx) => (
-                <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="job-label w-full md:w-[19%]">
-                    {name}
-                  </label>
-                  <div
-                    className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
-                      name == "Description"
-                        ? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words"
-                        : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[100px] max-h-[100px]"
-                        : "h-full flex items-center"
-                    }`}
-                  >
-                    {danger ? (
-                      <p
-                        className={`dark:text-white`}
-                        dangerouslySetInnerHTML={{
-                          __html: danger && content,
-                        }}
-                      />
-                    ) : (
-                      <p className={`w-full text-slate-900 dark:text-white`}>
-                        {name !== "Delivery Detail" ? (
-                          <>
-                            {typeof content !== "object" ? content : null}
-                            {typeof content === "object" && (
-                              <>
-                                {/* <hr className="mb-1" /> */}
-                                <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
-                                <span className="flex items-center gap-2 dark:text-white">
-                                  {content?.text}
-                                  <strong>{thePrice}</strong>
-                                </span>
-                                <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
-                                {/* <hr className="mt-1" /> */}
-                              </>
-                            )}
-                          </>
-                        ) : (
-                          ""
-                        )}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-            <hr className='my-1' />
-            <div className="w-full flex flex-col gap-3">
-              <div className="w-full">
-                <label className="job-label w-full">
-                  If you have any questions about this task:
-                </label>
-                <textarea
-                  className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
-                    marketMsg.loading && "italic text-[#9CA3AF]"
-                  } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
-                  rows="3"
-                  style={{ resize: "none" }}
-                  placeholder="Enter message here ..."
-                  value={marketMsg.loading ? "Sending..." : textValue}
-                  onChange={handleInputChange}
-                />
-              </div>
-              <div className="relative flex w-full justify-end ">
-                <span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
-                  {marketMsg.state && "Message Sent!"}
-                  {errMsg.market && "Something went wrong"}
-                </span>
-                <button
-                  className="custom-btn self-end bg-yellow-500 text-white"
-                  name="market-message"
-                  onClick={MarketDetail}
-                >
-                  {marketMsg.loading ? (
-                    <LoadingSpinner size={5} color="white" />
-                  ) : (
-                    "Send Message"
-                  )}
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div className="py-2 w-full md:col-span-1 h-full flex flex-col">
-            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
-              <div className="w-full flex flex-col justify-center pb-4 gap-2">
-                <p className="job-label w-full">
-                  Interested?
-                </p>
-                <hr />
-                <button
-                  className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
-                  name="market-interest"
-                  onClick={ManageInterest}
-                >
-                  {" "}
-                  <div className="flex md:flex-col justify-center gap-2">
-                    <span>Notify</span>
-                    <span>Owner</span>
-                  </div>
-                </button>
-                <>
-                  {manageInt.loading ? (
-                    <p className="text-sm italic">please wait...</p>
-                  ) : (
-                    <>
-                      {manageInt?.msg !== "" && (
+                  {
+                    name: "",
+                    content: {
+                      text: `Timeline: ${details.timeline_days} day(s) -- `,
+                      bold: `Budget: ${thePrice}`,
+                    },
+                  },
+                  {
+                    name: "Delivery Detail",
+                    content: cleanedText,
+                    danger: true,
+                  },
+                ].map(({ name, content, danger }, idx) => (
+                  <div className={`my-3 md:flex items-start`} key={idx}>
+                    <label className="py-2 job-label w-full md:w-[19%]">
+                      {name}
+                    </label>
+                    <div
+                      className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
+                        name == "Description"
+                          ? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
+                          : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
+                          : "h-full flex items-center"
+                      }`}
+                    >
+                      {danger ? (
                        <p
-                          className={`text-sm italic ${
-                            manageInt?.state ? "text-green-500" : "text-red-500"
-                          }`}
-                        >
-                          {manageInt?.msg}
+                          className={`dark:text-black`}
+                          dangerouslySetInnerHTML={{
+                            __html: danger && content,
+                          }}
+                        />
+                      ) : (
+                        <p className={`w-full text-slate-900 dark:text-black`}>
+                          {name !== "Delivery Detail" ? (
+                            <>
+                              {typeof content !== "object" ? content : null}
+                              {typeof content === "object" && (
+                                <>
+                                  {/* <hr className="mb-1" /> */}
+                                  <span className='flex w-full mb-1 h-[1px] bg-slate-500'></span>
+                                  <span className="flex items-center gap-2 dark:text-white">
+                                    {content?.text}
+                                    <strong>{thePrice}</strong>
+                                  </span>
+                                  <span className='flex w-full mt-1 h-[1px] bg-slate-500'></span>
+                                  {/* <hr className="mt-1" /> */}
+                                </>
+                              )}
+                            </>
+                          ) : (
+                            ""
+                          )}
                        </p>
                      )}
-                    </>
-                  )}
-                </>
+                    </div>
+                  </div>
+                ))}
              </div>
-
-              <div className="text-slate-900">
-                <p className="flex items-center tracking-wide">
-                  <span className="job-label">Interest: </span> <b className="ml-1">{details.interest_count}</b>
-                </p>
-                <hr />
-                <p className="my-1 flex flex-col">
-                  <span className="job-label">Expire: </span> 
-                  <span> {new Date(details.expire).toLocaleString()} </span>
-                </p>
+              <hr className='my-1' />
+              <div className='w-full'>
+                <label className="job-label w-full flex gap-2 items-center">
+                  If you have any questions about this task:
+                  <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
+                    {marketMsg.state && "Message Sent!"}
+                    {errMsg.market && "Failed to send"}
+                  </span>
+                </label>
+                <div className="w-full flex items-center gap-3">
+                  <div className="w-full">
+                    <textarea
+                      className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                        marketMsg.loading && "italic text-[#9CA3AF]"
+                      } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                      rows="3"
+                      style={{ resize: "none" }}
+                      placeholder="Enter message here ..."
+                      value={marketMsg.loading ? "Sending..." : textValue}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className="relative flex flex-col">
+                    <button
+                      className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                      name="market-message"
+                      onClick={MarketDetail}
+                      disabled={marketMsg.loading}
+                    >
+                      {marketMsg.loading ? (
+                        <LoadingSpinner size={5} color="white" />
+                      ) : (
+                        // "Send Message"
+                        <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 11 20"
+                        id="Arrow"
+                        className="w-[0.7rem]"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                          // fill=""
+                          className="color000000 svgShape fill-[#fff]"
+                        ></path>
+                      </svg>
+                      )}
+                    </button>
+                    {/* <span className="text-sm text-[#57cd89]">
+                      {marketMsg.state && "Sent!"}
+                      {errMsg.market && "Failed"}
+                    </span> */}
+                  </div>
+                </div>
              </div>
            </div>
-          </div>
-          {/* END OF ACTION SECTION */}
+
+            <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
+              <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
+                <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                  <p className="job-label w-full">
+                    Interested?
+                  </p>
+                  <hr />
+                  <button
+                    className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                    name="market-interest"
+                    onClick={ManageInterest}
+                  >
+                    {" "}
+                    <div className="flex md:flex-col justify-center gap-2">
+                      <span>Notify</span>
+                      <span>Owner</span>
+                    </div>
+                  </button>
+                  <>
+                    {manageInt.loading ? (
+                      <p className="text-sm italic">please wait...</p>
+                    ) : (
+                      <>
+                        {manageInt?.msg !== "" && (
+                          <p
+                            className={`text-sm italic ${
+                              manageInt?.state ? "text-green-500" : "text-red-500"
+                            }`}
+                          >
+                            {manageInt?.msg}
+                          </p>
+                        )}
+                      </>
+                    )}
+                  </>
+                </div>
+
+                <div className="text-slate-900">
+                  <p className="flex items-center tracking-wide">
+                    <span className="job-label">Interest: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
+                  </p>
+                  <hr />
+                  <p className="my-1 flex flex-col">
+                    <span className="job-label">Expire: </span> 
+                    <span> {new Date(details.expire).toLocaleString()} </span>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </>
+          }
        </div>
+        
        <div className="modal-footer-wrapper">
          <button
            className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"
@@ -364,7 +364,7 @@ function ActiveJobs(props) {

          <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
            <span className="font-semibold text-black dark:text-white">
-              Price:{" "}
+            Reward:{" "}
            </span>
            <span className="">{thePrice}</span>
          </div>
@@ -6,8 +6,14 @@ import LoadingSpinner from '../../Spinners/LoadingSpinner'

 import usersService from '../../../services/UsersService'

+import {NewDateTimeFormatter }from '../../../lib/NewDateTimeFormatter'
+
 function CurrentTaskAction({jobDetails}) {

+    const currTime = new Date().getTime() / (1000*60*60)
+    const minDueTime = new Date(jobDetails?.minimum_due).getTime() / (1000*60*60)
+    const canSendForReview = Number(jobDetails.strict_timeline) ? currTime >= minDueTime : true // calculation to determine when send for review button will be active
+
    const apiCall = new usersService()
    const navigate = useNavigate()

@@ -65,7 +71,7 @@ function CurrentTaskAction({jobDetails}) {
          <div className="h-full w-full text-sm text-left text-gray-500">
            {jobDetails.job_type == 'MEDIA' ?
            <div className="h-full flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
+                <button onClick={popUpHandler} type="button" className="btn-gradient h-full text-white px-5 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                    I have completed this task
                </button>
            </div>
@@ -78,7 +84,7 @@ function CurrentTaskAction({jobDetails}) {
                </div>

                <div className="flex justify-center items-center">
-                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient px-5 py-2 text-white">
                        Send for Review
                    </button>
                </div>
@@ -120,36 +126,57 @@ function CurrentTaskAction({jobDetails}) {
                        </button>
                    </div>
                    <div className="job-action-modal-body w-full px-10 py-8 gap-4">
-                        <div className="w-full flex flex-col items-center">
-                            <div className="mb-10 flex justify-center items-center gap-2">
-                                <input 
-                                    type='checkbox' 
-                                    checked={checked} 
-                                    onChange={()=>{setChecked(prev => !prev)}} 
-                                    className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
-                                />
-                                <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
-                            </div>
-
-                            <div className="mb-10 flex justify-center items-center">
-                                {reqStatus.loading ?
-                                    <LoadingSpinner color='sky-blue' size='10' />
-                                :
-                                    <button type="button" onClick={taskCompletedSubmit} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                                        Send for Review & Acceptance
-                                    </button>
-                                }
-                            </div>
-
-                            {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
-                            <div className="w-full">
-                                <div
-                                    className={`relative p-4 text-center text-md font-light leading-[19.5px] text-[13px] ${reqStatus.status ? 'text-green-700':'text-[#912741]'}`}
+                        <div className="w-full flex flex-col min-h-[150px] gap-8 items-center">
+                            {!canSendForReview ?
+                            <>
+                                <h1 
+                                    // className='font-bold text-base tracking-wide text-dark-gray dark:text-white'
+                                    className='font-bold text-xl tracking-wide text-red-500 text-center'
                                >
-                                    {reqStatus.message}
+                                    This task can be marked completed after {NewDateTimeFormatter(jobDetails?.minimum_due)}
+                                </h1>
+
+                            </>
+                            :
+                            <>
+                                <div className="flex justify-center items-center gap-2">
+                                    <input 
+                                        type='checkbox' 
+                                        checked={checked} 
+                                        onChange={()=>{setChecked(prev => !prev)}} 
+                                        className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
+                                    />
+                                    <p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>If you have completed this task</p>
                                </div>
-                            </div>
-                            {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
+
+                                <div className="flex justify-center items-center">
+                                    {reqStatus.loading ?
+                                        <LoadingSpinner color='sky-blue' size='10' />
+                                    :
+                                        <button 
+                                            type="button" 
+                                            onClick={taskCompletedSubmit} 
+                                            className={`px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${!canSendForReview && 'pointer-events-none opacity-50'}`}
+                                        >
+                                            Send for Review & Acceptance
+                                        </button>
+                                    }
+                                </div>
+
+                                {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                                {reqStatus.message &&
+                                    <div className="w-full">
+                                        <div
+                                            className={`relative p-4 text-center text-md font-light leading-[19.5px] text-[13px] ${reqStatus.status ? 'text-green-700':'text-[#912741]'}`}
+                                        >
+                                            {reqStatus.message}
+                                        </div>
+                                    </div>
+                                }
+                                {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                            
+                            </>
+                            }
                        </div> 
                    </div> 
                    {/* cancel btn */}
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
                        <button 
                            type="button" 
                            onClick={popUpHandler} 
-                            className="custom-btn btn-gradient text-base text-white"
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
                        >
                            Cancel or Extend Timeline
                        </button>
@@ -1,26 +1,136 @@
-import React from 'react'
+import React,{useState} from 'react'
+import ModalCom from '../../Helpers/ModalCom'
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import { useNavigate } from 'react-router-dom'
+import usersService from '../../../services/UsersService'
+
+function PastDueTaskAction({jobDetails}) {
+
+    const apiCall = new usersService()
+    const navigate = useNavigate()
+
+    const [checked, setChecked] = useState(false)
+
+    const [extendedTime, setExtendedTime] = useState('') // VALUE OF NEW EXTENDED TIME
+
+    const [action, setAction] = useState('') // VALUE OF NEW EXTENDED TIME
+
+    const [reqStatus, setReqStatus] = useState({loading:false, status: false, message: ''})
+
+    let [popUp, setPopUp] = useState(false)
+
+    const popUpHandler = () => {
+        if(popUp){
+            setChecked(false)
+        }
+        setPopUp(prev => !prev)
+    }
+
+    // FUNCTION TO HANDLE WHEN OWNER CANCELS JOB
+    const cancelTask = () => {
+        setAction('cancel')
+        setReqStatus({loading:true, status: false, message: ''})
+
+        let reqData = { // API PAYLOADS
+            contract: jobDetails.contract,
+            contract_uid: jobDetails.contract_uid,
+            job_action: 'CANCEL_CONTRACT',
+        }
+
+        if(!checked){ // CHECKS IF CHECKBOX IS SELECTED
+            setReqStatus({loading:false, status: false, message: 'Please check the box above'})
+            return setTimeout(()=>{
+                setReqStatus({loading:false, status: false, message: ''})
+            }, 3000)
+        }
+        // API CALL TO ACCEPT COMPLETION BY OWNER
+        setReqStatus({loading:false, status: false, message: 'No api added yet'})
+        setTimeout(()=>{
+            setReqStatus({loading:false, status: false, message: ''})
+        },1000)
+        // apiCall.ownerJobAction(reqData).then((res)=>{
+        //     if(res.status != 200 || res.data.internal_return < 0){
+        //         setReqStatus({loading:false, status: false, message: 'unable to complete request. Try again'})
+        //         return
+        //     }
+        //     setReqStatus({loading:false, status: true, message: 'job cancelled successfully'})
+        //     setTimeout(()=>{ // Sets popout to false and navigates user to /my-pastdue-jobs after 3 seconds
+        //         popUpHandler()
+        //         navigate('/my-pastdue-jobs', {replace: true})
+        //     }, 3000)
+        // }).catch(err => {
+        //     setReqStatus({loading:false, status: false, message: 'Opps! Network error. Try again'})
+        // }).finally(()=>{
+        //     setTimeout(()=>{
+        //         setReqStatus({loading:false, status: false, message: ''})
+        //     }, 3000)
+        // })
+    }
+
+    // FUNCTION TO HANDLE WHEN USER/OWNER CLICKS ON EXTEND TIMELINE FOR A JOB
+    const extendTime = () => {
+        setAction('extend')
+        setReqStatus({loading:true, status: false, message: ''}) // Sets loading spinner active
+        let reqData = {
+            contract: jobDetails.contract,
+            contract_uid: jobDetails.contract_uid,
+            job_action: 'EXTEND_TIMELINE',
+            extension: Number(extendedTime)
+        }
+        if(!extendedTime){ // checks that timeline duration is selected
+            setReqStatus({loading:false, status: false, message: 'Please select timeline duration'})
+            return setTimeout(()=>{
+                setReqStatus({loading:false, status: false, message: ''})
+            }, 3000)
+        }
+
+        // API CALL EXTEND TIMELINE BY OWNER
+        setReqStatus({loading:false, status: false, message: 'No api added yet'})
+        setTimeout(()=>{
+            setReqStatus({loading:false, status: false, message: ''})
+        },1000)
+        // apiCall.ownerJobAction(reqData).then((res)=>{
+        //     if(res.status != 200 || res.data.internal_return < 0){
+        //         setReqStatus({loading:false, status: false, message: 'unable to complete request. Try again'})
+        //         return
+        //     }
+        //     setReqStatus({loading:false, status: true, message: 'Timeline extended successfully'})
+        //     setTimeout(()=>{ // Sets popout to false and navigates user to /my-pastdue-jobs after 3 seconds
+        //         popUpHandler()
+        //         navigate('/my-pastdue-jobs', {replace: true})
+        //     }, 3000)
+        // }).catch(err => {
+        //     setReqStatus({loading:false, status: false, message: 'Opps! Network error. Try again'})
+        // }).finally(()=>{
+        //     setTimeout(()=>{
+        //         setReqStatus({loading:false, status: false, message: ''})
+        //     }, 3000)
+        // })
+    }

-function PastDueTaskAction() {
  return (
-    <div className='job-action dark:bg-black'>
+    <div className='job-action  dark:bg-black'>

-        <table className="w-full text-sm text-left text-gray-500 worker-pastdue">
+        <table className="w-full text-sm text-left text-gray-500 owner-pastdue">
            <tbody>
            <tr>
                <td>
                    <div className="flex space-x-2 items-center w-full task_action_panel">

-                            <div>
+                            <div className="dark:text-red-700">
                                You have missed the allocated time
                            </div>
-                            {/*<div className="flex flex-col flex-[0.9]"> </div>*/}
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div className="flex justify-center items-center">
-                        <button type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+                        <button 
+                            type="button" 
+                            onClick={popUpHandler} 
+                            className="custom-btn btn-gradient px-5 py-2 text-base text-white"
+                        >
                            Request Extension
                        </button>
                    </div>
@@ -28,6 +138,124 @@ function PastDueTaskAction() {
            </tr>
            </tbody>
        </table>
+
+        {popUp && (
+            <ModalCom action={popUpHandler} situation={popUp}>
+                <div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+                    <div className="modal-header-con">
+                        <h1 className="modal-title">
+                        Past Due Task
+                        </h1>
+                        <button
+                        type="button"
+                        className="modal-close-btn"
+                        onClick={popUpHandler}
+                        >
+                          <svg
+                                width="36"
+                                height="36"
+                                viewBox="0 0 36 36"
+                                fill="none"
+                                className="fill-current"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                                fill=""
+                                fillOpacity="0.6"
+                                />
+                                <path
+                                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                                fill="#"
+                                fillOpacity="0.6"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                    <div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
+                        <div className="w-full flex flex-col items-center">
+                            <div className="mb-5 flex justify-center items-center gap-2">
+                                <input 
+                                    type='checkbox' 
+                                    checked={checked} 
+                                    onChange={()=>{setChecked(prev => !prev)}} 
+                                    className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue' 
+                                />
+                                <p className='job-label'>I am ready to cancel this task</p>
+                            </div>
+
+                            <div className="mb-5 w-full flex justify-end items-center">
+                                {reqStatus.loading && action=='cancel'?
+                                    <LoadingSpinner color='sky-blue' size='10' />
+                                :
+                                    <button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
+                                        <span className='text-gradient'>Cancel this task</span>
+                                    </button>
+                                }
+                            </div>
+
+                            {/* EXTEND TIMELINE SECTION */}
+                            <div className='w-full my-3 py-3 border-t flex flex-col items-center'>
+                                <div className='mb-5 flex items-center gap-2'>
+                                    <p className='job-label'>Extend the timeline by:</p>
+                                    <select 
+                                        onChange={({target})=>{setExtendedTime(target.value)}}
+                                        className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
+                                    >
+                                        <option className='text-slate-500 text-lg' value=''>select</option>
+                                        <option className='text-slate-500 text-lg' value='2'>1 days</option>
+                                        <option className='text-slate-500 text-lg' value='3'>3 days</option>
+                                        <option className='text-slate-500 text-lg' value='5'>5 days</option>
+                                        <option className='text-slate-500 text-lg' value='7'>1 week</option>
+                                    </select>
+                                </div>
+                                {reqStatus.loading && action=='extend' ?
+                                    <LoadingSpinner color='sky-blue' size='10' />
+                                :
+                                <div className='w-full flex justify-end items-center'>
+                                    <button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
+                                        Request Extension
+                                    </button>
+                                </div>
+}                               
+                            </div>
+
+                            {/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                            <div className="w-full absolute left-0 bottom-0 text-center">
+                            {reqStatus.message != "" &&
+                                (!reqStatus.status ? (
+                                <div
+                                    className={`relative p-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                >
+                                    {reqStatus.message}
+                                </div>
+                                ) : (
+                                reqStatus.status && (
+                                    <div
+                                    className={`relative p-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                                    >
+                                    {reqStatus.message}
+                                    </div>
+                                )
+                                ))}
+                            </div>
+                            {/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
+                        </div>
+                        
+                    </div> 
+                    {/* cancel btn */}
+                    <div className='modal-footer-wrapper flex justify-center items-center'>
+                        <button onClick={popUpHandler} type="button" 
+                            // className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                            className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
+                        >
+                            Cancel Task
+                            {/* <span className='text-gradient'>Cancel</span> */}
+                        </button>
+                    </div>
+                </div>
+            </ModalCom>
+        )}
    </div>
  )
 }
@@ -36,7 +36,21 @@ export default function JobDetailPopout({action, situation, jobDetail}) {
                    </button>
                </div>
                <div className="modal-body-wrapper">
-                    <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p>
+                    {/* <p className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'>{jobDetail}</p> */}
+                    {/* <div 
+                        className='w-full text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white'
+                        dangerouslySetInnerHTML={{__html: jobDetail}}
+                    >
+                    </div> */}
+                    <textarea
+                        id="Job Delivery Details"
+                        readOnly
+                        // rows="5"
+                        className={`w-full h-full overflow-y-auto text-left text-sm md:text-lg lg:text-xl text-slate-900 dark:text-white`}
+                        style={{ resize: "none" }}
+                        name="job_detail"
+                        value={jobDetail}
+                    />
                </div>
                <div className="modal-footer-wrapper justify-end">
                    <button
@@ -68,7 +68,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex flext-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -68,7 +68,7 @@ export default function MyPastDueTaskTable({ MyJobList, className }) {
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex flext-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -13,7 +13,8 @@ import DeleteIcon from "../../assets/images/icon-delete.svg";
 import EditIcon from "../../assets/images/icon-edit.svg";
 import { tableReload } from "../AddJob/settings";
 import CreditPopup from "../MyWallet/Popup/CreditPopup";
-import JobListPopout from "../jobPopout/JobListPopout";
+// import JobListPopout from "../jobPopout/JobListPopout";
+import NewJobListPopout from "../jobPopout/NewJobListPopout";
 import EditJobPopoutNew from "../jobPopout/EditJobPopoutNew";

 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
@@ -157,7 +158,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {

      {/* Job List Popout */}
      {jobPopout.show && (
-        <JobListPopout
+        <NewJobListPopout
          details={jobPopout.data}
          onClose={() => {
            setJobPopout({ show: false, data: {} });
@@ -165,6 +166,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
          setWalletItem={setWalletItem}
          openWallet={openPopUp}
          situation={jobPopout.show}
+          myJobList={MyJobList}
        />
      )}
      {/* End of Job List Popout */}
@@ -275,7 +277,7 @@ function myJobTableFeatures(
                </h1>
                <div>{value.description}</div>
                <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                  Price: <span className="text-purple">{thePrice}</span>
+                Reward: <span className="text-purple">{thePrice}</span>
                </span>
                <span className="text-sm text-thin-light-gray">
                  Duration:{" "}
@@ -69,7 +69,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -107,11 +107,22 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                              onClick={() => {
                                setJobPopout({ show: true, data: value });
                              }}
-                              className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                            >
-                              {value.owner_status == "OWNER"
-                                ? "Manage"
-                                : "View"}
+                              {/* {value.owner_status == "OWNER" ? "Manage": "View"} */}
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 11 20"
+                                id="Arrow"
+                                className="w-[0.7rem]"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                  // fill=""
+                                  className="color000000 svgShape fill-[#fff]"
+                                ></path>
+                              </svg>
                            </button>
                          </td>
                        </tr>
@@ -94,7 +94,7 @@ export default function MyJobTable({ className, ActiveJobList, Account, imageSer
                          {task?.description}
                        </span>
                        <span className="text-sm text-thin-light-gray flex flext-start gap-1">
-                          Price:
+                          Reward:
                          <span className="text-purple ml-1">{thePrice}</span>
                        </span>
                        <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
@@ -0,0 +1,225 @@
+import { useState } from "react";
+import dataImage1 from "../../assets/images/data-table-user-1.png";
+import PaginatedList from "../Pagination/PaginatedList";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import localImgLoad from "../../lib/localImgLoad";
+
+const noTasksBg = require("../../assets/images/no-task-background.jpg");
+const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg");
+
+export default function RecentPastDueTable({ className, recentPastDue, Account, imageServer }) {
+  let navigate = useNavigate();
+  let { pathname } = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentTask = recentPastDue?.data?.result_list?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  let accountType = Account?.account_type == "FULL"
+
+  // To navigate to task
+  const [btnLoader, setBtnLoader] = useState(false);
+  const navigateMarket = () => {
+    setBtnLoader(true);
+    const timeoutId = setTimeout(() => {
+      navigate(accountType ? "/market" : "/familymarket", { replace: true });
+      setBtnLoader(false);
+    }, 2500);
+    return () => clearTimeout(timeoutId);
+  };
+
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] relative ${
+        className || ""
+      } bg-cover bg-center`}
+      style={{
+        backgroundImage: !recentPastDue?.data?.result_list?.length
+          ? `url('${accountType ? noTasksBg : noFamilyTasksBg}')`
+          : "none",
+      }}
+    >
+      {/* Adding this dark overlay in order to see the texts properly */}
+      {!recentPastDue?.data?.result_list?.length && accountType && (
+        <div className="absolute inset-0 bg-black opacity-30"></div>
+      )}
+      {recentPastDue?.loading ? 
+        <div className="w-full h-[520px] flex items-center justify-center">
+          <LoadingSpinner size="16" color="sky-blue" />
+        </div>
+      :
+      <div className="relative w-full sm:rounded-lg">
+        <div className="h-auto w-full">
+          {recentPastDue?.data?.result_list?.length > 0 ?
+            currentTask?.map((task, idx) => {
+              // find due date
+              const dueDate = task?.delivery_date.split(" ")[0];
+              let thePrice = PriceFormatter(
+                task?.price * 0.01,
+                task?.currency_code,
+                task?.currency
+              );
+              let image = `${imageServer}${localStorage.getItem('session_token')}/job/${task.origin_job_uid}`
+              return (
+                <div
+                  className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
+                  key={idx}
+                >
+                  <div className="py-4 max-w-[80%]">
+                    <div className="flex space-x-2 items-center">
+                      <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                        <img
+                          src={image}
+                          alt="data"
+                          className="w-full h-full"
+                        />
+                      </div>
+                      <div className="flex flex-col flex-[0.9]">
+                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                          {task?.title}
+                        </h1>
+                        <span className="text-base text-gray-600">
+                          {task?.description}
+                        </span>
+                        <span className="text-sm text-thin-light-gray flex flext-start gap-1">
+                          Reward:
+                          <span className="text-purple ml-1">{thePrice}</span>
+                        </span>
+                        <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
+                          <span className="text-sm text-thin-light-gray">
+                            Duration:
+                            <span className="text-purple ml-1">
+                              {Number(task?.timeline_days) === 1
+                                ? `${task?.timeline_days} day`
+                                : `${task?.timeline_days} day(s)`}
+                            </span>
+                          </span>
+                          <span className="text-sm text-thin-light-gray">
+                            Due Date:
+                            <span className="text-purple ml-1">{dueDate}</span>
+                          </span>
+                          <span className="text-sm text-thin-light-gray">
+                            Confirmation:
+                            <span className="text-purple ml-1">
+                              {task?.contract}
+                            </span>
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-center items-center py-4 px-2">
+                    {accountType ?
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigate("/manage-active-job", {
+                            state: { ...task, pathname },
+                          });
+                        }}
+                        className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        {task.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
+                      </button>
+                      :
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigate("/manage-active-job", {
+                            state: { ...task, pathname },
+                          });
+                        }}
+                        className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 11 20"
+                          id="Arrow"
+                          className="w-[0.7rem]"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                            // fill=""
+                            className="color000000 svgShape fill-[#fff]"
+                          ></path>
+                        </svg>
+                      </button>
+                    }
+                  </div>
+                </div>
+              );
+            })
+          :
+            <div
+              className={`flex flex-col ${
+                accountType ? "items-center" : "items-end"
+              } justify-center gap-9 my-5`}
+            >
+              <div
+                className={`p-2 font-bold text-3xl ${
+                  accountType ? "text-white" : "text-sky-blue"
+                } whitespace-nowrap`}
+              >
+                You currently have {accountType ? '"0"' : "no"} Past due task
+              </div>
+              <div
+                className={`
+                  ${!accountType &&
+                  "bg-[#f0f8ff] h-[17rem] p-5 rounded-md -translate-x-20"}
+                `}
+              >
+                <button
+                  className={`${
+                    !accountType
+                      ? "w-[150px] h-20 bg-[#22b14c] text-lg font-semibold rounded-md py-2 px-4"
+                      : "w-[115px] h-11 btn-gradient rounded-full"
+                  } flex justify-center items-center text-base text-white`}
+                  onClick={navigateMarket}
+                >
+                  {btnLoader ? (
+                    <div className="signup btn-loader"></div>
+                  ) : accountType ? (
+                    "Find Task"
+                  ) : (
+                    "Suggest tasks to your parent"
+                  )}
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+          onClick={handlePagination}
+          prev={currentPage == 0 ? true : false}
+          next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            recentPastDue?.data?.result_list?.length
+              ? true
+              : false
+          }
+          data={recentPastDue?.data?.result_list}
+          start={indexOfFirstItem}
+          stop={indexOfLastItem}
+        />
+        {/* END OF PAGINATION BUTTON */}
+      </div>
+      }
+    </div>
+  );
+}
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import Layout from "../Partials/Layout";
+import RecentPastDueTable from "./RecentPastDueTable";
+import CommonHead from "../UserHeader/CommonHead";
+import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
+
+export default function RecentlyPastDue({
+  imageServer,
+  recentPastDue,
+  commonHeadData,
+}) {
+  const { userDetails } = useSelector(
+    (state) => state?.userDetails
+  );
+
+  const navigate = useNavigate()
+
+  const [selectTab, setValue] = useState("today");
+  const filterHandler = (value) => {
+    setValue(value);
+  };
+
+  let accountType = userDetails?.account_type == "FULL"
+
+  return (
+    <Layout>
+      {userDetails?.account_type == 'FULL' &&
+        <CommonHead commonHeadData={commonHeadData} />
+      }
+      
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+            <div className="w-full mb-5 flex justify-between items-center gap-1">
+                <CustomBreadcrumb 
+                    title = 'Past Due Tasks'
+                    breadcrumb={
+                    [
+                        { link: "/", title: "Home" },
+                        { link: "/mytask", title: "My Tasks", active: true},
+                    ]
+                    }
+                />
+                {/* } */}
+
+                {/* <div className='flex gap-4 justify-end'>
+                    <>
+                    <Link
+                        to='/mytask?tab=pastdue'
+                        className="px-4 h-10 flex justify-center items-center text-lg md:text-xl rounded-xl text-red-600"
+                    >
+                        Past Due
+                    </Link>
+
+                    {ActiveJobList?.data?.length > 0 && userDetails.account_type == 'FAMILY' &&
+                        <button
+                        type="button"
+                        onClick={() => {
+                            navigate("/familymarket");
+                        }}
+                        className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        >
+                        More Task
+                        </button>
+                    }
+                    </>
+                </div> */}
+            </div>
+
+          <RecentPastDueTable recentPastDue={recentPastDue} Account={userDetails} imageServer={imageServer} />
+        </div>
+      </div>
+    </Layout>
+  );
+}
@@ -5,7 +5,7 @@ import CommonHead from "../UserHeader/CommonHead";
 // import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
 import MyOffersTable from "./MyOffersTable";
 import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";

 export default function MyTasks({
@@ -37,7 +37,7 @@ export default function MyTasks({
      <div className="notification-page w-full mb-10">
        <div className="notification-wrapper w-full">
          {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
+          <div className="sm:flex justify-between items-center hidden">
            {/* <div className="w-full mb-5 sm:mb-0 flex justify-between items-center gap-1">
              {userDetails.account_type == 'FAMILY' &&
              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
@@ -94,18 +94,32 @@ export default function MyTasks({
                  }
                />
              {/* } */}
+              <div className='flex gap-4 justify-end'>
+                <>
+                  <Link
+                    // onClick={() => {
+                    //   navigate(`/mytask?tab=pastdue`);
+                    // }}
+                    to='/mytask?tab=pastdue'
+                    className="px-4 h-10 flex justify-center items-center text-lg md:text-xl rounded-xl text-red-600"
+                  >
+                    Past Due
+                  </Link>
+
+                  {ActiveJobList?.data?.length > 0 && userDetails.account_type == 'FAMILY' &&
+                    <button
+                      type="button"
+                      onClick={() => {
+                        navigate("/familymarket");
+                      }}
+                      className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                    >
+                      More Task
+                    </button>
+                  }
+                </>
+              </div>

-              {ActiveJobList?.data?.length > 0 && userDetails.account_type == 'FAMILY' &&
-                <button
-                  type="button"
-                  onClick={() => {
-                    navigate("/familymarket");
-                  }}
-                  className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                >
-                  More Task
-                </button>
-              }
            </div>

          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} imageServer={MyActiveOffersList.session_image_server} />
@@ -65,7 +65,7 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
                                </h1>
                                <div>{value.description}</div>
                                <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                  <span className="text-purple">
                                    {thePrice}
                                  </span>
@@ -1,12 +1,7 @@
-import { useSelector } from "react-redux";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import WalletItemCard from "./WalletItemCard";
-import WalletItemCardFamily from "./WalletItemCardFamily";
 import { useEffect, useState } from "react";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import SearchCom from "../Helpers/SearchCom";
-import { localImgLoad } from "../../lib";
 import background from "../../assets/images/bg-sky-blue.jpg";
+import { localImgLoad } from "../../lib";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";

 /**
@@ -14,29 +9,32 @@ import FamilyWalletRedeemOptions from "./FamilyWalletRedeemOptions";
 */
 export default function FamilyWalletBox({ wallet, payment }) {
  // const { loading, data } = wallet;
-  
+
  // const { userDetails } = useSelector((state) => state.userDetails);
  // const accountType = userDetails?.account_type === "FAMILY";
-  
-  const [selectedWallet, setSelectedWallet] = useState('')

-  const [activeWalletBtn, setActiveWalletBtn] = useState('')
-  
-  const handleChangeWallet = ({target:{name}}) => {  // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
-    const currentWalletSelected = wallet?.data?.filter((item) => item.code == name);
-    setSelectedWallet(currentWalletSelected[0])
-    setActiveWalletBtn(name)
+  const [selectedWallet, setSelectedWallet] = useState("");
+
+  const [activeWalletBtn, setActiveWalletBtn] = useState("");
+
+  const handleChangeWallet = ({ target: { name } }) => {
+    // FUNCTION TO SWITCH WALLET IF USER HAS MORE THAN TWO WALLETS
+    const currentWalletSelected = wallet?.data?.filter(
+      (item) => item.code == name
+    );
+    setSelectedWallet(currentWalletSelected[0]);
+    setActiveWalletBtn(name);
    // console.log(name, currentWalletSelected)
-  }
+  };

  const image = selectedWallet?.code
-  ? `${selectedWallet?.code.toLowerCase()}.svg`
-  : "default.png";
+    ? `${selectedWallet?.code.toLowerCase()}.svg`
+    : "default.png";

-  useEffect(()=>{
-    setSelectedWallet(wallet.data[0])
-    setActiveWalletBtn(wallet?.data[0]?.code)
-  },[wallet])
+  useEffect(() => {
+    setSelectedWallet(wallet.data[0]);
+    setActiveWalletBtn(wallet?.data[0]?.code);
+  }, [wallet]);

  return (
    <div className="w-full">
@@ -44,31 +42,38 @@ export default function FamilyWalletBox({ wallet, payment }) {
        <div className="main-wrapper w-full mb-10">
          <div className="w-full mb-10 sm:grid grid-cols-2 gap-4">
            <div className="w-full mb-4 sm:mb-0 rounded-2xl bg-white dark:bg-dark-white overflow-hidden">
-              {wallet?.loading ? 
+              {wallet?.loading ? (
                <div className="w-full h-full flex items-center justify-center bg-white">
-                  <LoadingSpinner size="16" color="sky-blue" height='min-h-[240px]' />
+                  <LoadingSpinner
+                    size="16"
+                    color="sky-blue"
+                    height="min-h-[240px]"
+                  />
                </div>
-                : wallet?.data.length > 0 ?
+              ) : wallet?.data.length > 0 ? (
                <>
-                {wallet?.data?.length > 1 && 
-                  <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
-                    {wallet?.data?.map(item =>(
-                      <button 
-                        className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${activeWalletBtn == item?.code && 'bg-orange-500'}`} 
-                        key={item?.wallet_uid} 
-                        name={item?.code}
-                        onClick={handleChangeWallet}
-                      >
-                        {item?.description}
-                      </button>
-                    ))}
-                  </div>
-                  }
-                  <div className="p-5 bg-white-opacity min-h-[240px]"
-                      style={{
-                        background: `url(${background}) 0% 0% / cover no-repeat`,
-                      }}
-                    >
+                  {wallet?.data?.length > 1 && (
+                    <div className="wal-selection px-5 py-2 text-black dark:text-white flex items-center gap-2">
+                      {wallet?.data?.map((item) => (
+                        <button
+                          className={`py-0.5 px-1 mb-1 rounded-lg border border-orange-500 ${
+                            activeWalletBtn == item?.code && "bg-orange-500"
+                          }`}
+                          key={item?.wallet_uid}
+                          name={item?.code}
+                          onClick={handleChangeWallet}
+                        >
+                          {item?.description}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                  <div
+                    className="p-5 bg-white-opacity min-h-[240px]"
+                    style={{
+                      background: `url(${background}) 0% 0% / cover no-repeat`,
+                    }}
+                  >
                    {/* image */}
                    <div className="min-w-[100px] min-h-[100px] max-w-min md:max-w-[100px] max-h-min md:max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
                      <img
@@ -77,21 +82,30 @@ export default function FamilyWalletBox({ wallet, payment }) {
                        alt="currency-icon"
                      />
                    </div>
-                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">Current Balance</p>
+                    <p className="text-base sm:text-lg text-white opacity-[70%] tracking-wide my-3">
+                      Current Balance
+                    </p>
                    <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10">
-                      {PriceFormatter(selectedWallet?.amount/100, selectedWallet?.code, undefined, "text-[2rem]")}
+                      {Formatter(
+                        selectedWallet?.amount / 100,
+                        selectedWallet?.code,
+                        undefined,
+                        "text-[2rem]"
+                      )}
                    </p>
                  </div>
                </>
-                :
+              ) : (
                <div className="w-full h-full flex justify-center items-center rounded-2xl bg-white">
                  <p>No Wallet Record Found</p>
                </div>
-              }
+              )}
+            </div>
+            <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
+              <h1 className="text-xl font-bold text-black dark:text-white">
+                Recent Activities
+              </h1>
            </div>
-              <div className="p-5 w-full rounded-2xl bg-white dark:bg-dark-white text-black dark:text-white h-full min-h-[240px] max-h-96">
-                <h1 className="text-xl font-bold text-black dark:text-white">Recent Activities</h1>
-              </div>
          </div>
        </div>
        <div className="w-full">
@@ -102,7 +116,6 @@ export default function FamilyWalletBox({ wallet, payment }) {
  );
 }

-
 // data.length>0 && data.map((item) => (
 //   <div key={item.wallet_uid} className="w-full h-full mb-10 ">
 //     {/* <WalletItemCardFamily walletItem={item} payment={payment} countries={countries} /> */}
@@ -3,6 +3,8 @@ import React, {useState} from 'react'
 import PaginatedList from '../../Pagination/PaginatedList';
 import { handlePagingFunc } from '../../Pagination/HandlePagination';

+import { currencySymbol } from '../../Helpers/PriceFormatter';
+
 function PurchasesTable({purchase}) {

    const [currentPage, setCurrentPage] = useState(0);
@@ -15,7 +17,7 @@ function PurchasesTable({purchase}) {
    }

  return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
        {purchase.data.length ?
        <table className="wallet-activity w-full table-auto border-collapse text-left">
            <thead className='w-full'>
@@ -31,8 +33,8 @@ function PurchasesTable({purchase}) {
                    <td className="p-4">{item.added_date}<br />
                    <b>{item.confirmation} </b>
                    </td>
-                    <td className="p-4 text-right">{item.amount}</td>
-                    <td className="p-4 text-right">{item.fee}</td>
+                    <td className="p-4 text-right">{currencySymbol('', item.amount)}</td>
+                    <td className="p-4 text-right">{currencySymbol('', item.fee)}</td>
                </tr>
                ))}
            </tbody>
@@ -48,7 +50,7 @@ function PurchasesTable({purchase}) {
        }

    {/* PAGINATION BUTTON */}
-    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
    {/* END OF PAGINATION BUTTON */}
    </div>
  )
@@ -3,6 +3,8 @@ import React, { useState } from "react";
 import PaginatedList from "../../Pagination/PaginatedList";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";

+import { currencySymbol } from '../../Helpers/PriceFormatter';
+
 function RecentActivityTable({ payment }) {
  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
@@ -18,7 +20,7 @@ function RecentActivityTable({ payment }) {
  };

  return (
-    <div className="flex flex-col justify-between min-h-[500px]">
+    <div className="py-4 flex flex-col justify-between min-h-[500px]">
      {payment?.data?.length > 0 ? 
        <table className="wallet-activity w-full table-auto border-collapse text-left">
          <thead className="w-full">
@@ -38,9 +40,9 @@ function RecentActivityTable({ payment }) {
                  dangerouslySetInnerHTML={{ __html: item.recipient }}
                ></td>
                <td className="p-4 text-right">
-                  {item.amount}
+                  {currencySymbol('', item.amount)}
                  <br />
-                  {item.fee}
+                  {currencySymbol('', item.fee)}
                </td>
                <td className="p-4">{item.status}</td>
              </tr>
@@ -70,7 +72,6 @@ function RecentActivityTable({ payment }) {
        data={payment?.data}
        start={indexOfFirstItem}
        stop={indexOfLastItem}
-        borderTop={false}
      />
      {/* END OF PAGINATION BUTTON */}
    </div>
@@ -165,7 +165,7 @@ export default function ManageInterestOffer(props) {

                    {/* manage offer section */}
                    <div className="w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
-                        <div className="my-2 w-full sm:grid gap-5 grid-cols-4">
+                        <div className="my-2 w-full md:grid gap-5 grid-cols-4">
                            {/* Detail section */}
                            <div className="w-full mb-5 lg:mb-0 col-span-3">
                                <div className="w-full flex justify-start space-x-3 items-center">
@@ -232,14 +232,18 @@ export default function ManageInterestOffer(props) {
                                    <div className="info-details w-full border-t">
                                        <div className="my-0 md:my-3 block md:flex items-center gap-10">
                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Name</p>
-                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</p>
+                                                <p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
+                                                    Name : {' '}
+                                                    <span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                                </p>
                                            </div>
                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                                <p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Member Since</p>
-                                                <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">
-                                                    {clientAdded.getFullYear()}{" - "}
-                                                    {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                <p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
+                                                    Member Since : {' '}
+                                                    <span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">
+                                                        {clientAdded.getFullYear()}{" - "}
+                                                        {clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
+                                                    </span>
                                                </p>
                                            </div>
                                        </div>
@@ -248,35 +252,35 @@ export default function ManageInterestOffer(props) {
                                            <LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
                                            :
                                            <>
-                                                <div className='w-full'>
+                                                <div className='w-full my-3 md:my-0'>
                                                    <h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
                                                </div>
-                                                <div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl rounded-2xl bg-sky-100'>
+                                                <div className='p-2 w-full md:max-w-xl flex flex-col md:flex-row gap-4 justify-center items-center rounded-2xl bg-sky-100'>
                                                    <div className='contents md:flex flex-col gap-3'>
-                                                        <div className='flex items-center gap-4'>  
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed:</p>
+                                                        <div className='flex items-center gap-1'>  
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed :</p>
                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
                                                        </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active :</p>
                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
                                                        </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion :</p>
                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
                                                        </div>
                                                    </div>
                                                    <div className='contents md:flex flex-col gap-3'>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed:</p>
-                                                            <p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed :</p>
+                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
                                                        </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted :</p>
                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
                                                        </div>
-                                                        <div className="flex items-center gap-4">
-                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers:</p>
+                                                        <div className="flex items-center gap-1">
+                                                            <p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers :</p>
                                                            <p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
                                                        </div>
                                                    </div>
@@ -392,7 +396,7 @@ export default function ManageInterestOffer(props) {

                            <div className="p-4 w-full min-h-full bg-sky-100 rounded-2xl dark:bg-dark-gray col-span-1">
                                {/* Wallet balance and reward */}
-                                <div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
+                                <div className='mb-4 border-b-2 flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-4'>
                                    <div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
                                        <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
                                        <span className="font-medium text-dark-gray dark:text-white">{ walletDetails?.loading ? 'loading...' : PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
@@ -404,7 +408,7 @@ export default function ManageInterestOffer(props) {
                                </div>
                                {/* BUTTON section */}
                                <div className="w-full">
-                                    <div className="h-full flex sm:flex-col justify-center items-center gap-10">
+                                    <div className="h-full flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-10">
                                        {requestStatus.loading && requestStatus.processType == 'accept' ?
                                            <LoadingSpinner color='sky-blue' size='10' />
                                        :    
@@ -126,8 +126,8 @@ export default function OffersInterestTable({offerInterestList, className}) {
                    )
                    :
                    (
-                        <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
-                            <p className="mb-4 p-3">No list avaliable.</p>
+                        <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            <p className="p-2">No list avaliable.</p>
                        </div>
                    )
            }
@@ -65,11 +65,11 @@ export default function OthersInterestTable({othersInterestedList, className}) {
                                <tr key={index} className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
                                    <td className=" py-4">
                                        <div className="flex space-x-2 items-center">
-                                            <div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                            <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                                <img
                                                    src={image}
                                                    alt="data"
-                                                    className="w-full h-full"
+                                                    className="w-full h-full rounded-full"
                                                />
                                            </div>
                                            <div className="flex flex-col">
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import DarkModeContext from "../Contexts/DarkModeContext";
+import axios from 'axios'

 function Default({ children }) {
  // dark mode setup
@@ -12,6 +13,32 @@ function Default({ children }) {
  const queryParams = new URLSearchParams(location?.search);
  const country = queryParams.get("cnt")?.toUpperCase();

+  const getLocation = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (data) => {
+          const pos = data.coords;
+          const position = {
+            lat: pos.latitude,
+            long: pos.longitude,
+          };
+          axios.get(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${position.lat}&lon=${position.long}&zoom=18&addressdetails=1`).then(res =>{
+            localStorage.setItem("myloc", res?.data?.address?.country);
+            // console.log('LOC', res?.data?.address?.country)
+            // localStorage.setItem("myloc", JSON.stringify(position));
+          }).catch(err => {
+            console.log('ERR', err)
+          })
+        },
+        (err) => {
+          localStorage.setItem("myloc", JSON.stringify('not supported'));
+        }
+      );
+    } else {
+      localStorage.setItem("myloc", JSON.stringify('not supported'));
+    }
+  }
+
  useEffect(() => {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      setTheme("dark");
@@ -39,6 +66,10 @@ function Default({ children }) {
    }
  },[countryMode])

+  useEffect(()=>{
+    getLocation()
+  },[])
+
  return (
    <>
      <DarkModeContext.Provider value={{ theme, handleThemeSwitch, countryMode }}>
@@ -413,7 +413,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                        </div>
                      </Link>
                    </li>
-                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    {(userDetails && userDetails?.account_type !== "FAMILY" && Number(process.env.REACT_APP_SHOW_USER_PAGE) == 1) && (
                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                        <Link to="/yourpage" className="notifications">
                          <div className="name">
@@ -457,7 +457,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                        </div>
                      </Link>
                    </li>
-                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                    {(userDetails && userDetails?.account_type !== "FAMILY" && Number(process.env.REACT_APP_SHOW_USER_PAGE) == 1) && (
                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                        <Link to="/yourpage" className="notifications">
                          <div className="name">
@@ -323,7 +323,7 @@ export default function RightSideBar({ myJobList }) {
                  {/* name */}
                  <div>
                    <p className="text-thin-light-gray text-base font-medium">
-                      <NavLink to="/offer-interest">Offers Interest</NavLink>
+                      <NavLink to="/offer-interest">Interest</NavLink>
                    </p>
                  </div>
                  {/* action */}
@@ -7,6 +7,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import ReferralTable from "../MyWallet/WalletComponent/ReferralTable";
+import TabButton from "../customTabs/TabButton";

 const validationSchema = Yup.object().shape({
  ref_email: Yup.string()
@@ -105,13 +106,27 @@ function ReferralDisplay() {
    sendReferralMsg({...values}); // FUNCTION TO SEND REFERRAL MESSAGE
  };

+  const [selectedTab, setSelectedTab] = useState("Send Referral");
+  const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+      {
+        id: 1,
+        title: "Send Referral",
+        iconName: "history",
+      },
+      {
+        id: 2,
+        title: "Referral List",
+        iconName: "history",
+      },
+  ]
+
  useEffect(() => {
    allReferrals();
  }, [refHistoryReload]);

  return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
-      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+    <>
+      <div className='w-full'>
        <div className="sm:flex justify-between items-center mb-6">
          <div className="mb-5 sm:mb-0">
            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
@@ -119,111 +134,138 @@ function ReferralDisplay() {
            </h1>
          </div>
        </div>
-
-        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Send Referral
-          </h2>
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSubmit}
-          >
-            {(props) => (
-              <Form className="referral-info">
-                <div className="block md:mb-6 md:flex gap-10">
-                  {/* Firstname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Firstname"
-                      type="text"
-                      name="ref_firstname"
-                      placeholder="Firstname"
-                      value={props.values.ref_firstname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_firstname &&
-                      props.touched.ref_firstname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_firstname}
-                        </p>
-                      )}
-                  </div>
-
-                  {/* Lastname */}
-                  <div className="field w-full mb-6 md:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      label="Lastname"
-                      type="text"
-                      name="ref_lastname"
-                      placeholder="Lastname"
-                      value={props.values.ref_lastname}
-                      inputHandler={props.handleChange}
-                      blurHandler={props.handleBlur}
-                    />
-                    {props.errors.ref_lastname &&
-                      props.touched.ref_lastname && (
-                        <p className="text-sm text-red-500">
-                          {props.errors.ref_lastname}
-                        </p>
-                      )}
-                  </div>
-                </div>
-
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Email"
-                    type="text"
-                    name="ref_email"
-                    placeholder="Email"
-                    value={props.values.ref_email}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.ref_email && props.touched.ref_email && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.ref_email}
-                    </p>
-                  )}
-                </div>
-
-                <hr />
-                {error.message != "" && (
-                  <p className="text-base text-red-500 py-2">{error.message}</p>
-                )}
-                <div className="referral-btn flex justify-end items-center py-4 border-b-4">
-                  {error.loading ? (
-                    <LoadingSpinner size="6" color="sky-blue" />
-                  ) : (
-                    <button
-                      type="submit"
-                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                      Send Message
-                    </button>
-                  )}
-                </div>
-              </Form>
-            )}
-          </Formik>
+      </div>
+      <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+        <div className="content-tab-items lg:w-[230px] w-full mr-2">
+            <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+                {tabs.map((item) => (
+                    <div key={item.id} className='w-full'>
+                        <TabButton 
+                            key={item.id}
+                            item={item.title}
+                            iconName={item.iconName}
+                            selectedTab={selectedTab}
+                            setSelectedTab={setSelectedTab}
+                        />
+                    </div>
+                ))}
+            </div>
        </div>
+        <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+        <div className="flex-1 overflow-y-auto min-h-[520px]">
+          <>
+            {selectedTab == 'Send Referral' &&
+              <div className="referral w-full p-4">
+                <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                  Send Referral
+                </h2>
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema}
+                  onSubmit={handleSubmit}
+                >
+                  {(props) => (
+                    <Form className="referral-info">
+                      <div className="block md:mb-6 md:flex gap-10">
+                        {/* Firstname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Firstname"
+                            type="text"
+                            name="ref_firstname"
+                            placeholder="Firstname"
+                            value={props.values.ref_firstname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_firstname &&
+                            props.touched.ref_firstname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_firstname}
+                              </p>
+                            )}
+                        </div>

-        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Referral List
-          </h2>
-          {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
-          ) : (
-            <ReferralTable history={referralList} />
-          )}
+                        {/* Lastname */}
+                        <div className="field w-full mb-6 md:mb-0">
+                          <InputCom
+                            fieldClass="px-6"
+                            label="Lastname"
+                            type="text"
+                            name="ref_lastname"
+                            placeholder="Lastname"
+                            value={props.values.ref_lastname}
+                            inputHandler={props.handleChange}
+                            blurHandler={props.handleBlur}
+                          />
+                          {props.errors.ref_lastname &&
+                            props.touched.ref_lastname && (
+                              <p className="text-sm text-red-500">
+                                {props.errors.ref_lastname}
+                              </p>
+                            )}
+                        </div>
+                      </div>
+
+                      <div className="field w-full mb-6">
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Email"
+                          type="text"
+                          name="ref_email"
+                          placeholder="Email"
+                          value={props.values.ref_email}
+                          inputHandler={props.handleChange}
+                          blurHandler={props.handleBlur}
+                        />
+                        {props.errors.ref_email && props.touched.ref_email && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.ref_email}
+                          </p>
+                        )}
+                      </div>
+
+                      <hr />
+                      {error.message != "" && (
+                        <p className="text-base text-red-500 py-2">{error.message}</p>
+                      )}
+                      <div className="referral-btn flex justify-end items-center py-4">
+                        {error.loading ? (
+                          <LoadingSpinner size="6" color="sky-blue" />
+                        ) : (
+                          <button
+                            type="submit"
+                            className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                          >
+                            Send Message
+                          </button>
+                        )}
+                      </div>
+                    </Form>
+                  )}
+                </Formik>
+              </div>
+            }
+
+            {selectedTab == 'Referral List' &&
+              <>
+                <div className="w-full p-4">
+                  <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                    Referral List
+                  </h2>
+                  {referralList.loading ? (
+                    <LoadingSpinner size="22" color="sky-blue" />
+                  ) : (
+                    <ReferralTable history={referralList} />
+                  )}
+                </div>
+              </>
+            }
+          </>
        </div>
      </div>
-    </div>
+    </>
  );
 }

@@ -120,7 +120,7 @@ export default function ChangePasswordTab() {
              className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
              htmlFor="old_password"
            >
-              Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
+              Current Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
            </label>
            <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
              <div className="absolute left-6 bottom-[17px] z-10">
@@ -0,0 +1,43 @@
+import React from "react";
+import Icons from "../../Helpers/Icons";
+
+export default function Preferences() {
+  return (
+    <div className="login-activity-tab w-full">
+      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          {/* <thead>
+            <tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29]  default-border-b ">
+              <td className="py-4 text-center">Channel</td>
+              <td className="py-4 text-center">Date</td>
+              <td className="py-4 text-center">Location</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+              <td className="text-center py-4">
+                <div className="flex items-center justify-center">
+                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
+                    Desktop
+                  </span>
+                </div>
+              </td>
+              <td className="text-center py-4">
+                <div className="flex space-x-1 items-center justify-center">
+                  <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap px-2">
+                    10-10-2035
+                  </span>
+                </div>
+              </td>
+              <td className="text-center py-4">
+                <span className="text-base text-dark-gray dark:text-white whitespace-nowrap px-2">
+                  10.0.0.1000
+                </span>
+              </td>
+            </tr>
+          </tbody> */}
+        </table>
+      </div>
+    </div>
+  );
+}
@@ -80,7 +80,7 @@ export default function RecipientAccountTab({
              })
            ) : (
              <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                No Cards Found
+                No Recipient on this account yet.
              </h1>
            )}
          </ul>
@@ -7,6 +7,7 @@ import PersonalInfoTab from "./PersonalInfoTab";
 import PrivacyPolicyTab from "./PrivacyPolicyTab";
 import RecentActivitiesTab from "./RecentActivitiesTab";
 import TermsConditionTab from "./TermsConditionTab";
+import Preferences from './Preferences'

 export {
  ChangePasswordTab,
@@ -18,4 +19,5 @@ export {
  PrivacyPolicyTab,
  RecentActivitiesTab,
  TermsConditionTab,
+  Preferences
 };
@@ -13,6 +13,7 @@ import {
  PrivacyPolicyTab,
  RecentActivitiesTab,
  TermsConditionTab,
+  Preferences,
 } from "./Tabs";
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";

@@ -91,8 +92,8 @@ export default function Settings({ faq }) {
    },
    {
      id: 5,
-      name: "login_activity",
-      title: "Login Activity",
+      name: "preferences",
+      title: "Preferences",
      iconName: "login-activity",
    },
    {
@@ -166,7 +167,7 @@ export default function Settings({ faq }) {
        <NotificationSettingTab />
      </div>
    ),
-    login_activity: <LoginActivityTab />,
+    preferences: <Preferences />,
    recent_activities: <RecentActivitiesTab />,
    password: <ChangePasswordTab />,
    faq: <FaqTab datas={faq} />,
@@ -1,25 +1,22 @@
 import React from 'react'
+import Icons from '../Helpers/Icons'

-export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
+export default function TabButton({ item='', iconName='', selectedTab='', setSelectedTab=()=>{} }) {
  return (
    <button
-      className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
-        selectedTab === item
-          ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
-          : "bg-white text-[#000]"
+      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+        selectedTab === item ? "text-purple" : " text-thin-light-gray"
      }`}
      value={item}
      name={item}
      onClick={() => setSelectedTab(item)}
    >
-      <div
-        className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
-          selectedTab === item
-            ? "border-white bg-emerald-500"
-            : "border-red-50 dark:border-[#D85A5A] bg-white"
-        }`}
-      ></div>
-      {item[0].toUpperCase() + item.slice(1)}
+      <div>
+        <Icons name={iconName} />
+      </div>
+      <div>
+        <p className="text-18 tracking-wide">{item[0]?.toUpperCase() + item?.slice(1)}</p>
+      </div>
    </button>
  )
 }
@@ -119,7 +119,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
              {details.title}
            </p>
            <p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
-              <span className="job-label">Price: </span>{details.thePrice}
+              <span className="job-label">Reward: </span>{details.thePrice}
            </p>
            <p className="text-lg tracking-wide text-dark-gray dark:text-white">
              <span className="job-label">Duration: </span>{details.timeline_days} day(s)
@@ -27,7 +27,7 @@ const validationSchema = Yup.object().shape({
    .required("Price is required"),
  title: Yup.string()
    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
    .required("Title is required"),
  description: Yup.string()
    .min(5, "Minimum 5 characters")
@@ -273,7 +273,7 @@ const EditJobPopOut = ({
                          <div className="field w-full">
                            <InputCom
                              fieldClass="px-6 text-right"
-                              label="Price"
+                              label="Reward"
                              labelClass="tracking-wide"
                              inputBg="bg-slate-100"
                              inputClass="input-curve lg border border-light-purple"
@@ -28,7 +28,7 @@ const validationSchema = Yup.object().shape({
    .required("Price is required"),
  title: Yup.string()
    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
    .required("Title is required"),
  description: Yup.string()
    .min(5, "Minimum 5 characters")
@@ -274,7 +274,7 @@ const EditJobPopoutNew = ({
                                <div className="field w-full mb-[0.5rem] sm:mb-0">
                                <InputCom
                                    fieldClass="px-6 text-right"
-                                    label="Price"
+                                    label="Reward"
                                    labelClass="tracking-wide"
                                    inputBg="bg-slate-100"
                                    inputClass="input-curve lg border border-light-purple"
@@ -186,7 +186,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
                    </div>

                    <div className="my-2 md:flex">
-                    <Detail label="Price" value={details.thePrice} />
+                    <Detail label="Reward" value={details.thePrice} />
                    </div>

                    <div className="my-2 md:flex">
@@ -10,17 +10,19 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
 import { SocketValues } from "../Contexts/SocketIOContext";

+// .required("This is required ")
+
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("This is required "),
+  family: Yup.string(),
  public: Yup.string(),
  individual: Yup.string()
    .email("Invalid email format")
    .matches(
      /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
      "Invalid email format"
-    )
-    .required("Email is required"),
+    ),
  group: Yup.string(),
+  depend_uid: Yup.string(),
 });

 function JobListPopout({
@@ -29,6 +31,7 @@ function JobListPopout({
  situation,
  openWallet,
  setWalletItem,
+  myJobList
 }) {

  let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
@@ -46,12 +49,7 @@ function JobListPopout({
  const [familyList, setFamilyList] = useState([]);
  let [loader, setLoader] = useState({
    member: false,
-    jobFields: {
-      family: false,
-      public: false,
-      individual: false,
-      group: false,
-    },
+    jobFields: false
  });

  const apiCall = useMemo(() => new usersService(), []);
@@ -106,6 +104,7 @@ function JobListPopout({
    public: "",
    individual: "",
    group: "",
+    depend_uid: ''
  };

  let [textArea, setTextArea] = useState(details?.job_detail);
@@ -136,11 +135,12 @@ function JobListPopout({
    } finally {
      setTimeout(() => {
        setErrMsg({ jobFields: "" });
-      }, 3000);
+      }, 5000);
    }
  };

  const jobFieldHandler = async (values, helpers) => {
+    setLoader({ jobFields: true });
    let { job_id, job_uid } = details;

    if (!textArea) {
@@ -163,15 +163,14 @@ function JobListPopout({
        family_uid: values?.family,
        assign_mode: 110011,
      };
-      setLoader({ jobFields: { family: true } });
    } else if (values?.public !== "") {
      // for public input
      reqData = {
        ...jobReq,
        duration: Number(values?.public),
        assign_mode: 110022,
+        depend_uid: values?.depend_uid
      };
-      setLoader({ jobFields: { public: true } });
    } else if (values?.individual !== "") {
      // for individual input
      reqData = {
@@ -179,7 +178,6 @@ function JobListPopout({
        email: values?.individual,
        assign_mode: 110033,
      };
-      setLoader({ jobFields: { individual: true } });
    } else if (values?.group !== "") {
      // for group input
      reqData = {
@@ -190,8 +188,8 @@ function JobListPopout({
        duration: details?.timeline_days,
        // duration: 0,
      };
-      setLoader({ jobFields: { group: true } });
    } else {
+      setLoader({ jobFields: false });
      return;
    }

@@ -203,7 +201,7 @@ function JobListPopout({
        return setTimeout(() => {
          setLoader({ jobFields: false });
          setRequestStatus({ message: "", status: false });
-        }, 3000);
+        }, 5000);
      }
      marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
      dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
@@ -213,14 +211,14 @@ function JobListPopout({
        setLoader({ jobFields: false });
        onClose();
        // throw new Response(data);
-      }, 3000);
+      }, 5000);
    } catch (error) {
      setRequestStatus({ message: "Unable to complete", status: false });
      setTimeout(() => {
        setRequestStatus({ message: "", status: false });
        setLoader({ jobFields: false });
        throw new Error(error);
-      }, 3000);
+      }, 5000);
    }
  };

@@ -265,7 +263,7 @@ function JobListPopout({
  const DetailsComponent = () => {
    const detailsArray = [
      { label: "Description", value: details.description },
-      { label: "Price", value: details.thePrice },
+      { label: "Reward", value: details.thePrice },
      { label: "Timeline", value: `${details.timeline_days} day(s)` },
      { label: "Created", value: new Date(details?.created).toDateString() },
    ];
@@ -355,142 +353,198 @@ function JobListPopout({
                    ))}
                  </div>
                  <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
-                    {selectedTab == "family" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.family}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="hidden">
-                              {/* Assign to Family */}
-                              <JobFieldInput
-                                label="Assign to family"
-                                select={true}
-                                inputName="family"
-                                value={props?.values.family}
-                                data={familyList}
-                                btnText="Assign to family"
-                                optionText="Select Family"
-                                loader={loader?.jobFields?.family}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values?.family === "" && (
-                                  <span>{errMsg?.jobFields?.family}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}

-                    {selectedTab == "public" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.public}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to public input */}
-                              <JobFieldInput
-                                label="Offer this job to public"
-                                select={true}
-                                inputName="public"
-                                value={props?.values.public}
-                                data={publicArray}
-                                btnText="Show Task to Public"
-                                optionText="Select Duration"
-                                loader={loader?.jobFields?.public}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.public === "" && (
-                                  <span>{errMsg?.jobFields?.public}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                    <Formik
+                      initialValues={initialValues}
+                      validationSchema={validationSchema.fields.public}
+                      onSubmit={jobFieldHandler}
+                    >
+                      {(props) => {
+                        return (
+                          <Form className="p-3">
+                            <div className='flex items-center justify-start mt-1 mb-2.5'>
+                              <label
+                                className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                                // htmlFor={''}
+                              >
+                                {selectedTab == 'family' ?
+                                  'Assign to family'
+                                  : selectedTab == 'public' ?
+                                  'Offer this job to public'
+                                  : selectedTab == 'individual' ?
+                                  'Offer this job to individual'
+                                  : selectedTab == 'group' ?
+                                  'Offer this job to your Group'
+                                  :
+                                  null
+                                }
+                              </label>
+                            </div>
+                            <div className='w-full'>
+                              {/* ASSIGN TO FAMILY */}
+                              {selectedTab == "family" && (
+                                <div className='hidden w-full'>
+                                  <JobFieldInput
+                                    select={true}
+                                    inputName="family"
+                                    value={props?.values.family}
+                                    data={familyList}
+                                    optionText="Select Family"
+                                    errorHandler={errorHandler}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values?.family === "" && (
+                                      <span>{errMsg?.jobFields?.family}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}

-                    {selectedTab == "individual" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.individual}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to individual input */}
-                              <JobFieldInput
-                                label="Offer this job to individual"
-                                input={true}
-                                inputName="individual"
-                                value={props?.values.individual}
-                                placeholder="Enter email of individual"
-                                inputHandler={props?.handleChange}
-                                btnText="Send Offer to Individual"
-                                loader={loader?.jobFields?.individual}
-                                errorHandler={errorHandler}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.individual === "" && (
-                                  <span>{errMsg?.jobFields?.individual}</span>
-                                )}
-                              </p>{" "}
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                              {/* ASSIGN TO PUBLIC/MARKET */}
+                              {selectedTab == "public" && (
+                                <div className='w-full'>
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Depends on</label>
+                                    {/* <JobFieldInput
+                                      input={true}
+                                      select={true}
+                                      inputName="depend_uid"
+                                      value={props?.values.depend_uid}
+                                      data={myJobList}
+                                      optionText="None"
+                                      parentClass="w-full flex flex-col gap-4"
+                                    /> */}
+                                    <div
+                                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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`}
+                                    >
+                                      <select 
+                                        className='px-2 w-full h-full bg-white border-0 outline-0'
+                                        name="depend_uid"
+                                        value={props?.values.depend_uid}
+                                        onChange={props.handleChange}
+                                      >
+                                        <>
+                                          {myJobList.loading ? (
+                                            <option value={""}>Loading...</option>
+                                          ) : myJobList?.data?.result_list?.length > 0 ? (
+                                            <>
+                                              <option value="">None</option>
+                                              {myJobList?.data?.result_list?.filter(item => item.job_uid != details.job_uid)?.map((item, index) => (
+                                                <option value={item?.job_uid} key={item.job_uid}>
+                                                  {item?.title}
+                                                </option>
+                                              ))}
+                                            </>
+                                          ) : (
+                                            <option value="">No Job Found</option>
+                                          )}
+                                        </>
+                                      </select>
+                                    </div>
+                                  </div>
+                                  
+                                  <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Duration <span className='text-red-600 tracking-wide'>{(props?.values.public === "" && errMsg?.jobFields?.public) && '*'}</span></label>
+                                    <div className='w-full'>
+                                      <JobFieldInput
+                                        select={true}
+                                        inputName="public"
+                                        value={props?.values.public}
+                                        data={publicArray}
+                                        optionText="Select Duration"
+                                        parentClass="w-full flex flex-col gap-4"
+                                      />
+                                      {/* <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                        {" "}
+                                        {props?.values.public === "" && (
+                                          <span>{errMsg?.jobFields?.public}</span>
+                                        )}
+                                      </p>{" "} */}
+                                    </div>
+                                  </div>
+                                </div>
+                              )}

-                    {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
-                    {selectedTab == "group" && (
-                      <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema.fields.group}
-                        onSubmit={jobFieldHandler}
-                      >
-                        {(props) => {
-                          return (
-                            <Form className="">
-                              {/* Offer this job to your group input */}
-                              <JobFieldInput
-                                label="Offer this job to your Group"
-                                select={true}
-                                inputName="group"
-                                value={props?.values.group}
-                                btnText="Send Order to Group"
-                                optionText="Select Group"
-                                loader={loader?.jobFields?.group}
-                                errorHandler={errorHandler}
-                                data={groupList}
-                                parentClass="w-full flex flex-col gap-4"
-                              />
-                              <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                                {" "}
-                                {props?.values.group === "" && (
-                                  <span>{errMsg?.jobFields?.group}</span>
-                                )}
-                              </p>
-                            </Form>
-                          );
-                        }}
-                      </Formik>
-                    )}
+                              {/* ASSIGN TO INDIVIDUAL */}
+                              {selectedTab == "individual" && (
+                                <div className='w-full'>
+                                  <JobFieldInput
+                                    input={true}
+                                    inputName="individual"
+                                    value={props?.values.individual}
+                                    placeholder="Enter email of individual"
+                                    inputHandler={props?.handleChange}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values.individual === "" && (
+                                      <span>{errMsg?.jobFields?.individual}</span>
+                                    )}
+                                  </p>{" "}
+                                </div>
+                              )}
+
+                              {/* ASSIGN TO GROUP */}
+                              {selectedTab == "group" && (
+                                <div className='w-full'>
+                                  <JobFieldInput
+                                    select={true}
+                                    inputName="group"
+                                    value={props?.values.group}
+                                    optionText="Select Group"
+                                    data={groupList}
+                                    parentClass="w-full flex flex-col gap-4"
+                                  />
+                                  <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                                    {" "}
+                                    {props?.values.group === "" && (
+                                      <span>{errMsg?.jobFields?.group}</span>
+                                    )}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                            <div className="mt-3 mb-1 flex justify-end items-center">
+                              <button
+                                className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+                                type="submit"
+                                name={
+                                  selectedTab == 'family' ?
+                                  'family'
+                                  : selectedTab == 'public' ?
+                                  'public'
+                                  : selectedTab == 'individual' ?
+                                  'individual'
+                                  : selectedTab == 'group' ?
+                                  'group'
+                                  :
+                                  null
+                                }
+                                onClick={errorHandler}
+                                // disabled={!value}
+                              >
+                                {loader?.jobFields ? 
+                                  <LoadingSpinner size={5} /> 
+                                  : selectedTab == 'family' ?
+                                  'Assign to family'
+                                  : selectedTab == 'public' ?
+                                  'Show Task to Public'
+                                  : selectedTab == 'individual' ?
+                                  'Send Offer to Individual'
+                                  : selectedTab == 'group' ?
+                                  'Send Order to Group'
+                                  :
+                                  null
+                                }
+                              </button>
+                            </div>
+                          </Form>
+                        );
+                      }}
+                    </Formik>
                    <p
                      className={`text-center w-full text-lg ${
                        requestStatus.status
@@ -530,30 +584,15 @@ const JobFieldInput = ({
  select,
  label,
  labelClass,
-  btnText,
  parentClass,
  optionText,
-  errorHandler,
-  loader,
  data,
 }) => {
  return (
-    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
+    <div className="field w-full flex flex-col justify-between gap-4">
      {select && (
        <>
          <div className={`input-com ${parentClass}`}>
-            <div
-              className={`flex items-center justify-start mb-2.5 ${labelClass}`}
-            >
-              {label && (
-                <label
-                  className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
-                  htmlFor={inputName}
-                >
-                  {label}
-                </label>
-              )}
-            </div>
            <div
              className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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 ${inputClass}`}
            >
@@ -616,8 +655,6 @@ const JobFieldInput = ({
      {input && (
        <InputCom
          fieldClass="px-6"
-          label={label}
-          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
          type="email"
          name={inputName}
          placeholder={placeholder}
@@ -627,25 +664,6 @@ const JobFieldInput = ({
          parentClass={`${parentClass}`}
        />
      )}
-
-      {/* btn */}
-      <div className="my-1 flex justify-end items-center">
-        <button
-          type="submit"
-          name={inputName}
-          onClick={errorHandler}
-          // className={`px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md ${
-          //   !value && "disabled:grayscale-[65%] transition duration-300"
-          // }`}
-          className={`px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white ${
-            !value && ""
-          }
-          `}
-          // disabled={!value}
-        >
-          {loader ? <LoadingSpinner size={5} /> : btnText}
-        </button>
-      </div>
    </div>
  );
 };
@@ -0,0 +1,472 @@
+import { Field, Form, Formik } from "formik";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import ModalCom from "../Helpers/ModalCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Detail from "./popoutcomponent/Detail";
+import { SocketValues } from "../Contexts/SocketIOContext";
+import JobFieldInput from "./popoutcomponent/JobFieldInput";
+import AssignToFamily from "./popoutcomponent/AssignToFamily";
+import AssignToIndividual from "./popoutcomponent/AssignToIndividual";
+import AssignToPublic from "./popoutcomponent/AssignToPublic";
+import AssignToGroup from "./popoutcomponent/AssignToGroup";
+
+function NewJobListPopout({
+  details,
+  onClose,
+  situation,
+  openWallet,
+  setWalletItem,
+  myJobList
+}) {
+
+  let {marketUpdate} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
+
+  const [selectedTab, setSelectedTab] = useState("public");
+  const tabs = ["public", "individual", "group"];
+
+  const dispatch = useDispatch();
+
+  const [requestStatus, setRequestStatus] = useState({
+    message: "",
+    status: false,
+  });
+
+  const [familyList, setFamilyList] = useState([]);
+  let [loader, setLoader] = useState({
+    member: false,
+    jobFields: false
+  });
+
+  const apiCall = useMemo(() => new usersService(), []);
+  const { walletDetails } = useSelector((state) => state.walletDetails);
+
+  const getWalletDetail = (currency) => {
+    // A FUNCTION TO GET USER BALANCE BASED ON TASK CURRENCY
+    const walletChecker = walletDetails?.data.find(
+      (item) => item.description === currency
+    );
+    return walletChecker
+      ? {
+          description: walletChecker.description,
+          country: walletChecker.country,
+          code: walletChecker.code,
+          amount: walletChecker.amount,
+        }
+      : 0;
+  };
+
+  const taskWalletSelector = getWalletDetail(details?.currency);
+
+  const openCreditPopup = () => {
+    onClose();
+    setWalletItem(taskWalletSelector);
+    openWallet();
+  };
+
+  // member listing
+  const memberList = useCallback(async () => {
+    setLoader({ member: true, jobFields: false });
+    try {
+      let res = await apiCall.familyListings();
+      const { data } = res;
+      if (data?.internal_return >= 0 && data?.status == "OK") {
+        let { result_list } = data;
+        setFamilyList(result_list);
+        setLoader({ member: false, jobFields: false });
+      } else return;
+    } catch (error) {
+      setLoader({ member: false, jobFields: false });
+      throw new Error(error);
+    }
+  }, [apiCall]);
+
+  useEffect(() => {
+    memberList();
+  }, [memberList]);
+
+  let [textArea, setTextArea] = useState(details?.job_detail);
+  const [errMsg, setErrMsg] = useState({
+    deliveryDetail: "",
+    jobFields: {
+      family: "",
+      public: "",
+      individual: "",
+      group: "",
+    },
+  });
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextArea(value);
+  };
+
+  const errorHandler = ({ target: { name } }) => {
+    try {
+      if (name === "family")
+        setErrMsg({ jobFields: { family: "please select a family member" } });
+      else if (name === "public")
+        setErrMsg({ jobFields: { public: "please select duration" } });
+      else if (name === "individual")
+        setErrMsg({ jobFields: { individual: "please enter email" } });
+      else if (name === "group")
+        setErrMsg({ jobFields: { group: "please select a group" } });
+    } finally {
+      setTimeout(() => {
+        setErrMsg({ jobFields: "" });
+      }, 5000);
+    }
+  };
+
+  const jobFieldHandler = async (values, helpers) => {
+    setLoader({ jobFields: true });
+    let { job_id, job_uid } = details;
+
+    if (!textArea) {
+      setErrMsg({ deliveryDetail: "delivery detail is required!" });
+      return;
+    }
+
+    let jobReq = {
+      job_id,
+      job_uid,
+      job_description: textArea,
+    };
+
+    let reqData;
+
+    // for family input
+    if (values?.family) {
+      reqData = {
+        ...jobReq,
+        family_uid: values?.family,
+        assign_mode: 110011,
+      };
+    } else if (values?.public) {
+      // for public input
+      reqData = {
+        ...jobReq,
+        duration: Number(values?.public),
+        assign_mode: 110022,
+        depend_uid: values?.depend_uid,
+        strict_timeline: values?.timeline,
+      };
+    } else if (values?.individual) {
+      // for individual input
+      reqData = {
+        ...jobReq,
+        email: values?.individual,
+        assign_mode: 110033,
+      };
+    } else if (values?.group) {
+      // for group input
+      reqData = {
+        ...jobReq,
+        email: "",
+        group_id: values?.group,
+        assign_mode: 110044,
+        duration: details?.timeline_days,
+        // duration: 0,
+      };
+    } else {
+      setLoader({ jobFields: false });
+      return;
+    }
+
+    try {
+      const res = await apiCall.assignJobTask(reqData);
+      let { status, data } = await res;
+      if (status != 200 || data.internal_return < 0) {
+        setRequestStatus({ message: data?.status ? data?.status : "Unable to assign offer", status: false });
+        return setTimeout(() => {
+          setLoader({ jobFields: false });
+          setRequestStatus({ message: "", status: false });
+        }, 5000);
+      }
+      marketUpdate('market', 'full-markets-jobs') // sends an event to the socket to update market lists
+      dispatch(tableReload({ type: "JOBTABLE" }));  // reloads my job page
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
+      setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true });
+      setTimeout(() => {
+        setLoader({ jobFields: false });
+        onClose();
+        // throw new Response(data);
+      }, 5000);
+    } catch (error) {
+      setRequestStatus({ message: "Unable to complete", status: false });
+      setTimeout(() => {
+        setRequestStatus({ message: "", status: false });
+        setLoader({ jobFields: false });
+        throw new Error(error);
+      }, 5000);
+    }
+  };
+
+  const [groupList, setGroupList] = useState({
+    loading: true,
+    groups: [],
+    members: [],
+  });
+
+  const DetailsSection = ({ label, value }) => (
+    <div className="my-3 md:flex">
+      <Detail label={label} value={value} />
+    </div>
+  );
+
+  // FUNCTION TO POPULATE USER GROUP LIST
+  useEffect(() => {
+    // setGroupList({loading: true, groups: [], members: []})
+    apiCall
+      .jobGroupList({})
+      .then((res) => {
+        const { status, data } = res;
+        if (status != 200 || data?.internal_return < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
+        }
+        if (data.result_list.length < 0) {
+          setGroupList({ loading: false, groups: [], members: [] });
+          return;
+        }
+        setGroupList({
+          loading: false,
+          groups: data.result_list,
+          members: data.result_list_member,
+        });
+      })
+      .catch((error) => {
+        setGroupList({ loading: false, groups: [], members: [] });
+      });
+  }, []);
+
+  const DetailsComponent = () => {
+    const detailsArray = [
+      { label: "Description", value: details.description },
+      { label: "Reward", value: details.thePrice },
+      { label: "Timeline", value: `${details.timeline_days} day(s)` },
+      { label: "Created", value: new Date(details?.created).toDateString() },
+    ];
+
+    return (
+      <div className="px-4 pb-3 w-full h-full md:border-r-2 flex flex-col justify-between">
+        {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
+
+        {/* INPUT SECTION */}
+        {detailsArray.map((detail, index) => (
+          <DetailsSection
+            key={index}
+            label={detail.label}
+            value={detail.value}
+          />
+        ))}
+
+        <div className="">
+          <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+            Delivery Detail
+          </label>
+          <textarea
+            className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+            rows="7"
+            style={{ resize: "none" }}
+            value={textArea}
+            onChange={handleInputChange}
+          />
+          <p>{errMsg.deliveryDetail}</p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <ModalCom action={onClose} situation={situation} className="">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
+            {details.title}
+          </h1>
+          <button
+            type="button"
+            className="modal-close-btn"
+            onClick={onClose}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
+          <DetailsComponent />
+          <>
+            {/* ACTION SECTION */}
+            {+taskWalletSelector.amount > +details.price ? (
+              <div className="px-4 pb-3 w-full flex flex-col justify-between h-auto md:min-h-[450px]">
+                <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
+                  Send this Task to:
+                </h1>
+                <div className="flex flex-col grow">
+                  <div className="grid grid-cols-3 mt-4">
+                    {tabs.map((item) => (
+                      <TabButton
+                        key={item}
+                        item={item}
+                        selectedTab={selectedTab}
+                        setSelectedTab={setSelectedTab}
+                      />
+                    ))}
+                  </div>
+                  <div className="p-3 grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+                    <div className='flex items-center justify-start mt-1 mb-2.5'>
+                        <label
+                        className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                        // htmlFor={''}
+                        >
+                        {selectedTab == 'family' ?
+                            'Assign to family'
+                            : selectedTab == 'public' ?
+                            'Place in Market'
+                            : selectedTab == 'individual' ?
+                            'Assign to individual'
+                            : selectedTab == 'group' ?
+                            'Preferred List'
+                            :
+                            null
+                        }
+                        </label>
+                    </div>
+
+                    {selectedTab == 'family' &&
+                        <AssignToFamily 
+                            jobFieldHandler={jobFieldHandler}
+                            familyList={familyList}
+                            loader={loader}
+                        />
+                    }
+
+                    {selectedTab == 'individual' &&
+                        <AssignToIndividual 
+                            jobFieldHandler={jobFieldHandler}
+                            familyList={familyList}
+                            loader={loader}
+                        />
+                    }
+
+                    {selectedTab == 'public' &&
+                        <AssignToPublic 
+                            jobFieldHandler={jobFieldHandler}
+                            myJobList={myJobList}
+                            details={details}
+                            loader={loader}
+                        />
+                    }
+
+                    {selectedTab == 'group' &&
+                        <AssignToGroup 
+                            jobFieldHandler={jobFieldHandler}
+                            groupList={groupList}
+                            loader={loader}
+                        />
+                    }
+
+                    <p
+                      className={`text-center w-full text-lg ${
+                        requestStatus.status
+                          ? "text-emerald-600"
+                          : "text-red-600"
+                      }`}
+                    >
+                      {requestStatus.message && requestStatus.message}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <ZeroBalanceChecker
+                {...taskWalletSelector}
+                openCreditPopup={openCreditPopup}
+              />
+            )}
+
+            {/* END OF ACTION SECTION */}
+          </>
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default NewJobListPopout;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];
+
+const ZeroBalanceChecker = ({ amount, code, country, openCreditPopup }) => {
+  return (
+    <div className="px-4 pb-3 w-full flex flex-col gap-5 items-center">
+      <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">
+        Wallet Balance:{` ${code} ${(+amount * 0.01).toFixed(2)}`}
+      </h1>
+      <p className="font-semibold text-center text-red-500 text-lg">
+        You do not have sufficient balance to assign this task
+      </p>
+      <button
+        onClick={openCreditPopup}
+        className="btn-gradient w-48 h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+      >
+        Add Credit to Wallet
+      </button>
+    </div>
+  );
+};
+
+const TabButton = ({ item, selectedTab, setSelectedTab }) => (
+  <button
+    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
+      selectedTab === item
+        ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
+        : "bg-white text-[#000]"
+    }`}
+    value={item}
+    name={item}
+    onClick={() => setSelectedTab(item)}
+  >
+    <div
+      className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
+        selectedTab === item
+          ? "border-white bg-emerald-500"
+          : "border-red-50 dark:border-[#D85A5A] bg-white"
+      }`}
+    ></div>
+    {item[0].toUpperCase() + item.slice(1)}
+  </button>
+);
@@ -8,6 +8,7 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";

 import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
+import { PriceFormatter } from "../Helpers/PriceFormatter";

 function OfferJobPopout({ details, onClose, situation }) {
  const apiUrl = new usersService();
@@ -21,6 +22,12 @@ function OfferJobPopout({ details, onClose, situation }) {
    trigger: "",
  });

+  let thePrice = PriceFormatter(
+    details?.price * 0.01,
+    details?.currency_code,
+    details?.currency
+  );
+
  //FUNCTION TO HANDLE AN OFFER
  const handleOffer = ({ target: { name } }) => {
    const reqData = {
@@ -71,6 +78,7 @@ function OfferJobPopout({ details, onClose, situation }) {
        setTimeout(() => {
          onClose();
          dispatch(tableReload({ type: "MYTASKTABLE" }));
+          dispatch(tableReload({ type: "HOMEBANNERS" }));
          navigate("/mytask", { replace: true });
          setRequestStatus({
            loading: false,
@@ -133,56 +141,74 @@ function OfferJobPopout({ details, onClose, situation }) {
            </svg>
          </button>
        </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg">
-          <div className="p-4 w-full md:w-3/4 md:border-r-2">
-            <p className="text-lg my-5 font-semibold text-slate-900 dark:text-white tracking-wide">
-              {details.title}
-            </p>
+        <div className="grid md:grid-cols-4 bg-white dark:bg-dark-white rounded-lg">
+          <div className="md:col-span-3 md:border-r-2">

            {/* INPUT SECTION */}
-            <div className="my-2 md:flex">
-              <Detail
-                label="Date"
-                value={
-                  (details.offer_added && details.offer_added?.split(" ")[0]) ||
-                  "default"
-                }
-              />
+            <div className='bg-[#FFFDEE] p-4 w-full'>
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Date :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>
+                    {
+                      (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                      "default"
+                    }
+                  </p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Expire :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{details.expire && details.expire.split(" ")[0]}</p>
+                </div>
+              </div>
+
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Reward :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{thePrice}</p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Duration :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{`${details.timeline_days} day(s)`}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className='p-4 w-full'>
+              <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
+                {details.title}
+              </p>
+
+              <div className="my-2 md:flex">
+                <label className='job-label w-full md:w-[150px]'>Description :</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
+                {/* <Detail label="Description" value={details.description} /> */}
+              </div>
+
+              <div className="my-2 md:flx">
+                {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
+                <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                  Delivery Detail :
+                </label>
+                <textarea
+                  className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                  rows="5"
+                  style={{ resize: "none" }}
+                  value={details.job_description || details.job_detail}
+                  readOnly
+                />
+              </div>
            </div>

-            <div className="my-2 md:flex">
-              <Detail label="Description" value={details.description} />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail
-                label="Offer Expire"
-                value={details.expire && details.expire.split(" ")[0]}
-              />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail label="Price" value={details.thePrice} />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail
-                label="Duration"
-                value={`${details.timeline_days} day(s)`}
-              />
-            </div>
-
-            <div className="my-2 md:flex">
-              <Detail
-                label="Detail"
-                value={details.job_description || details.description}
-              />
-            </div>
          </div>

          {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-1/4 h-full">
-            <div className="my-3 md:flex md:justify-center">
+          <div className="p-4 w-full md:col-span-1 h-full flex flex-col justify-between">
+            <div className="my-3 md:flex flex-col md:justify-center">
+              <h1 className='mb-2 text-base font-semibold text-slate-900 dark:text-white tracking-wide'>I understand the task</h1>
              {requestStatus.loading && requestStatus.trigger == "offer" ? (
                <LoadingSpinner size={8} color="sky-blue" />
              ) : (
@@ -190,9 +216,9 @@ function OfferJobPopout({ details, onClose, situation }) {
                  name="accept"
                  onClick={handleOffer}
                  disabled={requestStatus.loading}
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-2 h-28 flex justify-center items-center btn-gradient text-2xl rounded-xl text-white"
                >
-                  Accept Offer
+                  Start Now
                </button>
              )}
            </div>
@@ -205,9 +231,10 @@ function OfferJobPopout({ details, onClose, situation }) {
                  name="reject"
                  onClick={handleOffer}
                  disabled={requestStatus.loading}
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="group relative px-2 h-11 flex justify-center items-center text-base text-black dark:text-white"
                >
                  Reject Offer
+                  <div className='absolute bottom-1 w-full h-[1px] bg-black hidden group-hover:block'></div>
                </button>
              )}
            </div>
@@ -3,13 +3,13 @@ import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../services/UsersService";
 import ModalCom from "../Helpers/ModalCom";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
+import {PriceFormatter} from '../Helpers/PriceFormatter'

 import { useDispatch } from "react-redux";
-import { tableReload } from "../../store/TableReloads";
 import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";
+import { tableReload } from "../../store/TableReloads";

 const showSuccessToast = (message) => {
  toast.success(message, {
@@ -73,7 +73,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
          setRequestMessage({ status: true, message: res.data.status });
          dispatch(tableReload({ type: "PENDINGTABLE" }));
          setTimeout(() => {
-            onClose()
+            onClose();
            setPendingJobLoader({ extend: false, offer: false });
            setRequestMessage({ status: false, message: "" });
          }, 4000);
@@ -140,14 +140,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
    <ModalCom action={onClose} situation={situation}>
      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
        <div className="modal-header-con">
-          <h1 className="modal-title">
-            Manage Pending Item
-          </h1>
-          <button
-            type="button"
-            className="modal-close-btn"
-            onClick={onClose}
-          >
+          <h1 className="modal-title">Manage Pending Item</h1>
+          <button type="button" className="modal-close-btn" onClick={onClose}>
            <svg
              width="36"
              height="36"
@@ -214,7 +208,7 @@ function PendingJobsPopout({ details, onClose, situation }) {

            <div className="my-2 md:flex">
              <Detail
-                label="Price"
+                label="Reward"
                // value={`${details.price * 0.01} ${details.currency}`}
                value={PriceFormatter(
                  details.price * 0.01,
@@ -0,0 +1,67 @@
+import React from 'react'
+import { Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import JobFieldInput from './JobFieldInput';
+
+
+
+const validationSchema = Yup.object().shape({
+    family: Yup.string().required("This is required "),
+});
+
+
+let initialValues = {
+    family: "",
+};
+
+export default function AssignToFamily({
+    jobFieldHandler,
+    familyList,
+    loader
+}) {
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={jobFieldHandler}
+  >
+    {(props) => {
+      return (
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
+          <div className='w-full'>
+              <div className='hidden w-full'>
+                <JobFieldInput
+                  select={true}
+                  inputName="family"
+                  value={props?.values.family}
+                  data={familyList}
+                  optionText="Select Family"
+                  parentClass="w-full flex flex-col gap-4"
+                />
+                <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                  {(props.errors.family && props.touched.family) && (
+                    <span>{props.errors.family}</span>
+                  )}
+                </p>
+              </div>
+          </div>
+          <div className="mt-3 mb-1 flex justify-end items-center">
+            <button
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+              type="submit"
+              name='family'
+            >
+              {loader?.jobFields ? 
+                <LoadingSpinner size={5} /> 
+                :
+                'Assign to family'
+              }
+            </button>
+          </div>
+        </Form>
+      );
+    }}
+  </Formik>
+  )
+}
@@ -0,0 +1,67 @@
+import React from 'react'
+import { Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import JobFieldInput from './JobFieldInput';
+
+
+
+const validationSchema = Yup.object().shape({
+    group: Yup.string().required("This is required "),
+});
+
+
+let initialValues = {
+    group: "",
+};
+
+export default function AssignToGroup({
+    jobFieldHandler,
+    groupList,
+    loader
+}) {
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={jobFieldHandler}
+  >
+    {(props) => {
+      return (
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
+          <div className='w-full'>
+              <div className='w-full'>
+                <JobFieldInput
+                    select={true}
+                    inputName="group"
+                    value={props?.values.group}
+                    optionText="Select Group"
+                    data={groupList}
+                    parentClass="w-full flex flex-col gap-4"
+                />
+                <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                  {(props.errors.group && props.touched.group) && (
+                    <span>{props.errors.group}</span>
+                  )}
+                </p>
+              </div>
+          </div>
+          <div className="mt-3 mb-1 flex justify-end items-center">
+            <button
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
+              type="submit"
+              name='group'
+            >
+              {loader?.jobFields ? 
+                <LoadingSpinner size={5} /> 
+                :
+                'Send Task to Group'
+              }
+            </button>
+          </div>
+        </Form>
+      );
+    }}
+  </Formik>
+  )
+}
@@ -0,0 +1,72 @@
+import React from 'react'
+import { Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import JobFieldInput from './JobFieldInput';
+
+
+
+const validationSchema = Yup.object().shape({
+    individual: Yup.string().required("This is required ")
+        .email("Invalid email format")
+        .matches(
+        /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
+        "Invalid email format"
+        ),
+});
+
+
+let initialValues = {
+    individual: "",
+};
+
+export default function AssignToIndividual({
+    jobFieldHandler,
+    loader
+}) {
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={jobFieldHandler}
+  >
+    {(props) => {
+      return (
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
+          <div className='w-full'>
+              <div className='w-full'>
+                <JobFieldInput
+                    input={true}
+                    inputName="individual"
+                    value={props?.values.individual}
+                    placeholder="Enter email of individual"
+                    inputHandler={props?.handleChange}
+                    parentClass="w-full"
+                    labelClass="mb-0"
+                />
+                <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                  {(props.errors.individual && props.touched.individual) && (
+                    <span>{props.errors.individual}</span>
+                  )}
+                </p>
+              </div>
+          </div>
+          <div className="mt-3 mb-1 flex justify-end items-center">
+            <button
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
+              type="submit"
+              name='individual'
+            >
+              {loader?.jobFields ? 
+                <LoadingSpinner size={5} /> 
+                :
+                'Send Offer to Individual'
+              }
+            </button>
+          </div>
+        </Form>
+      );
+    }}
+  </Formik>
+  )
+}
@@ -0,0 +1,140 @@
+import React, {useState} from 'react'
+import { Field, Form, Formik } from "formik";
+import * as Yup from "yup";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import JobFieldInput from './JobFieldInput';
+
+
+
+const validationSchema = Yup.object().shape({
+    public: Yup.string().required("This is required "),
+    depend_uid: Yup.string(),
+    timeline: Yup.string().required("This is required "),
+});
+
+
+let initialValues = {
+    public: "",
+    depend_uid: "",
+    timeline: "0"
+};
+
+export default function AssignToPublic({
+    jobFieldHandler,
+    myJobList,
+    loader,
+    details
+}) {
+
+    const [timeline, setTimeline] = useState('')
+    console.log('timeline', timeline)
+  return (
+    <Formik
+    initialValues={initialValues}
+    validationSchema={validationSchema}
+    onSubmit={jobFieldHandler}
+  >
+    {(props) => {
+      return (
+        <Form className="w-full h-auto md:h-full flex flex-col justify-between">
+            <div className='w-full'>
+                <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                  <label className='w-full xxs:max-w-[120px] xxs:text-right'>Depends on:</label>
+                  <div
+                      className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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`}
+                  >
+                      <select 
+                      className='px-2 w-full h-full bg-white border-0 outline-0'
+                      name="depend_uid"
+                      value={props?.values.depend_uid}
+                      onChange={props.handleChange}
+                      >
+                      <>
+                          {myJobList.loading ? (
+                          <option value={""}>Loading...</option>
+                          ) : myJobList?.data?.result_list?.length > 0 ? (
+                          <>
+                              <option value="">None</option>
+                              {myJobList?.data?.result_list?.filter(item => item.job_uid != details.job_uid)?.map((item, index) => (
+                              <option value={item?.job_uid} key={item.job_uid}>
+                                  {item?.title}
+                              </option>
+                              ))}
+                          </>
+                          ) : (
+                          <option value="">No Job Found</option>
+                          )}
+                      </>
+                      </select>
+                  </div>
+                </div>
+                
+                <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Duration:</label>
+                    <div className='w-full'>
+                        <JobFieldInput
+                        select={true}
+                        inputName="public"
+                        value={props?.values.public}
+                        data={publicArray}
+                        optionText="Select Duration"
+                        parentClass="w-full flex flex-col gap-4"
+                        inputClass={(props.errors.public && props.touched.public) && 'border-red-500 dark:border-red-500'}
+                        />
+                    </div>
+                </div>
+
+                <div className='mb-3 w-full flex flex-col xxs:flex-row items-center gap-1'>
+                    <label className='w-full xxs:max-w-[120px] xxs:text-right'>Timeline:</label>
+                    <div className='w-full'>
+                        <JobFieldInput
+                        select={true}
+                        inputName="timeline"
+                        value={props?.values.timeline}
+                        data={timelineArray}
+                        optionText="Select Timeline"
+                        parentClass="w-full flex flex-col gap-4"
+                        inputClass={(props.errors.timeline && props.touched.timeline) && 'border-red-500 dark:border-red-500'}
+                        // disabled={true}
+                        />
+                    </div>
+                </div>
+            </div>
+          <div className="mt-3 mb-1 flex justify-end items-center">
+            <button
+              className={`uppercase px-4 h-11 flex justify-center items-center btn-gradient text-sm rounded-full text-white`}
+              type="submit"
+              name='public'
+            >
+              {loader?.jobFields ? 
+                <LoadingSpinner size={5} /> 
+                :
+                'Place Task to the Market'
+              }
+            </button>
+          </div>
+        </Form>
+      );
+    }}
+  </Formik>
+  )
+}
+
+
+const publicArray = [
+    { duration: 1, name: "1 day" },
+    { duration: 2, name: "2 days" },
+    { duration: 3, name: "3 days" },
+    { duration: 4, name: "4 days" },
+    { duration: 5, name: "5 days" },
+    { duration: 6, name: "6 days" },
+    { duration: 7, name: "1 week" },
+    { duration: 14, name: "2 weeks" },
+    { duration: 21, name: "3 weeks" },
+    { duration: 28, name: "4 weeks" },
+  ];
+
+  const timelineArray = [
+    { duration: "0", name: "Not Strict" },
+    { duration: "1", name: "Strict Timeline" },
+  ];
@@ -0,0 +1,108 @@
+import React from 'react'
+import { Field } from "formik";
+import InputCom from '../../Helpers/Inputs/InputCom/index'
+
+export default function JobFieldInput({
+  value,
+  inputHandler,
+  inputName,
+  inputClass,
+  placeholder,
+  input,
+  select,
+  label,
+  labelClass,
+  parentClass,
+  optionText,
+  data,
+  disabled
+}) {
+  return (
+    <div className="field w-full flex flex-col justify-between gap-4">
+      {select && (
+        <>
+          <div className={`input-com ${parentClass}`}>
+            <div
+              className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[1rem] 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 ${inputClass}`}
+            >
+              <Field
+                component="select"
+                name={inputName}
+                className={`options-default`}
+                value={value}
+                disabled={disabled}
+              >
+                {/* <option value="">{optionText}</option> */}
+                {(inputName == "family" || inputName == "public" || inputName == "timeline") &&
+                  Array.isArray(data) && (
+                    <>
+                    {inputName != "timeline" &&
+                      <option value="">{optionText}</option>
+                    }
+                      {data?.map((item, idx) => (
+                        <React.Fragment key={idx}>
+                          {inputName === "family" &&
+                            item?.last_login !== "" && (
+                              <option value={item?.family_uid} key={idx}>
+                                {`${item?.firstname} ${item?.lastname}`}
+                              </option>
+                            )}
+                          {inputName === "public" && (
+                            <option value={item?.duration} key={idx}>
+                              {item?.name}
+                            </option>
+                          )}
+                          {inputName == "timeline" && (
+                            <option value={item?.duration} key={idx}>
+                              {item?.name}
+                            </option>
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </>
+                  )}
+                {inputName == "group" && (
+                  <>
+                    {data.loading ? (
+                      <option value={""}>Loading...</option>
+                    ) : data?.groups?.length > 0 ? (
+                      <>
+                        <option value="">{optionText}</option>
+                        {data?.groups?.map((item, index) => (
+                          <option value={item?.group_id} key={index}>
+                            {`${item?.group_name} (${
+                              item?.member_count == null
+                                ? "0"
+                                : ' ' + item.member_count + ' '
+                            })`}
+                          </option>
+                        ))}
+                      </>
+                    ) : (
+                      <option value="">No Group Found</option>
+                    )}
+                  </>
+                )}
+              </Field>
+            </div>
+          </div>
+        </>
+      )}
+
+      {input && (
+        <InputCom
+          fieldClass="px-6"
+          type="email"
+          name={inputName}
+          placeholder={placeholder}
+          value={value}
+          inputHandler={inputHandler}
+          inputBg="bg-white"
+          parentClass={`${parentClass}`}
+          disable={disabled}
+          labelClass={labelClass}
+        />
+      )}
+    </div>
+  );
+}
@@ -53,7 +53,7 @@
 .job-action {
  background-color: #4687ba;
  border-radius: 15px;
-  padding: 3px;
+  padding: 10px;
 }

 .msg_box {
@@ -183,6 +183,7 @@ export const apiConst = {
    WRENCHBOARD_JOB_EXTEND_EXPIRE: 13041,
    WRENCHBOARD_JOB_RESEND_MESSAGE: 13042,
    WRENCHBOARD_JOB_CANCEL_OFFER: 13043,
+    WRENCHBOARD_VERIFY_COMPLETED_TASK: 13033,

    WRENCHBOARD_JOB_JOBGROUPS:    13045,
    WRENCHBOARD_JOB_JOBGROUPADD:  13046,
@@ -190,6 +191,10 @@ export const apiConst = {

    WRENCHBOARD_INTEREST_STATS:  13048,

+    WRENCHBOARD_RELATIVE_SETTINGS:  22033,
+    WRENCHBOARD_RELATIVE_EDIT_KIDS:  22034,
+    WRENCHBOARD_RELATIVE_REMINDER:  22035,
+
    WRENCHBOARD_GROUP_START: 12000,
    WRENCHBOARD_GROUP_CREATEGROUP: 12010,
    WRENCHBOARD_GROUP_INVITEGROUP: 12015,
@@ -273,5 +278,8 @@ export const apiConst = {
    PAY_MODE_CCARD: 1,
    PAY_MODE_BONUS: 9,
    APPROVED_BALANCE: 5,
-    DISAPROVE_BALANCE: 3
+    DISAPROVE_BALANCE: 3,
+
+    WRENCHBOARD_VERIFY_PROMO: 55056,
+    WRENCHBOARD_LOGIN_PROMO: 55057,
 };
@@ -27,7 +27,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
  const [loadProfileDetails, setLoadProfileDetails] = useState([]);
  const navigate = useNavigate();

-  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable, homeBanners } = useSelector(
    (state) => state.tableReload
  );

@@ -111,8 +111,26 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
    }
  }, []);

+  //FUNCTION TO GET COMMON HEAD DATA
  useEffect(() => {
-    const getNotifications = () => {
+    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, homeBanners]);
+
+  useEffect(() => { // FUNCTION TO GET NOTIFICATIONS LIST
+    const notifications = () => {
      // function to load user notification
      dispatch(updateNotifications({ loading: true }));
      apiCall
@@ -168,7 +186,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
          dispatch(updateNotifications({ loading: false, data: null }));
        });
    };
-    getNotifications();
+      // delay verify requests by 10000ms
+    const delay15secs = setTimeout(notifications, 15000)
+    return ()=> clearTimeout(delay15secs)
  }, []);

  useEffect(() => {
@@ -230,41 +250,23 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
  }, [apiCall, dispatch, marketTableList, isLogin.status]);

  //FUNCTION TO GET COMMON HEAD DATA
-  useEffect(() => {
-    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(() => {
-    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
-      return
-    }
-    apiCall
-      .getRecentActivitiedData()
-      .then((res) => {
-        //   debugger;
-        if (res?.data?.internal_return < 0) {
-          return;
-        }
-        dispatch(recentActivitiesData(res.data));
-      })
-      .catch((error) => {
-        console.log("ERROR ", error);
-      });
-  }, [isLogin.status]);
+  // useEffect(() => {
+  //   if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+  //     return
+  //   }
+  //   apiCall
+  //     .getRecentActivitiedData()
+  //     .then((res) => {
+  //       //   debugger;
+  //       if (res?.data?.internal_return < 0) {
+  //         return;
+  //       }
+  //       dispatch(recentActivitiesData(res.data));
+  //     })
+  //     .catch((error) => {
+  //       console.log("ERROR ", error);
+  //     });
+  // }, [isLogin.status]);


  //FUNCTION TO GET FAMILY BANNERS
@@ -32,7 +32,7 @@ class usersService {
  }

  blogData() {
-    return this.getAuxEnd("/blogdata", null);
+    return this.getAuxEnd("/blogdata", {});
  }

  CompleteOauthLogin(reqData) {
@@ -130,7 +130,7 @@ class usersService {
  }
  getApiGate() {
    // localStorage.setItem("session_token", ``);
-    return this.postAuxEnd("/apigate", null);
+    return this.postAuxEnd("/apigate", {});
  }

  getLoadProfile() {
@@ -141,7 +141,7 @@ class usersService {
      page: 0,
      limit: 100,
    };
-    return this.postAuxEnd("/loadprofile", null);
+    return this.postAuxEnd("/loadprofile", {});
  }

  getUploadedList() {
@@ -208,7 +208,7 @@ class usersService {
  // }
  getHeroJBanners() {
    var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
      member_id: localStorage.getItem("member_id"),
      sessionid: localStorage.getItem("session_token"),
      page: 0,
@@ -655,6 +655,39 @@ class usersService {
    return this.postAuxEnd("/familylist", postData);
  }

+  getRelativeSettings(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_RELATIVE_SETTINGS,
+      ...reqData
+    };
+    return this.postAuxEnd("/relativesettings", postData);
+  }
+
+  sendRelativeReminder(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_RELATIVE_REMINDER,
+      ...reqData
+    };
+    return this.postAuxEnd("/relativereminder", postData);
+  }
+
+  getRelativeEditKids(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_RELATIVE_EDIT_KIDS,
+      ...reqData
+    };
+    return this.postAuxEnd("/relativeeditkids", postData);
+  }
+
  getFamilyAdd() {
    var postData = {
      uuid: localStorage.getItem("uid"),
@@ -758,7 +791,7 @@ class usersService {

  // Country Data {GET}
  getSignupCountryData() {
-    return this.postAuxEnd("/signupcountry", null);
+    return this.postAuxEnd("/signupcountry", {});
  }

  // END POINT TO GET BANK NAME
@@ -1448,6 +1481,58 @@ class usersService {
    return this.postAuxEnd("/jobmanagerfiles", postData);
  }

+  // API FUNCTION FOR GETTING LIST OF VERIFY COMPLETED TASK
+  getVerifyCompletedTask(reqData) {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_VERIFY_COMPLETED_TASK,
+      ...reqData
+    };
+    return this.postAuxEnd("/verifycompleted", postData);
+  }
+
+  // API FUNCTION TO VERIFY PROMO LINK
+  verifyPromo(reqData) {
+    var postData = {
+      action: apiConst.WRENCHBOARD_VERIFY_PROMO,
+      ...reqData
+    };
+    return this.postAuxEnd("/promoverify", postData);
+  }
+
+  // API FUNCTION TO LOGIN USER THROUGH PROMO LINK
+  loginPromo(reqData) {
+    var postData = {
+      action: apiConst.WRENCHBOARD_LOGIN_PROMO,
+      ...reqData
+    };
+    return this.postAuxEnd("/loginpromo", postData);
+  }
+
+  // API FUNCTION TO GET LEARN MORE TOPICS
+  getLearnmoreTopics() {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      // action: apiConst.WRENCHBOARD_LOGIN_PROMO,
+    };
+    return this.postAuxEnd("/learnmore", postData);
+  }
+  
+  // API FUNCTION RECENTLY PAST DUE
+  getRecentPastDueList() {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      // action: apiConst.WRENCHBOARD_LOGIN_PROMO,
+    };
+    return this.postAuxEnd("/recentpastdue", postData);
+  }
+
  /*
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
    - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)
@@ -1496,7 +1581,7 @@ class usersService {
    */

  getUserReminders() {
-    return this.getAuxEnd("/reminders", null);
+    return this.getAuxEnd("/reminders", {});
  }
  //----------------------------------------  -----
  //----------------------------------------  -----
@@ -1555,6 +1640,9 @@ class usersService {
    //     Axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; //,axiosConfig
    //     Axios.defaults.withCredentials = true;
    //debugger;
+    if(localStorage && localStorage.getItem('myloc')){
+      reqData.loc = localStorage.getItem('myloc')
+    }
    return Axios.post(endPoint, reqData)
        .then((response) => {
          console.log(response);
@@ -14,6 +14,7 @@ const initialState = {
  familyOfferList: false,
  parentFamilyTaskList: false,
  offerInterestListReload: false,
+  homeBanners: false,
 };

 export const tableReloadSlice = createSlice({
@@ -61,6 +62,9 @@ export const tableReloadSlice = createSlice({
        case "OFFERINTERESTLISTRELOAD": // to reload offer interest list of owner when a worker sends interest in a job
          state.offerInterestListReload = !state.offerInterestListReload;
          return;
+        case "HOMEBANNERS": // to reload offer interest list of owner when a worker sends interest in a job
+          state.homeBanners = !state.homeBanners;
+          return;
        default:
          return state;
      }
@@ -1,13 +1,23 @@
+import {useState, useEffect} from 'react'
 import { useSelector } from "react-redux";
 import Home from "../components/Home";

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

-  const bannerOptions = {
-    bannerList: commonHeadBanner?.result_list,
-    dashTypes: commonHeadBanner?.home_dash_type,
-  };
+  const [bannerOptions, setBannerOptions] = useState({})
+
+
+
+  useEffect(()=>{
+    const bannerOptions = {
+      bannerList: commonHeadBanner?.result_list,
+      dashTypes: commonHeadBanner?.home_dash_type,
+      offersList: commonHeadBanner?.offers_list,
+      imageServer: commonHeadBanner?.session_image_server
+    };
+    setBannerOptions(bannerOptions)
+  },[commonHeadBanner])

  return (
    <>
@@ -0,0 +1,10 @@
+import React from "react";
+import LearnMore from "../components/LearnMore/LearnMore";
+
+export default function LearnMorePage() {
+  return (
+    <>
+      <LearnMore />
+    </>
+  );
+}
@@ -4,8 +4,13 @@ import MyTasks from "../components/MyTasks";
 import usersService from "../services/UsersService";

 import { useSelector } from "react-redux";
+import RecentlyPastDue from "../components/MyTasks/RecentlyPastDue";

 export default function MyTaskPage() {
+  const api = new usersService();
+  const queryParams = new URLSearchParams(location?.search);
+  const tab = queryParams.get("tab")?.toLowerCase();
+
  const { myTaskTable } = useSelector((state) => state.tableReload);

  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
@@ -16,7 +21,8 @@ export default function MyTaskPage() {
    data: [],
  });
  const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
-  const api = new usersService();
+
+  const [recentPastDue, setRecentPastDue] = useState({loading: true, data: {}});

  const getMyActiveJobList = async () => {
    setMyActiveJobList({ loading: true, status: false, data: [] });
@@ -32,6 +38,7 @@ export default function MyTaskPage() {
      console.log("Error getting tasks");
    }
  };
+
  const getMyActiveOffersList = async () => {
    // setMyActiveOffersList({loading: true, status:false, data:[]});
    try {
@@ -42,6 +49,21 @@ export default function MyTaskPage() {
      console.log("Error getting offers");
    }
  };
+
+  const getRecentPastDue = async () => {
+    try {
+      const res = await api.getRecentPastDueList();
+      setRecentPastDue({loading: false, data:res?.data});
+    } catch (error) {
+      setRecentPastDue({loading: false, data:{}});
+      console.log("Error getting offers");
+    }
+  };
+
+  useEffect(()=>{
+    getRecentPastDue()
+  },[])
+
  useEffect(() => {
    const fetchData = async () => {
      await Promise.all([getMyActiveJobList(), getMyActiveOffersList()]);
@@ -52,10 +74,20 @@ export default function MyTaskPage() {

  //debugger;
  return (
-    <MyTasks
-      ActiveJobList={MyActiveJobList}
-      MyActiveOffersList={MyActiveOffersList}
-      commonHeadData={commonHeadBanner?.result_list}
-    />
+    <>
+    {tab == 'pastdue' ?
+      <RecentlyPastDue
+        recentPastDue={recentPastDue}
+        imageServer={recentPastDue?.data?.session_image_server}
+        commonHeadData={commonHeadBanner?.result_list}
+      />
+    :
+      <MyTasks
+        ActiveJobList={MyActiveJobList}
+        MyActiveOffersList={MyActiveOffersList}
+        commonHeadData={commonHeadBanner?.result_list}
+      />
+    }
+    </>
  );
 }
@@ -0,0 +1,10 @@
+import React from 'react'
+import Promo from '../components/AuthPages/Promo/Promo'
+
+export default function PromoPage() {
+  return (
+    <>
+        <Promo />
+    </>
+  )
+}
Author	SHA1	Message	Date
victorAnumudu	da389c937e	preference component added	2024-10-09 15:21:03 +01:00
ameye	804f76100a	Merge branch 'settings-page-update' of WrenchBoard/Users-Wrench into master	2024-10-08 21:27:10 +00:00
victorAnumudu	64f6e55fb6	currency code added	2024-10-08 20:09:56 +01:00
ameye	16119dc332	Merge branch 'recipient-account' of WrenchBoard/Users-Wrench into master	2024-10-08 16:10:52 +00:00
victorAnumudu	ae08f392ca	updated message for account with no recipient yet	2024-10-08 16:58:26 +01:00
ameye	b646f020a5	Merge branch 'history-page-update' of WrenchBoard/Users-Wrench into master	2024-10-08 15:46:51 +00:00
victorAnumudu	31b411dcab	table style updated	2024-10-08 16:40:41 +01:00
ameye	48d66d263e	Merge branch 'managetask-style-update' of WrenchBoard/Users-Wrench into master	2024-10-07 11:57:15 +00:00
victorAnumudu	2a6900f6a9	style updated	2024-10-07 11:16:23 +01:00
ameye	8b3e1e8923	Merge branch 'min-due-time' of WrenchBoard/Users-Wrench into master	2024-10-04 10:52:37 +00:00
victorAnumudu	c87657eaef	used min due time to determine when send for review button is active	2024-10-03 19:56:26 +01:00
ameye	9cccd72512	Merge branch 'managejob-strict-timeline' of WrenchBoard/Users-Wrench into master	2024-10-03 15:08:55 +00:00
victorAnumudu	146e8b383e	send review task strict timeline implemented	2024-10-03 09:27:27 +01:00
ameye	7bb78772f7	Merge branch 'addjob-title' of WrenchBoard/Users-Wrench into master	2024-10-02 17:09:31 +00:00
victorAnumudu	094ba4fde8	bug fixed	2024-10-01 18:13:45 +01:00
victorAnumudu	d31005c1ce	shows password reset error message if internal return is false	2024-10-01 17:06:46 +01:00
victorAnumudu	3992ab696c	add job title character length reduced to 80	2024-10-01 11:34:41 +01:00
victorAnumudu	f1ed5f3a95	add job title character length reduced to 80	2024-10-01 11:34:21 +01:00
ameye	65b4c59129	Merge branch 'recently-pastdue' of WrenchBoard/Users-Wrench into master	2024-09-30 19:28:03 +00:00
victorAnumudu	d620728651	Merge with master	2024-09-30 20:19:59 +01:00
victorAnumudu	4499f2d356	recentlt past due task added	2024-09-30 20:18:51 +01:00
ameye	fa00555a6f	Merge branch 'offercard-height-reduction' of WrenchBoard/Users-Wrench into master	2024-09-30 16:21:16 +00:00
victorAnumudu	00fcb275f1	Merge with master	2024-09-30 16:58:11 +01:00
victorAnumudu	c987ba63ff	height reduced	2024-09-30 16:57:05 +01:00
ameye	89797cdb3f	Merge branch 'home-banner-api' of WrenchBoard/Users-Wrench into master	2024-09-30 15:55:29 +00:00
victorAnumudu	c719c15b2b	made home banner API load after login	2024-09-30 12:01:01 +01:00
ameye	f3b1c229ea	Merge branch 'accept-offer-bg' of WrenchBoard/Users-Wrench into master	2024-09-27 21:00:01 +00:00
victorAnumudu	0335edf1dc	tab capitalization	2024-09-27 19:46:10 +01:00
victorAnumudu	f7db65d527	added bg color	2024-09-27 19:17:40 +01:00
ameye	27dc4090fb	Merge branch 'familywaiting-offer-bug' of WrenchBoard/Users-Wrench into master	2024-09-27 17:28:02 +00:00
victorAnumudu	7f631190dc	bug fixed	2024-09-27 18:23:32 +01:00
ameye	6815eea66c	Merge branch 'accept-task-update' of WrenchBoard/Users-Wrench into master	2024-09-27 16:44:14 +00:00
ameye	c8e2ae9efb	Merge branch 'learnmore-page' of WrenchBoard/Users-Wrench into master	2024-09-27 16:44:01 +00:00
victorAnumudu	455248f9db	reject btn placed below	2024-09-27 17:22:52 +01:00
victorAnumudu	fee3376a88	style updated	2024-09-27 17:15:02 +01:00
victorAnumudu	956abc8411	learn more page added	2024-09-27 17:00:11 +01:00
ameye	64f3625990	Merge branch 'flat-offer-bug' of WrenchBoard/Users-Wrench into master	2024-09-26 19:06:10 +00:00
victorAnumudu	9ec8855ed6	flat box fixed for offer list	2024-09-26 19:07:47 +01:00
victorAnumudu	06450808ed	Merge with master	2024-09-26 18:42:32 +01:00
victorAnumudu	7eecd34a5e	initial commit	2024-09-26 18:41:30 +01:00
ameye	ab3693fc0b	Merge branch 'offer-list-flat-banner' of WrenchBoard/Users-Wrench into master	2024-09-26 17:00:15 +00:00
victorAnumudu	e1879222b3	offer list flat banner bug fixed	2024-09-26 17:06:43 +01:00
victorAnumudu	22250da988	offer list flat banner fixed	2024-09-26 16:54:32 +01:00
ameye	7e8704d633	Merge branch 'unsed-api-removal' of WrenchBoard/Users-Wrench into master	2024-09-25 20:21:38 +00:00
victorAnumudu	99d9a468f6	clean up on unused APIs	2024-09-25 20:40:37 +01:00
ameye	2ca1c668f5	Merge branch 'appstore-link-image-update' of WrenchBoard/Users-Wrench into master	2024-09-25 15:54:09 +00:00
ameye	0bb9528690	Merge branch 'dashdata-api-removal' of WrenchBoard/Users-Wrench into master	2024-09-25 15:53:57 +00:00
victorAnumudu	78a9c4bf5f	Merge with master	2024-09-25 13:24:01 +01:00
victorAnumudu	0440b36f24	dashdata api removed	2024-09-25 13:13:19 +01:00
ameye	de56fb601a	Merge branch 'offerlist-display-bug' of WrenchBoard/Users-Wrench into master	2024-09-24 23:50:17 +00:00
victorAnumudu	f286960bed	top banner offer list display fixed	2024-09-25 00:45:54 +01:00
ameye	a8a090c671	Merge branch 'offerlist-dark-color' of WrenchBoard/Users-Wrench into master	2024-09-24 21:13:03 +00:00
victorAnumudu	24e2a905d2	moved refer friend section	2024-09-24 22:07:33 +01:00
victorAnumudu	19c2500263	added dark color for offer list card	2024-09-24 21:13:03 +01:00
ameye	909c74b734	Merge branch 'dashboard-offerlist-position' of WrenchBoard/Users-Wrench into master	2024-09-24 20:09:14 +00:00
victorAnumudu	0ea988fcea	repositioned offer list display	2024-09-24 21:05:01 +01:00
victorAnumudu	8be4ee52f1	updated app store link image	2024-09-24 19:40:50 +01:00
ameye	db5eb85794	Merge branch 'blog-page-image' of WrenchBoard/Users-Wrench into master	2024-09-24 16:58:06 +00:00
victorAnumudu	fb6a2767bc	Merged with master	2024-09-24 17:34:00 +01:00
ameye	c48ae540cc	Merge branch 'changed-price-to-reward' of WrenchBoard/Users-Wrench into master	2024-09-24 15:56:46 +00:00
victorAnumudu	c51693deb5	changed text price to reward	2024-09-24 15:36:38 +01:00
victorAnumudu	b28d02b2f5	blog image fixed	2024-09-24 13:54:47 +01:00
ameye	74b395d99e	Merge branch 'blog-id-fix' of WrenchBoard/Users-Wrench into master	2024-09-21 13:49:46 +00:00
victorAnumudu	21a2754fc9	blog id added	2024-09-21 14:47:22 +01:00
ameye	19282ad15a	Merge branch 'home-page-image' of WrenchBoard/Users-Wrench into master	2024-09-21 11:45:46 +00:00
victorAnumudu	f48b72b149	updated home page image	2024-09-21 12:15:10 +01:00
ameye	72d4af20aa	Merge branch 'promo-page-update' of WrenchBoard/Users-Wrench into master	2024-09-21 09:52:42 +00:00
victorAnumudu	e6f5746692	promo page download links added	2024-09-21 06:15:25 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	d0e7f58d5f	Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench	2024-09-20 12:02:29 -04:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	f4e21cb73e	app links	2024-09-20 12:02:16 -04:00
ameye	6ad8ed34f5	Merge branch 'promo-login' of WrenchBoard/Users-Wrench into master	2024-09-19 18:24:42 +00:00
victorAnumudu	b4bbe03bdd	added promo login API	2024-09-19 19:21:15 +01:00
ameye	2c54aa36f8	Merge branch 'promo-page' of WrenchBoard/Users-Wrench into master	2024-09-18 18:54:19 +00:00
victorAnumudu	00c83b357f	added promo page	2024-09-18 19:48:24 +01:00
ameye	0b7ec73409	Merge branch 'referal-page-header' of WrenchBoard/Users-Wrench into master	2024-09-13 16:53:31 +00:00
victorAnumudu	f58e8834fb	added referal page header	2024-09-13 10:22:04 +01:00
ameye	1a829789d4	Merge branch 'referral-page-update' of WrenchBoard/Users-Wrench into master	2024-09-13 07:26:35 +00:00
victorAnumudu	84dccfca50	updated referral page	2024-09-12 19:36:31 +01:00
ameye	49e3fc5810	Merge branch 'interest-count-added' of WrenchBoard/Users-Wrench into master	2024-09-07 11:54:02 +00:00
ameye	e4b6391ed2	Merge branch 'assign-job-btn-harmonized' of WrenchBoard/Users-Wrench into master	2024-09-07 11:53:56 +00:00
victorAnumudu	3abbdd32eb	interest count bug fixed	2024-09-06 21:03:58 +01:00
victorAnumudu	e4a5c2682e	interest count added	2024-09-06 20:53:45 +01:00
victorAnumudu	21abc93a04	made assign job btn name same as what is in mobile app	2024-09-02 20:21:31 +01:00
ameye	d51bbdbc29	Merge branch 'timeline-default-value' of WrenchBoard/Users-Wrench into master	2024-08-26 19:38:54 +00:00
victorAnumudu	d081dd73d6	timeline default value added	2024-08-26 17:50:50 +01:00
ameye	9b9e10efbb	Merge branch 'assign-job-restructure' of WrenchBoard/Users-Wrench into master	2024-08-26 15:22:14 +00:00
victorAnumudu	07040832d7	timeline added	2024-08-26 15:42:20 +01:00
ameye	f928f45615	Merge branch 'lock-job-cleanup' of WrenchBoard/Users-Wrench into master	2024-08-23 19:57:58 +00:00
victorAnumudu	1b0f6c0b89	lock job clean up	2024-08-23 18:21:18 +01:00
ameye	8315e226dd	Merge branch 'lock-job' of WrenchBoard/Users-Wrench into master	2024-08-23 15:36:45 +00:00
victorAnumudu	13da84099c	lock job popout	2024-08-23 15:52:16 +01:00
ameye	3b6f2a4ca0	Merge branch 'job-lock' of WrenchBoard/Users-Wrench into master	2024-08-22 14:11:14 +00:00
victorAnumudu	bdc67590d1	job lock key add	2024-08-22 15:01:04 +01:00
ameye	89d2682eaf	Merge branch 'depends-on-select-tag' of WrenchBoard/Users-Wrench into master	2024-08-22 11:59:06 +00:00
victorAnumudu	41a617a265	depends on select tage added	2024-08-22 11:39:15 +01:00
ameye	c72765b38c	Merge branch 'auth-layout-adjustment' of WrenchBoard/Users-Wrench into master	2024-08-16 04:40:41 +00:00
victorAnumudu	fe3306cb98	auth layout adjusted	2024-08-15 21:26:09 +01:00
ameye	13b96a3b8d	Merge branch 'signup-bug' of WrenchBoard/Users-Wrench into master	2024-08-07 20:27:54 +00:00
victorAnumudu	f4c0c5bf15	signup country bug fixed	2024-08-07 21:21:24 +01:00
$CHIEFSOFT\ameye$ CHIEFSOFT\ameye	bc2a4340f2	Headers fix	2024-08-01 11:46:15 -04:00
ameye	a4b85e9c85	Merge branch 'link-name-change' of WrenchBoard/Users-Wrench into master	2024-07-29 12:45:30 +00:00
ameye	6dab5412c7	Merge branch 'location-addition' of WrenchBoard/Users-Wrench into master	2024-07-29 12:45:22 +00:00
victorAnumudu	1bd6064b52	link name changed	2024-07-29 06:32:55 +01:00
victorAnumudu	4949bd28aa	added loc as a payload	2024-07-28 11:56:52 +01:00
ameye	f1ef5e163d	Merge branch 'history-icon-fix' of WrenchBoard/Users-Wrench into master	2024-07-24 17:41:35 +00:00
victorAnumudu	2f6f0bf501	added icons	2024-07-24 18:32:43 +01:00
ameye	ddf361b496	Merge branch 'history-font-match' of WrenchBoard/Users-Wrench into master	2024-07-24 16:32:31 +00:00
victorAnumudu	9f8b61175e	font matched	2024-07-24 17:25:54 +01:00
ameye	0e850b2222	Merge branch 'history-page-format' of WrenchBoard/Users-Wrench into master	2024-07-24 15:07:36 +00:00
victorAnumudu	ad1c27a9ef	history format changed	2024-07-24 15:51:54 +01:00
ameye	1f97780398	Merge branch 'relative-settings' of WrenchBoard/Users-Wrench into master	2024-07-23 18:57:47 +00:00
victorAnumudu	5a97e9a185	relative settings and edit API added	2024-07-23 19:34:15 +01:00
ameye	7eb26ce88a	Merge branch 'my-offer-btn-changed' of WrenchBoard/Users-Wrench into master	2024-07-22 19:30:24 +00:00
victorAnumudu	3876e1440d	offer list btn changed, and manage offer interest page updated	2024-07-22 19:52:46 +01:00
ameye	df1a006f13	Merge branch 'relative-list-update' of WrenchBoard/Users-Wrench into master	2024-07-22 15:15:07 +00:00
victorAnumudu	77ab969f61	added status column	2024-07-22 15:17:29 +01:00
ameye	6da9b9158d	Merge branch 'rounded-edges' of WrenchBoard/Users-Wrench into master	2024-07-21 23:56:54 +00:00