fixed height issues

2023-10-25 13:46:37 -07:00
326 changed files with 5827 additions and 26997 deletions
@@ -1,5 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true 
-REACT_APP_NODE_ENV="development"

 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
@@ -15,15 +14,11 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"

 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
-
-#SOCKETS ENDS
-REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"

 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000

 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -73,8 +68,7 @@ REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0

 #File Handling
-REACT_APP_MAX_FILE_SIZE=1048576
-REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
+REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

 #Auth Text(s)
@@ -101,32 +95,4 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39

 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
-
-#CHANGE LOGIN LAYOUT
-REACT_APP_NEW_LOGIN_LAYOUT=1
-
-#APP DOWNLOAD LINKS
-REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
-
-# Displays the new family dashboard with boxes
-REACT_APP_SHOW_NEW_FAMILY_DASH=1
-
-# Displays the account dashboard
-REACT_APP_SHOW_ACCOUNT_DASH=1
-
-# Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
-
-# FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
-
-# FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
-
-# REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
-
-#SHOW OR HIDE MY PAGE LINK ROUTE
-REACT_APP_SHOW_USER_PAGE=1
+REACT_APP_FAMILY_MAXIMUM_AGE=18
@@ -1,5 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true 
-REACT_APP_NODE_ENV="development"

 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
@@ -15,15 +14,11 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"

 REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
-
-#SOCKETS ENDS
-REACT_APP_PRIMARY_SOCKET="https://socket-dev.wrenchboard.com"

 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"

 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000

 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -44,9 +39,7 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/

-#File Handling
-REACT_APP_MAX_FILE_SIZE=1048576
-REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
+REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -70,32 +63,4 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39

 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
-REACT_APP_FAMILY_MAXIMUM_AGE=18
-
-#CHANGE LOGIN LAYOUT
-REACT_APP_NEW_LOGIN_LAYOUT=1
-
-#APP DOWNLOAD LINKS
-REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
-
-# Displays the new family dashboard with boxes
-REACT_APP_SHOW_NEW_FAMILY_DASH=1
-
-# Displays the account dashboard
-REACT_APP_SHOW_ACCOUNT_DASH=1
-
-# Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
-
-# FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
-
-# FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
-
-# REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
-
-#SHOW OR HIDE MY PAGE LINK ROUTE
-REACT_APP_SHOW_USER_PAGE=1
+REACT_APP_FAMILY_MAXIMUM_AGE=18
@@ -1,5 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true 
-REACT_APP_NODE_ENV="production"

 REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
 REACT_APP_TWITTER="https://twitter.com/fluxtra"
@@ -15,15 +14,11 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"

 REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
 REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
-REACT_APP_ENDPOINT_KEY="WRENCH-BOARD-2024"
-
-#SOCKETS ENDS
-REACT_APP_PRIMARY_SOCKET="https://socket.wrenchboard.com"

 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"

 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000

 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -51,9 +46,7 @@ REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin

 DISABLE_ESLINT_PLUGIN=true

-#File Handling
-REACT_APP_MAX_FILE_SIZE=1048576
-REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
+REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -77,31 +70,3 @@ REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
 #FAMILY MEMBER MINIMUM AGE
 REACT_APP_FAMILY_MINIMUM_AGE=4
 REACT_APP_FAMILY_MAXIMUM_AGE=18
-
-#CHANGE LOGIN LAYOUT
-REACT_APP_NEW_LOGIN_LAYOUT=1
-
-#APP DOWNLOAD LINKS
-REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
-REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
-
-# Displays the new family dashboard with boxes
-REACT_APP_SHOW_NEW_FAMILY_DASH=1
-
-# Displays the account dashboard
-REACT_APP_SHOW_ACCOUNT_DASH=1
-
-# Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
-
-# FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
-
-# FOR FAMILY GAME LINK
-REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
-
-# REACT APP CUSTOMTIMER
-REACT_APP_CUSTOMTIMER=90
-
-#SHOW OR HIDE MY PAGE LINK ROUTE
-REACT_APP_SHOW_USER_PAGE=0
@@ -21,14 +21,5 @@
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
-  },
-  "cSpell.words": [
-    "completesignuplink",
-    "MOBILEUSER",
-    "MYFILES",
-    "mynotifications",
-    "PASSWORDRESET",
-    "TRANSFERSTART",
-    "WRENCHBOARD"
-  ]
+  }
 }
@@ -1,8 +1,5 @@
 # pull the base image
-#FROM node:alpine
-FROM node:20.11.0-alpine
-
-
+FROM node:alpine

 # Build args
 ARG NODE_ENV
@@ -29,7 +26,7 @@ COPY nginx.conf ./

 COPY run.sh ./

-# RUN npm install --legacy-peer-deps
+RUN npm install --legacy-peer-deps

 # add app
 COPY . ./
@@ -21,10 +21,9 @@ services:
      - backend.wrenchboard.api.live:10.10.33.15
      - backend.wrenchboard.api.test:10.10.33.15
      - apigate.lotus.g1.wrenchboard.com:10.10.33.15
-      - apigate.nebula.g1.wrenchboard.com:10.10.33.15
      - apigate.orion.g1.wrenchboard.com:10.10.33.15
-      - socket-dev.wrenchboard.com:10.10.33.15
-      - socket.wrenchboard.com:10.10.33.15
+      # #- backend.wrenchboard.api.live:172.31.4.27
+      # #- backend.wrenchboard.api.test:10.20.30.27
      - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
      - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
    environment:
@@ -3,7 +3,6 @@
  "version": "0.2.0",
  "private": true,
  "dependencies": {
-    "@fvilers/disable-react-devtools": "^1.3.0",
    "@react-oauth/google": "^0.11.0",
    "@reduxjs/toolkit": "^1.8.2",
    "@tailwindcss/line-clamp": "^0.3.1",
@@ -32,13 +31,12 @@
    "react-toastify": "^9.0.1",
    "redux": "^4.2.0",
    "slick-carousel": "^1.8.1",
-    "socket.io-client": "^4.4.1",
    "web-vitals": "^1.0.1",
    "yup": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start -e .env.development",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
+    "build": "react-scripts build -e .env.production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
@@ -6,18 +6,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

-    <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."
-    />
+
+    <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 "/>
    <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)}()
@@ -26,9 +17,6 @@
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>WrenchBoard</title>
-
-    <!-- FONT AWESOME -->
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.1/css/all.css"/>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,6 +1,6 @@
 {
-  "short_name": "WrenchBoard App",
-  "name": "WrenchBoard User Web",
+  "short_name": "React App",
+  "name": "Create React App Sample",
  "icons": [],
  "start_url": ".",
  "display": "standalone",
@@ -14,8 +14,6 @@ else
  echo "Production build"
  npm install --legacy-peer-deps
  npm run build
-  # Testing sometimes
-  # npm run start
  nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
  nginx -c /usr/src/app/nginx.conf
 fi
@@ -1,34 +1,15 @@
-import {Suspense, lazy} from 'react'
-import { Navigate, useLocation } from "react-router-dom";
-// import Routers from "./Routers";
-// import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 import Toaster from "./components/Helpers/Toaster";
+import Routers from "./Routers";
 import Default from "./components/Partials/Default";

-import { disableReactDevTools } from '@fvilers/disable-react-devtools';
-import LoadingSpinner from './components/Spinners/LoadingSpinner';
-
-if (process.env.REACT_APP_NODE_ENV === 'production') {
-    disableReactDevTools();
-}
-const Routers = lazy(()=>import('./Routers'))
 function App() {
-  const { pathname } = useLocation();
  return (
-    <Default>
-      {/* <SocketIOContextProvider> */}
-        <>
-          {pathname.startsWith("/@") ? (
-            <Navigate to="/app" replace={true} />
-          ) : (
-            <Suspense fallback={<LoadingSpinner size="32" color="sky-blue" height="h-screen" />}>
+      <Default>
+          <>
              <Routers />
-            </Suspense>
-          )}
-          <Toaster />
-        </>
-      {/* </SocketIOContextProvider> */}
-    </Default>
+              <Toaster />
+          </>
+      </Default>
  );
 }

@@ -1,200 +1,133 @@
 import { Route, Routes } from "react-router-dom";
-import { lazy } from "react";
-
-import LoginLandingPage from './views/LoginLandingPage'
+import FourZeroFour from "./components/FourZeroFour";
+import ScrollToTop from "./components/Helpers/ScrollToTop";
+import MyCollection from "./components/MyCollection";
+import Notification from "./components/Notification";
+import AuthRoute from "./middleware/AuthRoute";
+import AcitveBidsPage from "./views/AcitveBidsPage";
+import AuthProfilePage from "./views/AuthProfilePage";
+import CollectionItemPage from "./views/CollectionItemPage";
+import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import HistoryPage from "./views/HistoryPage";
+import HomePages from "./views/HomePages";
 import LoginPage from "./views/LoginPage";
-import SocketConnection from "./middleware/SocketConnection";
-
-const HomePages = lazy(() => import("./views/HomePages"));
-const FourZeroFour = lazy(() => import("./components/FourZeroFour"));
-const ScrollToTop = lazy(() => import("./components/Helpers/ScrollToTop"));
-const StartJob = lazy(() => import("./components/MyJobs/StartJob"));
-const Notification = lazy(() => import("./components/Notification"));
-const AuthRoute = lazy(() => import("./middleware/AuthRoute"));
-const AppDownloadPage = lazy(() => import("./views/AppDownloadPage"));
-const AppleRedirectPage = lazy(() => import("./views/AppleRedirectPage"));
-const AuthProfilePage = lazy(() => import("./views/AuthProfilePage"));
-const AuthRedirect = lazy(() => import("./views/AuthRedirect"));
-const BlogPage = lazy(() => import("./views/BlogPage"));
-const FacebookRedirect = lazy(() => import("./views/FacebookRedirect"));
-const FamilyManagePage = lazy(() => import("./views/FamilyManagePage"));
-const FamilyMarketPage = lazy(() => import("./views/FamilyMarketPage"));
-
-const ForgotPasswordPages = lazy(()=> import("./views/ForgotPasswordPages"));
-const ForgotPasswordPagesTwo = lazy(()=> import("./views/ForgotPasswordPagesTwo"));
-const HistoryPage = lazy(()=> import("./views/HistoryPage"));
-const JobGroupsPage = lazy(()=> import("./views/JobGroupsPage"));
-const LndPage = lazy(()=> import("./views/LndPage"));
-const LoginPageTwo = lazy(()=> import("./views/LoginPageTwo"));
-const ManageActiveJobs = lazy(()=> import("./views/ManageActiveJobs"));
-const ManageInterestOfferPage = lazy(()=> import("./views/ManageInterestOfferPage"));
-const MarketPlacePage = lazy(()=> import("./views/MarketPlacePage"));
-const MyActiveJobsPage = lazy(()=> import("./views/MyActiveJobsPage"));
-const MyCouponPage = lazy(()=> import("./views/MyCouponPage"));
-const MyJobsPage = lazy(()=> import("./views/MyJobsPage"));
-const MyOffersPage = lazy(()=> import("./views/MyOffersPage"));
-const MyPastDueJobsPage = lazy(()=> import("./views/MyPastDueJobsPage"));
-const MyReviewDueJobsPage = lazy(()=> import("./views/MyReviewDueJobsPage"));
-const MyTaskPage = lazy(()=> import("./views/MyTaskPage"));
-const MyWaitingJobsPage = lazy(()=> import("./views/MyWaitingJobsPage"));
-const MyWalletPage = lazy(()=> import("./views/MyWalletPage"));
-const OffersInterestPage = lazy(()=> import("./views/OffersInterestPage"));
-const ReferralPage = lazy(()=> import("./views/ReferralPage"));
-const RemindersPage = lazy(()=> import("./views/RemindersPage"));
-const ResourcePage = lazy(()=> import("./views/ResourcePage"));
-const SettingsPage = lazy(()=> import("./views/SettingsPage"));
-const SignupPage = lazy(()=> import("./views/SignupPage"));
-const SignupPageTwo = lazy(()=> import("./views/SignupPageTwo"));
-const TrackingPage = lazy(()=> import("./views/TrackingPage"));
-const UpdatePasswordPages = lazy(()=> import("./views/UpdatePasswordPages"));
-const UpdatePasswordPagesTwo = lazy(()=> import("./views/UpdatePasswordPagesTwo"));
-const UploadProductPage = lazy(()=> import("./views/UploadProductPage"));
-const UserProfilePage = lazy(()=> import("./views/UserProfilePage"));
-const VerifyLinkPages = lazy(()=> import("./views/VerifyLinkPages"));
-const VerifyLinkPagesTwo = lazy(()=> import("./views/VerifyLinkPagesTwo"));
-const VerifyPasswordPages = lazy(()=> import("./views/VerifyPasswordPages"));
-const VerifyPasswordPagesTwo = lazy(()=> import("./views/VerifyPasswordPagesTwo"));
-const VerifyYouPages = lazy(()=> import("./views/VerifyYouPages"));
-const VerifyYouPagesTwo = lazy(()=> import("./views/VerifyYouPagesTwo"));
-const YourPages = lazy(()=> import("./views/YourPage_"));
-const ParentWaitingPage = lazy(()=> import("./views/ParentWaitingPage"));
-const FamilyPendingOfferPage = lazy(()=> import("./views/FamilyPendingOfferPage"));
-const FamBlogPage = lazy(()=> import("./views/FamBlogPage"));
-const FamAIQuestionPage = lazy(()=> import("./views/FamAIQuestionPage"));
-const FamMyFilesPage = lazy(()=> import("./views/FamMyFilesPage"));
-const FamWorkInProgressPage = lazy(()=> import("./views/FamWorkInProgressPage"));
-const MyPastDueTasksPage = lazy(()=> import("./views/MyPastDueTasksPage"));
-const FamilyWalletPage = lazy(()=> import("./views/FamilyWalletPage"));
-const LearnMorePage = lazy(()=> import("./views/LearnMorePage"));
-const FamGamesPage = lazy(()=> import("./views/FamGamesPage"));
-const FamilyRoutesPage = lazy(()=> import("./views/FamilyRoutesPage"));
-const PromoPage = lazy(()=> import("./views/PromoPage"));
+import MarketPlacePage from "./views/MarketPlacePage";
+import MyWalletPage from "./views/MyWalletPage";
+import SavedPage from "./views/SavedPage";
+import SellPage from "./views/SellPage";
+import SettingsPage from "./views/SettingsPage";
+import ShopDetailsPage from "./views/ShopDetailsPage";
+import SignupPage from "./views/SignupPage";
+import UpdatePasswordPages from "./views/UpdatePasswordPages";
+import UploadProductPage from "./views/UploadProductPage";
+import UserProfilePage from "./views/UserProfilePage";
+import VerifyYouPages from "./views/VerifyYouPages";
+import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import RemindersPage from './views/RemindersPage';
+import TrackingPage from "./views/TrackingPage";
+import CalendarPage from "./views/CalendarPage";
+import ResourcePage from "./views/ResourcePage";
+import MyTaskPage from "./views/MyTaskPage";
+import MyJobsPage from "./views/MyJobsPage";
+import ReferralPage from "./views/ReferralPage";
+import VerifyLinkPages from "./views/VerifyLinkPages";
+import MyActiveJobsPage from "./views/MyActiveJobsPage";
+import FamilyAccPage from "./views/FamilyAccPage";
+import StartJob from "./components/MyJobs/StartJob";
+import AddJobPage from "./views/AddJobPage";
+import MyPendingJobsPage from "./views/MyPendingJobsPage";
+import ManageActiveJobs from "./views/ManageActiveJobs";
+import FamilyManagePage from "./views/FamilyManagePage";
+import MyCouponPage from "./views/MyCouponPage";
+import AuthRedirect from "./views/AuthRedirect";
+import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
+import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
+import OffersInterestPage from "./views/OffersInterestPage";
+import ManageInterestOfferPage from './views/ManageInterestOfferPage'
+import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
+import FamilyMarketPage from "./views/FamilyMarketPage";
+import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";

 export default function Routers() {
  return (
    <ScrollToTop>
      <Routes>
        {/* guest routes */}
-        {Number(process.env.REACT_APP_NEW_LOGIN_LAYOUT) === 1 ? (
-          <>
-            <Route exact path="/login" element={<LoginLandingPage />} />
-            <Route exact path="/login/:type" element={<LoginPageTwo />} />
-            <Route exact path="/signup" element={<SignupPageTwo />} />
-            <Route
-              exact
-              path="/forgot-password"
-              element={<ForgotPasswordPagesTwo />}
-            />
-            <Route
-              exact
-              path="/update-password"
-              element={<UpdatePasswordPagesTwo />}
-            />
-            <Route path="/vemail" element={<VerifyLinkPagesTwo />} />
-            <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
-            <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
-            <Route exact path="/eoffer" element={<LoginPageTwo />} />
-            <Route exact path="/invite" element={<SignupPageTwo />} />
-            <Route exact path="/promo/:name/:id" element={<PromoPage />} />
-          </>
-        ) : (
-          <>
-            <Route exact path="/login" element={<LoginPage />} />
-            <Route exact path="/signup" element={<SignupPage />} />
-            <Route
-              exact
-              path="/forgot-password"
-              element={<ForgotPasswordPages />}
-            />
-            <Route
-              exact
-              path="/update-password"
-              element={<UpdatePasswordPages />}
-            />
-            <Route path="/vemail" element={<VerifyLinkPages />} />
-            <Route path="/complereset" element={<VerifyPasswordPages />} />
-            <Route exact path="/outmessage" element={<VerifyYouPages />} />
-            <Route exact path="/eoffer" element={<LoginPage />} />
-            <Route exact path="/invite" element={<LoginPage />} />
-          </>
-        )}
+        <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/eoffer" element={<LoginPage />} />
+        <Route exact path="/invite" element={<LoginPage />} />
+
+        <Route exact path="/signup" element={<SignupPage />} />
        <Route exact path="/login/auth" element={<AuthRedirect />} />
        <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
-        <Route exact path="/lnd/*" element={<LndPage />} />
-        <Route exact path="/app" element={<AppDownloadPage />} />
+        <Route
+          exact
+          path="/forgot-password"
+          element={<ForgotPasswordPages />}
+        />
+        <Route
+          exact
+          path="/update-password"
+          element={<UpdatePasswordPages />}
+        />
+        <Route path="/vemail" element={<VerifyLinkPages />} />
+        <Route path="/complereset" element={<VerifyPasswordPages />} />
+        <Route exact path="/outmessage" element={<VerifyYouPages />} />

        {/* private route */}
-        <Route element={<SocketConnection />}>
-          <Route element={<AuthRoute />}>
-            <Route exact path="/" element={<HomePages />} />
-            <Route exact path="/reminders" element={<RemindersPage />} />
-            <Route exact path="/tracking" element={<TrackingPage />} />
-            <Route exact path="/resources" element={<ResourcePage />} />
-            <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
-            <Route exact path="/family-wallet" element={<FamilyWalletPage />} />
-            <Route exact path="/my-coupon" element={<MyCouponPage />} />
-            <Route exact path="/notification" element={<Notification />} />
-            <Route exact path="/market-place" element={<MarketPlacePage />} />
-            <Route exact path="/market" element={<MarketPlacePage />} />
-            <Route exact path="/familymarket" element={<FamilyMarketPage />} />
-            <Route exact path="/suggested" element={<ParentWaitingPage />} />
-            <Route exact path="/parentwaiting" element={<ParentWaitingPage />} />
-            <Route exact path="/pending" element={<FamilyPendingOfferPage />} />
-            <Route exact path="/fam-blog" element={<FamBlogPage />} />
-            <Route exact path="/ai-question" element={<FamAIQuestionPage />} />
-            <Route exact path="/myfiles" element={<FamMyFilesPage />} />
-            <Route exact path="/ai-lab" element={<FamAIQuestionPage />} />
-            <Route exact path="/fam-games" element={<FamGamesPage />} />
-            <Route exact path="/work-in-progress" element={<FamWorkInProgressPage />} />
+        <Route element={<AuthRoute />}>
+          <Route exact path="/" element={<HomePages />} />
+          {/*  <Route exact path="/active-bids" element={<AcitveBidsPage />} />
+          <Route exact path="/notification" element={<Notification />} />
+          <Route exact path="/market-place" element={<MarketPlacePage />} />
+          <Route exact path="/shop-details" element={<ShopDetailsPage />} />
+          <Route exact path="/my-wallet" element={<MyWalletPage />} />
+          <Route exact path="/my-collection" element={<MyCollection />} />*/}
+          <Route exact path="/reminders" element={<RemindersPage />} />
+          <Route exact path="/tracking" element={<TrackingPage />} />
+          <Route exact path="/calendar" element={<CalendarPage />} />
+          <Route exact path="/resources" element={<ResourcePage />} />
+          <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
+          <Route exact path="/my-coupon" element={<MyCouponPage />} />
+          <Route exact path="/notification" element={<Notification />} />
+          <Route exact path="/market-place" element={<MarketPlacePage />} />
+          <Route exact path="/market" element={<MarketPlacePage />} />
+          <Route exact path="/familymarket" element={<FamilyMarketPage />} />
+          <Route exact path="/notification" element={<Notification />} />
+          <Route exact path="/mytask" element={<MyTaskPage />} />
+          <Route exact path="/myjobs" element={<MyJobsPage />} />
+          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
+          <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
+          <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
+          <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
+          <Route exact path="/pend-interest"  element={<MyWaitingJobsPage />} />
+          <Route exact path="/my-review-jobs"  element={<MyReviewDueJobsPage />} />
+          <Route exact path="/acc-family"  element={<FamilyAccPage />} />
+          <Route exact path="/manage-family"  element={<FamilyManagePage />} />
+          <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+          <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
+          <Route exact path="/manage-offer"  element={<ManageInterestOfferPage />} />

-            <Route exact path="/pastdue" element={<MyPastDueTasksPage />} />
-            <Route exact path="/notification" element={<Notification />} />
-            <Route exact path="/mytask" element={<MyTaskPage />} />
-            <Route exact path="/myjobs" element={<MyJobsPage />} />
-            <Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
-            <Route
-              exact
-              path="/my-pastdue-jobs"
-              element={<MyPastDueJobsPage />}
-            />
-            <Route exact path="/my-offers" element={<MyOffersPage />} />
-            <Route exact path="/pend-interest" element={<MyWaitingJobsPage />} />
-            <Route
-              exact
-              path="/my-review-jobs"
-              element={<MyReviewDueJobsPage />}
-            />
-            <Route path='/acc-family/*' element={<FamilyRoutesPage />} />

-            <Route exact path="/manage-family" element={<FamilyManagePage />} />
-            <Route exact path="/start-job" element={<StartJob />} />
-            <Route exact path="/yourpage" element={<YourPages />} />
-            <Route
-              exact
-              path="/manage-active-job"
-              element={<ManageActiveJobs />}
-            />
-            <Route exact path="/blog-page" element={<BlogPage />} />
-            <Route
-              exact
-              path="/offer-interest"
-              element={<OffersInterestPage />}
-            />
-            <Route
-              exact
-              path="/manage-offer"
-              element={<ManageInterestOfferPage />}
-            />
-            <Route exact path="/history" element={<HistoryPage />} />
-            <Route exact path="/learnmore" element={<LearnMorePage />} />
-            <Route exact path="/my-uploads" element={<UploadProductPage />} />
-            <Route exact path="/profile" element={<AuthProfilePage />} />
-            <Route exact path="/user-profile" element={<UserProfilePage />} />
-            <Route exact path="/settings" element={<SettingsPage />} />
-            <Route exact path="/referral" element={<ReferralPage />} />
-            <Route exact path="/job-groups" element={<JobGroupsPage />} />
-          </Route>
+          <Route
+            exact
+            path="/my-collection/collection-item"
+            element={<CollectionItemPage />}
+          />
+          <Route exact path="/sell" element={<SellPage />} />
+          <Route exact path="/saved" element={<SavedPage />} />
+          <Route exact path="/history" element={<HistoryPage />} />
+          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
+          <Route exact path="/my-uploads" element={<UploadProductPage />} />
+          <Route exact path="/profile" element={<AuthProfilePage />} />
+          <Route exact path="/user-profile" element={<UserProfilePage />} />
+          <Route exact path="/settings" element={<SettingsPage />} />
+          <Route exact path="/referral" element={<ReferralPage />} />
        </Route>
        <Route path="*" element={<FourZeroFour />} />
      </Routes>
@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
-<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
+<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
+</svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="DownloadArrow"><g fill="#4687ba" class="color9a7baa svgShape"><path d="M30.179 3.525V1.857c0-1.551-1.784-2.415-3.011-1.449L24 2.907 20.824.402c-1.216-.959-3.002-.093-3.002 1.456v1.668a1 1 0 0 0 1 1h10.357c.552-.001 1-.449 1-1.001zM30.179 25.172v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM30.179 10.74V8.217a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357c.552-.001 1-.448 1-1.001zM30.179 17.956v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM25.748 47.029l9.336-15.018c.852-1.371-.133-3.145-1.748-3.145H14.664c-1.614 0-2.6 1.774-1.748 3.145l9.336 15.018a2.058 2.058 0 0 0 3.496 0z" fill="#000000" class="color000000 svgShape"></path></g></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 28" viewBox="0 0 32 28" id="List"><circle cx="2" cy="2" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M8 0h24v4H8z" class="color4e4e50 svgShape"></path><circle cx="10" cy="10" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 8h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="10" cy="26" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 24h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="18" cy="18" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M24 16h8v4h-8z" class="color4e4e50 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Group" x="0" y="0" version="1.1" viewBox="0 0 52 52" xml:space="preserve"><path d="M26.003 13.05c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43zM11.293 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.43 1.99-4.43 4.44 0 2.44 1.98 4.43 4.43 4.43z" fill="#4687ba" class="color000000 svgShape"></path><path d="M49.493 41.93a10.091 10.091 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.58 6.392 6.392 0 0 1-4.371-1.737.975.975 0 0 0-.158-.258l-9.184-9.903V22.1h4.344c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.09 10.09 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.579 6.43 6.43 0 0 1-5.144-2.58 10.085 10.085 0 0 0-3.645 3.74c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h4.346v6.624c-.01.022-.016.044-.025.066l-9.22 9.941a.978.978 0 0 0-.22.42 6.378 6.378 0 0 1-4.242 1.62 6.417 6.417 0 0 1-5.14-2.584 10.086 10.086 0 0 0-3.65 3.743c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.03 10.03 0 0 0-2.134-2.612l8.01-8.636 8.055 8.685c-.815.73-1.53 1.58-2.08 2.563-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95z" fill="#4687ba" class="color000000 svgShape"></path><path d="M40.713 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="List"><switch><g fill="#767fad" class="color000000 svgShape"><g fill="#4687ba" class="color0ac5ab svgShape"><path d="M20 0H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM56 0H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM20 36H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8zM56 36H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8z" fill="#767fad" class="color000000 svgShape"></path></g></g></switch></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" id="List"><path d="M0 0v3h3V0H0zm4 0v1h4V0H4zm0 2v1h3V2H4zM0 4v3h3V4H0zm4 0v1h4V4H4zm0 2v1h3V6H4z" fill="#b22b7d" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="List"><path d="M9 3a6 6 0 1 0 6 6A6 6 0 0 0 9 3zM9 13a4 4 0 1 1 4-4A4 4 0 0 1 9 13zM17 9H28a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM17 13h6a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM9 17a6 6 0 1 0 6 6A6 6 0 0 0 9 17zM9 27a4 4 0 1 1 4-4A4 4 0 0 1 9 27zM28 21H17a1 1 0 0 0 0 2H28a1 1 0 0 0 0-2zM23 25H17a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page"><path fill-rule="evenodd" d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z" fill="#767fad" class="color000000 svgShape"></path></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 64 64" id="delete"><path d="M44.41 19.59a2 2 0 0 0-2.83 0L32 29.18l-9.59-9.59a2 2 0 0 0-2.83 2.83L29.17 32l-9.59 9.59a2 2 0 1 0 2.83 2.83L32 34.83l9.59 9.59a2 2 0 0 0 2.83-2.83L34.83 32l9.59-9.59a2 2 0 0 0-.01-2.82Z" fill="#b22b7d" class="color000000 svgShape"></path><path d="M32 3a29 29 0 1 0 29 29A29 29 0 0 0 32 3Zm0 54a25 25 0 1 1 25-25 25 25 0 0 1-25 25Z" fill="#b22b7d" class="color000000 svgShape"></path></svg>
@@ -1,28 +1,74 @@
-import {
-  validationSchema as VS,
-  useDispatch,
-  useSelector,
-  usersService,
-  // initialValues as IV,
-  initialReqState,
-  useState,
-  tableReload,
-  Formik,
-  InputCom,
-  Field,
-  Form,
-  LoadingSpinner,
-} from "./settings";
+import { Field, Form, Formik } from "formik";
+import React, { useEffect, 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";
+import LoadingSpinner from "../Spinners/LoadingSpinner";

-const validationSchema = VS;
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Currency is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(499, "Maximum 499 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});

 function AddJob({ popUpHandler, categories }) {
  const ApiCall = new usersService();
  const { walletDetails } = useSelector((state) => state.walletDetails);
-
  let dispatch = useDispatch();

-  const [requestStatus, setRequestStatus] = useState(initialReqState); // Holds state when submit button is pressed
+  let initialValues = {
+    // initial values for formik
+    country: "",
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // Holds state when submit button is pressed
+
+  const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+    const walletChecker = walletDetails?.data.find(
+      (item) => item.country === country
+    );
+    return walletChecker ? walletChecker.amount : 0;
+  };

  const handleAddJob = async (values, helpers) => {
    const reqData = {
@@ -35,6 +81,21 @@ function AddJob({ popUpHandler, categories }) {
      category: values.category?.join("@"),
    };

+    const walletAmount = getWalletDetail(reqData.country); // GETTING USER BALANCE BASED ON COUNTRY SELECTED
+
+    if (reqData.price > walletAmount) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Insufficient Balance",
+      });
+
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 1500);
+      return;
+    }
+
    setRequestStatus({ loading: true, status: false, message: "" });

    try {
@@ -72,74 +133,49 @@ function AddJob({ popUpHandler, categories }) {
    }
  };

-  // For form initial values
-  const initialValues = {
-    // initial values for formik
-    country: walletDetails.data.length === 1 ? walletDetails.data[0].country : '',
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  };
-
  return (
-    <Formik
+    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
+      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleAddJob}
      >
        {(props) => {
          return (
-            <Form className='contents'>
-              <div className="add-job p-5 w-full h-full rounded-md flex flex-col justify-between overflow-y-auto">
-                <div className="flex flex-col-reverse sm:flex-row">
-                  <div className="fields w-full">
-                    {/* inputs starts here */}
-                    <div className="xl:flex xl:space-x-7 mb-[5px]">
-                      <div className="field w-full mb-[5px] xl:mb-0">
-                        <label
-                          htmlFor="country"
-                          className="job-label job-label-flex"
-                        >
-                          <span>Currency</span>
-                          {props.errors.country && props.touched.country && (
-                            <span className="text-[12px] text-red-500">
-                              {props.errors.country}
-                            </span>
-                          )}
-                        </label>
-                        <select
-                          id="country"
-                          name="country"
-                          value={props.values.country}
-                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border`}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                          disabled={walletDetails.data.length === 1}
-                        >
-                          {walletDetails?.loading ? (
-                            <option className="text-slate-500 text-lg" value="">
-                              Loading...
-                            </option>
-                          ) : walletDetails.data.length > 1 ? (
-                            <>
-                              <option className="text-slate-500 text-lg" value="">
-                                Select a currency
-                              </option>
-                              {walletDetails.data?.map((item, index) => (
-                                <option
-                                  key={index}
-                                  className="text-slate-500 text-lg"
-                                  value={item?.country}
-                                >
-                                  {item?.description}
-                                </option>
-                              ))}
-                            </>
-                          ) : walletDetails.data.length === 1 ?
+            <Form>
+              <div className="flex flex-col-reverse sm:flex-row">
+                <div className="fields w-full">
+                  {/* inputs starts here */}
+                  <div className="xl:flex xl:space-x-7 mb-[5px]">
+                    <div className="field w-full mb-6 xl:mb-0">
+                      <label
+                        htmlFor="country"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+                      >
+                        Currency
+                        {props.errors.country && props.touched.country && (
+                          <span className="text-[12px] text-red-500">
+                            {props.errors.country}
+                          </span>
+                        )}
+                      </label>
+                      <select
+                        id="country"
+                        name="country"
+                        value={props.values.country}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                      >
+                        {walletDetails.loading ? (
+                          <option className="text-slate-500 text-lg" value="">
+                            Loading...
+                          </option>
+                        ) : walletDetails.data.length ? (
                          <>
+                            <option className="text-slate-500 text-lg" value="">
+                              Select a currency
+                            </option>
                            {walletDetails.data?.map((item, index) => (
                              <option
                                key={index}
@@ -150,274 +186,239 @@ function AddJob({ popUpHandler, categories }) {
                              </option>
                            ))}
                          </>
-                          :(
-                            <option className="text-slate-500 text-lg" value="">
-                              No Options Found! Try Again
-                            </option>
-                          )}
-                        </select>
-                      </div>
-
-                      {/* Price */}
-                      <div className="field w-full mb-[5px] xl:mb-0">
-                        <InputCom
-                          fieldClass="px-6 text-right flex"
-                          label="Reward"
-                          labelClass=""
-                          type="number"
-                          name="price"
-                          placeholder="0"
-                          value={props.values.price}
-                          inputHandler={props.handleChange}
-                          blurHandler={props.handleBlur}
-                          error={
-                            props.errors.price &&
-                            props.touched.price &&
-                            props.errors.price
-                          }
-                        />
-                      </div>
-
-                      {/* Timeline */}
-                      <div className="field w-full mb-[5px] xl:mb-0">
-                        <label
-                            className="job-label job-label-flex"
-                            htmlFor="timeline_days"
-                          >
-                            Timeline
-                            <span className="text-green-700 text-[12px] tracking-wide">
-                              - Duration
-                            </span>
-                          </label>
-
-                        <Field
-                          component="select"
-                          name="timeline_days"
-                          className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray w-full h-[42px] bg-slate-100 focus:ring-0 focus:outline-none border ${
-                            props.errors.timeline_days &&
-                            props.touched.timeline_days
-                              ? "border-[#ff0a0a63] shadow-red-500 animate-shake"
-                              : "dark:border-[#5e6278]"
-                          }`}
-                          value={props.values.timeline_days}
-                        >
-                          <option value="" className='text-slate-500 text-lg'>Select Duration</option>
-                          {publicArray.map(({ name, duration }, idx) => (
-                            <option
-                              key={idx}
-                              className="text-slate-500 text-lg"
-                              value={duration}
-                            >
-                              {name}
-                            </option>
-                          ))}
-                        </Field>
-                      </div>
-                    </div>
-
-                    {/* Title  */}
-                    <div className="field w-full mb-[5px]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Title"
-                        labelClass=""
-                        type="text"
-                        name="title"
-                        value={props.values.title}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        error={
-                          props.errors.title &&
-                          props.touched.title &&
-                          props.errors.title
-                        }
-                      />
-                    </div>
-
-                    {/* Description  */}
-                    <div className="field w-full mb-[5px]">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Description"
-                        labelClass=""
-                        type="text"
-                        name="description"
-                        value={props.values.description}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                        error={
-                          props.errors.description &&
-                          props.touched.description &&
-                          props.errors.description
-                        }
-                      />
-                    </div>
-
-                    {/* Details */}
-                    <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
-                      <div className="sm:w-[60%] w-full">
-                        <label
-                          htmlFor="Job Delivery Details"
-                          className="job-label job-label-flex"
-                        >
-                          Job Delivery Details
-                          {props.errors.job_detail &&
-                            props.touched.job_detail && (
-                              <span className="text-[12px] text-red-500">
-                                {props.errors.job_detail}
-                              </span>
-                            )}
-                        </label>
-                        <textarea
-                          id="Job Delivery Details"
-                          rows="5"
-                          className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
-                          style={{ resize: "none" }}
-                          name="job_detail"
-                          value={props.values.job_detail}
-                          onChange={props.handleChange}
-                          onBlur={props.handleBlur}
-                        />
-                      </div>
-
-                      <div className="sm:w-[35%] w-full">
-                        <label
-                          htmlFor="Job Categories"
-                          className='job-label'
-                          id="checked-group"
-                        >
-                          Categories
-                        </label>
-                        <div
-                          className="sm:flex-col flex flex-wrap px-3 mt-3"
-                          role="group"
-                          aria-labelledby="checked-group"
-                        >
-                          {categories ? (
-                            <>
-                              {Object?.entries(categories).map(([key, value]) => (
-                                <label
-                                  key={key}
-                                  className="flex gap-1 w-full items-center"
-                                >
-                                  <Field
-                                    type="checkbox"
-                                    name="category"
-                                    value={key}
-                                  />
-                                  <span className="text-[13.975px]">{value}</span>
-                                </label>
-                              ))}
-                            </>
-                          ) : (
-                            <label className="flex gap-1 w-full items-center">
-                              <Field type="checkbox" name="category" />
-                              <span className="text-[13.975px]">null</span>
-                            </label>
-                          )}
-                          <span className="h-5 text-sm italic text-[#cf3917]">
-                            {props.errors.category &&
-                              props.touched.category &&
-                              "please select a category"}
-                          </span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* <div className="field w-full mb-[5px]">
-                      <div className={`flex items-center justify-between mb-2.5`}>
-                        <label
-                          className="job-label"
-                          htmlFor="timeline_days"
-                        >
-                          Timeline
-                          <span className="text-green-700 text-sm tracking-wide">
-                            - Expected duration of this task
-                          </span>
-                        </label>
-                      </div>
-
-                      <Field
-                        component="select"
-                        name="timeline_days"
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
-                          props.errors.timeline_days &&
-                          props.touched.timeline_days
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        }`}
-                        value={props.values.timeline_days}
-                      >
-                        <option value="">Select Duration</option>
-                        {publicArray.map(({ name, duration }, idx) => (
-                          <option
-                            key={idx}
-                            className="text-slate-500 text-lg"
-                            value={duration}
-                          >
-                            {name}
+                        ) : (
+                          <option className="text-slate-500 text-lg" value="">
+                            No Options Found! Try Again
                          </option>
-                        ))}
-                      </Field>
-                    </div> */}
-                    {/* inputs ends here */}
-                  </div>
-                </div>
+                        )}
+                      </select>
+                    </div>

-                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-                <div className="content-footer w-full">
-                  {/* error or success display */}
-                  {requestStatus.message !== "" &&
-                    (!requestStatus.status ? (
+                    {/* Price */}
+                    <div className="field w-full">
+                      <InputCom
+                        fieldClass="px-6 text-right"
+                        label="Price"
+                        labelClass="tracking-wide"
+                        type="number"
+                        name="price"
+                        placeholder="0"
+                        value={props.values.price}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        error={
+                          props.errors.price &&
+                          props.touched.price &&
+                          props.errors.price
+                        }
+                      />
+                    </div>
+                  </div>
+
+                  {/* Title  */}
+                  <div className="field w-full mb-[5px]">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Title"
+                      labelClass="tracking-wide"
+                      type="text"
+                      name="title"
+                      value={props.values.title}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                      error={
+                        props.errors.title &&
+                        props.touched.title &&
+                        props.errors.title
+                      }
+                    />
+                  </div>
+
+                  {/* Description  */}
+                  <div className="field w-full mb-[5px]">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Description"
+                      labelClass="tracking-wide"
+                      type="text"
+                      name="description"
+                      value={props.values.description}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                      error={
+                        props.errors.description &&
+                        props.touched.description &&
+                        props.errors.description
+                      }
+                    />
+                  </div>
+
+                  {/* Details */}
+                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                    <div className="sm:w-[60%] w-full">
+                      <label
+                        htmlFor="Job Delivery Details"
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                      >
+                        Job Delivery Details
+                        {props.errors.job_detail &&
+                          props.touched.job_detail && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.job_detail}
+                            </span>
+                          )}
+                      </label>
+                      <textarea
+                        id="Job Delivery Details"
+                        rows="5"
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
+                        style={{ resize: "none" }}
+                        name="job_detail"
+                        value={props.values.job_detail}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                      />
+                    </div>
+
+                    <div className="sm:w-[35%] w-full">
                      <div
-                        className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        htmlFor="Job Categories"
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        id="checked-group"
+                      >
+                        Categories
+                      </div>
+                      <div
+                        className="sm:flex-col flex flex-wrap px-3 mt-3"
+                        role="group"
+                        aria-labelledby="checked-group"
+                      >
+                        {categories ? (
+                          <>
+                            {Object?.entries(categories).map(([key, value]) => (
+                              <label
+                                key={key}
+                                className="flex gap-1 w-full items-center"
+                              >
+                                <Field
+                                  type="checkbox"
+                                  name="category"
+                                  value={key}
+                                />
+                                <span className="text-[13.975px]">{value}</span>
+                              </label>
+                            ))}
+                          </>
+                        ) : (
+                          <label className="flex gap-1 w-full items-center">
+                            <Field type="checkbox" name="category" />
+                            <span className="text-[13.975px]">null</span>
+                          </label>
+                        )}
+                        <span className="h-5 text-sm italic text-[#cf3917]">
+                          {props.errors.category &&
+                            props.touched.category &&
+                            "please select a category"}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="field w-full mb-[5px]">
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
+                      name="timeline_days"
+                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
+                        props.errors.timeline_days &&
+                        props.touched.timeline_days
+                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                      }`}
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          key={idx}
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
+                  </div>
+                  {/* inputs ends here */}
+                </div>
+              </div>
+
+              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+              <div className="content-footer w-full">
+                {/* error or success display */}
+                {requestStatus.message != "" &&
+                  (!requestStatus.status ? (
+                    <div
+                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    >
+                      {requestStatus.message}
+                    </div>
+                  ) : (
+                    requestStatus.status && (
+                      <div
+                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
                      >
                        {requestStatus.message}
                      </div>
-                    ) : (
-                      requestStatus.status && (
-                        <div
-                          className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                        >
-                          {requestStatus.message}
-                        </div>
-                      )
-                    ))}
-                  {/* End of error or success display */}
+                    )
+                  ))}
+                {/* End of error or success display */}

-                </div>
-              </div>
-              <div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
-                <div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
-                  <button
-                    type="button"
-                    className="custom-btn border border-light-red text-light-red"
-                  >
-                    <span
-                      className="px-2"
-                      onClick={popUpHandler}
-                    >
-                      {" "}
-                      Cancel
-                    </span>
-                  </button>
-
-                  {requestStatus?.loading ? (
-                    <LoadingSpinner size="8" color="sky-blue" />
-                  ) : (
+                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                  <div className="flex items-center space-x-4 mr-9">
                    <button
-                      type="submit"
-                      className="custom-btn btn-gradient text-white"
+                      type="button"
+                      className="text-18 text-light-red tracking-wide "
                    >
-                      Add Job
+                      <span
+                        className="border-b dark:border-[#5356fb29]  border-light-red"
+                        onClick={popUpHandler}
+                      >
+                        {" "}
+                        Cancel
+                      </span>
                    </button>
-                  )}
+
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="8" color="sky-blue" />
+                    ) : (
+                      <button
+                        type="submit"
+                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                      >
+                        Add Job
+                      </button>
+                    )}
+                  </div>
                </div>
              </div>
            </Form>
          );
        }}
      </Formik>
+    </div>
  );
 }

@@ -1,100 +0,0 @@
-import { Field, Form, Formik } from "formik";
-import { useEffect, 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";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-
-// Initialize state for request values
-const initialReqState = {
-  loading: false,
-  status: false,
-  message: "",
-};
-
-// For form initial values
-const initialValues = {
-  // initial values for formik
-  country: "",
-  price: "",
-  title: "",
-  description: "",
-  job_detail: "",
-  timeline_days: "",
-  category: [],
-};
-
-// const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
-//   const walletChecker = walletDetails?.data.find(
-//     (item) => item.country === country
-//   );
-//   return walletChecker ? walletChecker.amount : 0;
-// };
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-  country: Yup.string()
-    .min(1, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Currency is required"),
-  price: Yup.string()
-    .typeError("Invalid number")
-    .min(1, "Price must be greater than 0")
-    .test("no-e", "Invalid number", (value) => {
-      if (value && /\d+e/.test(value)) {
-        return false;
-      }
-      return true;
-    })
-    .required("Price is required"),
-  title: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(80, "Maximum 80 characters")
-    .required("Title is required"),
-  description: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(299, "Maximum 299 characters")
-    .required("Description is required"),
-  job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(499, "Maximum 499 characters")
-    .required("Details is required"),
-  timeline_days: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, "Price must be greater than 0")
-    .required("Timeline is required"),
-  category: Yup.array().min(1, "Select category"),
-});
-
-const getWalletDetail = (countryParams, walletDetails) => {
-  // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
-  const walletChecker = walletDetails?.data.find(
-    (item) => item.country === countryParams
-  );
-  return walletChecker
-    ? {
-        description: walletChecker.description,
-        country: walletChecker.country,
-      }
-    : "";
-};
-
-export {
-  Field,
-  Form,
-  Formik,
-  useState,
-  useEffect,
-  useDispatch,
-  useSelector,
-  usersService,
-  InputCom,
-  LoadingSpinner,
-  initialReqState,
-  initialValues,
-  validationSchema,
-  getWalletDetail,
-  tableReload
-};
@@ -1,9 +0,0 @@
-import React from 'react'
-
-export default function AppDownload() {
-  return (
-    <div>
-      <div className='h-screen flex justify-center items-center'>App Download Content Comes here</div>
-    </div>
-  )
-}
@@ -1,90 +0,0 @@
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import { localImgLoad } from "../../lib";
-import WrenchBoard from "../../assets/images/wrenchboard-logo-text.png";
-
-import DarkModeContext from "../Contexts/DarkModeContext";
-
-export default function AuthLayout2({ slogan, children }) {
-  // const bgImg = localImgLoad("images/left-wrenchboard.jpg");
-  const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg");
-  const bgImgCom = localImgLoad("images/wrench-home-back-common.jpg");
-
-  const { countryMode } = useContext(DarkModeContext);
-
-  return (
-    <div
-      className={`relative min-h-screen overflow-y-auto bg-cover bg-center flex flex-col items-center`}
-      style={{
-        backgroundImage: `url(${countryMode === "NG" ? bgImgNig : bgImgCom})`,
-      }}
-    >
-      <div className="my-5">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
-      <div className={`h-full w-full mb-5 grid grid-cols-1 place-content-center`}>
-        {/* <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="pt-5 pb-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='absolute left-0 right-0 bottom-0'>
-        <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>
-
-    </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  default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  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>
@@ -1,63 +1,63 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import authProfilePic from "../../../assets/images/auth-profile-picture.png";
 import profileBanner from "../../../assets/images/profile-cover.png";
+import collections from "../../../data/collectionplan_data.json";
+import marketPlace from "../../../data/marketplace_data.json";
+import products from "../../../data/product_data.json";
 import Layout from "../../Partials/Layout";
 import ActivitiesTab from "./ActivitiesTab";
-// import collections from "../../../data/collectionplan_data.json";
-// import marketPlace from "../../../data/marketplace_data.json";
-// import products from "../../../data/product_data.json";
-// import CollectionTab from "./CollectionTab";
-// import CreatedTab from "./CreatedTab";
-// import HiddenProductsTab from "./HiddenProductsTab";
-// import OnSaleTab from "./OnSaleTab";
-// import OwnTab from "./OwnTab";
+import CollectionTab from "./CollectionTab";
+import CreatedTab from "./CreatedTab";
+import HiddenProductsTab from "./HiddenProductsTab";
+import OnSaleTab from "./OnSaleTab";
+import OwnTab from "./OwnTab";

 export default function AuthProfile() {
-  // const onSaleProducts = marketPlace.data;
-  // const CreatedSell = marketPlace.data;
-  // const CreatedBits = products.datas;
+  const onSaleProducts = marketPlace.data;
+  const CreatedSell = marketPlace.data;
+  const CreatedBits = products.datas;
  // const mainProducts = products.datas;
-  // const ownProducts = products.datas;
-  // const collectionProducts = collections.data;
+  const ownProducts = products.datas;
+  const collectionProducts = collections.data;

-  // const tabs = [
-  //   {
-  //     id: 1,
-  //     name: "onsale",
-  //     content: "On Sale",
-  //   },
-  //   {
-  //     id: 2,
-  //     name: "owned",
-  //     content: "Owned",
-  //   },
-  //   {
-  //     id: 3,
-  //     name: "created",
-  //     content: "Created",
-  //   },
-  //   {
-  //     id: 4,
-  //     name: "hidden",
-  //     content: "Hidden",
-  //   },
-  //   {
-  //     id: 5,
-  //     name: "collection",
-  //     content: "Collection",
-  //   },
-  //   {
-  //     id: 6,
-  //     name: "activity",
-  //     content: "Activity",
-  //   },
-  // ];
+  const tabs = [
+    {
+      id: 1,
+      name: "onsale",
+      content: "On Sale",
+    },
+    {
+      id: 2,
+      name: "owned",
+      content: "Owned",
+    },
+    {
+      id: 3,
+      name: "created",
+      content: "Created",
+    },
+    {
+      id: 4,
+      name: "hidden",
+      content: "Hidden",
+    },
+    {
+      id: 5,
+      name: "collection",
+      content: "Collection",
+    },
+    {
+      id: 6,
+      name: "activity",
+      content: "Activity",
+    },
+  ];

-  // const [tab, setTab] = useState(tabs[0].name);
-  // const tabHandler = (value) => {
-  //   setTab(value);
-  // };
+  const [tab, setTab] = useState(tabs[0].name);
+  const tabHandler = (value) => {
+    setTab(value);
+  };
  return (
    <>
      <Layout>
@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-// import usersService from '../../../services/UsersService';
-// import {updateUserDetails} from "../../../store/UserDetails";
-// import { useDispatch } from "react-redux";
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
 import AuthLayout from "../AuthLayout";

 function AppleRedirect() {
    const location = useLocation();
    const navigate = useNavigate();
-    // const userApi = new usersService();
-    // const dispatch = useDispatch()
+    const userApi = new usersService();
+    const dispatch = useDispatch()

    const queryParams = new URLSearchParams(location?.search);
    const codeResponse = queryParams.get("code");
@@ -36,11 +36,11 @@ function AppleRedirect() {
      redirect_uri=https%3A//oauth2.example.com/code&
      grant_type=authorization_code
      */
-      // var reqData = {
-      //   auth_type: "APPLE",
-      //   code: codeResponse,
-      //   redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      // };
+      var reqData = {
+        auth_type: "APPLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
    //   userApi
    //     .authStart(reqData)
    //     .then((res) => {
@@ -58,7 +58,7 @@ function AppleRedirect() {
    //       navigate('/login', {state: {error: true}})
    //       console.log(error);
    //     });
-    },[codeResponse, navigate])
+    },[])
  return (
    <AuthLayout>
    <div className='min-h-[70vh]'>Redirecting ... </div>
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from 'react-router-dom';
 import usersService from '../../../services/UsersService';
@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
 function FbookRedirect() {
    const location = useLocation();
    const navigate = useNavigate();
-    const userApi = useMemo(()=> new usersService(),[]);
+    const userApi = new usersService();
    const dispatch = useDispatch()

    const queryParams = new URLSearchParams(location?.search);
@@ -52,7 +52,7 @@ function FbookRedirect() {
      userApi
        .authStart(reqData)
        .then((res) => {
-          if (res.status === 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
            localStorage.setItem("member_id", `${res.data.member_id}`);
            localStorage.setItem("uid", `${res.data.uid}`);
            localStorage.setItem("session_token", `${res.data.session}`);
@@ -66,7 +66,7 @@ function FbookRedirect() {
          navigate('/login', {state: {error: true}})
          console.log(error);
        });
-    },[codeResponse, userApi, dispatch, navigate])
+    },[])
  return (
    <AuthLayout>
    <div className='min-h-[70vh]'>Redirecting ... </div>
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
@@ -8,7 +8,7 @@ import AuthLayout from "../AuthLayout";
 function Redirect() {
  const location = useLocation();
  const navigate = useNavigate();
-  const userApi = useMemo(()=> new usersService(),[]);
+  const userApi = new usersService();
  const dispatch = useDispatch();

  const queryParams = new URLSearchParams(location?.search);
@@ -40,7 +40,7 @@ function Redirect() {
      .authStart(reqData)
      .then((res) => {
        if (
-          res.status === 200 &&
+          res.status == 200 &&
          res.data.internal_return >= 0 &&
          res.data.member_id &&
          res.data.uid &&
@@ -59,7 +59,7 @@ function Redirect() {
        navigate("/login", { state: { error: true } });
        console.log(error);
      });
-  }, [codeResponse, userApi, dispatch, navigate]);
+  }, []);
  return (
    <AuthLayout>
      <div className="min-h-[70vh]">Redirecting ... </div>
@@ -38,7 +38,7 @@ export default function ForgotPassword() {
  }

  const resetHandler = async () => {
-    if (email === "") {
+    if (email == "") {
      setMsgError("An email is required");
      return setTimeout(() => {
        setMsgError(null);
@@ -59,7 +59,7 @@ export default function ForgotPassword() {
    }

    if (email !== "" && checked) {
-      const reqData = { email };
+      const reqData = { email, action:11013 };
      setResetLoading(true);
      try {
        const res = await userApi.StartResetPassword(reqData);
@@ -1,202 +0,0 @@
-import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-// import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-import EmailValidator from "../../../lib/EmailValidator";
-import ForgetPwdResponse from "../ForgetPwdResponse";
-
-import ReCAPTCHA from "react-google-recaptcha";
-
-export default function ForgotPassword() {
-  const [checked, setValue] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false);
-  // email
-  const [email, setMail] = useState("");
-  const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(null);
-
-  const navigate = useNavigate();
-  const userApi = new usersService();
-
-  const handleEmail = (e) => {
-    setMail(e?.target.value);
-  };
-
-  // const humanChecker = () => {
-  //   setValue(!checked);
-  // };
-
-  function humanChecker(value) {
-    // console.log("Captcha value:", value);
-    if(value){
-      setValue(true)
-    }else{
-      setValue(false)
-    }
-  }
-
-  const resetHandler = async () => {
-    if (email === "") {
-      setMsgError("An email is required");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    } 
-    if (!checked) {
-      setMsgError("Check if you are human");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-
-    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
-      setMsgError("Invalid Email");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-
-    if (email !== "" && checked) {
-      const reqData = { email };
-      setResetLoading(true);
-      try {
-        const res = await userApi.StartResetPassword(reqData);
-        if (res.status === 200 && res?.data?.internal_return >= 0) {
-          setMsgSuccess(true);
-          setMail("");
-          setValue(false);
-          setResetLoading(false);
-        }else{
-          setMsgSuccess(false);
-        }
-      } catch (error) {
-        setMsgSuccess(false);
-        setResetLoading(false);
-        setMail("");
-        setMsgError("An error occurred");
-        throw new Error(error);
-      } finally {
-        setTimeout(() => {
-          setMsgError(null);
-        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-      }
-    }
-  };
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-            {msgSuccess == null ?
-              <>
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                    Forget Password
-                  </h1>
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Enter your email to reset your password.
-                  </span>
-                </div>
-                <div className="input-area">
-                  <div className="input-item mb-10">
-                    <InputCom
-                      fieldClass="px-6"
-                      placeholder="Your Username/Email"
-                      label="Email"
-                      name="email"
-                      type="email"
-                      value={email}
-                      inputHandler={handleEmail}
-                      iconName="message"
-                    />
-                  </div>
-                  {/* hCaptha clone for the time being */}
-                  <div className="mb-10 flex justify-center w-full">
-                    <ReCAPTCHA
-                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
-                      onChange={humanChecker}
-                    />
-                  </div>
-                  {/* <div className="mb-10">
-                    <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
-                      <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                        
-                        <div className="h-full relative inline-block">
-                          <div className="relative table top-0 h-full">
-                            <div className="table-cell align-middle">
-                              <div className="relative w-[30px] h-[30px] mx-[15px]">
-                                <input
-                                  type="checkbox"
-                                  name="human-checkbox"
-                                  id="human-checkbox"
-                                  className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
-                                  checked={checked}
-                                  onChange={humanChecker}
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="h-full relative inline-block w-[170px]">
-                          <label className="relative table top-0 h-full">
-                            <label className="table-cell align-middle">
-                              <label
-                                className="text-800 text-sm"
-                                htmlFor="human-checkbox"
-                              >
-                                I am human
-                              </label>
-                            </label>
-                          </label>
-                        </div>
-                        <div className="h-full relative inline-block w-16"></div>
-                      </div>
-                    </div>
-                  </div> */}
-                  {msgError && (
-                    <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]">
-                      {msgError}
-                    </div>
-                  )}
-                  <div className="signin-area mb-3.5">
-                    <div className="flex justify-center items-center gap-4">
-                    <button
-                        type="button"
-                        onClick={() => navigate("/login")}
-                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
-                      >
-                        Cancel
-                      </button>
-                      <button
-                        type="button"
-                        onClick={resetHandler}
-                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-                      >
-                        {resetLoading ? (
-                          <div className="signup btn-loader"></div>
-                        ) : (
-                          <span>Send Code</span>
-                        )}
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </>
-            :
-            <ForgetPwdResponse 
-              title={'Forget Password'}
-              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
-              type={msgSuccess}
-            />
-            }
-            </div>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-}
@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import KidIcon from '../../../assets/images/auth/children.png'
-import ParentIcon from '../../../assets/images/auth/adult.png'
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-
-import { useDispatch } from "react-redux";
-// import { updateUserDetails } from "../../../store/UserDetails";
-
-import GoogleDownload from '../../../assets/images/download/andriod.jpg'
-import IOSDownload from '../../../assets/images/download/apple.jpg'
-
-
-export default function LoginLanding() {
-  const dispatch = useDispatch();
-  const location = useLocation();
-
-  const queryParams = new URLSearchParams(location?.search);
-  // const sessionExpired = queryParams.get("sessionExpired");
-
-
-  const navigate = useNavigate();
-  const userApi = new usersService();
-
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          {/* <div className="mb-5">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div> */}
-          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-              <div className='grid grid-cols-1 sm:grid-cols-5 gap-3'>
-                {/* APP DOWNLOAD STORE */}
-                <div className="col-span-1 order-2 sm:col-span-2 sm:order-1 w-full">
-                  <div className="relative w-full h-full flex sm:flex-col justify-center gap-4">
-                    <div className="w-28 sm:w-36">
-                      <a
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_APPLE_APP}
-                      >
-                        <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                    <div className="w-28 sm:w-36">
-                      <a
-                        target="_blank"
-                        rel="noreferrer"
-                        href={process.env.REACT_APP_ANDROID_APP}
-                      >
-                        <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
-                      </a>
-                    </div>
-                    <div className='hidden sm:block absolute top-0 bottom-0 right-0 w-1 rounded-full bg-[linear-gradient(180deg,_#94a3b8,_#0f172a,_#94a3b8)]'></div>
-                  </div>
-                </div>
-                <div className="col-span-1 order-1 sm:col-span-3 sm:order-2 title-area flex flex-col gap-5 justify-center items-center relative text-center mb-5">
-                  <h1 className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    <span className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Log in</span> as a:
-                  </h1>
-
-                  <div className='w-full flex flex-col gap-4'>
-                    <button name='full' onClick={()=>navigate('/login/parent', {state:{loginType:'full'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#d5ebf8] text-[#009ef7] cursor-pointer'>
-                      <div className='flex items-center gap-4'>
-                        <img className='w-12 h-auto' src={ParentIcon} alt='login key' />
-                        <p className='text-lg font-semibold'>Adult or Parent</p>
-                      </div>
-                      {/* <span>&gt;</span> */}
-                      <i className="fa-solid fa-caret-right"></i>
-                    </button>
-
-                    <button name='family' onClick={()=>navigate('/login/kid', {state:{loginType:'family'}})} className='w-full mx-auto flex justify-between items-center p-4 md:p-8 rounded-lg bg-[#f0eef1] text-[#a94ef3] cursor-pointer'>
-                      <div className='flex items-center gap-4'>
-                        <img className='w-12 h-auto' src={KidIcon} alt='login key' />
-                        <p className='text-lg font-semibold'>Kids or Teens</p>
-                      </div>
-                      {/* <span>&gt;</span> */}
-                      <i className="fa-solid fa-caret-right"></i>
-                    </button>
-                  </div>
-
-                  <div className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Don't have an account?{" "}
-                    <Link
-                      to="/signup"
-                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                    >
-                      Sign Up
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-}
@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
@@ -18,16 +18,9 @@ import ReCAPTCHA from "react-google-recaptcha";

 export default function Login() {
  const dispatch = useDispatch();
-  const location = useLocation();
+  const { state } = useLocation();

-  // eslint-disable-next-line no-restricted-globals
-  const queryParams = new URLSearchParams(location?.search);
-  // const sessionExpired = queryParams.get("sessionExpired");
-
-
-  const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
-
-  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+  const [validCaptcha, setValidCaptcha] = useState({show: false, valid:''}); // FOR CAPTCHA

  let [loginType, setLoginType] = useState("");

@@ -99,6 +92,7 @@ export default function Login() {
        password: password,
        sessionid: "STARTING",
        login_mode: 1100,
+        action: 11025,
      };
    } else if (name == "family") {
      // Post Data Info for family Login
@@ -107,6 +101,7 @@ export default function Login() {
        pin: password,
        sessionid: "20067A92714",
        login_mode: 1105,
+        action: 11025,
      };
    } else {
      setLoginLoading(false);
@@ -116,8 +111,7 @@ export default function Login() {
      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
      return;
    }
-    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
-      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+    if(name == "full" && !validCaptcha.valid && validCaptcha.show){ // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
      setMsgError("Please Verify Captcha");
      setLoginLoading(false);
      setTimeout(() => {
@@ -138,15 +132,12 @@ export default function Login() {
          // setMsgError("Wrong, email/password");
          setLoginError(true);
          setLoginLoading(false);
-          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+          setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
          return;
        }
        localStorage.setItem("member_id", `${res.data.member_id}`);
        localStorage.setItem("uid", `${res.data.uid}`);
        localStorage.setItem("session_token", `${res.data.session}`);
-        if (name === "family") {
-          sessionStorage.setItem("family_uid", res.data?.family_uid);
-        }
        // localStorage.setItem("session", `${res.data.session}`);
        dispatch(updateUserDetails({ ...res.data }));
        setTimeout(() => {
@@ -157,7 +148,7 @@ export default function Login() {
      .catch((error) => {
        setMsgError("Unable to login, try again");
        setLoginLoading(false);
-        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
+        setValidCaptcha(prev => ({...prev, show:true})) // DISPLAYS CAPTCHA IF ERROR
      })
      .finally(() => {
        setTimeout(() => {
@@ -168,12 +159,11 @@ export default function Login() {
      });
  };

-  function captchaChecker(value) {
-    // FUNCTION TO VALIDATE CAPTCHA
-    if (value) {
-      setValidCaptcha({ show: true, valid: value });
-    } else {
-      setValidCaptcha({ show: true, valid: "" });
+  function captchaChecker(value) { // FUNCTION TO VALIDATE CAPTCHA
+    if(value){
+      setValidCaptcha({show: true, valid:value})
+    }else{
+      setValidCaptcha({show: true, valid:''})
    }
  }

@@ -221,7 +211,7 @@ export default function Login() {
    let loginValue = readCookie("loginType");
    setLoginType(loginValue);

-    if (location?.state?.error) {
+    if (state?.error) {
      //check if the login path has an error state indicating any social handle login with error
      setMsgError("Unexpected Error, Please try again soon.");
      setTimeout(() => {
@@ -236,20 +226,6 @@ export default function Login() {
    setPassword("");
  }, [loginType]);

-
-  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
-  useEffect(()=>{
-    let timer;
-    if(sessionExpired == "true"){
-     timer = setTimeout(()=>{
-        setSessionExpired(false)
-      },5000)
-    }
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [])
-
  return (
    <>
      <AuthLayout slogan="Welcome to WrenchBoard">
@@ -265,32 +241,20 @@ export default function Login() {
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
            <div className="w-full">
-              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired != "true" && (
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                  Sign In to WrenchBoard
                </h1> */}
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    New Here?{" "}
-                    <Link
-                      to="/signup"
-                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                    >
-                      Create an Account
-                    </Link>
-                  </span>
-                </div>
-              )}
-
-              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired == "true" && (
-                <div className="w-full p-1 mb-7">
-                  <p className="text-red-500 text-base text-center">
-                    Your session expired and will need to login again
-                  </p>
-                </div>
-              )}
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  New Here?{" "}
+                  <Link
+                    to="/signup"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Create an Account
+                  </Link>
+                </span>
+              </div>

              {/* switch login component */}
              <div className="ml-7 flex justify-start items-center gap-3">
@@ -356,16 +320,14 @@ export default function Login() {
                    </div>

                    {/* hCaptha clone for the time being */}
-                    {validCaptcha.show && (
-                      <div className="mb-5 flex justify-center w-full">
-                        <ReCAPTCHA
-                          sitekey={
-                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
-                          }
-                          onChange={captchaChecker}
+                    {validCaptcha.show &&
+                    <div className="mb-5 flex justify-center w-full">
+                      <ReCAPTCHA
+                        sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                        onChange={captchaChecker}
                        />
-                      </div>
-                    )}
+                    </div>
+                    }

                    {loginError && (
                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
@@ -522,8 +484,8 @@ export default function Login() {

              {loginType == "full" && (
                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                  This site is protected by a Captcha. Our Privacy Policy and
-                  Terms of Service apply.
+                  This site is protected by hCaptcha and the our Privacy Policy
+                  and Terms of Service apply.
                </div>
              )}
            </div>
@@ -1,642 +0,0 @@
-import React, { useEffect, useLayoutEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import linkedInLogo from "../../../assets/images/Linkedin.png";
-import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook.svg";
-import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-// import { GoogleOAuthProvider } from '@react-oauth/google';
-import { useGoogleLogin } from "@react-oauth/google";
-
-import { useDispatch } from "react-redux";
-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() {
-  const dispatch = useDispatch();
-  const location = useLocation();
-
-  // eslint-disable-next-line no-restricted-globals
-  const queryParams = new URLSearchParams(location?.search);
-  // const sessionExpired = queryParams.get("sessionExpired");
-
-
-  const [sessionExpired, setSessionExpired] = useState(
-    queryParams.get("sessionExpired")
-  );
-
-  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
-
-  let [loginType, setLoginType] = useState('');
-
-  const [loginLoading, setLoginLoading] = useState(false);
-
-  const [showPassword, setShowPassword] = useState(false);
-
-  //login error state
-  const [loginError, setLoginError] = useState(false);
-  // for the catch error
-  const [msgError, setMsgError] = useState("");
-
-  // To Show and Hide Password
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
-  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
-  const handleLoginType = ({ target: { name } }) => {
-    setLoginType(name);
-    let currentDate = new Date();
-    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
-    // Convert the expiration date to the appropriate format
-    let expirationDateString = expirationDate.toUTCString();
-    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
-  };
-
-  // email
-  const [email, setMail] = useState("");
-  const handleEmail = (e) => {
-    setMail(e.target.value);
-  };
-  // password
-  const [password, setPassword] = useState("");
-  const handlePassword = (e) => {
-    setPassword(e.target.value);
-  };
-  const navigate = useNavigate();
-  const userApi = new usersService();
-
-  // FUNCTION TO HANDLE USER LOGIN
-  const doLogin = ({ target: { name } }) => {
-    setMsgError("");
-    setLoginError(false);
-    setLoginLoading(true);
-    let postData; // Post Data for API
-    if (!email || !password) {
-      setLoginLoading(false);
-      setMsgError("Please fill all the fields");
-      setTimeout(() => {
-        setMsgError("");
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      return;
-    }
-
-    if (name == "full") {
-      //checks if email is a valid email address
-      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-      if (regEx.test(email) == false) {
-        setLoginLoading(false);
-        setMsgError("Invalid Email");
-        return setTimeout(() => {
-          setMsgError("");
-        }, 3000);
-      }
-      // Post Data Info for normal Login
-      postData = {
-        username: email,
-        password: password,
-        sessionid: "STARTING",
-        login_mode: 1100,
-      };
-    } else if (name == "family") {
-      // Post Data Info for family Login
-      postData = {
-        username: email,
-        pin: password,
-        sessionid: "20067A92714",
-        login_mode: 1105,
-      };
-    } else {
-      setLoginLoading(false);
-      setMsgError("Invalid Login Type. Consider refreshing the page");
-      setTimeout(() => {
-        setMsgError("");
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      return;
-    }
-    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
-      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
-      setMsgError("Please Verify Captcha");
-      setLoginLoading(false);
-      setTimeout(() => {
-        setMsgError("");
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      return;
-    }
-    userApi
-      .logInUser(postData)
-      .then((res) => {
-        if (
-          res.status != 200 ||
-          res.data.internal_return < 0 ||
-          !res.data.member_id ||
-          !res.data.uid ||
-          !res.data.session
-        ) {
-          // setMsgError("Wrong, email/password");
-          setLoginError(true);
-          setLoginLoading(false);
-          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
-          return;
-        }
-        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);
-        }
-        // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails({ ...res.data }));
-        setTimeout(() => {
-          navigate("/", { replace: true });
-          setLoginLoading(false);
-        }, 2000);
-      })
-      .catch((error) => {
-        setMsgError("Unable to login, try again");
-        setLoginLoading(false);
-        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setLoginError(false);
-          setMsgError("");
-          setLoginLoading(false);
-        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-      });
-  };
-
-  function captchaChecker(value) {
-    // FUNCTION TO VALIDATE CAPTCHA
-    if (value) {
-      setValidCaptcha({ show: true, valid: value });
-    } else {
-      setValidCaptcha({ show: true, valid: "" });
-    }
-  }
-
-  const googleLogin = useGoogleLogin({
-    flow: "auth-code",
-    ux_mode: "redirect",
-    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-    onSuccess: async (codeResponse) => {
-      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
-    },
-    onError: (errorResponse) => console.log(errorResponse),
-  });
-
-  // In order to update the selected login type whenever the component renders
-  // useEffect(() => {
-  // Clear the loginType cookie if the user switches to loginfull
-  // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-  // }, []);
-
-  useEffect(()=>{
-    if(location?.state && location?.state.loginType){
-      setLoginType(location?.state.loginType)
-    }else{
-      navigate('/login', {replace: true})
-    }
-  },[])
-
-  // useLayoutEffect(() => {
-  //   function readCookie(cname) {
-  //     // checks the cookie in order to set the login type before components mounts
-  //     let name = cname + "=";
-  //     let decoded_cookie = decodeURIComponent(document.cookie);
-  //     let carr = decoded_cookie.split(";");
-  //     for (let i = 0; i < carr.length; i++) {
-  //       let c = carr[i];
-  //       while (c.charAt(0) == " ") {
-  //         c = c.substring(1);
-  //       }
-  //       if (c.indexOf(name) == 0) {
-  //         return c.substring(name.length, c.length);
-  //       }
-  //     }
-  //     return "full";
-  //   }
-  //   let loginValue = readCookie("loginType");
-  //   setLoginType(loginValue);
-
-  //   if (state?.error) {
-  //     //check if the login path has an error state indicating any social handle login with error
-  //     setMsgError("Unexpected Error, Please try again soon.");
-  //     setTimeout(() => {
-  //       setMsgError("");
-  //       navigate("/login", { replace: true });
-  //     }, 4000);
-  //   }
-  // }, []);
-
-  useEffect(() => {
-    setMail("");
-    setPassword("");
-  }, [loginType]);
-
-  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
-  useEffect(() => {
-    let timer;
-    if (sessionExpired == "true") {
-      timer = setTimeout(() => {
-        setSessionExpired(false);
-      }, 5000);
-    }
-    return () => {
-      clearTimeout(timer);
-    };
-  }, []);
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          {/* <div className="mb-5">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div> */}
-          {/* <div className="content-wrapper login shadow-md w-10/12 mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5"> */}
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired != "true" && (
-                <div className="hidden title-area --flex-- flex-col justify-center items-center relative text-center mb-7">
-                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  Sign In to WrenchBoard
-                </h1> */}
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    New Here?{" "}
-                    <Link
-                      to="/signup"
-                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                    >
-                      Create an Account
-                    </Link>
-                  </span>
-                </div>
-              )}
-
-              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
-              {sessionExpired == "true" && (
-                <div className="w-full p-1 mb-7">
-                  <p className="text-red-500 text-base text-center">
-                    Your session expired and will need to login again
-                  </p>
-                </div>
-              )}
-
-              {/* switch login component */}
-              <div className="hidden --flex-- ml-7 justify-start items-center gap-3">
-                <button
-                  name="full"
-                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType == "full"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                  onClick={handleLoginType}
-                >
-                  Sign in
-                </button>
-                <button
-                  name="family"
-                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType == "family"
-                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
-                      : "bg-white text-[#000] border-t-[2px]"
-                  }`}
-                  onClick={handleLoginType}
-                >
-                  Family Account
-                </button>
-              </div>
-
-              {/* END  of switch login component */}
-
-              {/* for login component */}
-              <h1 className='pb-2 text-center font-medium text-2xl leading-[24.375px]'>{loginType == 'full' ? 'Login' : 'Kids and Teens'}</h1>
-              {
-                loginType == "full" ? (
-                  //user login component
-                  <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={email}
-                        inputHandler={handleEmail}
-                        placeholder="Your Email"
-                        label="Email"
-                        name="email"
-                        type="email"
-                        iconName="message"
-                      />
-                    </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="Password"
-                        name="password"
-                        type={showPassword ? "text" : "password"}
-                        onClick={togglePasswordVisibility}
-                        passIcon={showPassword ? "password" : "password"}
-                        forgotPassword
-                      />
-                    </div>
-
-                    {/* hCaptha clone for the time being */}
-                    {validCaptcha.show && (
-                      <div className="mb-5 flex justify-center w-full">
-                        <ReCAPTCHA
-                          sitekey={
-                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
-                          }
-                          onChange={captchaChecker}
-                        />
-                      </div>
-                    )}
-
-                    {loginError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
-                        Invalid username or password- Please{" "}
-                        <Link to="/#" className="text-[#009ef7]">
-                          reset your password
-                        </Link>{" "}
-                        or{" "}
-                        <Link to="/signup" className="text-[#009ef7]">
-                          create a new account
-                        </Link>
-                      </div>
-                    )}
-                    {msgError && (
-                      <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]">
-                        {msgError}
-                      </div>
-                    )}
-                    <div className="signin-area">
-                      <div className="flex justify-center">
-                        <button
-                          name="full"
-                          onClick={doLogin}
-                          type="button"
-                          disabled={loginLoading}
-                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-                        >
-                          {loginLoading ? (
-                            <div className="signup btn-loader"></div>
-                          ) : (
-                            <>Continue</>
-                          )}
-                        </button>
-                      </div>
-                      <div className="sm:grid grid-cols-2 gap-1">
-                        <div className="w-full">
-                          <BrandBtn
-                            link="#"
-                            imgSrc={googleLogo}
-                            brand="Google"
-                            onClick={googleLogin}
-                          />
-                        </div>
-                        <div
-                          className={`w-full ${
-                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
-                            "hidden"
-                          }`}
-                        >
-                          <BrandBtn
-                            // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
-                            link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
-                            imgSrc={appleLogo}
-                            brand="Apple"
-                            isAnchor={true}
-                            // style={{visibility: 'hidden'}}
-                          />
-                        </div>
-                        <div className="w-full">
-                          <BrandBtn
-                            link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
-                            imgSrc={facebookLogo}
-                            brand="Facebook"
-                            isAnchor={true}
-                          />
-                        </div>
-                        <div
-                          className={`w-full ${
-                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
-                            "hidden"
-                          }`}
-                        >
-                          <BrandBtn
-                            // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
-                            imgSrc={linkedInLogo}
-                            brand="LinkedIn"
-                            isAnchor={true}
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  // END of user login compoenent
-                  // family login compoenent
-                  <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="px-6"
-                        value={email}
-                        inputHandler={handleEmail}
-                        placeholder="Account ID"
-                        label="Username"
-                        name="email"
-                        type="email"
-                        iconName="family-id"
-                      />
-                    </div>
-
-                    <div className="input-item mb-5">
-                      <InputCom
-                        labelClass="tracking-wider"
-                        fieldClass="px-6"
-                        value={password}
-                        inputHandler={handlePassword}
-                        placeholder="● ● ● ● ● ●"
-                        label="Pin"
-                        name="password"
-                        type={showPassword ? "text" : "password"}
-                        onClick={togglePasswordVisibility}
-                        passIcon={showPassword ? "family-pin" : "family-pin"}
-                      />
-                    </div>
-                    {loginError && (
-                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
-                        Invalid username or password{" "}
-                        {/* <Link to="/#" className="text-[#009ef7]">
-                        reset your password
-                      </Link>{" "}
-                      or{" "}
-                      <Link to="/signup" className="text-[#009ef7]">
-                        create a new account
-                      </Link> */}
-                      </div>
-                    )}
-                    {msgError && (
-                      <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]">
-                        {msgError}
-                      </div>
-                    )}
-                    <div className="signin-area mb-1.5">
-                      <div className="flex justify-center">
-                        <button
-                          name="family"
-                          onClick={doLogin}
-                          disabled={loginLoading}
-                          type="button"
-                          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]`}
-                        >
-                          {loginLoading ? (
-                            <div className="signup btn-loader"></div>
-                          ) : (
-                            <>Continue</>
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                )
-                // END of family login compoenent
-              }
-              <div className='w-full text-center'>
-                <Link className='text-center block font-semibold text-lg pt-3 tracking-wide' to='/login'>Return</Link>
-              </div>
-              {/* END of login component */}
-
-              {/* APP DOWNLOAD STORE */}
-              <div className="hidden 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>
-
-              {loginType == "full" && (
-                <>
-                  <div className="hidden pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                    This site is protected by a Captcha. <br />Our Privacy Policy and
-                    Terms of Service apply.
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-}
-
-const BrandBtn = ({
-  link,
-  imgSrc,
-  brand,
-  onClick,
-  isAnchor = false,
-  style = { visibility: "visible" },
-}) => {
-  // const doGoogle = async () => {
-  //   alert("start google");
-  // };
-
-  //  onSuccess: (codeResponse) => setUser(codeResponse),
-
-  // const doGoogle = useGoogleLogin({
-  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
-  //   onError: (error) => console.log('Login Failed:', error)
-  // });
-
-  // const doApple = async () => {
-  //   alert("start apple");
-  // };
-
-  // const doFacebook = async () => {
-  //   alert("start facebook");
-  // };
-  return (
-    <div className="w-full flex justify-center bottomMargin" style={style}>
-      {isAnchor ? (
-        <a
-          href={link}
-          className="w-full border border-light-purple rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 items-center font-medium cursor-pointer"
-        >
-          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-            Continue with {brand}
-          </span>
-        </a>
-      ) : (
-        <button
-          onClick={onClick}
-          // href="#dd"
-          className="w-full border border-light-purple  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300  items-center font-medium cursor-pointer"
-        >
-          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-            Continue with {brand}
-          </span>
-        </button>
-      )}
-    </div>
-  );
-};
@@ -1,203 +0,0 @@
-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">
-        {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>
-            </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>
-);
@@ -1,80 +0,0 @@
-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>
-  );
-}
@@ -6,13 +6,11 @@ import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";

 export default function SignUp() {
-  const location = useLocation()
-
-  // eslint-disable-next-line no-restricted-globals
  const queryParams = new URLSearchParams(location?.search);
  const country = queryParams.get("cnt")?.toUpperCase();
  
-  const currentPath = country ? `${location?.pathname}?cnt=${country.toLowerCase()}`:location?.pathname // Determines the new pathname is country query params exist
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist

  const [signUpLoading, setSignUpLoading] = useState(false);
  const [checked, setValue] = useState(false);
@@ -48,20 +46,21 @@ export default function SignUp() {

  // Get Country Api
  const getCountryList = useCallback(async () => {
-    
+    const res = await userApi.getSignupCountryData();
+
    try {
-      const res = await userApi.getSignupCountryData();
-      if (res.status === 200 && res.data.internal_return >= 0) {
-        const { result_list } = await res.data;
+      if (res.status === 200) {
+        const { signup_country } = await res.data;
+        // setCountries(signup_country);
        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          let cnt = signup_country.filter(item => item[0]==country) // test to see country passed in query param exist from list of countries supplied by API
          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
            setFormData(prev => ({...prev, country: ''}))
-            return setCountries({loading: false, data: result_list});
+            return setCountries({loading: false, data: signup_country});
          }
          return setCountries({loading: false, data: cnt});
        }
-        setCountries({loading: false, data:result_list});
+        setCountries({loading: false, data:signup_country});
      } else if (res.data.result !== 100) {
        setCountries({loading: false, data:[]});
      }
@@ -375,17 +374,17 @@ const SelectOption = ({
          {data?.data?.length > 1 ?
            <>
            <option value={""}>Select your Country</option>
-            {data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
-                {item.country}
+            {data?.data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
              </option>
            ))}
            </>
            :
            data?.data?.length == 1 ?
-            data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
-                {item.country}
+            data?.data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
              </option>
            ))
            :
@@ -1,404 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text_new.png";
-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({details}) {
-  const location = useLocation();
-
-  // eslint-disable-next-line no-restricted-globals
-  const queryParams = new URLSearchParams(location?.search);
-  const country = queryParams.get("cnt")?.toUpperCase();
-
-  const currentPath = country
-    ? `${location?.pathname}?cnt=${country.toLowerCase()}`
-    : location?.pathname; // Determines the new pathname is country query params exist
-
-  const [signUpLoading, setSignUpLoading] = useState(false);
-  const [checked, setValue] = useState(false);
-  // for the catch error
-  const [msgError, setMsgError] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState({ loading: true, data: [] });
-
-  const [formData, setFormData] = useState({
-    country: country ? country : "",
-    first_name: details ? details.first_name : "",
-    last_name: details ? details.last_name : "",
-    email: details ? details.email : "",
-    password: "",
-  });
-
-  const handleInputChange = (event) => {
-    const { name, value } = event?.target;
-    setFormData({ ...formData, [name]: value });
-  };
-
-  // To Show and Hide Password
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
-  const rememberMe = () => {
-    setValue(!checked);
-  };
-
-  const navigate = useNavigate();
-  const userApi = new usersService();
-
-  // Get Country Api
-  const getCountryList = useCallback(async () => {
-    try {
-      const res = await userApi.getSignupCountryData();
-      if (res.status === 200 && res.data.internal_return >= 0) {
-        const { result_list } = await res.data;
-        if (country) {
-          // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
-          if (!cnt.length) {
-            // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
-            setFormData((prev) => ({ ...prev, country: "" }));
-            return setCountries({ loading: false, data: result_list });
-          }
-          return setCountries({ loading: false, data: cnt });
-        }
-        setCountries({ loading: false, data: result_list });
-      } else if (res.data.result !== 100) {
-        setCountries({ loading: false, data: [] });
-      }
-    } catch (error) {
-      throw new Error(error);
-    }
-  }, []);
-
-  const handleSignUp = async () => {
-    let { country, first_name, last_name, email, password } = formData;
-    try {
-      if (
-        email !== "" &&
-        password !== "" &&
-        first_name !== "" &&
-        last_name !== "" &&
-        country !== ""
-      ) {
-        //checks if email is a valid email address
-        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
-        if (regEx.test(email) == false) {
-          setMsgError("Invalid Email");
-          return setTimeout(() => {
-            setMsgError("");
-          }, 3000);
-        }
-
-        //checks if terms and condition is checked
-        if (!checked) {
-          setMsgError("Terms and condition required");
-          return setTimeout(() => {
-            setMsgError("");
-          }, 3000);
-        }
-
-        setSignUpLoading(true);
-        const reqData = {
-          country: country,
-          firstname: first_name,
-          lastname: last_name,
-          email: email,
-          username: email,
-          password: password,
-          terms: 1,
-          news: 1,
-        };
-
-        const res = await userApi.CreateUser(reqData);
-
-        if (res.status === 200) {
-          const { data } = res;
-          if (data && data.acc === "DULPICATE") {
-            setMsgError("Duplicate username. Please try another email.");
-            setSignUpLoading(false);
-          }
-          if (data && data.status === "1") {
-            setTimeout(() => {
-              navigate("/outmessage", { replace: true });
-              setSignUpLoading(false);
-            }, 2000);
-          }
-
-          if (data && data.status === "5") {
-            setMsgError("Something went wrong. Please try another email.");
-            setSignUpLoading(false);
-          }
-        } else {
-          setSignUpLoading(false);
-          setMsgError("An error occurred");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
-    } catch (error) {
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
-
-  useEffect(() => {
-    getCountryList();
-  }, []);
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  Create Account
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Already have an account?{" "}
-                  <Link
-                    to="/login"
-                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                  >
-                    Sign in here
-                  </Link>
-                </span>
-              </div>
-              <div className="w-full flex items-center gap-2">
-                <div className="border-b border-[#eff2f5] w-[48%]"></div>
-                <span className="text-[#b5b5c3] font-medium text-[0.7rem]">
-                  OR
-                </span>
-                <div className="border-b border-[#eff2f5] w-[48%]"></div>
-              </div>
-              <div className="input-area">
-                <SelectOption
-                  label="Country"
-                  data={countries}
-                  name="country"
-                  value={formData.country}
-                  inputHandler={handleInputChange}
-                  disable={
-                    country && countries?.data?.length <= 1 ? true : false
-                  }
-                />
-                <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
-                  <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      placeholder="Firstname"
-                      label="First Name"
-                      name="first_name"
-                      type="text"
-                      value={formData.first_name}
-                      inputHandler={handleInputChange}
-                      disable={details.first_name}
-                    />
-                  </div>
-                  <div className="input-item flex-1">
-                    <InputCom
-                      fieldClass="px-6"
-                      placeholder="Lastname"
-                      label="Last Name"
-                      name="last_name"
-                      type="text"
-                      value={formData.last_name}
-                      inputHandler={handleInputChange}
-                      disable={details.last_name}
-                    />
-                  </div>
-                </div>
-                <div className="input-item mb-4">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="support@mermsemr.com"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    inputHandler={handleInputChange}
-                    disable={details.email}
-                  />
-                </div>
-                <div className="input-item mb-4">
-                  <InputCom
-                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    name="password"
-                    type={showPassword ? "text" : "password"}
-                    onClick={togglePasswordVisibility}
-                    passIcon={showPassword ? "show-password" : "hide-password"}
-                    value={formData.password}
-                    inputHandler={handleInputChange}
-                  />
-                </div>
-                {msgError && (
-                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
-                    {msgError}
-                  </div>
-                )}
-
-                <div className="forgot-password-area flex justify-between items-center mb-6">
-                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
-                    <button
-                      onClick={rememberMe}
-                      type="button"
-                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
-                        checked && "text-white bg-[#4687ba]"
-                      }`}
-                    >
-                      {checked && (
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      )}
-                    </button>
-                    <span
-                      onClick={rememberMe}
-                      className="cursor-default text-gray-400 font-medium text-[16.25px] leading-[24.375px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
-                    >
-                      I agree with all
-                      <Link
-                        href="#"
-                        className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition mx-1 inline-block"
-                      >
-                        terms and condition
-                      </Link>
-                    </span>
-                  </div>
-                </div>
-
-                {/* Forgot Password */}
-                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
-                  <div className="remember-checkbox flex items-center space-x-2.5">
-                    <button
-                      onClick={rememberMe}
-                      type="button"
-                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
-                    >
-                      {checked && (
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="h-5 w-5"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      )}
-                    </button>
-                    <span
-                      onClick={rememberMe}
-                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
-                    >
-                      I agree with all
-                      <Link
-                        href="#"
-                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
-                      >
-                        terms and condition
-                      </Link>
-                    </span>
-                  </div>
-                </div> */}
-                <div className="signin-area mb-1">
-                  <div className="flex justify-center">
-                    <button
-                      disabled={countries.loading}
-                      type="button"
-                      onClick={handleSignUp}
-                      className={`rounded-full text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
-                    >
-                      {signUpLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Sign Up</span>
-                      )}
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-}
-
-const SelectOption = ({
-  label,
-  name,
-  inputHandler,
-  value,
-  data, // passing the data from parent
-  disable,
-}) => {
-  return (
-    <div className="input-com mb-7">
-      <div className="flex items-center justify-between">
-        <label
-          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
-          htmlFor={name}
-        >
-          {label}
-        </label>
-      </div>
-      <div>
-        <select
-          disabled={disable}
-          name={name}
-          id={name}
-          className="px-6 input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-dark-gray bg-[#f5f8fa] dark:bg-[#FAFAFA] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
-          onChange={inputHandler}
-          value={value}
-        >
-          {data?.data?.length > 1 ? (
-            <>
-              <option value={""}>Select your Country</option>
-              {data?.data?.map((item) => (
-                <option value={item.code} key={item.uid}>
-                  {item.country}
-                </option>
-              ))}
-            </>
-          ) : data?.data?.length == 1 ? (
-            data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
-                {item.country}
-              </option>
-            ))
-          ) : data?.data?.length < 1 && data.loading ? (
-            <option value="">Loading...</option>
-          ) : (
-            <option value="">No Country Found!</option>
-          )}
-        </select>
-      </div>
-    </div>
-  );
-};
@@ -1,81 +0,0 @@
-import React, { useState } from "react";
-import titleShape from "../../../assets/images/shape/title-shape-two.svg";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-import ThankYou from "../ThankYou";
-
-export default function UpdatePassword() {
-  const [updated, setValue] = useState(false);
-  const [message, setMessage] = useState(false);
-  const updatePassword = () => {
-    setValue(!updated);
-    setTimeout(() => {
-      setMessage(!message);
-    }, 100);
-  };
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to  myFit">
-        {updated === false ? (
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-              <div className="title-area relative flex flex-col justify-center items-center mb-7">
-                <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
-                  Update Password
-                </h1>
-                {/* w-[341px] absolute top-14 left-12 */}
-                <div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
-                  <img src={titleShape} alt="shape" />
-                </div>
-              </div>
-              <div className="input-area">
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="*********"
-                    label="Old Password"
-                    name="password"
-                    type="password"
-                    iconName="password"
-                  />
-                </div>
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="*********"
-                    label="New Password"
-                    name="password"
-                    type="password"
-                    iconName="password"
-                  />
-                </div>
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="*********"
-                    label="Re-enter Password"
-                    name="password"
-                    type="password"
-                    iconName="password"
-                  />
-                </div>
-                <div className="signin-area mb-3.5">
-                  <button
-                    onClick={updatePassword}
-                    type="button"
-                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
-                  >
-                    Continue
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
-        )}
-      </AuthLayout>
-    </>
-  );
-}
@@ -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 default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  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">Reward</td>
+              <td className="py-4 text-start px-2">Price</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>
@@ -36,7 +36,10 @@ export default function VerifyLink() {
        var postData = {
          username: email,
          password: password,
+          login_mode: 100,
+          sessionid: "STARTER-NOTREAL",
          verify_link: token,
+          action: 11012,
        };
        const res = await userApi?.CompleteSignUp(postData);

@@ -51,7 +54,6 @@ export default function VerifyLink() {
            localStorage.setItem("member_id", `${data?.member_id}`);
            localStorage.setItem("session_token", `${data?.session}`);
            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid);

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

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

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

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

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

 const ErrorComponent = ({ onClick }) => (
  <div className="input-area">
@@ -1,250 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import debounce from "../../../hooks/debounce";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
-import { updateUserDetails } from "../../../store/UserDetails";
-
-export default function VerifyLink() {
-
-  const dispatch = useDispatch();
-
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [msgError, setMsgError] = useState("");
-  const [linkLoader, setLinkLoader] = useState(false);
-  const [pageLoader, setPageLoader] = useState(true);
-  const [linkSuccess, setLinkSuccess] = useState(true);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search);
-  const token = queryParams.get("vlnk");
-  const userApi = new usersService();
-
-  // email
-  const handleEmail = (e) => {
-    setEmail(e.target.value);
-  };
-  // password
-  const handlePassword = (e) => {
-    setPassword(e.target.value);
-  };
-
-  // if verification is okay. set a complete signup form
-  const completeSignup = async () => {
-    try {
-      if (email !== "" && password !== "") {
-        setLinkLoader(true);
-        var postData = {
-          username: email,
-          password: password,
-          verify_link: token,
-        };
-        const res = await userApi?.CompleteSignUp(postData);
-
-        if (res.status === 200) {
-          const { data } = res;
-          if (
-            data?.status > 0 &&
-            data?.internal_return == 100 &&
-            data?.session != ""
-          ) {
-            localStorage.setItem("email", `${data?.email}`);
-            localStorage.setItem("member_id", `${data?.member_id}`);
-            localStorage.setItem("uid", `${data?.uid}`);
-            localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("wallet_available_status", `${data?.wallet_available_status}`);
-            dispatch(updateUserDetails({ ...data }));
-            setTimeout(() => {
-              navigate("/", { replace: true });
-              setLinkLoader(false);
-            }, 2000);
-          } else {
-            setLinkLoader(false);
-            setMsgError("Invalid Link or Password Combination");
-          }
-        } else {
-          setLinkLoader(false);
-          setLinkSuccess(false);
-          setMsgError("An error occurred");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
-    } catch (error) {
-      setLinkLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
-
-  // for verifying the incoming verification link and render the correct component
-  const verifyEmail = useCallback(async (code) => {
-    try {
-      const verifyRes = await userApi.verifyEmail(code);
-      if (verifyRes.status === 200) {
-        let { data } = verifyRes;
-        // console.log("TESTING VERIFY", data);
-        if (
-          data &&
-          data.internal_return >= 0 &&
-          data.status == 0 &&
-          data.pending_id != "" &&
-          data.pending_uid != "" &&
-          data.username != "" &&
-          data.status_text === "Link Verified"
-        ) {
-          setEmail(data.username);
-          setPageLoader(false);
-        } else {
-          setPageLoader(false);
-          setLinkSuccess(false);
-        }
-      }
-    } catch (error) {
-      setPageLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    }
-  }, []);
-
-  // delay verify requests by 10000ms
-  const debouncedEmail = debounce(verifyEmail, 1000);
-
-  useEffect(() => {
-    debouncedEmail(token);
-  }, []);
-
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        {pageLoader ? (
-          <div className='flex flex-col justify-center items-center gap-4'>
-            <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-            <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>
-          </div>
-        ) : (
-          <div className="w-full">
-            <div className="flex place-content-center">
-              <div className="w-10/12">
-                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                    {linkSuccess
-                      ? "Sign In to WrenchBoard"
-                      : "Invalid verification link"}
-                  </h1>
-                </div>
-                {/* If the verification was a success */}
-                {linkSuccess ? (
-                  <SuccessfulComponent
-                    email={email}
-                    password={password}
-                    handleEmail={handleEmail}
-                    handlePassword={handlePassword}
-                    onSubmit={completeSignup}
-                    msgErr={msgError}
-                    loader={linkLoader}
-                  />
-                ) : (
-                  <ErrorComponent onClick={() => navigate("/login")} />
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </AuthLayout>
-    </>
-  );
-}
-
-const SuccessfulComponent = ({
-  onSubmit,
-  password,
-  handlePassword,
-  email,
-  handleEmail,
-  msgErr,
-  loader,
-}) => (
-  <div className="input-area">
-    {/* INPUT */}
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={email}
-        inputHandler={handleEmail}
-        placeholder="support@mermsemr.com"
-        label="Email"
-        name="email"
-        type="email"
-        iconName="message"
-        autoComplete="off"
-      />
-    </div>
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={password}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Password"
-        name="password"
-        type="password"
-        iconName="password"
-        autoComplete="off"
-      />
-    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
-      </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
-    </div>
-  </div>
-);
-
-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>
-);
@@ -11,11 +11,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 const VerifyPassword = () => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
-  const [requestStatus, setRequestStatus] = useState({
-    loading: true,
-    status: false,
-    data: [],
-  });
+  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
  const [msgError, setMsgError] = useState("");
  const [linkLoader, setLinkLoader] = useState(false);
  const [linkSuccess, setLinkSuccess] = useState(null);
@@ -39,64 +35,60 @@ const VerifyPassword = () => {
  };

  const completeReset = async () => {
-    if (!password || !confirmPassword) {
-      // CHECKS IF PASSWORD IS EMPTY
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
      setMsgError("Please fill in fields");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
-    if (password != confirmPassword) {
-      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
      setMsgError("Passwords does not match");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
-    if (password.length < 6) {
-      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
      setMsgError("Password must be upto six characters");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
-    if (!PasswordValidator(password)) {
-      // CHECKS IF PASSWORD IS VALID
-      setMsgError(
-        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
-      );
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
    try {
-      setLinkLoader(true);
-      var reqData = {
-        reset_link: token,
-        newpass: password,
-        m_uid: requestStatus.data?.m_uid || "",
-        reset_uid: requestStatus.data?.reset_uid || "",
-        step: 300,
-      };
-      const res = await userApi?.CompleteResetPassword(reqData);
+          setLinkLoader(true);
+          var reqData = {
+            sessionid: "DUMMY-CANNOT_BE_EMPTY",
+            reset_link: token,
+            newpass: password,
+            m_uid: requestStatus.data?.m_uid || '',
+            reset_uid: requestStatus.data?.reset_uid || '',
+            step: 300,
+            action: 730,
+          };
+          const res = await userApi?.CompleteResetPassword(reqData);

-      if (res.status == 200) {
-        const { data } = res;
-        if (data?.internal_return >= 0) {
-          // setTimeout(() => {
-          //   navigate("/login", { replace: true });
-          //   setLinkLoader(false);
-          // }, 2000);
-          setLinkSuccess(true);
-        } else {
-          setLinkLoader(false);
-          setMsgError("An error occurred");
-          setLinkSuccess(false);
-        }
-      } else {
-        setLinkLoader(false);
-        setLinkSuccess(false);
-      }
+          if (res.status == 200) {
+            const { data } = res;
+            if (data?.internal_return >= 0) {
+              // setTimeout(() => {
+              //   navigate("/login", { replace: true });
+              //   setLinkLoader(false);
+              // }, 2000);
+              setLinkSuccess(true);
+            } else {
+              setLinkLoader(false);
+              setMsgError("An error occurred");
+              setLinkSuccess(false);
+            }
+          } else {
+            setLinkLoader(false);
+            setLinkSuccess(false);
+          }
    } catch (error) {
      setLinkLoader(false);
      setLinkSuccess(false);
@@ -108,33 +100,31 @@ const VerifyPassword = () => {
    }
  };

-  const verifyResetPwd = () => {
-    // FUNCTION TO VERIFY RESET PASSWORD LINK
-    setRequestStatus({ loading: true, status: false, data: [] });
+  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({loading: true, status:false, data: []})
    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
      reset_link: token,
      step: 200,
+      action: 730,
    };
-    userApi
-      .CompleteResetPassword(reqData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
-          return setRequestStatus({ loading: false, status: false, data: [] });
-        }
-        setRequestStatus({ loading: false, status: true, data: res.data });
-      })
-      .catch((error) => {
-        setRequestStatus({ loading: false, status: false, data: [] });
-      });
-  };
+    userApi.CompleteResetPassword(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status:false, data: []})
+      }
+      setRequestStatus({loading: false, status:true, data: res.data})
+    }).catch(error => {
+      setRequestStatus({loading: false, status:false, data: []})
+    })
+  }

-  useEffect(() => {
+  useEffect(()=>{
    // little checker for the validity of the token
-    if (token == null || token?.length != 64) {
-      return setRequestStatus({ loading: false, status: false, data: [] });
-    }
-    verifyResetPwd();
-  }, []);
+  if (token==null || token?.length != 64) {
+    return setRequestStatus({loading: false, status:false, data: []});
+  }
+  verifyResetPwd()
+  },[])
  return (
    <>
      <AuthLayout slogan="Welcome to WrenchBoard">
@@ -149,68 +139,59 @@ const VerifyPassword = () => {
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
-            {requestStatus.loading ? (
-              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
-            ) : !requestStatus.loading && requestStatus.status ? (
-              <div className="w-full">
-                {linkSuccess == null ? (
-                  <>
-                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                        Password Reset
-                      </h1>
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                        Enter a new password to reset
-                      </span>
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                        We'll send an email to confirm reset
-                      </span>
-                    </div>
-                    <div>
-                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
-                        Must include a special, numeric, uppercase and lowercase
-                        character
-                      </p>
-                    </div>
-                    <SuccessfulComponent
-                      password={password}
-                      confirmPassword={confirmPassword}
-                      handlePassword={handlePassword}
-                      onSubmit={completeReset}
-                      msgErr={msgError}
-                      loader={linkLoader}
-                      showPassword={showPassword}
-                      onClick={togglePasswordVisibility}
-                      navigateHandler={() => navigate("/login")}
-                    />
-                  </>
-                ) : (
-                  <ForgetPwdResponse
-                    title={
-                      linkSuccess
-                        ? "Password Reset Complete"
-                        : "Password Reset Error"
-                    }
-                    message={
-                      linkSuccess
-                        ? "Password Reset Complete. You can login now with your new credentials"
-                        : "Password Reset Error. Please get in touch with support for further support"
-                    }
-                    type={linkSuccess}
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
+            <div className="w-full">
+              {linkSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Password Reset
+                  </h1>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      Enter a new password to reset
+                    </span>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      We'll send an email to confirm reset
+                    </span>
+                </div>
+                <div>
+                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                    Must include a special, numeric, uppercase and lowercase character
+                  </p>
+                </div>
+                  <SuccessfulComponent
+                    password={password}
+                    confirmPassword={confirmPassword}
+                    handlePassword={handlePassword}
+                    onSubmit={completeReset}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                    showPassword={showPassword}
+                    onClick={togglePasswordVisibility}
+                    navigateHandler={() => navigate("/login")}
                  />
-                )}
-              </div>
-            ) : (
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <ForgetPwdResponse
-                  title={"Forget Password"}
-                  message={
-                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
-                  }
-                  type={requestStatus.status}
-                />
-              </div>
-            )}
+                </>
+                :
+                <ForgetPwdResponse 
+                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
+                }
+                type={linkSuccess}
+              />
+              }
+            </div>
+            :
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <ForgetPwdResponse 
+                title={'Forget Password'}
+                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
+                type={requestStatus.status}
+              />
+            </div>
+            }
          </div>
        </div>
      </AuthLayout>
@@ -1,279 +0,0 @@
-import { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import usersService from "../../../services/UsersService";
-import InputCom from "../../Helpers/Inputs/InputCom";
-import AuthLayout from "../AuthLayout2";
-import ForgetPwdResponse from "../ForgetPwdResponse";
-import PasswordValidator from "../../../lib/PasswordValidator";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
-
-const VerifyPassword = () => {
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [requestStatus, setRequestStatus] = useState({
-    loading: true,
-    status: false,
-    data: [],
-  });
-  const [msgError, setMsgError] = useState("");
-  const [linkLoader, setLinkLoader] = useState(false);
-  const [linkSuccess, setLinkSuccess] = useState(null);
-  const [showPassword, setShowPassword] = useState(false);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location?.search);
-  const token = queryParams.get("passlink");
-  const userApi = new usersService();
-
-  // To Show and Hide Password
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
-  // Password
-  const handlePassword = (e) => {
-    let { name, value } = e?.target;
-    if (name == "password") setPassword(value);
-    if (name == "confirm_password") setConfirmPassword(value);
-  };
-
-  const completeReset = async () => {
-    if (!password || !confirmPassword) {
-      // CHECKS IF PASSWORD IS EMPTY
-      setMsgError("Please fill in fields");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-    if (password != confirmPassword) {
-      // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
-      setMsgError("Passwords does not match");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-    if (password.length < 6) {
-      // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
-      setMsgError("Password must be upto six characters");
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-    if (!PasswordValidator(password)) {
-      // CHECKS IF PASSWORD IS VALID
-      setMsgError(
-        "Password must contain alphanumeric, uppercase and special character: eg: Password1@"
-      );
-      return setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
-    }
-    try {
-      setLinkLoader(true);
-      var reqData = {
-        reset_link: token,
-        newpass: password,
-        m_uid: requestStatus.data?.m_uid || "",
-        reset_uid: requestStatus.data?.reset_uid || "",
-        step: 300,
-      };
-      const res = await userApi?.CompleteResetPassword(reqData);
-
-      if (res.status == 200) {
-        const { data } = res;
-        if (data?.internal_return >= 0) {
-          // setTimeout(() => {
-          //   navigate("/login", { replace: true });
-          //   setLinkLoader(false);
-          // }, 2000);
-          setLinkSuccess(true);
-        } else {
-          setLinkLoader(false);
-          setMsgError("An error occurred");
-          setLinkSuccess(false);
-        }
-      } else {
-        setLinkLoader(false);
-        setLinkSuccess(false);
-      }
-    } catch (error) {
-      setLinkLoader(false);
-      setLinkSuccess(false);
-      throw new Error(error);
-    } finally {
-      setTimeout(() => {
-        setMsgError(null);
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
-    }
-  };
-
-  const verifyResetPwd = () => {
-    // FUNCTION TO VERIFY RESET PASSWORD LINK
-    setRequestStatus({ loading: true, status: false, data: [] });
-    var reqData = {
-      reset_link: token,
-      step: 200,
-    };
-    userApi
-      .CompleteResetPassword(reqData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
-          return setRequestStatus({ loading: false, status: false, data: [] });
-        }
-        setRequestStatus({ loading: false, status: true, data: res.data });
-      })
-      .catch((error) => {
-        setRequestStatus({ loading: false, status: false, data: [] });
-      });
-  };
-
-  useEffect(() => {
-    // little checker for the validity of the token
-    if (token == null || token?.length != 64) {
-      return setRequestStatus({ loading: false, status: false, data: [] });
-    }
-    verifyResetPwd();
-  }, []);
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="flex place-content-center">
-            {requestStatus.loading ? (
-              <LoadingSpinner color="sky-blue" size="16" height="h-300px" />
-            ) : !requestStatus.loading && requestStatus.status ? (
-              <div className="w-10/12">
-                {linkSuccess == null ? (
-                  <>
-                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                        Password Reset
-                      </h1>
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                        Enter a new password to reset
-                      </span>
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                        We'll send an email to confirm reset
-                      </span>
-                    </div>
-                    <div>
-                      <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
-                        Must include a special, numeric, uppercase and lowercase
-                        character
-                      </p>
-                    </div>
-                    <SuccessfulComponent
-                      password={password}
-                      confirmPassword={confirmPassword}
-                      handlePassword={handlePassword}
-                      onSubmit={completeReset}
-                      msgErr={msgError}
-                      loader={linkLoader}
-                      showPassword={showPassword}
-                      onClick={togglePasswordVisibility}
-                      navigateHandler={() => navigate("/login")}
-                    />
-                  </>
-                ) : (
-                  <ForgetPwdResponse
-                    title={
-                      linkSuccess
-                        ? "Password Reset Complete"
-                        : "Password Reset Error"
-                    }
-                    message={
-                      linkSuccess
-                        ? "Password Reset Complete. You can login now with your new credentials"
-                        : "Password Reset Error. Please get in touch with support for further support"
-                    }
-                    type={linkSuccess}
-                  />
-                )}
-              </div>
-            ) : (
-              <div className="w-11/12 sm:max-w-[500px] title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <ForgetPwdResponse
-                  title={"Forget Password"}
-                  message={
-                    "We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us"
-                  }
-                  type={requestStatus.status}
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-};
-
-export default VerifyPassword;
-
-const SuccessfulComponent = ({
-  onSubmit,
-  navigateHandler,
-  showPassword,
-  onClick,
-  password,
-  confirmPassword,
-  handlePassword,
-  msgErr,
-  loader,
-}) => (
-  <div className="input-area">
-    {/* INPUT */}
-    <div className="mb-5">
-      <InputCom
-        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Password"
-        name="password"
-        type={showPassword ? "text" : "password"}
-        onClick={onClick}
-        passIcon={showPassword ? "show-password" : "hide-password"}
-      />
-    </div>
-    <div className="mb-5">
-      <InputCom
-        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Confirm Password"
-        name="confirm_password"
-        type="password"
-      />
-    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
-      </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
-    </div>
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={navigateHandler}
-        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] btn-login`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);
@@ -1,48 +0,0 @@
-import { useNavigate, Link } from "react-router-dom";
-import AuthLayout from "../AuthLayout2";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-
-export default function VerifyYou() {
-  const navigate = useNavigate();
-  return (
-    <>
-      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="w-full">
-          <div className="flex place-content-center">
-            <div className="w-10/12">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
-                  Let's verify your email now
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Check your email.
-                </span>
-              </div>
-              <div className="input-area">
-              <div className="mb-5">
-                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    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 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>
-              <div className="signin-area flex justify-center mb-3.5">
-                <button
-                  onClick={() => navigate("/")}
-                  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>
-          </div>
-        </div>
-      </AuthLayout>
-    </>
-  );
-}
@@ -1,20 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
-import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CommonHead from "../UserHeader/CommonHead";

 export default function BlogItem(props) {

-    const location = useLocation()
-
-    const {
-        userDetails: { account_type },
-      } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details account type
-
    const apiCall = new usersService()
    const navigate = useNavigate()

@@ -28,11 +20,9 @@ export default function BlogItem(props) {
    const queryParams = new URLSearchParams(location?.search);
    const blog_id = queryParams.get("blog_id");
    
-    // ('MUMU', 'meta_value', blogdata, blogdata.data.image_url)
-
    useEffect(()=>{
        if(!blog_id){
-            return navigate('/',{replace:true})
+            navigate('/',{replace:true})
        }
        apiCall.getSingleBlogData({blog_id}).then(res => {
            setBlogdata({loading: false, data:res.data})
@@ -43,26 +33,11 @@ export default function BlogItem(props) {
    },[blog_id])
    return (
        <Layout>
-            {account_type == 'FULL' &&
-                <CommonHead
-                    commonHeadData={props.commonHeadData}
-                />
-            }
-            { account_type == 'FAMILY' &&
-            <div className="mb-5">
-                <CustomBreadcrumb 
-                title = {blogdata?.data?.blogdata?.length > 0 ? blogdata?.data?.blogdata[0]?.post_title : 'Blog'}
-                breadcrumb={
-                    [
-                    { link: "/", title: "Home" },
-                    { link: "/fam-blog", title: "Blogs", active: true},
-                    ]
-                }
-                />
-            </div>
-            }
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
            <div className="notification-page w-full mb-10">
-                {/* <div className="mb-5">
+                <div className="mb-5">
                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                        <span
                            className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -70,16 +45,16 @@ export default function BlogItem(props) {
                        {blogdata.data?.blogdata?.[0]?.post_title}
                        </span>
                    </h1>
-                </div> */}
+                </div>
                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                    {blogdata?.loading ? 
+                    {blogdata.loading ? 
                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
                    :
                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
                        <div className="w-full">
                            {/* heading */}
-                            {/* <div className="sm:flex justify-between items-center mb-6">
-                                <div className="mb-5">
+                            <div className="sm:flex justify-between items-center mb-6">
+                                {/* <div className="mb-5">
                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
                                        <span
                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
@@ -87,15 +62,11 @@ export default function BlogItem(props) {
                                        {blogdata.data?.blogdata?.[0]?.post_title}
                                        </span>
                                    </h1>
-                                </div>
-                                <div className="slider-btns flex space-x-4">
-                                </div>
-                            </div> */}
-                            {/* 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 className="slider-btns flex space-x-4">
+                                </div> */}
                            </div>
-                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}} className='prose leading-relaxed'>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
                            </div>
                    </div>
                    :
@@ -1,25 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-export default function CustomBreadcrumb({ title, breadcrumb }) {
-  return (
-    <div className="">
-      <h3 className="text-26 font-bold text-dark-gray dark:text-white">
-        {title}
-      </h3>
-      <nav
-        aria-label="breadcrumb"
-        className="text-base text-dark-gray dark:text-white flex items-center"
-      >
-        {breadcrumb.map((value, index) => (
-          <React.Fragment key={index}>
-            <Link className={value.active ? "opacity-60" : ""} to={value.link}>
-              {value.title}
-            </Link>
-            {index !== breadcrumb.length - 1 && <span className="px-1">\</span>}
-          </React.Fragment>
-        ))}
-      </nav>
-    </div>
-  );
-}
@@ -1,113 +1,107 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import dataImage2 from "../../assets/images/taskbanners/default.jpg";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
-import { useSelector } from "react-redux";
-import PendingJobsPopout from "../jobPopout/PendingJobsPopout";

 export default function AvailableJobsCard({
  className,
  datas,
  hidden = false,
  contentDisplay,
-  image_server,
-  marketPlaceProduct
 }) {
  //debugger;
  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
-  const [jobPopout, setJobPopout] = useState({ show: false, data: {} });
-  
  const [imageUrl, setImageUrl] = useState("");

-  const {
-    userDetails: { uid },
-  } = useSelector((state) => state?.userDetails); // GETS USER DETAILS
-
-
  let thePrice = PriceFormatter(
    datas?.price * 0.01,
    datas?.currency_code,
    datas?.currency
  );

-  // useEffect(() => {
-  //   const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-  //   setImageUrl(imagePath);
-  // }, []);
-
-  const image = localStorage.getItem("session_token")
-    ? `${image_server}${localStorage.getItem("session_token")}/job/${
-        datas.job_uid
-      }`
-    : "";
-
+  useEffect(() => {
+    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+    setImageUrl(imagePath);
+  }, []);
  return (
    <>
      {contentDisplay == "grid" ? (
        <div
-          className={`card-style-two w-full p-[10px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
            className || ""
          }`}
        >
          <div
            onClick={() => {
-              datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
+              setMarketPopUp({ show: true, data: datas });
            }}
-            className="flex flex-col gap-2 justify-between w-full h-full"
+            className="flex flex-col justify-between w-full h-full"
          >
-            <div className='w-full flex items-center gap-4'>
-              <div className='min-w-[60px] min-h-[60px] max-w-[60px] max-h-[60px] rounded-full overflow-hidden'>
-                <img className='w-full h-full object-cover' src={image} alt='Job Image' />
-              </div>
-              <div className='w-full'>
-                <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                  {datas.title}
-                </h1>
+            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              {datas.title}
+            </h1>

-                <div className="card-two-info flex justify-between items-center">
-                  <div className="owned-by flex space-x-2 items-center">
-                    <div>
-                      <p className="text-thin-light-gray text-sm leading-3">
-                        Added
-                      </p>
-                      <p className="text-base   text-dark-gray dark:text-white">
-                        {new Date(datas.offer_added).toLocaleDateString()}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
-                  <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                    <div>
-                      <p className="text-thin-light-gray text-sm leading-3 text-right">
-                        Expires
-                      </p>
-                      <p className="text-base text-dark-gray dark:text-white text-right">
-                        {new Date(datas.expire).toLocaleDateString()}
-                      </p>
-                    </div>
-                  </div>
+            <div className="card-two-info flex justify-between items-center">
+              <div className="owned-by flex space-x-2 items-center">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3">
+                    Added
+                  </p>
+                  <p className="text-base   text-dark-gray dark:text-white">
+                    {datas.offer_added}
+                  </p>
+                </div>
+              </div>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
+                    Expires
+                  </p>
+                  <p className="text-base text-dark-gray dark:text-white text-right">
+                    {datas.expire}
+                  </p>
                </div>
              </div>
            </div>
            <div className="thumbnail-area w-full">
              <div
-                className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
-                // style={{
-                //   backgroundImage: `url('${image}')`,
-                // }}
+                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
+                style={{
+                  backgroundImage: `url('${imageUrl}')`,
+                }}
              >
-                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
-                  <p>{datas.description}</p>
-                </div>
+                <div className="flex justify-center">{datas.description}</div>
              </div>
            </div>
            <div className="details-area">
-              {/* <div className="product-two-options flex justify-between mb-5 relative"></div> */}
+              <div className="product-two-options flex justify-between mb-5 relative">
+                {/*      <div className="status">*/}
+                {/*          {datas.isActive && (*/}
+                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                {/*  Active*/}
+                {/*</span>*/}
+                {/*          )}*/}
+                {/*      </div>*/}
+
+                {/*<div className=" review flex space-x-2">*/}
+                {/*    <button*/}
+                {/*        onClick={favoriteHandler}*/}
+                {/*        type="button"*/}
+                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                {/*        }`}*/}
+                {/*    >*/}
+                {/*        <Icons name="star" />*/}
+                {/*    </button>*/}
+                {/*</div>*/}
+              </div>
+
              <div className="flex justify-between">
                <div className="flex items-center space-x-2">
-                  <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">
+                  <div>
+                    <p className="font-bold text-xl tracking-wide line-clamp-1   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">
@@ -119,42 +113,30 @@ export default function AvailableJobsCard({
                  </div>
                </div>
                <div>
-                  {datas.market_uid != uid ?
-                    <button
+                  <button
                    type="button"
-                      className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-                      onClick={() => {
-                        setMarketPopUp({ show: true, data: datas });
-                      }}
-                    >
-                      View
-                    </button>
-                    :
-                    <button
-                    type="button"
-                    className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
+                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                    onClick={() => {
-                      setJobPopout({ show: true, data: datas });
+                      setMarketPopUp({ show: true, data: datas });
                    }}
-                    >
-                      Manage
-                    </button>
-                  }
+                  >
+                    View
+                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
-        <div className="card-style-two w-full px-4 py-[0.4rem] my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
          <div className="flex gap-5 items-center w-full">
            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-              <img src={image} alt="data" className="w-full h-full" />
+              <img src={dataImage2} alt="data" className="w-full h-full" />
            </div>
            <div className="flex flex-col flex-[0.9]">
              <h1
                onClick={() => {
-                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
+                  setMarketPopUp({ show: true, data: datas });
                }}
                className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
              >
@@ -163,7 +145,7 @@ export default function AvailableJobsCard({

              <div
                onClick={() => {
-                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
+                  setMarketPopUp({ show: true, data: datas });
                }}
                className="my-2"
              >
@@ -173,9 +155,8 @@ 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 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 className="text-sm text-thin-light-gray flex flext-start gap-1">
+                  Price: <span className="text-purple">{thePrice}</span>
                </p>
                <p className="text-sm text-thin-light-gray">
                  Duration:{" "}
@@ -192,9 +173,8 @@ export default function AvailableJobsCard({
            </div>
          </div>
          <div className="">
-            {datas.market_uid != uid ?
            <button
-            type="button"
+              type="button"
              className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
              onClick={() => {
                setMarketPopUp({ show: true, data: datas });
@@ -202,17 +182,6 @@ export default function AvailableJobsCard({
            >
              View
            </button>
-            :
-            <button
-            type="button"
-            className="px-4 py-2.5 text-white text-sm bg-yellow-500 rounded-full tracking-wide"
-            onClick={() => {
-              setJobPopout({ show: true, data: datas });
-            }}
-            >
-              Manage
-            </button>
-            }
          </div>
        </div>
      )}
@@ -223,21 +192,8 @@ export default function AvailableJobsCard({
            setMarketPopUp({ show: false, data: {} });
          }}
          situation={marketPopUp.show}
-          marketPlaceProduct={marketPlaceProduct}
        />
      )}
-
-      {/* Active Job Popout */}
-      {jobPopout.show && (
-        <PendingJobsPopout
-          details={datas}
-          onClose={() => {
-            setJobPopout({ show: false, data: {} });
-          }}
-          situation={jobPopout.show}
-        />
-      )}
-      {/* End of Active Job Popout */}
    </>
  );
 }
@@ -5,7 +5,7 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";

-export default function FamilyActiveJobsCard({ datas, hidden = false, image_server }) {
+export default function FamilyActiveJobsCard({ datas, hidden = false }) {

    let { pathname } = useLocation();

@@ -22,8 +22,7 @@ export default function FamilyActiveJobsCard({ datas, hidden = false, image_serv
        }
    };
 //debugger;
-    // const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
-    let image = `${image_server}${localStorage.getItem('session_token')}/job/${datas.origin_job_uid}`
+    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
    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="content">
@@ -32,13 +31,10 @@ export default function FamilyActiveJobsCard({ datas, hidden = false, image_serv
                    {/* thumbnail image */}
                    <div
                        className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
-                        // style={{
-                        //     background: `url(${localImgLoad(
-                        //         `images/taskbanners/${bannerName}`
-                        //     )}) center / contain no-repeat`,
-                        // }}
                        style={{
-                            background: `url(${image}) center / contain no-repeat`,
+                            background: `url(${localImgLoad(
+                                `images/taskbanners/${bannerName}`
+                            )}) center / contain no-repeat`,
                        }}
                    >
              {/*          <div className="product-options flex justify-between relative">*/}
@@ -8,7 +8,7 @@ export default function HomeBannerOffersCard(props) {
  useEffect(() => {
    let { banner, banner_location } = props?.itemData;
    if (banner_location === "LOCAL") {
-      const imagePath = require(`../../assets/images/${banner}`);
+      const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
      setImageUrl(imagePath);
    } else if (banner_location === "URL") setImageUrl(banner);
    else return null;
@@ -1,52 +1,58 @@
-import { Suspense, lazy } from "react";
 import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";

-const VideoElement = lazy(() => import("../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
-
-export default function OfferCard({
-  datas,
-  hidden = false,
-  setOfferPopout,
-  image_server,
-}) {
+export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
  let thePrice = PriceFormatter(
    datas?.price * 0.01,
    datas?.currency_code,
    datas?.currency
  );

-  let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
-
  return (
-    <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="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="content">
+        {/* thumbnail */}
        <div className="w-full h-40">
-          {/* thumbnail image/video */}
-          {datas.job_type == "MEDIA" ?
-          <Suspense fallback={<p>Loading...</p>}>
-            <VideoElement videoId={datas?.media_uid} />
-          </Suspense>
-          :
+          {/* thumbnail image */}
          <div
            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
            style={{
-              background: `url(${image}) center / contain no-repeat`,
+              background: `url(${localImgLoad(
+                `images/taskbanners/${datas?.banner || "default.jpg"}`
+              )}) center / contain no-repeat`,
            }}
          >
            {hidden && <div className="flex justify-center"></div>}
          </div>
-          }
        </div>
        {/* details */}
        <div className="details">
          <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
            {datas.title}
          </h1>
-
+          {/* countdown */}
+          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                        <div className="flex flex-col justify-between">
+                            <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 className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Remaining Time
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                <CountDown lastDate={datas.expire} />
+                            </p>
+                        </div>
+                    </div> */}
          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            {/* <div className="grid grid-cols-1 gap-2">
+            <div className="grid grid-cols-2 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
@@ -61,9 +67,9 @@ export default function OfferCard({
                  <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,19 +80,13 @@ 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>
@@ -96,7 +96,7 @@ export default function OfferCard({
        <button
          type="button"
          onClick={() =>
-            setOfferPopout({ show: true, data: { ...datas, thePrice, image } })
+            setOfferPopout({ show: true, data: { ...datas, thePrice } })
          }
          className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
        >
@@ -23,19 +23,17 @@ export default function ProductCardStyleTwo({
  
  return (
    <div
-      className={`card-style-two w-full p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
        className || ""
      }`}
    >
      <div className="flex flex-col justify-between w-full h-full">
        <div className="thumbnail-area w-full">
          <div
-            className="w-full h-[140px] p-6  rounded-lg overflow-hidden"
+            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
            style={{
              // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-              // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
-              backgroundSize: '100%',
+            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
            }}
          >
            <div className="product-two-options flex justify-between mb-5 relative">
@@ -52,7 +50,7 @@ export default function ProductCardStyleTwo({
        </div>
        <div className="details-area">
          {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              {datas.post_title || "dummy title..."}
            </h1>
@@ -1,118 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { tableReload } from "../../store/TableReloads";
-import { useDispatch, useSelector } from "react-redux";
-
-import io from "socket.io-client";
-
-let SocketIOContext = createContext({})
-
-export default function SocketIOContextProvider({children}) {
-    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active
-
-    const dispatch = useDispatch()
-
-    const socket = io.connect(process.env.REACT_APP_PRIMARY_SOCKET); 
-
-    // //Room State
-    // const [room, setRoom] = useState("");
-
-    // // Messages States
-    // const [message, setMessage] = useState("");
-    const [socketMsgReceived, setSocketMsgReceived] = useState("");
-
-    const joinRoom = (room) => {
-        if (room !== "") {
-        socket.emit("join_room", room);
-        }
-    };
-
-    const sendMessage = (message, room) => {
-        if(message && room){
-            socket.emit("send_message", { message, room });
-        }
-    };
-
-    const marketUpdate = (message, room) => {
-        if(message && room){
-            socket.emit("marketjob_added", { message, room });
-        }
-    };
-
-    const parentAssignJobToKid = (message, room) => {
-        if(message && room){
-            socket.emit("family", { message:{...message}, room });
-        }
-    };
-
-    const sendJobInterestToOwner = (message, room) => {
-        if(message && room){
-            socket.emit("marketjob", { message:{...message}, room });
-        }
-    };
-
-    useEffect(() => {
-        socket.on("receive_message", (data) => {
-            // setSocketMsgReceived(data.message);
-            dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa
-        });
-
-        socket.on("received_refreshmarket_jobs", (data) => {
-            // setSocketMsgReceived(data.message);
-            dispatch(tableReload({type:'MARKETTABLELIST'})) // dispatches to update market list on full account
-        });
-
-        socket.on("family_actions", (data) => {
-            // setSocketMsgReceived(data.message);
-            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid') // gets user UID
-            let {message} = data
-            if(message.action == "REFRESH_OFFER" && message.family_uid == user_uid && message.audience == "MEMBER"){  // for refreshing child account when parent assigns a job
-                dispatch(tableReload({type:'FAMILYOFFERLIST'})) // dispatches to update family pending/offer list on family side
-                dispatch(tableReload({ type: "FAMILYBANNERSLIST" })) // dispatches to update family banner list on family side
-            }
-            if(message.action == "REFRESH_TASK" && message.audience == "PARENT"){  // for refreshing parent account when child accepts or rejects a job
-                dispatch(tableReload({type:'PARENTFAMILYTASKLIST'})) // dispatches to update parent family task list on parent side
-            }
-            if(message.action == "REFRESH_WALLET" && message.family_uid == user_uid && message.audience == "MEMBER"){  // for refreshing child wallet account when parent sends money to kid
-                dispatch(tableReload({type:'WALLETTABLE'})) // dispatches to update wallet balance on family side
-            }
-            // console.log('DATA', data)
-        });
-
-        socket.on("marketjob_actions", (data) => { // Triggers refresh on owner side, when somebody sends/shows interest in a job 
-            let user_uid = userDetails.account_type == 'FULL' ? userDetails.uid : sessionStorage.getItem('family_uid') // gets user UID
-            let {message} = data
-            if(message.action == "REFRESH_OFFERS" && message.audience == "MERCHANT" && message.market_uid == user_uid){  // for refreshing job owner offer interest list when any worker sends interest
-                dispatch(tableReload({type:'OFFERINTERESTLISTRELOAD'}))
-            }
-            // console.log('data', data)
-        });
-        // dispatch(tableReload({ type: "HOMEBANNERS" })); // RELOADS HOME BANNERS
-
-    }, [socket]);
-
-    let values = {
-        socket,
-        sendMessage,
-        joinRoom,
-        setSocketMsgReceived,
-        marketUpdate,
-        parentAssignJobToKid,
-        sendJobInterestToOwner,
-        socketMsgReceived,
-        // room,
-        // setRoom,
-        // message,
-        // setMessage,
-    }
-
-  return (
-    <SocketIOContext.Provider value={values}>
-        {children}
-    </SocketIOContext.Provider>
-  )
-}
-
-
-export const SocketValues = () => {
-    return useContext(SocketIOContext)
-}
@@ -1,396 +0,0 @@
-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
-
-  // getting the upper three banners for the home layout
-  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") {
-      return require(`../../assets/images/${banner}`);
-    } else {
-      return banner;
-    }
-  };
-
-  return (
-    <>
-      <div
-        className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
-          className || ""
-        }`}
-      >
-
-        {/* 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>
-                  )
-                }
-            })}
-          </>
-
-          {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>
-
-      {/* Offer Job Popout */}
-      {offerPopout.show && (
-        <OfferJobPopout
-          details={offerPopout.data}
-          onClose={() => {
-            setOfferPopout({ show: false, data: {} });
-          }}
-          situation={offerPopout.show}
-        />
-      )}
-      {/* End of Offer Job Popout */}
-    </>
-  );
-};
-
-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] overflow-hidden" key={key}>
-      <Link to={link_path} className="h-[12rem] bg-white">
-        <img
-          src={image}
-          alt="banner-img"
-          loading="lazy"
-          className="w-auto mx-auto h-full"
-        />
-      </Link>
-      <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 line-clamp-1">
-            {title}
-          </Link>
-          <Link to={link_path} className="text-sm">
-            {desc}
-          </Link>
-        </div>
-        <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>
-          <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 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
-
-  return (
-    <div
-      key={key}
-      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-[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}
-            </Link>
-            <p to={newLinkPath} className="text-sm">
-              {desc}
-            </p>
-          </div>
-        </div>
-        <Link to={newLinkPath} className="w-[150px] h-[100px]">
-          <img
-            src={image}
-            alt="banner-img"
-            loading="lazy"
-            className="w-full h-full rounded-xl"
-          />
-        </Link>
-      </div>
-      <div className="flex justify-between w-full p-1 items-center">
-        <Link to={newLinkPath} className="text-slate-300 font-semibold text-sm">
-          {btn}
-        </Link>
-        <button className="flex items-center justify-center gap-2">
-          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-          <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const BannerSection = ({ banners, variant }) => {
-  const getImage = ({ banner_location, banner }) => {
-    return banner_location === "LOCAL"
-      ? require(`../../assets/images/${banner}`)
-      : banner;
-  };
-
-  return (
-    <>
-      {banners?.map((props, idx) => {
-        const { short_title, short_description, short_button_text, link_path } =
-          props;
-        const image = getImage(props);
-
-        return (
-          <div
-            key={idx}
-            className={`flex flex-col shadow-md rounded-xl ${
-              variant === "top" ? "" : "bg-white"
-            }`}
-          >
-            <div className={`${variant === "top" ? "rounded-t-xl" : ""}`}>
-              <Link to={link_path}>
-                <img
-                  src={image}
-                  alt="banner-img"
-                  className="w-full h-full rounded-t-xl object-cover"
-                />
-              </Link>
-            </div>
-            <div
-              className={`${
-                variant === "top"
-                  ? "rounded-b-xl bg-white"
-                  : "border-b border-slate-300"
-              }`}
-            >
-              <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
-                <Link to={link_path} className="font-bold text-lg">
-                  {short_title}
-                </Link>
-                <Link to={link_path} className="text-sm">
-                  {short_description}
-                </Link>
-              </div>
-              <div className="flex justify-between w-full p-1 items-center">
-                <Link to={link_path} className="text-slate-300 font-semibold">
-                  {short_button_text}
-                </Link>
-                <button className="flex items-center justify-center gap-2">
-                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-                  <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
-                </button>
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
-};
@@ -1,48 +0,0 @@
-import React from "react";
-// import HomeSliders from "./HomeSliders";
-import { useSelector } from "react-redux";
-
-export default function FamilyParentDashboard({
-  className,
-  bannerList,
-}) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-
-  let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email } = userDetails;
-  let userEmail = email.split("@")[0];
-
-  return (
-    <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
-        className || ""
-      }`}
-      style={{
-        // background: `url(${heroBg})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
-        {/* heading */}
-        <div className="flex gap-8">
-          <h1 className="text-base font-medium text-white tracking-wide">
-            Welcome
-          </h1>
-          {/* user */}
-          <div className="flex flex-col gap-1">
-            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
-              {`${firstname} ${lastname}`}
-            </p>
-            <p className="text-sm tracking-wide text-white leading-[1]">
-              @{userEmail}
-            </p>
-          </div>
-        </div>
-        <span className="text-base font-thin tracking-wide text-white flex items-end">
-          Last Login : {loginDate}
-        </span>
-      </div>
-    </div>
-  );
-}
@@ -1,46 +0,0 @@
-import React from "react";
-// import HomeSliders from "./HomeSliders";
-import { useSelector } from "react-redux";
-
-export default function HomeDashboard({ className, bannerList }) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-
-  let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email } = userDetails;
-  let userEmail = email.split("@")[0];
-
-  return (
-    <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
-        className || ""
-      }`}
-      style={{
-        // background: `url(${heroBg})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
-        {/* heading */}
-        <div className="flex gap-8">
-          <h1 className="text-base font-medium text-white tracking-wide">
-            Welcome
-          </h1>
-          {/* user */}
-          <div className="flex flex-col gap-1">
-            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
-              {`${firstname} ${lastname}`}
-            </p>
-            <p className="text-sm tracking-wide text-white leading-[1]">
-              @{userEmail}
-            </p>
-          </div>
-        </div>
-
-        <span className="text-base font-thin tracking-wide text-white flex items-end">
-          Last Login : {loginDate}
-        </span>
-      </div>
-    </div>
-  );
-}
@@ -1,49 +0,0 @@
-import React from "react";
-// import HomeSliders from "./HomeSliders";
-import { useSelector } from "react-redux";
-
-export default function JobOwnerDashboard({
-  className,
-  bannerList,
-}) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-
-  let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email } = userDetails;
-  let userEmail = email.split("@")[0];
-
-  return (
-    <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
-        className || ""
-      }`}
-      style={{
-        // background: `url(${heroBg})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
-        {/* heading */}
-        <div className="flex gap-8">
-          <h1 className="text-base font-medium text-white tracking-wide">
-            Welcome
-          </h1>
-          {/* user */}
-          <div className="flex flex-col gap-1">
-            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
-              {`${firstname} ${lastname}`}
-            </p>
-            <p className="text-sm tracking-wide text-white leading-[1]">
-              @{userEmail}
-            </p>
-          </div>
-        </div>
-
-        <span className="text-base font-thin tracking-wide text-white flex items-end">
-          Last Login : {loginDate}
-        </span>
-      </div>
-    </div>
-  );
-}
@@ -1,110 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import heroUser from "../../assets/images/hero-user.png";
-import CountDown from "../Helpers/CountDown";
-// import HomeSliders from "./HomeSliders";
-import { useSelector } from "react-redux";
-import HomeSliders from "../Home/HomeSliders";
-
-export default function WorkerDashboard({
-  className,
-  bannerList,
-  nextDueTask,
-}) {
-  const settings = {
-    autoplay: true,
-    dots: true,
-    arrows: false,
-    infinite: true,
-    swipe: true,
-  };
-  const sildeData = null;
-  const { userDetails } = useSelector((state) => state?.userDetails);
-
-  let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email, profile_pic } = userDetails;
-  let userEmail = email.split("@")[0];
-
-  return (
-    <div
-      className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden bg-blue-900 ${
-        className || ""
-      }`}
-      style={{
-        // background: `url(${heroBg})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
-        {/* heading */}
-        <div>
-          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
-            Welcome
-          </h1>
-          <span className="text-[18px] font-thin tracking-wide text-white">
-            Last Login : {loginDate}
-          </span>
-        </div>
-        {/* user */}
-        <div className="flex items-center space-x-3">
-          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
-            <img src={profile_pic != "" ? profile_pic : heroUser} alt="" />
-          </div>
-          <div>
-            <p className="text-xl tracking-wide font-bold antise text-white">
-              {`${firstname} ${lastname}`}
-            </p>
-            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
-          </div>
-        </div>
-        {/* countdown */}
-        {nextDueTask?.next_due &&
-          Object.keys(nextDueTask.next_due)?.length != 0 && (
-            <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
-              <div className="flex flex-col justify-between">
-                <p className="text-base text-white tracking-wide">
-                  Current Task
-                </p>
-                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                  {nextDueTask.next_due.item_code.substr(0, 4) + "..."}
-                </p>
-                <p className="text-base text-white tracking-wide">
-                  {nextDueTask.next_due.price * 0.01} Naira
-                </p>
-              </div>
-              <div className="w-[1px] h-full bg-white-opacity"></div>
-              <div className="flex flex-col justify-between">
-                <p className="text-base text-white tracking-wide">
-                  Next due in
-                </p>
-                <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-                  {/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
-                  <CountDown lastDate={nextDueTask.next_due.due_date} />
-                </p>
-                <div className="text-base text-white tracking-wide flex gap-[23px]">
-                  <span>Hrs</span>
-                  <span>Min</span>
-                  <span>Sec</span>
-                </div>
-              </div>
-            </div>
-          )}
-        {/* action */}
-        <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-white">
-              {" "}
-              View All Task(s)
-            </span>
-          </Link>
-        </div>
-      </div>
-      <HomeSliders
-        settings={settings}
-        sideData={sildeData}
-        bannerList={bannerList}
-      />
-    </div>
-  );
-}
@@ -1,48 +0,0 @@
-import React from "react";
-// import HomeSliders from "./HomeSliders";
-import { useSelector } from "react-redux";
-
-export default function WorkerDashboard({
-  className,
-  bannerList,
-}) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-
-  let loginDate = userDetails?.last_login.split(" ")[0];
-  let { firstname, lastname, email } = userDetails;
-  let userEmail = email.split("@")[0];
-
-  return (
-    <div
-      className={`w-full md:h-[47px] xxs:h-[74px] flex px-[1.05rem] py-[0.35rem] flex-wrap justify-between items-center gap-2 rounded-2xl overflow-hidden bg-sky-blue ${
-        className || ""
-      }`}
-      style={{
-        // background: `url(${heroBg})`,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="h-full flex flex-wrap w-full justify-between mb-5 lg:mb-0">
-        {/* heading */}
-        <div className="flex gap-8">
-          <h1 className="text-base font-medium text-white tracking-wide">
-            Welcome
-          </h1>
-          {/* user */}
-          <div className="flex flex-col gap-1">
-            <p className="text-base tracking-wide font-bold antise text-white leading-[1]">
-              {`${firstname} ${lastname}`}
-            </p>
-            <p className="text-sm tracking-wide text-white leading-[1]">
-              @{userEmail}
-            </p>
-          </div>
-        </div>
-        <span className="text-base font-thin tracking-wide text-white flex items-end">
-          Last Login : {loginDate}
-        </span>
-      </div>
-    </div>
-  );
-}
@@ -1,13 +0,0 @@
-import FamilyParentDashboard from "./FamilyParentDashboard";
-import HomeDashboard from "./HomeDashboard";
-import JobOwnerDashboard from "./JobOwnerDashboard";
-import WorkerDashboard from "./WorkerDashboard";
-import AccountDashboard from "./AccountDashboard";
-
-export {
-  FamilyParentDashboard,
-  HomeDashboard,
-  JobOwnerDashboard,
-  WorkerDashboard,
-  AccountDashboard
-};
@@ -1,90 +0,0 @@
-import React, { Suspense } from "react";
-import { Link } from "react-router-dom";
-import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
-import Layout from "../Partials/Layout";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import FamilyTableNew from "./FamilyTableNew";
-
-export default function FamilyActivities() {
-  return (
-    <Layout>
-      {/*<CommonHead />*/}
-      <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="mb-5 sm:mb-0">
-              <CustomBreadcrumb
-                title={"Tasks & Chores"}
-                breadcrumb={[
-                  { link: "/", title: "Home" },
-                  {
-                    link: "/acc-family",
-                    title: "Family Account",
-                  },
-                  {
-                    link: "/acc-family/activities",
-                    title: "Tasks & Chores",
-                    active: true,
-                  },
-                ]}
-              />
-            </div>
-            <Link
-              className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
-              to="/acc-family"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="w-4 h-4"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
-                />
-              </svg>
-
-              <span>Family</span>
-            </Link>
-          </div>
-          <Suspense 
-            fallback={
-            <div className="bg-white">
-              <LoadingSpinner color="sky-blue" size="16" height='h-[30rem]' />
-            </div>
-            }
-          >
-            <FamilyTableNew />
-          </Suspense>
-        </div>
-      </div>
-    </Layout>
-  );
-}
-
-const CloseIcon = () => (
-  <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>
-);
@@ -1,346 +0,0 @@
-import React, {
-    useCallback,
-    useEffect,
-    useMemo,
-    useState,
-  } from "react";
-  import { Link, useOutletContext } from "react-router-dom";
-  import usersService from "../../services/UsersService";
-  import Icons from "../Helpers/Icons";
-  import InputCom from "../Helpers/Inputs/InputCom";
-  import ModalCom from "../Helpers/ModalCom";
-  import Layout from "../Partials/Layout";
-  import FamilyTableSettings from "./FamilyTableSettings";
-  import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
-  
-  export default function FamilyListSettings() {
-
-    const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
-
-    // State to store the selected year and month
-    const [selectedYear, setSelectedYear] = useState("");
-    const [selectedMonth, setSelectedMonth] = useState("");
-    // const [familyList, setFamilyList] = useState({});
-    // const [loader, setLoader] = useState(false);
-    const [popUp, setPopUp] = useState(false);
-    // const [listReload, setListReload] = useState(false);
-    const [msgErr, setMsgErr] = useState("");
-    const [formData, setFormData] = useState({
-      first_name: "",
-      last_name: "",
-    });
-  
-    const apiCall = useMemo(() => new usersService(), []);
-  
-    const popUpHandler = () => {
-      setPopUp((prev) => !prev);
-    };
-  
-    // Handle year selection
-    const handleYearChange = (e) => {
-      setSelectedYear(e.target.value);
-    };
-  
-    // Handle month selection
-    const handleMonthChange = (e) => {
-      setSelectedMonth(e.target.value);
-    };
-  
-    const handleInputChange = (event) => {
-      const { name, value } = event?.target;
-      setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
-    };
-  
-    // use the useEffect hook to clear the selected month if the year changes (to ensure consistency)
-    useEffect(() => {
-      if (selectedYear === "" && selectedMonth !== "") {
-        setSelectedMonth("");
-      }
-    }, [selectedYear]);
-  
-    const addMember = async () => {
-      const { first_name, last_name } = formData;
-      setLoader(true);
-      try {
-        if (first_name !== "" && last_name !== "") {
-          const reqData = {
-            firstname: first_name,
-            lastname: last_name,
-            year: +selectedYear,
-            month: +selectedMonth,
-          };
-  
-          const res = await apiCall.addFamily(reqData);
-          const { data } = res;
-  
-          if (data?.internal_return > 0 && data?.status === "OK") {
-            setLoader(false);
-            setListReload((prev) => !prev);
-            popUpHandler();
-          } else {
-            setLoader(false);
-            setMsgErr("Sorry, something went wrong");
-          }
-        } else {
-          setLoader(false);
-          setMsgErr("Please fill in the fields");
-        }
-      } catch (error) {
-        setLoader(false);
-        setMsgErr("An error occurred");
-        throw new Error(error);
-      } finally {
-        setTimeout(() => {
-          setMsgErr(null);
-        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
-        setFormData({
-          first_name: "",
-          last_name: "",
-        });
-        setSelectedMonth("");
-        setSelectedYear("");
-      }
-    };
-  
-    // const memberList = useCallback(async () => {
-    //   setLoader(true);
-    //   try {
-    //     const res = await apiCall.familyListings();
-    //     const { data } = res;
-    //     if (data?.internal_return >= 0 && data?.status === "OK") {
-    //       const { result_list, session_image_server } = data;
-    //       setFamilyList({ result_list, session_image_server });
-    //       sessionStorage.setItem("family_list", JSON.stringify(result_list))
-    //       setLoader(false);
-    //     } else {
-    //       return;
-    //     }
-    //   } catch (error) {
-    //     setLoader(false);
-    //     throw new Error(error);
-    //   }
-    // }, [apiCall]);
-  
-    // useEffect(() => {
-    //   let checkMemberList = true;
-    //   if (checkMemberList) {
-    //     memberList();
-    //   }
-    //   return () => {
-    //     checkMemberList = false;
-    //   };
-    // }, [listReload, memberList]);
-  
-    return (
-      <>
-        {/*<CommonHead />*/}
-        <div className="notification-page w-full">
-          <div className="notification-wrapper w-full">
-            <FamilyTableSettings
-            familyList={familyList?.result_list}
-            loader={loader}
-            popUpHandler={popUpHandler}
-            imageServer={familyList?.session_image_server}
-            />
-          </div>
-        </div>
-        {popUp && (
-          <ModalCom action={popUpHandler} situation={popUp}>
-            <FamilyForm
-              popUpHandler={popUpHandler}
-              value={formData}
-              selectedYear={selectedYear}
-              selectedMonth={selectedMonth}
-              monthHandler={handleMonthChange}
-              yearHandler={handleYearChange}
-              inputHandler={handleInputChange}
-              msgErr={msgErr}
-              onClick={addMember}
-              loader={loader}
-            />
-          </ModalCom>
-        )}
-      </>
-    );
-  }
-  
-  const FamilyForm = ({
-    value: { first_name, last_name },
-    ageValue,
-    inputHandler,
-    selectedMonth,
-    selectedYear,
-    monthHandler,
-    yearHandler,
-    msgErr,
-    loader,
-    onClick,
-    popUpHandler,
-  }) => {
-    return (
-      <div className="logout-modal-wrapper w-11/12 lg:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="modal-header-con">
-          <h1 className="modal-title">
-            Add Members
-          </h1>
-          <button
-            type="button"
-            className="modal-close-btn"
-            onClick={popUpHandler}
-          >
-            <CloseIcon />
-          </button>
-        </div>
-        <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4">
-          <InputCom
-            placeholder="Firstname"
-            label="First Name:"
-            name="first_name"
-            type="text"
-            parentClass="flex items-center gap-1 w-full"
-            labelClass="flex-[0.4] mb-0"
-            inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
-            fieldClass="px-2"
-            value={first_name}
-            inputHandler={inputHandler}
-          />
-          <InputCom
-            placeholder="Lastname"
-            label="Last Name:"
-            name="last_name"
-            type="text"
-            parentClass="flex items-center gap-1 w-full"
-            labelClass="flex-[0.4] mb-0"
-            inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
-            fieldClass="px-2"
-            value={last_name}
-            inputHandler={inputHandler}
-          />
-          <div className="input-com mb-7 flex flex-col gap-1 w-full">
-            {/* Age dropdown */}
-            <div className="">
-              <label
-                className="job-label"
-                htmlFor="age-selection"
-              >
-                Birthday: (Year/Month)
-              </label>
-            </div>
-            <YearMonthDropdowns
-              handleMonthChange={monthHandler}
-              handleYearChange={yearHandler}
-              selectedMonth={selectedMonth}
-              selectedYear={selectedYear}
-            />
-          </div>
-          {msgErr && (
-            <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-xs font-light leading-[19.5px]">
-              {msgErr}
-            </div>
-          )}
-          <div className="signin-area w-full">
-            <div className="flex justify-center">
-              <button
-                type="button"
-                onClick={onClick}
-                // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
-                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
-              >
-                {loader ? (
-                  <div className="signup btn-loader"></div>
-                ) : (
-                  <span>Add</span>
-                )}
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    );
-  };
-  
-  const CloseIcon = () => (
-    <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>
-  );
-  
-  function YearMonthDropdowns({
-    selectedMonth,
-    selectedYear,
-    handleMonthChange,
-    handleYearChange,
-  }) {
-    // Get the current year
-    const currentYear = new Date().getFullYear();
-  
-    // Generate an array of years from the current year to (currentYear - 19)
-    const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
-  
-    // Array of month names
-    const months = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December",
-    ];
-  
-    return (
-      <div className="flex max-w-[330px] w-full self-end gap-4">
-        <select
-          id="yearDropdown"
-          value={selectedYear}
-          onChange={handleYearChange}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
-          // size="5"
-        >
-          <option value="">Select a Year</option>
-          {years.map((year) => (
-            <option key={year} value={year}>
-              {year}
-            </option>
-          ))}
-        </select>
-  
-        <select
-          id="monthDropdown"
-          value={selectedMonth}
-          onChange={handleMonthChange}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
-          // size="5"
-        >
-          <option value="">Select a Month</option>
-          {months.map((month, index) => (
-            <option key={month} value={index + 1}>
-              {month}
-            </option>
-          ))}
-        </select>
-      </div>
-    );
-  }
-  
@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import FamilyManageTabs from "./FamilyManageTabs";
-import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";

 export default function FamilyManage() {
  const [selectTab, setValue] = useState("today");
@@ -35,7 +34,7 @@ export default function FamilyManage() {
        <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 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">
                  <span
@@ -51,40 +50,6 @@ export default function FamilyManage() {
                  className="relative"
                ></div>
              </div>
-            </div> */}
-            <div className="w-full mb-5 flex justify-between items-center">
-              <div className="">
-                  <CustomBreadcrumb 
-                  title = {'Manage Family'}
-                  breadcrumb={
-                      [
-                      { link: "/", title: "Home" },
-                      { link: "/manage-family", title: "Manage Family", active: true},
-                      ]
-                  }
-                  />
-              </div>
-              <Link
-                className="item-content relative text-[18px] transition-all duration-300 ease-in-out bg-[#76a5df] text-white font-medium dark:text-white h-12 px-2 flex items-center gap-2 rounded-md shadow-sm justify-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)]"
-                to="/acc-family"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-4 h-4"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
-                  />
-                </svg>
-
-              <span>Family</span>
-            </Link>
            </div>
            <FamilyManageTabs accountDetails={accountDetails} />
          </div>
@@ -13,8 +13,6 @@ import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
 import FamilyWallet from "./Tabs/FamilyWallet";
-import { apiConst } from "../../lib/apiConst";
-import { useSelector } from "react-redux";

 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -30,37 +28,46 @@ export default function FamilyManageTabs({
  listReload,
  loader,
 }) {
-
-  const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
-
  // Initial state for family details
  const initialDetailState = {
    loading: false,
-    data: [],
+    data: null,
  };

  // State for family details, tasks, waitlist, and pending
-  let [familyDetails, setFamilyDetails] = useState({loading: false, data: {}})
-  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
-  let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState})
-  let [familyPending, setFamilyPending] = useState({...initialDetailState})
+  const [details, setDetails] = useState({
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
+  });

+  // Function to reset family details, tasks, waitlist, and pending
+  const resetDetails = () => {
+    setDetails({
+      familyDetails: { ...initialDetailState },
+      familyTasks: { ...initialDetailState },
+      familyWaitList: { ...initialDetailState },
+      familyPending: { ...initialDetailState },
+    });
+  };

  const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page

-  // State for list of created jobs by FULL USER
-  const [jobList, setJobList] = useState({ loading: false, data: [] });
+  // State for family task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });

-  // State for active/selected job
+  // State for active task
  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });

-  // State for family task popout
-  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
+  // State for error messages
+  const [errMsg, setErrMsg] = useState("");

-  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+  // State for family task popout
+  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);

  // State for profile image
-  const [profileImg, setProfileImg] = useState(accountDetails.image ? accountDetails.image : profile);
+  const [profileImg, setProfileImg] = useState(profile);

  // Ref for profile image input
  const profileImgInput = useRef(null);
@@ -69,8 +76,8 @@ export default function FamilyManageTabs({
  const apiCall = useMemo(() => new usersService(), []);

  // Function to handle toggling the family task popout
-  const familyAssignPopUpHandler = () => {
-    setAssignTaskPopout((prev) => !prev);
+  const familyPopUpHandler = () => {
+    setFamilyTaskPopout((prev) => !prev);
  };

  // Function to trigger a click on the hidden profile image input
@@ -83,59 +90,24 @@ export default function FamilyManageTabs({
   * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
   * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
   */
-
  const profileImgChangeHandler = (e) => {
-    setUploadStatus({loading: false, status: false, message:''})
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0] //UPLOADED FILE
+    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB

-    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
-    if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT
-      const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`;
-      setUploadStatus({loading: false, status: false, message:msg})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
+    const file = e.target.files[0];
+    if (file && file.size > MAX_FILE_SIZE) {
+      alert("File size exceeds the limit.");
+      return;
    }

-    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      return setTimeout(()=>{
-        profileImgInput.current.value = '' // clear the input
-        setUploadStatus({loading: false, status: false, message:''})
-      },5000)
-    }
-
-    if (e.target.value !== "") {
+    if (file) {
      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        let base64Img = imgReader.result.split(",")[1];
-        let reqData = { // PAYLOAD FOR API CALL
-          family_uid: accountDetails?.family_uid,
-          file_name: uploadedFile?.name,
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
-          msg_type: 'FILE',
-          action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER
-        }
-        setUploadStatus({loading: true, status: false, message:'Loading...'})
-        apiCall.sendFiles(reqData).then(res=>{
-          if(res.status != 200 || res.data.internal_return < 0){
-            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
-          }
-          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
-          setProfileImg(event.target.result);
-        }).catch(error=>{
-          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
-        }).finally(()=>{
-          setTimeout(()=>{
-            setUploadStatus({loading: false, status: false, message: ''})
-          },5000)
-        })
+      imgReader.onload = () => {
+        const imageDataUrl = imgReader.result;
+
+        // Set the profile image
+        setProfileImg(imageDataUrl);
      };
-      imgReader.readAsDataURL(e.target.files[0]);
+      imgReader.readAsDataURL(file);
    }
  };

@@ -167,43 +139,43 @@ export default function FamilyManageTabs({
    Tasks: (
      <FamilyTasks
        className={className}
-        familyData={familyTasks}
+        loader={details.familyTasks.loading}
+        familyData={details.familyTasks.data}
        accountDetails={accountDetails}
      />
    ),
    Waiting: (
      <FamilyWaitlist
-        familyData={familyWaitList}
+        familyData={details.familyWaitList.data}
        accountDetails={accountDetails}
-        setUpdatePage={setUpdatePage}
-        jobList={jobList}
-        setActiveTask={setActiveTask}
-        activeTask={activeTask}
+        loader={details.familyWaitList.loading}
      />
    ),
    Pending: (
      <FamilyPending
-        familyData={familyPending}
+        familyData={details.familyPending.data}
        accountDetails={accountDetails}
-        setUpdatePage={setUpdatePage}
+        loader={details.familyPending.loading}
      />
    ),
    Account: (
      <FamilyAccount
-        familyData={familyDetails}
+        familyData={details.familyDetails.data}
        myRef={accountRef}
+        loader={details.familyDetails.loading}
        handlePrint={useHandlePrint}
      />
    ),
-    Profile: <FamilyProfile familyData={familyDetails.data} />,
-    wallet: <FamilyWallet familyData={familyDetails.data} />,
+    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
  };

  // Default tab component
  const defaultTabComponent = (
    <FamilyTasks
      className={className}
-      familyData={familyTasks}
+      loader={details.familyTasks.loading}
+      familyData={details.familyTasks.data}
      accountDetails={accountDetails}
    />
  );
@@ -211,102 +183,80 @@ export default function FamilyManageTabs({
  // Selected tab component based on the current 'tab'
  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

-  // Effect to manage family details
+  // Effect to manage family details and related data
  useEffect(() => {
    const manageFamily = async () => {
-      setFamilyDetails({loading:true, data: {}})
      try {
+        resetDetails();
+
+        setDetails({
+          familyDetails: { loading: true },
+          familyTasks: { loading: true },
+          familyWaitList: { loading: true },
+          familyPending: { loading: true },
+        });
+
        const { family_uid } = accountDetails;
        const reqData = { family_uid };

-        const response = await apiCall.ManageFamily(reqData)
-        if(response.status != 200 || !response?.data){
-          return setFamilyDetails({loading:false, data: {}})
+        const [familyRes, tasksRes, familyWaitRes, familyPending] =
+          await Promise.all([
+            apiCall.ManageFamily(reqData),
+            apiCall.ManageTasks(reqData),
+            apiCall.ManageFamilyWaitlist(),
+            apiCall.ManageFamilyPending(),
+          ]);
+
+        const familyData = familyRes.data;
+        const tasksData = tasksRes.data;
+        const familyWaitData = familyWaitRes.data;
+        const familyPendingData = familyPending.data;
+
+        // Function to check for errors in data
+        const checkDataError = (data) => data?.internal_return < 0;
+
+        if (
+          checkDataError(familyData) ||
+          checkDataError(tasksData) ||
+          checkDataError(familyWaitData) ||
+          checkDataError(familyPendingData)
+        ) {
+          return;
        }
-        setFamilyDetails({loading:false, data: response?.data})
+
+        setDetails({
+          familyDetails: { loading: false, data: familyData },
+          familyTasks: { loading: false, data: tasksData },
+          familyWaitList: { loading: false, data: familyWaitData },
+          familyPending: { loading: false, data: familyPendingData },
+        });
      } catch (error) {
+        resetDetails();
+        setErrMsg("An error occurred");
        throw new Error(error);
-        setFamilyDetails({loading:false, data: {}})
      }
    };
+
    // Invoke the manageFamily function when the component mounts
    manageFamily();
-  }, []);
-
-    // Effect to manage active family task details
-    useEffect(() => {
-      const manageTasks = async () => {
-        setFamilyTasks({loading:true, data: []})
-        try {
-          const { family_uid } = accountDetails;
-          const reqData = { family_uid };
-  
-          const response = await apiCall.ManageTasks(reqData)
-          if(response.status != 200 || !response?.data){
-            return setFamilyTasks({loading:false, data: []})
-          }
-          setFamilyTasks({loading:false, data: response?.data})
-        } catch (error) {
-          throw new Error(error);
-          setFamilyTasks({loading:false, data: []})
-        }
-      };
-      // Invoke the manageFamily function when the component mounts
-      manageTasks();
-    }, [updatePage, parentFamilyTaskList]);
-
-  // Effect to manage family wait task details
-  useEffect(() => {
-    const manageFamilyWaitlist = async () => {
-      setFamilyWaitList({loading:true, data: []})
-      try {
-        const response = await apiCall.ManageFamilyWaitlist()
-        if(response.status != 200 || !response?.data){
-          return setFamilyWaitList({loading:false, data: []})
-        }
-        setFamilyWaitList({loading:false, data: response?.data})
-      } catch (error) {
-        throw new Error(error);
-        setFamilyWaitList({loading:false, data: []})
-      }
-    };
-    // Invoke the manageFamily function when the component mounts
-    manageFamilyWaitlist();
  }, [updatePage]);

-    // Effect to manage family pending task details
-    useEffect(() => {
-      const manageFamilyPending = async () => {
-        setFamilyPending({loading:true, data: []})
-        try {
-          const response = await apiCall.ManageFamilyPending()
-          if(response.status != 200 || !response?.data){
-            return setFamilyPending({loading:false, data: []})
-          }
-          setFamilyPending({loading:false, data: response?.data})
-        } catch (error) {
-          throw new Error(error);
-          setFamilyPending({loading:false, data: []})
-        }
-      };
-      // Invoke the manageFamily function when the component mounts
-      manageFamilyPending();
-    }, [updatePage, pendingListTable]);
-
-  // Effect to get all parent job list
+  // Effect to manage family tasks
  useEffect(() => {
+    let checkFamilyTask = true;
    const reqData = {
      limit: 30,
      offset: 0,
      job_type: "FAMILY",
-      action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
+      action: 13005,
    };

-      setJobList({ loading: true });
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
      apiCall
        .getMyJobList(reqData)
        .then((res) => {
-          setJobList({ loading: false, data: res?.data?.result_list });
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
          if (res?.data?.result_list?.length) {
            setActiveTask((prev) => ({
              ...prev,
@@ -315,9 +265,15 @@ export default function FamilyManageTabs({
          }
        })
        .catch((err) => {
-          setJobList({ loading: false, data: [] });
+          setFamilyTask({ loading: false, data: [] });
          console.log("Error", err);
        });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
  }, []);

  return (
@@ -342,7 +298,6 @@ export default function FamilyManageTabs({
                profileImgChangeHandler={profileImgChangeHandler}
                browseProfileImg={browseProfileImg}
                accountDetails={accountDetails}
-                uploadStatus={uploadStatus}
              />
              <div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
                <button
@@ -400,7 +355,7 @@ export default function FamilyManageTabs({
                  </ul>
                  <button
                    type="button"
-                    onClick={familyAssignPopUpHandler}
+                    onClick={familyPopUpHandler}
                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                  >
                    Add task
@@ -422,14 +377,15 @@ export default function FamilyManageTabs({
        </Suspense>
      </div>

-      {assignTaskPopout && (
+      {familyTaskPopout && (
        <AssignTaskPopout
-          action={familyAssignPopUpHandler}
-          situation={assignTaskPopout}
-          jobList={jobList}
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
          setActiveTask={setActiveTask}
          activeTask={activeTask}
-          familyDetailsData={familyDetails.data}
+          familyDetailsData={details.familyDetails.data}
          setUpdatePage={setUpdatePage}
        />
      )}
@@ -4,7 +4,6 @@ import SearchCom from "../Helpers/SearchCom";
 import FamilyMarketCard from "../Cards/FamilyMarketCard";
 import usersService from "../../services/UsersService";
 import SuggestTask from "../FamilyPopup/SuggestTask";
-import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";

 export default function FamilyMarket() {
  const [popUp, setPopUp] = useState(false);
@@ -54,23 +53,12 @@ export default function FamilyMarket() {
      <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 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">
                <span>Suggest Task to the Parents</span>
              </h1>
            </div>
-          </div> */}
-          <div className="mb-5">
-            <CustomBreadcrumb 
-            title = {'Suggest Task to the Parents'}
-            breadcrumb={
-                [
-                { link: "/", title: "Home" },
-                { link: "/familymarket", title: "Family Market", active: true},
-                ]
-            }
-            />
          </div>
          {/* Body */}
          <div className="filter-section w-full items-center sm:flex justify-between mb-6">
@@ -1,61 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Layout from '../Partials/Layout'
-import MyOffersFamilyTable from '../MyTasks/MyOffersFamilyTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner';
-import usersService from '../../services/UsersService';
-import CustomBreadcrumb from '../Breadcrumb/CustomBreadcrumb';
-import { useSelector } from 'react-redux';
-
-export default function FamilyPendingOffer() {
-    const userApi = new usersService();
-
-    const {familyOfferList} = useSelector((state) => state.tableReload)
-
-    const [myOffersList, setMyOffersList] = useState({loading: true, data: []});
-
-    const getMyOffersList = async () => {
-        try {
-            const res = await userApi.getOffersList();
-            setMyOffersList({loading:false, data:res.data});
-        } catch (error) {
-            setMyOffersList({loading:false, data:[]});
-        }
-    };
-
-    useEffect(()=>{
-        getMyOffersList()
-    },[familyOfferList])
-    return (
-        <Layout>
-            {myOffersList.loading ?
-            <div className='w-full flex justify-center items-center rounded-2xl bg-white'>
-                <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]'  />
-            </div>
-            :
-            myOffersList?.data?.result_list && myOffersList?.data?.result_list.length > 0 ?
-            <MyOffersFamilyTable
-                familyOffers={myOffersList?.data?.result_list}
-                image_server={myOffersList?.data?.session_image_server}
-                className="mb-10" 
-            />
-            :
-            <>
-                <div className="mb-6">
-                    <CustomBreadcrumb 
-                    title = {'Ready to Start'}
-                    breadcrumb={
-                        [
-                        { link: "/", title: "Home" },
-                        { link: "/pending", title: "Pending", active: true},
-                        ]
-                    }
-                    />
-                </div>
-                <div className='w-full h-[30rem] bg-white dark:bg-dark-white flex justify-center items-center rounded-2xl'>
-                    <p className='text-black dark:text-white'>No Record Found!</p>
-                </div>
-            </>
-            }
-        </Layout>
-    )
-}
@@ -1,359 +0,0 @@
-import React, { useEffect, useState, lazy, Suspense } from 'react'
-import LoadingSpinner from '../../Spinners/LoadingSpinner'
-import { NewTasks } from './forms'
-import { PriceFormatter } from '../../Helpers/PriceFormatter'
-import { useSelector } from 'react-redux';
-import { InputCom } from '../../AddJob/settings';
-import * as Yup from "yup";
-import { Form, Formik } from "formik";
-
-
-// To get the validation schema
-const validationSchema = Yup.object().shape({
-    currency: Yup.string()
-      .min(1, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("required"),
-    amount: Yup.number()
-      .typeError("Invalid number")
-      .min(1, "Must be greater than 0")
-      .test("no-e", "Invalid number", (value) => {
-        if (value && /\d+e/.test(value)) {
-          return false;
-        }
-        return true;
-      })
-      .required("required"),
-      job_description: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(499, "Maximum 499 characters")
-      .required("required"),
-      timeline_days: Yup.number()
-      .typeError("you must specify a number")
-      .min(1, "Must be greater than 0")
-      .required("required"),
-  });
-
-
-
-const VideoElement = lazy(() => import("../../VideoCom/VideoElement")); // LAZY IMPORTING VIDEO COMPONENT
-
-export default function AssignMediaTask({
-    commonMedia,
-    requestStatus,
-    setRequestStatus,
-    assignMediaTask,
-    activeMedia,
-    handleActiveMedia,
-    closeModal,
-    family_uid
-}) {
-
-    const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
-
-    const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
-
-  // For form initial values
-    const initialValues = {
-        // initial values for formik
-        currency: walletDetails.data.length == 1 ? walletDetails.data[0].country : '',
-        amount: "",
-        job_description: "",
-        timeline_days: "",
-        media_uid: activeMedia?.uid,
-        family_uid: family_uid,
-        media_type: "COMMON"
-    };
-
-
-
-
-//   let imageSrc = (localStorage.getItem("session_token")
-//   ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeMedia.uid}` : ""); // FOR GETTING JOB IMAGE
-
-  return (
-    <>
-         {commonMedia?.loading ? (
-              <div className="h-[30rem] w-full flex justify-center items-center">
-                <LoadingSpinner color="sky-blue" size="16" />
-              </div>
-            ) : (
-                <Formik
-                initialValues={initialValues}
-                validationSchema={validationSchema}
-                onSubmit={(values, helpers)=>{assignMediaTask(values, helpers)}}
-              >
-                {(props) => {
-                  return (
-                        <Form className='contents'>
-                            <>
-                                <div
-                                className={`job-action-modal-body w-full h-full overflow-y-auto md:grid md:grid-cols-2`}
-                                >
-                                <div className="p-4 pt-0">
-                                    <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                                        {commonMedia?.data?.length ? (
-                                        commonMedia?.data?.map((item, index) => (
-                                            <div
-                                            key={item.uid}
-                                            className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                                            onClick={() => handleActiveMedia(item)}
-                                            >
-                                            <input
-                                                type="radio"
-                                                name="media-list"
-                                                checked={activeMedia?.uid == item?.uid}
-                                                onChange={() =>
-                                                handleActiveMedia(item)
-                                                }
-                                                className="w-[15px] h-[15px] cursor-pointer"
-                                            />
-                                            <p className="w-full text-dark-gray dark:text-white tracking-wide">
-                                                {item?.title}
-                                            </p>
-                                            </div>
-                                        ))
-                                        ) : (
-                                        <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                                            No Media found!
-                                        </p>
-                                        )}
-                                    </div>
-                                </div>
-
-                                {/*Right Hand Side for details && Task Type === select */}
-                                    <>
-                                    {commonMedia?.data?.length > 0 ? (
-                                        <div className="p-4 py-0 h-auto">
-                                        <div className="w-full">
-                                            <div className="mb-3 w-full">
-                                            <label className="job-label">
-                                                Description
-                                            </label>
-                                            <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                                {activeMedia?.description}
-                                            </p>
-                                            </div>
-
-                                            <div className="my-3 w-full flex items-center justify-center">
-                                                <div className="w-full max-w-xs h-28 rounded-2xl flex items-center justify-center">
-                                                    <Suspense fallback={<p>Loading...</p>}>
-                                                        <VideoElement videoId={activeMedia?.uid} />
-                                                    </Suspense>
-                                                </div>
-                                            </div>
-                                            <div className="grid grid-cols-3 gap-3">
-                                                {/* Price */}
-                                                <div className="field w-full flex flex-col justify-between">
-                                                    <label htmlFor="price" className="job-label flex gap-1">
-                                                        Reward
-                                                        <span className='text-red-500 text-base'>{props.errors.amount && props.touched.amount && '*'}</span>
-                                                    </label>
-                                                    <InputCom
-                                                    fieldClass="px-6 text-right"
-                                                    // label="Price"
-                                                    // labelClass="tracking-wide"
-                                                    inputBg="bg-slate-100"
-                                                    type="number"
-                                                    name="amount"
-                                                    placeholder="0"
-                                                    value={props.values.amount}
-                                                    inputHandler={props.handleChange}
-                                                    // error={props.errors.price && props.touched.price && props.errors.price}
-                                                    />
-                                                </div>
-
-                                                {/* Currency */}
-                                                <div className="field w-full flex flex-col justify-between">
-                                                    <label
-                                                    htmlFor="currency"
-                                                    className="job-label flex gap-1 invisible"
-                                                    >
-                                                    Currency
-                                                    {props.errors.currency && props.touched.currency && <span className="text-base text-red-500">*</span>}
-                                                    </label>
-                                                    <select
-                                                    id="currency"
-                                                    name="currency"
-                                                    value={props.values.currency}
-                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${props.errors.currency && props.touched.currency && 'border border-red-500'}`}
-                                                    onChange={props.handleChange}
-                                                    disabled={walletDetails.data.length == 1}
-                                                    >
-                                                    {walletDetails?.loading ? (
-                                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                                        Loading...
-                                                        </option>
-                                                    ) : walletDetails.data.length ? (
-                                                        <>
-                                                            {walletDetails.data.length == 1 ?
-                                                            <>
-                                                            {walletDetails.data?.map((item, index) => (
-                                                                <option
-                                                                key={index}
-                                                                className="text-slate-500 text-lg"
-                                                                value={item?.country}
-                                                                >
-                                                                {item?.code}
-                                                                </option>
-                                                            ))}
-                                                            </>
-                                                            :
-                                                            <>
-                                                                <option className="text-slate-500 text-[13.975px]" value="">
-                                                                    Select
-                                                                </option>
-                                                                {walletDetails.data?.map((item, index) => (
-                                                                    <option
-                                                                    key={index}
-                                                                    className="text-slate-500 text-lg"
-                                                                    value={item?.country}
-                                                                    >
-                                                                    {item?.code}
-                                                                    </option>
-                                                                ))}
-                                                            </>
-                                                            }
-                                                        </>
-                                                    ) : (
-                                                        <option className="text-slate-500 text-lg" value="">
-                                                        No Options Found!
-                                                        </option>
-                                                    )}
-                                                    </select>
-                                                </div>
-                                            
-                                                {/* Duration */}
-                                                <div className="field w-full flex flex-col justify-between">
-                                                    <label
-                                                    htmlFor="timeline_days"
-                                                    className="job-label flex gap-1"
-                                                    >
-                                                    Timeline
-                                                    {props.errors.timeline_days && props.touched.timeline_days && <span className="text-base text-red-500">*</span>}
-                                                    </label>
-                                                    <select
-                                                    id="timeline_days"
-                                                    name="timeline_days"
-                                                    value={props.values.timeline_days}
-                                                    className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                                    onChange={props.handleChange}
-                                                    >
-                                                    {publicArray.length && (
-                                                        <>
-                                                        <option className="text-slate-500 text-[13.975px]" value="">
-                                                            Select
-                                                        </option>
-                                                        {publicArray.map(({ name, duration }, idx) => (
-                                                            <option
-                                                            key={idx}
-                                                            className="text-slate-500 text-[13.975px]"
-                                                            value={duration}
-                                                            >
-                                                            {name}
-                                                            </option>
-                                                        ))}
-                                                        </>
-                                                    )}
-                                                    </select>
-                                                </div>
-                                            </div>
-                                            
-                                            {/* Delivery Detail */}
-                                            <div className="my-3">
-                                            <label className="w-full job-label flex gap-1">
-                                                Delivery Detail
-                                                {props.errors.job_description && props.touched.job_description && <span className="text-base text-red-500">*</span>}
-                                            </label>
-                                            <textarea
-                                                className={`p-1 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={props.values.job_description}
-                                                onChange={props.handleChange}
-                                                name='job_description'
-                                            />
-                                            </div>
-                                        </div>
-                                        </div>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    </>
-                                </div>
-
-                                {/* BTN */}
-                                <div className="modal-footer-wrapper">
-                                {/* error or success display */}
-                                <div className="w-auto h-auto flex items-center">
-                                    {requestStatus.message != "" &&
-                                    (!requestStatus.status ? (
-                                        <div
-                                        className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
-                                        >
-                                        {requestStatus.message}
-                                        </div>
-                                    ) : (
-                                        requestStatus.status && (
-                                        <div
-                                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                                        >
-                                            {requestStatus.message}
-                                        </div>
-                                        )
-                                    ))}
-                                </div>
-
-                                {/* End of error or success display */}
-                                <div className="w-auto h-auto flex items-center gap-20">
-                                    <button
-                                    disabled={requestStatus.loading}
-                                    onClick={()=>closeModal()}
-                                    type="button"
-                                    className="custom-btn border-gradient"
-                                    >
-                                    <span className="text-gradient">Close</span>
-                                    </button>
-                                    <div className="">
-                                    {requestStatus.loading ? (
-                                        <LoadingSpinner color="sky-blue" size="8" />
-                                    ) : (
-                                        <button
-                                        type="submit"
-                                        disabled={requestStatus.loading}
-                                        // onClick={assignFamilyTask}
-                                        className="custom-btn btn-gradient text-white"
-                                        >
-                                        Assign
-                                        </button>
-                                    ) 
-                                    }
-                                    </div>
-                                </div>
-                                </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" },
-  ];
@@ -1,263 +0,0 @@
-import React from 'react'
-import LoadingSpinner from '../../Spinners/LoadingSpinner'
-import { NewTasks } from './forms'
-import { PriceFormatter } from '../../Helpers/PriceFormatter'
-import { useSelector } from 'react-redux';
-import AttachFile from '../../attachmentCom/AttachFile';
-
-export default function AssignPrevNewTask({
-    jobList,
-    requestStatus,
-    assignFamilyTask,
-    taskType,
-    switchTaskType,
-    formState,
-    setFormState,
-    activeTask,
-    handleActiveTask,
-    closeModal
-}) {
-
-  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
-
-
-  let imageSrc = (localStorage.getItem("session_token")
-  ? `${userDetails?.session_image_server}${localStorage.getItem("session_token")}/job/${activeTask?.data?.job_uid}` : ""); // FOR GETTING JOB IMAGE
-
-  return (
-    <>
-         {jobList?.loading ? (
-              <div className="h-[30rem] w-full flex justify-center items-center">
-                <LoadingSpinner color="sky-blue" size="16" />
-              </div>
-            ) : (
-              <>
-                <div
-                  className={`job-action-modal-body w-full h-full overflow-y-auto md:grid ${
-                    taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
-                  }`}
-                >
-                  <div className="px-4">
-                    <div className="mb-2 w-full flex items-center gap-4">
-                      <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input
-                          type="radio"
-                          name="task-type"
-                          value="select"
-                          className="w-[20px] h-[20px] cursor-pointer"
-                          checked={taskType == "select"}
-                          onChange={switchTaskType}
-                        />
-                        <span className="text-lg tracking-wide font-semibold">Previous Task</span>
-                      </div>
-                      <div className="flex items-center gap-2 text-sky-blue text-base">
-                        <input
-                          type="radio"
-                          name="task-type"
-                          value="new"
-                          className="w-[20px] h-[20px] cursor-pointer"
-                          checked={taskType == "new"}
-                          onChange={switchTaskType}
-                        />
-                        <span className="text-lg tracking-wide font-semibold">New Task</span>
-                      </div>
-                    </div>
-                    {/* Task Type === select */}
-                    {taskType == "select" && (
-                      <div className="p-4 w-full h-[450px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
-                        {jobList?.data?.length ? (
-                          jobList?.data?.map((item, index) => (
-                            <div
-                              key={item.job_uid}
-                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
-                              onClick={() => handleActiveTask(item.job_uid, item)}
-                            >
-                              <input
-                                type="radio"
-                                name="task-list"
-                                checked={
-                                  activeTask.id == item.job_uid ||
-                                  (activeTask.id == index && true)
-                                }
-                                onChange={() =>
-                                  handleActiveTask(item.job_uid, item)
-                                }
-                                className="w-[15px] h-[15px] cursor-pointer"
-                              />
-                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
-                                {item?.title}
-                              </p>
-                            </div>
-                          ))
-                        ) : (
-                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
-                            No Task found!
-                          </p>
-                        )}
-                      </div>
-                    )}
-                    {taskType == "new" && (
-                      <div className="px-4 w-full">
-                        <NewTasks
-                          formState={formState}
-                          setFormState={setFormState}
-                        />
-                      </div>
-                    )}
-                  </div>
-
-                  {/*Right Hand Side for details && Task Type === select */}
-                  {taskType == "select" && (
-                    <>
-                      {jobList?.data?.length > 0 ? (
-                        <div className="px-4">
-                          <div className="w-full">
-                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2 max-h-[50px] overflow-y-auto">
-                              {activeTask?.data?.title}
-                            </p>
-                            {/* <div className="my-3">
-                              <Detail
-                                label="Description"
-                                value={activeTask?.data?.description}
-                              />
-                            </div> */}
-                            <div className='flex flex-col gap-2'>
-                              <div className="my-1 w-full">
-                                <label className="job-label">
-                                  Description
-                                </label>
-                                <p className="p-1 text-sm text-slate-900 dark:text-white max-h-[100px] overflow-y-auto">
-                                  {activeTask?.data?.description}
-                                </p>
-                              </div>
-                              <div className="w-full grid grid-cols-2">
-                                <div className="w-full">
-                                  <div className="w-full flex items-center gap-1">
-                                    <label className="job-label">
-                                      Reward
-                                    </label>
-                                    <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                      {PriceFormatter(
-                                        activeTask?.data?.price * 0.01,
-                                        activeTask?.data?.currency,
-                                        activeTask?.data?.curreny_code
-                                      )}
-                                    </p>
-                                  </div>
-
-                                  <div className="w-full flex items-center gap-1">
-                                    <label className="job-label">
-                                      Timeline
-                                    </label>
-                                    <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
-                                  </div>
-                                </div>
-                                <div className="w-full flex items-center justify-center">
-                                  <div className="mb-1 w-24 max-h-24 rounded-2xl flex items-center justify-center">
-                                      <img 
-                                        className="w-full h-auto"
-                                        loading="lazy"
-                                        src={imageSrc} 
-                                        alt='job image' 
-                                      />
-                                  </div>
-                                </div>
-                              </div>
-                              
-                              {/* ATTACHMENT SECTION*/}
-                              <div className="w-full max-h-28">
-                                  <AttachFile data={activeTask.data} />
-                              </div>
-
-                              <div className="my-3">
-                                <label className="w-full job-label">
-                                  Delivery Detail
-                                </label>
-                                <textarea
-                                  className={`p-1 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={activeTask?.data?.job_detail}
-                                  readOnly
-                                  // onChange={handleInputChange}
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <></>
-                      )}
-                    </>
-                  )}
-                </div>
-
-                {/* BTN */}
-                <div className="modal-footer-wrapper">
-                  {/* error or success display */}
-                  <div className="w-auto h-auto flex items-center">
-                    {requestStatus.message != "" &&
-                      (!requestStatus.status ? (
-                        <div
-                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
-                        >
-                          {requestStatus.message}
-                        </div>
-                      ) : (
-                        requestStatus.status && (
-                          <div
-                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                          >
-                            {requestStatus.message}
-                          </div>
-                        )
-                      ))}
-                  </div>
-
-                  {/* End of error or success display */}
-                  <div className="w-auto h-auto flex items-center gap-20">
-                    <button
-                      disabled={requestStatus.loading}
-                      onClick={()=>closeModal()}
-                      type="button"
-                      className="custom-btn border-gradient"
-                    >
-                      <span className="text-gradient">Close</span>
-                    </button>
-                    <div className="">
-                      {requestStatus.loading ? (
-                        <LoadingSpinner color="sky-blue" size="8" />
-                      ) : (
-                        <button
-                          type="button"
-                          disabled={requestStatus.loading || requestStatus.status}
-                          onClick={assignFamilyTask}
-                          className={`custom-btn btn-gradient text-white ${requestStatus.status && 'opacity-50'}`}
-                        >
-                          Assign
-                        </button>
-                      ) 
-                      // : (
-                      //   <button
-                      //     type="button"
-                      //     disabled={requestStatus.loading}
-                      //     onClick={assignFamilyTask}
-                      //     className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                      //   >
-                      //     {details
-                      //       ? `Assign task to ${details?.firstname}`
-                      //       : familyDetailsData
-                      //       ? `Assign task to ${familyDetailsData.firstname}`
-                      //       : "Assign"}
-                      //   </button>
-                      // )
-                      }
-                    </div>
-                  </div>
-                </div>
-              </>
-            )  
-        }     
-    </>
-  )
-}
@@ -1,423 +1,420 @@
-import React, { Suspense, useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useLocation, useOutletContext } from "react-router-dom";
+import React, { useState } from "react";
 import usersService from "../../../services/UsersService";
-import { tableReload } from "../../../store/TableReloads";
 import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
-import { SocketValues } from "../../Contexts/SocketIOContext";
-import { errorMsg } from "../../../lib/errorMsg";

-import AssignPrevNewTask from "./AssignPrevNewTask";
-import AssignMediaTask from "./AssignMediaTask";
+const AssignTaskPopout = React.memo(
+  ({
+    action,
+    details,
+    situation,
+    familyDetailsData,
+    familyTask,
+    activeTask,
+    setActiveTask,
+    setUpdatePage
+  }) => {
+    const apiCall = new usersService();

-const AssignTaskPopout = ({
-  action,
-  details,
-  situation,
-  familyDetailsData,
-  jobList,
-  activeTask,
-  setActiveTask,
-  setUpdatePage,
-  familyList
-}) => {
+    let [requestStatus, setRequestStatus] = useState({
+      loading: false,
+      status: false,
+      message: "",
+    }); // HOLDS RESPONSE FOR SENDING API REQUEST

-  const newJobList = {...jobList, data:jobList?.data?.filter(item => item?.job_mode == 'FAMILY')}
-  
-  const {parentAssignJobToKid} = SocketValues()
+    let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK

-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+    const switchTaskType = ({ target: { value } }) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setTaskType(value);
+    };

+    const handleActiveTask = (id = 0, data = {}) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setActiveTask({ id, data });
+    };

-  const apiCall = new usersService();
+    // New Task
+    const [formState, setFormState] = useState({
+      // Initialize form state with desired fields
+      banner: details?.banner || "default.jpg",
+      country: details?.country || "",
+      price: details?.price || "",
+      title: details?.title || "",
+      description: details?.description || "",
+      job_detail: details?.job_detail || "",
+      timeline_days: details?.timeline_days || "",
+      category: details?.category || "",
+    });

-  let { pathname, state } = useLocation();
-
-  const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
-
-  const [selectedFamilyUid, setSelectedFamilyUid] = useState('');
-
-  const handleFamChange = (event) => {
-    setSelectedFamilyUid(event.target.value);
-  };
-
-
-  const dispatch = useDispatch();
-
-  // const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
-
-  const famList = familyList?.map((member) => (
-    <option key={member?.family_uid} value={member?.family_uid}>
-      {member?.firstname} {member?.lastname}
-    </option>
-  ));
-
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // HOLDS RESPONSE FOR SENDING API REQUEST
-
-  let [commonMedia, setCommonMedia] = useState({loading: true, data: [], image: ''})  // HOLDS COMMON MEDIA DATA
-  let [activeMedia, setActiveMedia] = useState({})  // HOLDS ACTIVE COMMON MEDIA DATA
-  const handleActiveMedia = (data = {}) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE MEDIA
-    setActiveMedia({...data});
-  };
-
-
-  let [assignType, setAssignType] = useState("task"); // SWITCHES BTW TASK AND MEDIA ASSIGNMENT
-
-  const switchAssignType = ({ target: { name } }) => {
-    // FUNCTION TO CHANGE ASSIGN TASK TYPE
-    setAssignType(name);
-  };
-
-  let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
-
-  const switchTaskType = ({ target: { value } }) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setTaskType(value);
-  };
-
-  const handleActiveTask = (id = 0, data = {}) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setActiveTask({ id, data });
-  };
-
-  // New Task
-  const [formState, setFormState] = useState({
-    // Initialize form state with desired fields
-    banner: details?.banner || "default.jpg",
-    country: details?.country ? details?.country : walletDetails?.data?.length == 1 ? walletDetails?.data[0].country : '',
-    price: details?.price || "",
-    title: details?.title || "",
-    description: details?.description || "",
-    job_detail: details?.job_detail || "",
-    timeline_days: details?.timeline_days || "",
-    category: details?.category || "",
-  });
-
-  const assignFamilyTask = () => {
-    setRequestStatus({ loading: true, status: false, message: "" });
-
-    if(!selectedFamilyUid){ // If no family found, throw error
-      setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
-      return setTimeout(() => {
-        setRequestStatus({ loading: false, status: false, message: "" });
-      }, 3000);
-    }
-
-    let reqData = {};
-    if (taskType == "select" && assignType == 'task') {
-      // RUNS HERE IF TASK TYPE IS SELECT
-      if (!Object.keys(activeTask.data)?.length) {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "No Task is selected",
-        });
-        return setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
-      }
-      reqData = {
-        // API PAYLOADS
-        job_id: activeTask.data?.job_id,
-        job_uid: activeTask.data?.job_uid,
-        family_uid: selectedFamilyUid
-          ? selectedFamilyUid
-          : familyDetailsData?.uid || details?.family_uid,
-        job_description: activeTask.data?.description,
-        assign_mode: 110011,
-      };
-    }
-
-    if (taskType === "new" && assignType == 'task') {
-      const {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price,
-        timeline_days,
-        title,
-      } = formState;
-
-      const requiredFields = {
-        banner,
-        // category,
-        currency: country,
-        description,
-        "job detail": job_detail,
-        price,
-        timeline: timeline_days,
-        title,
-      };
-
-      for (let field in requiredFields) {
-        if (requiredFields[field] == "") {
-          // let currencyErrMsg = field == "country" && "currency"
+    const assignFamilyTask = () => {
+      setRequestStatus({ loading: true, status: false, message: "" });
+      let reqData = {};
+      if (taskType == "select") {
+        // RUNS HERE IF TASK TYPE IS SELECT
+        if (!Object.keys(activeTask.data).length) {
          setRequestStatus({
            loading: false,
            status: false,
-            message: `${
-              field[0].toUpperCase() + field.slice(1).toLowerCase()
-            } is empty`,
+            message: "No Task is seleted",
          });
          return setTimeout(() => {
            setRequestStatus({ loading: false, status: false, message: "" });
          }, 3000);
        }
+        reqData = {
+          // API PAYLOADS
+          job_id: activeTask.data?.job_id,
+          job_uid: activeTask.data?.job_uid,
+          family_uid: familyDetailsData?.uid || details?.family_uid,
+          job_description: activeTask.data?.description,
+          assign_mode: 110011,
+        };
      }

-      reqData = {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price: price * 100,
-        timeline_days,
-        title,
-        assign_mode: 110055,
-        family_uid: selectedFamilyUid
-        ? selectedFamilyUid
-        : familyDetailsData?.uid || details?.family_uid,
-      };
-    }
+      if (taskType === "new") {
+        const {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price,
+          timeline_days,
+          title,
+        } = formState;

-    apiCall
-      .assignFamilyTask(reqData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        const requiredFields = {
+          banner,
+          // category,
+          country,
+          description,
+          job_detail,
+          price,
+          timeline_days,
+          title,
+        };

-          let error = errorMsg[res?.data?.error_msg] || ''
-
-          setRequestStatus({
-            loading: false,
-            status: false,
-            message: error? error : "failed to assign task",
-          });
-
-          return setTimeout(() => {
-            setRequestStatus({ loading: false, status: false, message: "" });
-          }, 5000);
+        for (let field in requiredFields) {
+          if (requiredFields[field] == "") {
+            // let currencyErrMsg = field == "country" && "currency"
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: `${field} is empty`,
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 3000);
+          }
        }
-        if (res.status === 200) {

+        reqData = {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price: price * 100,
+          timeline_days,
+          title,
+          assign_mode: 110055,
+          family_uid: details?.family_uid || familyDetailsData?.uid,
+        };
+      }
+
+      apiCall
+        .assignFamilyTask(reqData)
+        .then((res) => {
+          if (res.status != 200 || res.data.internal_return < 0) {
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: "failed to assign task",
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
          setRequestStatus({
            loading: false,
            status: true,
-            message: "Task Assigned successfully",
+            message: "action successful",
          });
-
-          setUpdatePage(prev => !prev); // Updates family task page by calling the useeffect hook
-
-          dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
-
-          //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
-          // message, room
-          let socketMsg = {
-            "audience": "MEMBER",
-            "action": "REFRESH_OFFER",
-            "family_uid": reqData.family_uid,
-          }
-          let socketRoom = `FAMILY-${userDetails.uid}`
-          parentAssignJobToKid(socketMsg, socketRoom) //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
-
+          setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
          setTimeout(() => {
            setRequestStatus({ loading: false, status: false, message: "" });
            action(); // FUNCTION THAT CLOSES THE MODAL BOX
          }, 5000);
-        }
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "An Error occured, try again",
+        })
+        .catch((err) => {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "An Error occured, try again",
+          });
+          setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 5000);
        });
+    };

-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
-      });
-  };
+    return (
+      <>
+        <ModalCom
+          action={action}
+          situation={situation}
+          className="assign-task-popup"
+        >
+          <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
+              <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                Assign task to{" "}
+                {familyDetailsData?.firstname || details?.firstName}
+              </h1>
+              <button
+                type="button"
+                className="text-[#374557] dark:text-red-500"
+                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>
+            {familyTask.loading ? (
+              <div className="h-[100px] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : (
+              <>
+                <div
+                  className={`job-action-modal-body w-full md:grid ${
+                    taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                  }`}
+                >
+                  <div className="p-4">
+                    <div className="mb-2 w-full flex items-center gap-4">
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="select"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "select"}
+                          onChange={switchTaskType}
+                        />
+                        <span>Select Task</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="new"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "new"}
+                          onChange={switchTaskType}
+                        />
+                        <span>New Task</span>
+                      </div>
+                    </div>
+                    {/* Task Type === select */}
+                    {taskType == "select" && (
+                      <div className="p-4 w-full h-[400px] overflow-y-auto bg-slate-100 rounded-md dark:bg-[#11131f] dark:text-white">
+                        {familyTask?.data?.length ? (
+                          familyTask?.data?.map((item, index) => (
+                            <div
+                              key={item.job_uid}
+                              className="mb-2 flex justify-start items-center gap-2 text-sky-blue text-base cursor-pointer"
+                              onClick={() =>
+                                handleActiveTask(item.job_uid, item)
+                              }
+                            >
+                              <input
+                                type="radio"
+                                name="task-list"
+                                checked={
+                                  activeTask.id == item.job_uid ||
+                                  (activeTask.id == index && true)
+                                }
+                                onChange={() =>
+                                  handleActiveTask(item.job_uid, item)
+                                }
+                                className="w-[15px] h-[15px] cursor-pointer"
+                              />
+                              <p className="w-full text-dark-gray dark:text-white tracking-wide">
+                                {item?.title}
+                              </p>
+                            </div>
+                          ))
+                        ) : (
+                          <p className="p-8 text-lg text-dark-gray dark:text-white tracking-wide text-center cursor-default">
+                            No Task found!
+                          </p>
+                        )}
+                      </div>
+                    )}
+                    {taskType == "new" && (
+                      <div className="p-4 w-full h-[400px]">
+                        <NewTasks
+                          formState={formState}
+                          setFormState={setFormState}
+                        />
+                      </div>
+                    )}
+                  </div>

-  const closeModal = () => {  // FOR CLOSING ASSIGN TASK MODAL
-    action()
-  }
+                  {/*Right Hand Side for details && Task Type === select */}
+                  {taskType == "select" && (
+                    <>
+                      {familyTask?.data?.length > 0 ? (
+                        <div className="p-4">
+                          <div className="w-full">
+                            <p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide border-b-2">
+                              {activeTask?.data?.title}
+                            </p>
+                            <div className="my-3">
+                              <Detail
+                                label="Description"
+                                value={activeTask?.data?.description}
+                              />
+                            </div>
+                            <div className="flex items-center">
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Price
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                  {PriceFormatter(
+                                    activeTask?.data?.price * 0.01,
+                                    activeTask?.data?.currency,
+                                    activeTask?.data?.curreny_code
+                                  )}
+                                </p>
+                              </div>

-  const assignMediaTask = (values, helpers) => {  // FUNCTION TO HANDLE ASSIGNING MEDIA TASK
-    setRequestStatus({ loading: true, status: false, message: "" });
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Timeline
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              </div>
+                            </div>

-    if(!selectedFamilyUid){ // If no family found, throw error
-      setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
-      return setTimeout(() => {
-        setRequestStatus({ loading: false, status: false, message: "" });
-      }, 3000);
-    }
+                            <div className="my-3 sm:flex items-center">
+                              <Detail
+                                label="Created"
+                                value={`Dummy, no value found for created!`}
+                              />
+                            </div>

-    let reqData = {...values, assign_mode:'110012', family_uid:selectedFamilyUid, media_uid:activeMedia.uid, amount:values.amount * 100}
+                            <div className="my-3">
+                              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                                Delivery Detail
+                              </label>
+                              <textarea
+                                className={`p-1 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={activeTask?.data?.job_detail}
+                                readOnly
+                                // onChange={handleInputChange}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      ) : (
+                        <></>
+                      )}
+                    </>
+                  )}
+                </div>

-    apiCall.parentAssignMediaTask(reqData).then(res => {  // API CALL TO ASSIGN MEDIA TASK
-      if(res.status != 200 || res.data.internal_return < 0){
-        let error = errorMsg[res?.data?.error_msg] || ''
+                {/* BTN */}
+                <div className="py-2 px-4 border-t-2 flex justify-between items-center">
+                  {/* error or success display */}
+                  <div className="w-auto h-auto flex items-center">
+                    {requestStatus.message != "" &&
+                      (!requestStatus.status ? (
+                        <div
+                          className={`relative p-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      ) : (
+                        requestStatus.status && (
+                          <div
+                            className={`relative p-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          >
+                            {requestStatus.message}
+                          </div>
+                        )
+                      ))}
+                  </div>

-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: error? error : "failed to assign task",
-        });
-        return setTimeout(()=>{
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000)
-      }
-      setRequestStatus({ loading: false, status: true, message: "Task Assigned Successfully" });
-      return setTimeout(()=>{
-        setRequestStatus({ loading: false, status: false, message: "" });
-        closeModal() // FOR CLOSING ASSIGN MODAL
-      }, 3000)
-    }).catch(err => {
-      setRequestStatus({ loading: false, status: false, message: "Failed, something went wrong. Try Again" });
-      return setTimeout(()=>{
-        setRequestStatus({ loading: false, status: false, message: "" });
-      }, 3000)
-    })
-  }
-
-  useEffect(()=>{ // effect to update family UID when components mounts
-    if(familyDetailsData?.uid){
-      setSelectedFamilyUid(familyDetailsData?.uid)
-    }else if(details?.family_uid){
-      setSelectedFamilyUid(details?.family_uid)
-    }else{
-      setSelectedFamilyUid('')
-    }
-  },[])
-
-  useEffect(()=>{
-    apiCall.getParentCommonMedia().then((res)=>{
-        // console.log('RESPONSE', res)
-        setCommonMedia({loading: false, data: res?.data?.result, image: ''})
-        setActiveMedia(res?.data?.result[0])
-    }).catch(err => {
-        setCommonMedia({loading: false, data: [], image: ''})
-    })
-  },[])
-
-  return (
-    <>
-      <ModalCom action={action} situation={situation}>
-        <div className="modal-container">
-          <div className="modal-header-con">
-            <h1 className="modal-title">
-              {details ? (
-                ` Assign ${details?.firstname}'s Task`
-              ) : familyDetailsData ? (
-                ` Assign ${familyDetailsData.firstname}'s Task`
-              ) : (
-                <div className="flex items-center gap-2">
-                  <span className="text-black">Assign task to{" "}</span>
-                  <div className="w-[270px] h-[40px] flex items-center">
-                    <select
-                      name=""
-                      id=""
-                      className="text-lg text-black/80 px-2 tracking-wide font-semibold transition-all cursor-pointer bg-white focus:outline-none border border-gray-200 rounded-full w-full h-full"
-                      onChange={handleFamChange}
-                      value={selectedFamilyUid}
+                  {/* End of error or success display */}
+                  <div className="w-auto h-auto flex items-center gap-3">
+                    <button
+                      disabled={requestStatus.loading}
+                      onClick={action}
+                      type="button"
+                      className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
                    >
-                      <option value="" className="">
-                        Select a kid
-                      </option>
-                      {famList}
-                    </select>
+                      <span className="text-gradient">Close</span>
+                    </button>
+                    <div className="">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner color="sky-blue" size="8" />
+                      ) : taskType == "select" ? (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          Assign
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          {`Assign to ${
+                            familyDetailsData?.firstname || details?.firstName
+                          }`}
+                        </button>
+                      )}
+                    </div>
                  </div>
                </div>
-              )}
-            </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 p-[0!important]">
-            <div className="px-4 py-2 w-full flex items-center gap-4">
-              <button
-                name='task'
-                className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='task' && 'bg-yellow-500'}`}
-                onClick={switchAssignType}
-                disabled={requestStatus.loading}
-              >
-              Task
-              </button>
-              <button
-                name='media'
-                className={`py-1 px-2 font-medium bg-transparent border border-purple text-purple transition-all rounded-md duration-300 ${assignType=='media' && 'bg-yellow-500'}`}
-                onClick={switchAssignType}
-                disabled={requestStatus.loading}
-              >
-              Media
-              </button>
-            </div>
-            <div className="contents">
-              {assignType == 'task' ?
-                <AssignPrevNewTask 
-                  jobList={newJobList}
-                  requestStatus={requestStatus}
-                  assignFamilyTask={assignFamilyTask}
-                  taskType={taskType}
-                  switchTaskType={switchTaskType}
-                  formState={formState}
-                  setFormState={setFormState}
-                  activeTask={activeTask}
-                  handleActiveTask={handleActiveTask}
-                  closeModal={closeModal}
-                />
-                :
-                <AssignMediaTask 
-                  commonMedia={commonMedia}
-                  requestStatus={requestStatus}
-                  assignMediaTask={assignMediaTask}
-                  activeMedia={activeMedia}
-                  handleActiveMedia={handleActiveMedia}
-                  closeModal={closeModal}
-                  family_uid = {selectedFamilyUid}
-                />
-              }
-            </div>
-          </div>
-        </div>
-      </ModalCom>
-    </>
-  );
-};
+        </ModalCom>
+      </>
+    );
+  }
+);

 export default AssignTaskPopout;
@@ -1,17 +1,13 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
-import { useSelector } from "react-redux";

 export default function NewTasks({ formState, setFormState }) {
-
-  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
-
-  // let [currency, setCurrency] = useState({
-  //   loading: true,
-  //   status: false,
-  //   data: null,
-  // });
+  let [currency, setCurrency] = useState({
+    loading: true,
+    status: false,
+    data: null,
+  });

  const selectImage = require(`../../../../assets/images/taskbanners/${
    formState.banner || "default.jpg"
@@ -19,25 +15,25 @@ export default function NewTasks({ formState, setFormState }) {
  const ApiCall = new usersService();

  // FUNCTION TO GET Currency
-  // const getUserCurrency = () => {
-  //   setCurrency((prev) => ({ ...prev, loading: true }));
-  //   ApiCall.getUserWallets()
-  //     .then((res) => {
-  //       if (res.data.internal_return < 0) {
-  //         setCurrency({ loading: false, status: true, data: [] });
-  //         return;
-  //       }
+  const getUserCurrency = () => {
+    setCurrency((prev) => ({ ...prev, loading: true }));
+    ApiCall.getUserWallets()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setCurrency({ loading: false, status: true, data: [] });
+          return;
+        }

-  //       setCurrency({
-  //         loading: false,
-  //         status: true,
-  //         data: res.data.result_list,
-  //       });
-  //     })
-  //     .catch((err) => {
-  //       setCurrency({ loading: false, status: false, data: [] });
-  //     });
-  // };
+        setCurrency({
+          loading: false,
+          status: true,
+          data: res.data.result_list,
+        });
+      })
+      .catch((err) => {
+        setCurrency({ loading: false, status: false, data: [] });
+      });
+  };

  const handleInputChange = (event) => {
    const { name, value } = event.target;
@@ -47,166 +43,81 @@ export default function NewTasks({ formState, setFormState }) {
    }));
  };

-  // useEffect(() => {
-  //   getUserCurrency();
-  // }, []);
+  useEffect(() => {
+    getUserCurrency();
+  }, []);

  return (
    <form className="w-full flex justify-between items-start">
-      <div className="w-full block sm:grid grid-cols-3 gap-2">
-        
-        <div className="w-full flex flex-col gap-2 col-span-2">
-          {/* Title  */}
+      <div className="flex flex-col gap-3 max-w-[77%]">
+        {/* inputs starts here */}
+        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
+          {/* Currency */}
+          <div className="field w-full mb-6 xl:mb-0">
+            <label
+              htmlFor="country"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+            >
+              Currency
+              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
+            </label>
+            <select
+              id="country"
+              name="country"
+              value={formState.country}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            >
+              {currency.loading ? (
+                <option className="text-slate-500 text-[13.975px]" value="">
+                  Loading...
+                </option>
+              ) : currency.data.length ? (
+                <>
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Currency
+                  </option>
+                  {currency.data?.map((item, index) => (
+                    <option
+                      key={index}
+                      className="text-slate-500 text-lg"
+                      value={item?.country}
+                    >
+                      {item?.description}
+                    </option>
+                  ))}
+                </>
+              ) : (
+                <option className="text-slate-500 text-lg" value="">
+                  No Options Found! Try Again
+                </option>
+              )}
+            </select>
+          </div>
+
+          {/* Price */}
          <div className="field w-full">
-            <label htmlFor="title" className="job-label">Title</label>
            <InputCom
-              fieldClass="px-6"
-              // label="Title"
-              // labelClass="tracking-wide"
+              fieldClass="px-6 text-right"
+              label="Price"
+              labelClass="tracking-wide"
              inputBg="bg-slate-100"
-              type="text"
-              name="title"
-              value={formState.title}
+              type="number"
+              name="price"
+              placeholder="0"
+              value={formState.price}
              inputHandler={handleInputChange}
-              //   blurHandler={props.handleBlur}
-              //   error={props.errors.title && props.touched.title && props.errors.title}
+              // blurHandler={props.handleBlur}
+              // error={props.errors.price && props.touched.price && props.errors.price}
            />
          </div>

-          {/* Description  */}
-          <div className="field flex flex-col sm:flex-row w-full gap-2">
-            <div className="w-full">
-              <label
-                htmlFor="description"
-                className='job-label'
-              >
-                Description
-              </label>
-              <textarea
-                id="description"
-                rows="5"
-                className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[80px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
-                style={{ resize: "none" }}
-                name="description"
-                value={formState.description}
-                onChange={handleInputChange}
-                // onBlur={props.handleBlur}
-              />
-            </div>
-          </div>
-
-          {/* Details */}
-          <div className="field flex flex-col sm:flex-row w-full gap-2">
-            <div className="w-full">
-              <label
-                htmlFor="Job Delivery Details"
-                className='job-label'
-              >
-                Delivery Detail
-                {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
-              </label>
-              <textarea
-                id="Job Delivery Details"
-                rows="5"
-                className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
-                style={{ resize: "none" }}
-                name="job_detail"
-                value={formState.job_detail}
-                onChange={handleInputChange}
-                // onBlur={props.handleBlur}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* inputs starts here */}
-        <div className="w-full flex flex-col gap-2">
-          <div className="grid grid-cols-2 gap-3">
-            {/* Price */}
-            <div className="field w-full">
-              <label htmlFor="price" className="job-label">Reward</label>
-              <InputCom
-                fieldClass="px-6 text-right"
-                // label="Price"
-                // labelClass="tracking-wide"
-                inputBg="bg-slate-100"
-                type="number"
-                name="price"
-                placeholder="0"
-                value={formState.price}
-                inputHandler={handleInputChange}
-                // blurHandler={props.handleBlur}
-                // error={props.errors.price && props.touched.price && props.errors.price}
-              />
-            </div>
-
-            {/* Currency */}
-            <div className="field w-full">
-              <label
-                htmlFor="country"
-                className="job-label invisible"
-              >
-                Currency
-                {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
-              </label>
-              <select
-                id="country"
-                name="country"
-                value={formState.country}
-                className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                onChange={handleInputChange}
-                disabled={walletDetails.data.length == 1}
-                // onBlur={props.handleBlur}
-              >
-                {walletDetails?.loading ? (
-                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Loading...
-                  </option>
-                ) : walletDetails.data.length ? (
-                  <>
-                      {walletDetails.data.length == 1 ?
-                      <>
-                      {walletDetails.data?.map((item, index) => (
-                          <option
-                          key={index}
-                          className="text-slate-500 text-lg"
-                          value={item?.country}
-                          >
-                          {item?.code}
-                          </option>
-                      ))}
-                      </>
-                      :
-                      <>
-                          <option className="text-slate-500 text-[13.975px]" value="">
-                              Select
-                          </option>
-                          {walletDetails.data?.map((item, index) => (
-                              <option
-                              key={index}
-                              className="text-slate-500 text-lg"
-                              value={item?.country}
-                              >
-                              {item?.code}
-                              </option>
-                          ))}
-                      </>
-                      }
-                  </>
-                ) : (
-                  <option className="text-slate-500 text-lg" value="">
-                    No Options Found! Try Again
-                  </option>
-                )}
-              </select>
-            </div>
-          </div>
-
          {/* Duration */}
-          <div className="field w-full">
+          <div className="field w-full mb-6 xl:mb-0">
            <label
              htmlFor="timeline_days"
-              className="job-label"
+              className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
            >
              Timeline
              {/* {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>} */}
@@ -215,18 +126,17 @@ export default function NewTasks({ formState, setFormState }) {
              id="timeline_days"
              name="timeline_days"
              value={formState.timeline_days}
-              className={`input-field w-full h-[42px] flex items-center px-2 mt-2 rounded-full placeholder:text-base text-dark-gray dark:text-white bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+              className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
              onChange={handleInputChange}
              // onBlur={props.handleBlur}
            >
              {publicArray.length && (
                <>
                  <option className="text-slate-500 text-[13.975px]" value="">
-                    Select
+                    Duration
                  </option>
                  {publicArray.map(({ name, duration }, idx) => (
                    <option
-                      key={idx}
                      className="text-slate-500 text-[13.975px]"
                      value={duration}
                    >
@@ -237,19 +147,72 @@ export default function NewTasks({ formState, setFormState }) {
              )}
            </select>
          </div>
-
-          {/* Banner Image */}
-          <div className="w-full">
-            <div className="h-32 w-full">
-              <img
-                src={selectImage}
-                alt="task_banner_img"
-                className="w-full h-full object-contain"
-              />
-            </div>
-          </div>
        </div>

+        {/* Title  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Title"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="title"
+            value={formState.title}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.title && props.touched.title && props.errors.title}
+          />
+        </div>
+
+        {/* Description  */}
+        <div className="field w-full mb-[5px]">
+          <InputCom
+            fieldClass="px-6"
+            label="Description"
+            labelClass="tracking-wide"
+            inputBg="bg-slate-100"
+            type="text"
+            name="description"
+            value={formState.description}
+            inputHandler={handleInputChange}
+            //   blurHandler={props.handleBlur}
+            //   error={props.errors.description && props.touched.description && props.errors.description}
+          />
+        </div>
+
+        {/* Details */}
+        <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+          <div className="w-full">
+            <label
+              htmlFor="Job Delivery Details"
+              className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+            >
+              Job Delivery Details
+              {/* {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>} */}
+            </label>
+            <textarea
+              id="Job Delivery Details"
+              rows="5"
+              className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+              style={{ resize: "none" }}
+              name="job_detail"
+              value={formState.job_detail}
+              onChange={handleInputChange}
+              // onBlur={props.handleBlur}
+            />
+          </div>
+        </div>
+      </div>
+      {/* Banner Image */}
+      <div className="max-w-[20%] w-full">
+        <div className="h-32 w-full">
+          <img
+            src={selectImage}
+            alt="task_banner_img"
+            className="w-full h-full object-contain"
+          />
+        </div>
      </div>
    </form>
  );
@@ -1,45 +0,0 @@
-import React, {useState, useEffect} from "react";
-import { Outlet } from "react-router-dom";
-import Layout from "../Partials/Layout";
-import usersService from "../../services/UsersService";
-
-
-export default function FamilyRoutes() {
-
-  const apiCall = new usersService();
-
-  const [loader, setLoader] = useState(false);
-
-  const [familyList, setFamilyList] = useState({});
-
-  const [listReload, setListReload] = useState(false);
-
-  const memberList = async () => {
-    setLoader(true);
-    try {
-      const res = await apiCall.familyListings();
-      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status === "OK") {
-        const { result_list, session_image_server } = data;
-        setFamilyList({ result_list, session_image_server });
-        sessionStorage.setItem("family_list", JSON.stringify(result_list))
-        setLoader(false);
-      } else {
-        return;
-      }
-    } catch (error) {
-      setLoader(false);
-      throw new Error(error);
-    }
-  }
-
-  useEffect(() => {
-    memberList();
-  }, [listReload]);
-
-  return (
-    <>
-      <Outlet context={{loader, setLoader, familyList, setListReload}} />
-    </>
-  );
-}
@@ -1,16 +0,0 @@
-import React, {Suspense, lazy} from 'react'
-// import FamilyList from '../../FamilyList'
-import LoadingSpinner from '../../../../components/Spinners/LoadingSpinner'
-
-const AddFamily = () => {
-  const FamilyListSettings = lazy(() => import('../../FamilyListSettings'));
-  return (
-    <>
-      <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" height='h-full min-h-[500px]' />}>
-        <FamilyListSettings />
-      </Suspense>
-    </>
-  )
-}
-
-export default AddFamily
@@ -1,154 +0,0 @@
-import React, { useMemo, useRef, useState } from "react";
-import usersService from "../../../../services/UsersService";
-import { apiConst } from "../../../../lib/apiConst";
-
-const FamilyBanner = ({ imageServer }) => {
-  const uploadedImage = `${imageServer}${localStorage.getItem(
-    "session_token"
-  )}/familybanner/${localStorage.getItem("uid")}`;
-
-  const familyBannerRef = useRef(null);
-  const jobApi = useMemo(() => new usersService(), []);
-
-  const [familyBannerImage, setFamilyBannerImage] = useState(uploadedImage);
-  const [uploadStatus, setUploadStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  });
-
-  /**
-   * Handles the change event of the family image input field.
-   * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
-   * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
-   */
-
-  const familyBannerHandler = (e) => {
-    setUploadStatus({ loading: false, status: false, message: "" });
-    let acceptedFormat = ["jpeg", "jpg", "png", "bmp"]; // ARRAY OF SUPPORTED FORMATS
-    let uploadedFile = e.target.files[0]; //UPLOADED FILE
-
-    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
-    if (!acceptedFormat.includes(fileFormat)) {
-      //CHECKING FOR CORRECT UPLOAD FORMAT
-      const msg = `Please select ${acceptedFormat
-        .slice(0, -1)
-        .join(", ")} or ${acceptedFormat.slice(-1)}`;
-      setUploadStatus({ loading: false, status: false, message: msg });
-      return setTimeout(() => {
-        // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({ loading: false, status: false, message: "" });
-      }, 5000);
-    }
-
-    if (uploadedFile.size > 5 * 1048576) {
-      // CHECKING FOR CORRECT FILE SIZE
-      setUploadStatus({
-        loading: false,
-        status: false,
-        message: "File must not exceed 5MB",
-      });
-      return setTimeout(() => {
-        // profileImgInput.current.value = '' // clear the input
-        setUploadStatus({ loading: false, status: false, message: "" });
-      }, 5000);
-    }
-
-    if (e.target.value !== "") {
-      const imgReader = new FileReader();
-      imgReader.onload = (event) => {
-        let base64Img = imgReader.result.split(",")[1];
-        let reqData = {
-          // PAYLOAD FOR API CALL
-          job_uid: localStorage.getItem("uid"),
-          file_name: uploadedFile?.name.slice(0, 19),
-          file_size: uploadedFile?.size,
-          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
-          file_data: base64Img,
-          msg_type: "FILE",
-          action: apiConst.WRENCHBOARD_PICTURE_JOB,
-        };
-        setUploadStatus({
-          loading: true,
-          status: false,
-          message: "Loading...",
-        });
-        jobApi
-          .sendFiles(reqData)
-          .then((res) => {
-            if (res.status != 200 || res.data.internal_return < 0) {
-              return setUploadStatus({
-                loading: false,
-                status: false,
-                message: "Something went wrong, try again",
-              });
-            }
-            setUploadStatus({
-              loading: false,
-              status: true,
-              message: "Uploaded successfully",
-            });
-            setFamilyBannerImage(event.target.result);
-          })
-          .catch((error) => {
-            setUploadStatus({
-              loading: false,
-              status: false,
-              message: "Network error, try again",
-            });
-          })
-          .finally(() => {
-            setTimeout(() => {
-              setUploadStatus({ loading: false, status: false, message: "" });
-            }, 5000);
-          });
-      };
-      imgReader.readAsDataURL(e.target.files[0]);
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="w-full lg:h-[400px] rounded-2xl">
-        <img
-          src={familyBannerImage}
-          alt="familyBanner"
-          className="w-full h-full object-cover rounded-2xl"
-        />
-      </div>
-      <div className="flex justify-between w-full">
-        <div>
-          {uploadStatus.message && !uploadStatus.loading && (
-            <p
-              className={`text-center ${
-                uploadStatus.status ? "text-green-500" : "text-red-500"
-              }`}
-            >
-              {uploadStatus.message}
-            </p>
-          )}
-          {uploadStatus.loading && (
-            <p className="text-center">{uploadStatus.message}</p>
-          )}
-        </div>
-        <div>
-          <input
-            ref={familyBannerRef}
-            className="hidden"
-            type="file"
-            accept="image/*"
-            onChange={familyBannerHandler}
-          />
-          <button
-            className="btn-gradient w-[153px] h-[46px] rounded-full text-white lg:flex hidden justify-center items-center"
-            onClick={() => familyBannerRef.current.click()}
-          >
-            Change Banner
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FamilyBanner;
@@ -1,275 +0,0 @@
-import React, { useState } from 'react'
-import ModalCom from '../../../Helpers/ModalCom';
-import LoadingSpinner from '../../../Spinners/LoadingSpinner';
-import InputCom from '../../../Helpers/Inputs/InputCom/index';
-import { Formik, Form } from 'formik';
-import * as Yup from "yup";
-import usersService from '../../../../services/UsersService';
-
-const validationSchema = Yup.object().shape({
-    email: Yup.string()
-      .email("Wrong email format")
-      .matches(
-        /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
-        "Invalid email format"
-      )
-      .min(3, "Minimum 3 characters")
-      .max(50, "Maximum 50 characters")
-      .required("Email is required"),
-    firstname: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("Firstname is required"),
-    lastname: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("Lastname is required"),
-    family_type: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(25, "Maximum 25 characters")
-      .required("Family Type is required"),
-  });
-
-  const initialValues = {
-    firstname: '',
-    lastname: '',
-    family_type: '',
-    email: ''
-  };
-
-
-export default function InviteRelative({action, situation, setReloadRelList, relativeList}) {
-
-    const api = new usersService()
-
-    let [requestStatus, setRequestStatus] = useState({
-        loading: false,
-        status: false,
-        message: "",
-      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
-
-    const handleInvite = (values) => {
-        setRequestStatus({loading: true, status: false, message: ""})
-        api.inviteFamilyRelative(values).then(response => {
-            let {status, data} = response
-            if(data?.internal_return < 0){
-                setRequestStatus({loading: false, status: false, message: "Unable to complete"})
-                return setTimeout(()=>{
-                    setRequestStatus({ loading: false, status: false, message: ""})
-                },3000)
-            }
-            setRequestStatus({loading: false, status: true, message: "Relative Added"})
-            //RELOAD RELATIVE LSIT TABLE
-            setReloadRelList(prev => !prev)
-            setTimeout(()=>{
-                action()
-            },3000)
-        }).catch(error => {
-            setRequestStatus({loading: false, status: false, message: "Something went wrong, try again!"})
-            setTimeout(()=>{
-                setRequestStatus({ loading: false, status: false, message: ""})
-            },3000)
-        })
-    }
-
-  return (
-    <ModalCom   
-        action={action}
-        situation={situation}
-    >
-      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Invite Parent/Relative
-          </h1>
-          <button
-            type="button"
-            className="text-[#374557] dark:text-red-500"
-            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="logout-modal-body w-full flex flex-col items-center px-10 py-8">
-            <div className="personal-info-tab w-full flex flex-col justify-between">
-                <Formik
-                    initialValues={initialValues}
-                    validationSchema={validationSchema}
-                    onSubmit={handleInvite}
-                >
-                    {(props) => {
-                    return (
-                        <Form>
-                        <div className="w-full flex flex-col-reverse sm:flex-row">
-                            <div className="fields w-full">
-                                {/* inputs starts here */}
-                                {/* Email */}
-                                <div className="field w-full mb-6">
-                                    <InputCom
-                                        fieldClass="px-6"
-                                        label="Email"
-                                        type="text"
-                                        name="email"
-                                        placeholder="Email"
-                                        value={props.values.email}
-                                        inputHandler={props.handleChange}
-                                        blurHandler={props.handleBlur}
-                                        error={(props.errors.email && props.touched.email) ? props.errors.email : '' }
-                                    />
-                                </div>
-                                {/* first name and last name */}
-                                <div className="md:flex md:space-x-7 mb-6">
-                                    <div className="field w-full mb-6 md:mb-0">
-                                        <InputCom
-                                        fieldClass="px-6"
-                                        label="First Name"
-                                        type="text"
-                                        name="firstname"
-                                        placeholder="First Name"
-                                        value={props.values.firstname}
-                                        inputHandler={props.handleChange}
-                                        blurHandler={props.handleBlur}
-                                        error={(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : '' }
-                                        />
-                                    </div>
-                                    <div className="field w-full">
-                                        <InputCom
-                                        fieldClass="px-6"
-                                        label="Last Name"
-                                        type="text"
-                                        name="lastname"
-                                        placeholder="Last Name"
-                                        value={props.values.lastname}
-                                        inputHandler={props.handleChange}
-                                        blurHandler={props.handleBlur}
-                                        error={(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : '' }
-                                        />
-                                    </div>
-                                </div>
-
-                                {/* Type */}
-                                <div className="md:flex md:space-x-7 items-end mb-6">
-                                    {/* <div className="field w-full mb-6 md:mb-0">
-                                        <InputCom
-                                        fieldClass="px-6"
-                                        label="Type"
-                                        type="text"
-                                        name="family_type"
-                                        placeholder="Family Type"
-                                        value={props.values.family_type}
-                                        inputHandler={props.handleChange}
-                                        blurHandler={props.handleBlur}
-                                        error={(props.errors.family_type && props.touched.family_type) ? props.errors.family_type : '' }
-                                        />
-                                    </div> */}
-                                    <div className="field w-full mb-6 xl:mb-0">
-                                    <label
-                                        htmlFor="family_type"
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
-                                    >
-                                        Family Type
-                                        {props.errors.family_type && props.touched.family_type && (
-                                        <span className="text-[12px] text-red-500">
-                                            {props.errors.family_type}
-                                        </span>
-                                        )}
-                                    </label>
-                                    <select
-                                        id="family_type"
-                                        name="family_type"
-                                        value={props.values.family_type}
-                                        className={`input-field p-2 mt-3 rounded-full placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
-                                        onChange={props.handleChange}
-                                        onBlur={props.handleBlur}
-                                    >
-                                        {relativeList?.loading ? (
-                                        <option className="text-slate-500 text-lg" value="">
-                                            Loading...
-                                        </option>
-                                        ) : relativeList?.family_types?.length ? (
-                                        <>
-                                            <option className="text-slate-500 text-lg" value="">
-                                            Select Family Type
-                                            </option>
-                                            {relativeList?.family_types?.map((item, index) => (
-                                            <option
-                                                key={index}
-                                                className="text-slate-500 text-lg"
-                                                value={item?.ty}
-                                            >
-                                                {item?.ty}
-                                            </option>
-                                            ))}
-                                        </>
-                                        ) : (
-                                        <option className="text-slate-500 text-lg" value="">
-                                            No Options Found! Try Again
-                                        </option>
-                                        )}
-                                    </select>
-                                    </div>
-                                    <div className="field w-full flex justify-end">
-                                        <div className="flex">
-                                            {requestStatus.loading ? (
-                                            <LoadingSpinner size="8" color="sky-blue" />
-                                            ) : (
-                                            <button
-                                                type="submit"
-                                                className={`text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full ${(requestStatus.status || requestStatus.loading) && 'opacity-50'}`}
-                                                disabled={requestStatus.status || requestStatus.loading}
-                                            >
-                                                Send Message
-                                            </button>
-                                            )}
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        </Form>
-                    );
-                    }}
-                </Formik>
-            </div>
-
-          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
-          {requestStatus.message != "" &&
-            (!requestStatus.status ? (
-              <div
-                className={`w-full relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-              >
-                {requestStatus.message}
-              </div>
-            ) : (
-              requestStatus.status && (
-                <div
-                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                >
-                  {requestStatus.message}
-                </div>
-              )
-            ))}
-          {/* End of error or success display */}
-        </div>
-      </div>
-    </ModalCom>
-  )
-}
@@ -1,163 +0,0 @@
-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 RelativePopout = ({
-    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 [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();
-
-  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 (
-    <>
-      <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-2 gap-2 space-x-2">
-              <div className='col-span-2 md:col-span-1 overflow-y-auto h-[350px]'>
-                {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} className="flex items-center border-b dark:border-[#5356fb29] hover:bg-gray-50">
-                            <div className='p-2 flex justify-center items-center'>
-                              {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">
-                                    <div className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full overflow-hidden flex justify-center items-center">
-                                        <img
-                                            src={image || localImgLoad(`images/icons/family.svg`)}
-                                            alt={`Avatar`}
-                                            className="w-full h-full"
-                                        />
-                                    </div>
-                                    <div className="flex flex-col w-full">
-                                        <h1 className="font-bold text-[16px] text-dark-gray dark:text-white whitespace-nowrap">
-                                            {`${item?.firstname} ${item?.lastname}`}
-                                        </h1>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        )
-                    })
-                :
-                <div className='min-h-[100px] w-full flex flex-col justify-center items-center'>No records found!</div>
-                }
-              </div>
-              <div className='col-span-2 md:col-span-1 bg-green-100 min-h-[100px]'>
-                {/* dummy to be filled latter*/}
-              </div>
-            </div>
-          </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 RelativePopout;
@@ -1,173 +0,0 @@
-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;
@@ -1,154 +0,0 @@
-import React, { useState } from 'react'
-import { handlePagingFunc } from '../../../Pagination/HandlePagination';
-import PaginatedList  from '../../../Pagination/PaginatedList';
-
-import RelativePopout from './RelativePopout';
-import RelativeReminderPopout from './RelativeReminderPopout';
-
-export default function RelativeTable({relativeList, familyList}) {
-  
-    // Handle Pagination
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-
-    const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem);
-
-    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);
-    };
-   
-    return (
-      <>
-        <div className={`w-full overflow-hidden rounded-2xl`}>
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <thead>
-                  <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>
-                </thead>
-                <tbody>
-                  <>
-                    {relativeList && relativeList?.length > 0 ? (
-                        currentRelativeList.map((value, index) => (
-                        <tr key={value.uid || index} className="border-b dark:border-[#5356fb29] hover:bg-gray-50">
-                          <td className='py-4 px-2'>
-                            <div className="flex flex-col">
-                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
-                                {value.firstname && value.firstname} {value.lastname && value.lastname}
-                              </h1>
-                              <span className="text-sm text-thin-light-gray">
-                                {value.email && value.email}
-                              </span>
-                            </div>
-                          </td>
-                          <td className='py-4 px-2'>
-                            {/* <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}})}
-                              type="button"
-                              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>
-                          </td>
-                        </tr>
-                        ))
-                    ) : (
-                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                        <td className="p-2">No Members Found</td>
-                      </tr>
-                    )}
-                  </>
-                </tbody>
-              </table>
-    
-              {/* PAGINATION BUTTON */}
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
-                next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  relativeList?.length
-                    ? true
-                    : false
-                }
-                data={relativeList}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-              {/* END OF PAGINATION BUTTON */}
-            </div>
-        </div>
-
-        {relativePopout.show &&
-          <RelativePopout
-            situation={relativePopout.show}
-            action={closePopout}
-            relativeSelected={relativePopout.data.relativeSelected}
-            familyList={familyList}
-          />
-        }
-
-        {reminderPopout.show &&
-          <RelativeReminderPopout
-            situation={reminderPopout.show}
-            action={closeReminderPopout}
-            relativeSelected={reminderPopout.data.relativeSelected}
-            familyList={familyList}
-          />
-        }
-
-      </>
-      );
-    };
@@ -1,69 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import RelativeTable from './RelativeTable'
-import InviteRelative from './InviteRelative'
-import usersService from '../../../../services/UsersService'
-import LoadingSpinner from '../../../Spinners/LoadingSpinner'
-
-const Relatives = ({familyList}) => {
-
-  const api = new usersService()
-
-  const [reloadRelList, setReloadRelList] = useState(false)
-
-  const [invitePopout, setInvitePopout] = useState(false)
-
-  const [relativeList, setRelativeList] = useState({loading: true, result_list:[], family_types:[]})
-
-  const showInviteMemberPopout = () => {
-      setInvitePopout(true)
-  }
-
-  const getRelativeList = () => {
-    setRelativeList(prev => ({...prev, loading: true}))
-    api.getFamilyRelativeList().then(response => {
-      let {status, data} = response
-      if(status != 200 || !data){
-        setRelativeList({loading:false, result_list:[], family_types:[]})
-        return
-      }
-      setRelativeList({loading:false, result_list:data?.result_list, family_types:data?.family_types})
-    }).catch(error => {
-      setRelativeList({loading:false, result_list:[], family_types:[]})
-    })
-  }
-
-  useEffect(()=>{
-    getRelativeList()
-  },[reloadRelList])
-
-  return (
-    <>
-      <div className=''>
-        <div className='py-4'>
-          <button onClick={showInviteMemberPopout} className='text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full'>Invite</button>
-          <div className='my-4 border-b-2'></div>
-        </div>
-        <div className='min-h-[500px]'>
-          {relativeList.loading ?
-          <LoadingSpinner size='8' height='h-full' />
-          :
-          <RelativeTable relativeList={relativeList.result_list} familyList={familyList} />
-          }
-        </div>
-      </div>
-
-      {/* INVITE RELATIVE POPOUT */}
-        {invitePopout &&
-        <InviteRelative 
-            action={()=>setInvitePopout(false)}
-            situation={invitePopout}
-            setReloadRelList={setReloadRelList}
-            relativeList={relativeList}
-        />
-        }
-      {/* END OF INVITE RELATIVE POPOUT */}
-    </>
-  )
-}
-
-export default Relatives
@@ -1,5 +0,0 @@
-import AddFamily from "./AddFamily";
-import FamilyBanner from "./FamilyBanner";
-import Relatives from "./Relatives";
-
-export {AddFamily, FamilyBanner, Relatives}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="DownloadArrow"><g fill="#4687ba" class="color9a7baa svgShape"><path d="M30.179 3.525V1.857c0-1.551-1.784-2.415-3.011-1.449L24 2.907 20.824.402c-1.216-.959-3.002-.093-3.002 1.456v1.668a1 1 0 0 0 1 1h10.357c.552-.001 1-.449 1-1.001zM30.179 25.172v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM30.179 10.74V8.217a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357c.552-.001 1-.448 1-1.001zM30.179 17.956v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM25.748 47.029l9.336-15.018c.852-1.371-.133-3.145-1.748-3.145H14.664c-1.614 0-2.6 1.774-1.748 3.145l9.336 15.018a2.058 2.058 0 0 0 3.496 0z" fill="#000000" class="color000000 svgShape"></path></g></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" id="List"><path d="M0 0v3h3V0H0zm4 0v1h4V0H4zm0 2v1h3V2H4zM0 4v3h3V4H0zm4 0v1h4V4H4zm0 2v1h3V6H4z" fill="#b22b7d" class="color000000 svgShape"></path></svg>`