qa-media

.env

@@ -1,4 +1,5 @@
 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"
@@ -14,14 +15,15 @@ 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"
+REACT_APP_PRIMARY_SOCKET="https://socket-qa.wrenchboard.com"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -71,7 +73,8 @@ REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
 #File Handling
-REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 #Auth Text(s)
@@ -114,4 +117,22 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
+REACT_APP_SHOW_SLIDER_BANNERS=0
+
+# FOR MEDIA LINK
+REACT_APP_MEDIA_LINK='https://qa-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
+
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.wrenchboard.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.wrenchboard.com/about-us'
+REACT_APP_CONTACTS_LINK='https://dev-www.wrenchboard.com/contact'
+REACT_APP_TERMS_LINK='https://dev-www.wrenchboard.com/terms'

.env.development

@@ -1,4 +1,5 @@
 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"
@@ -14,14 +15,15 @@ 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"
+REACT_APP_PRIMARY_SOCKET="https://socket-qa.wrenchboard.com"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=600000
-REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -42,7 +44,9 @@ 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/
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -82,4 +86,22 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
+REACT_APP_SHOW_SLIDER_BANNERS=0
+
+# FOR MEDIA LINK
+REACT_APP_MEDIA_LINK='https://qa-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
+
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.wrenchboard.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.wrenchboard.com/about-us'
+REACT_APP_CONTACTS_LINK='https://dev-www.wrenchboard.com/contact'
+REACT_APP_TERMS_LINK='https://dev-www.wrenchboard.com/terms'

.env.production

@@ -1,4 +1,5 @@
 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"
@@ -14,6 +15,7 @@ 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"
@@ -21,7 +23,7 @@ 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=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=1800000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
@@ -49,7 +51,9 @@ REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin
 
 DISABLE_ESLINT_PLUGIN=true
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -88,4 +92,22 @@ REACT_APP_SHOW_NEW_FAMILY_DASH=1
 REACT_APP_SHOW_ACCOUNT_DASH=1
 
 # Displays the slider banners
-REACT_APP_SHOW_SLIDER_BANNERS=0
+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
+
+# login footer links
+REACT_APP_HOME_LINK='https://www.wrenchboard.com/'
+REACT_APP_ABOUT_LINK='https://www.wrenchboard.com/about-us'
+REACT_APP_CONTACTS_LINK='https://www.wrenchboard.com/contact'
+REACT_APP_TERMS_LINK='https://www.wrenchboard.com/terms'

.vscode/settings.json

@@ -21,5 +21,14 @@
   "emmet.triggerExpansionOnTab": true,
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
-  }
+  },
+  "cSpell.words": [
+    "completesignuplink",
+    "MOBILEUSER",
+    "MYFILES",
+    "mynotifications",
+    "PASSWORDRESET",
+    "TRANSFERSTART",
+    "WRENCHBOARD"
+  ]
 }

Dockerfile

@@ -1,5 +1,8 @@
 # pull the base image
-FROM node:alpine
+#FROM node:alpine
+FROM node:20.11.0-alpine
+
+
 
 # Build args
 ARG NODE_ENV
@@ -26,7 +29,7 @@ COPY nginx.conf ./
 
 COPY run.sh ./
 
-RUN npm install --legacy-peer-deps
+# RUN npm install --legacy-peer-deps
 
 # add app
 COPY . ./

docker-compose.yml

@@ -25,8 +25,9 @@ services:
       - apigate.orion.g1.wrenchboard.com:10.10.33.15
       - socket-dev.wrenchboard.com:10.10.33.15
       - socket.wrenchboard.com:10.10.33.15
-      - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
-      - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
+      - media.wrenchboard.com:10.10.33.15
+      - www.wrenchboard.com:10.10.33.15
+      - blog.wrenchboard.com:10.10.33.15
     environment:
       - CHOKIDAR_USEPOLLING=true
       - NODE_ENV=${NODE_ENV:-production}

package.json

@@ -3,6 +3,7 @@
   "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",
@@ -30,14 +31,14 @@
     "react-to-print": "^2.14.12",
     "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
-    "socket.io-client": "^4.4.1",
     "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": "react-scripts build -e .env.production",
+    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

public/index.html

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

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "WrenchBoard App",
+  "name": "WrenchBoard User Web",
   "icons": [],
   "start_url": ".",
   "display": "standalone",

run.sh

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

src/App.jsx

@@ -1,23 +1,33 @@
+import {Suspense, lazy} from 'react'
 import { Navigate, useLocation } from "react-router-dom";
-import Routers from "./Routers";
+// import Routers from "./Routers";
+// import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 import Toaster from "./components/Helpers/Toaster";
 import Default from "./components/Partials/Default";
-import SocketIOContextProvider from "./components/Contexts/SocketIOContext";
 
+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>
+      {/* <SocketIOContextProvider> */}
         <>
           {pathname.startsWith("/@") ? (
             <Navigate to="/app" replace={true} />
           ) : (
-            <Routers />
+            <Suspense fallback={<LoadingSpinner size="32" color="sky-blue" height="h-screen" />}>
+              <Routers />
+            </Suspense>
           )}
           <Toaster />
         </>
-      </SocketIOContextProvider>
+      {/* </SocketIOContextProvider> */}
     </Default>
   );
 }

src/Routers.jsx

@@ -1,80 +1,90 @@
 import { Route, Routes } from "react-router-dom";
-import FourZeroFour from "./components/FourZeroFour";
-import ScrollToTop from "./components/Helpers/ScrollToTop";
-import StartJob from "./components/MyJobs/StartJob";
-import Notification from "./components/Notification";
-import AuthRoute from "./middleware/AuthRoute";
-import AppDownloadPage from "./views/AppDownloadPage";
-import AppleRedirectPage from "./views/AppleRedirectPage";
-import AuthProfilePage from "./views/AuthProfilePage";
-import AuthRedirect from "./views/AuthRedirect";
-import BlogPage from "./views/BlogPage";
-import CalendarPage from "./views/CalendarPage";
-import CollectionItemPage from "./views/CollectionItemPage";
-import FacebookRedirect from "./views/FacebookRedirect";
-import FamilyAccPage from "./views/FamilyAccPage";
-import FamilyManagePage from "./views/FamilyManagePage";
-import FamilyMarketPage from "./views/FamilyMarketPage";
-import FamilySettingsPage from "./views/FamilySettingsPage";
-import ForgotPasswordPages from "./views/ForgotPasswordPages";
-import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
-import HistoryPage from "./views/HistoryPage";
-import HomePages from "./views/HomePages";
-import JobGroupsPage from "./views/JobGroupsPage";
-import LndPage from "./views/LndPage";
+import { lazy } from "react";
+
+import SocketConnection from "./middleware/SocketConnection";
+
+// AUTH PAGES
+import LoginLandingPage from './views/LoginLandingPage';
 import LoginPage from "./views/LoginPage";
 import LoginPageTwo from "./views/LoginPageTwo";
-import ManageActiveJobs from "./views/ManageActiveJobs";
-import ManageInterestOfferPage from "./views/ManageInterestOfferPage";
-import MarketPlacePage from "./views/MarketPlacePage";
-import MyActiveJobsPage from "./views/MyActiveJobsPage";
-import MyCouponPage from "./views/MyCouponPage";
-import MyJobsPage from "./views/MyJobsPage";
-import MyOffersPage from "./views/MyOffersPage";
-import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
-import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
-import MyTaskPage from "./views/MyTaskPage";
-import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
-import MyWalletPage from "./views/MyWalletPage";
-import OffersInterestPage from "./views/OffersInterestPage";
-import ReferralPage from "./views/ReferralPage";
-import RemindersPage from "./views/RemindersPage";
-import ResourcePage from "./views/ResourcePage";
-import SavedPage from "./views/SavedPage";
-import SellPage from "./views/SellPage";
-import SettingsPage from "./views/SettingsPage";
+import FourZeroFour from "./components/FourZeroFour";
+import AppDownloadPage from "./views/AppDownloadPage";
+import AppleRedirectPage from "./views/AppleRedirectPage";
+import AuthRedirect from "./views/AuthRedirect";
+import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
+import LndPage from "./views/LndPage";
 import SignupPage from "./views/SignupPage";
 import SignupPageTwo from "./views/SignupPageTwo";
-import TrackingPage from "./views/TrackingPage";
 import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
-import UploadProductPage from "./views/UploadProductPage";
-import UserProfilePage from "./views/UserProfilePage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
 import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
 import VerifyPasswordPages from "./views/VerifyPasswordPages";
 import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import VerifyYouPages from "./views/VerifyYouPages";
 import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
-import YourPages from "./views/YourPage_";
-import ParentWaitingPage from "./views/ParentWaitingPage";
-import FamilyPendingOfferPage from "./views/FamilyPendingOfferPage";
-import FamBlogPage from "./views/FamBlogPage"
-import FamAIQuestionPage from "./views/FamAIQuestionPage"
-import FamMyFilesPage from "./views/FamMyFilesPage"
-import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
-import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
-import FamilyWalletPage from "./views/FamilyWalletPage";
-import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
+import FacebookRedirect from "./views/FacebookRedirect";
+import PromoPage from "./views/PromoPage";
+import PromoRefer from './views/PromoRefer';
+import InviteRefer from './views/InviteRefer';
+import MyRefer from './views/MyRefer';
+
+
+const HomePages = lazy(() => import("./views/HomePages"));
+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 AuthProfilePage = lazy(() => import("./views/AuthProfilePage"));
+const BlogPage = lazy(() => import("./views/BlogPage"));
+const FamilyManagePage = lazy(() => import("./views/FamilyManagePage"));
+const FamilyMarketPage = lazy(() => import("./views/FamilyMarketPage"));
+
+const HistoryPage = lazy(()=> import("./views/HistoryPage"));
+const JobGroupsPage = lazy(()=> import("./views/JobGroupsPage"));
+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 TrackingPage = lazy(()=> import("./views/TrackingPage"));
+const UploadProductPage = lazy(()=> import("./views/UploadProductPage"));
+const UserProfilePage = lazy(()=> import("./views/UserProfilePage"));
+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"));
 
 export default function Routers() {
   return (
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ? (
+        {Number(process.env.REACT_APP_NEW_LOGIN_LAYOUT) === 1 ? (
           <>
-            <Route exact path="/login" element={<LoginPageTwo />} />
+            <Route exact path="/login" element={<LoginLandingPage />} />
+            <Route exact path="/login/:type" element={<LoginPageTwo />} />
             <Route exact path="/signup" element={<SignupPageTwo />} />
             <Route
               exact
@@ -90,7 +100,10 @@ export default function Routers() {
             <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
             <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
             <Route exact path="/eoffer" element={<LoginPageTwo />} />
-            <Route exact path="/invite" element={<LoginPageTwo />} />
+            <Route exact path="/promo/:name/:id" element={<PromoPage />} />
+            <Route exact path="/promoref" element={<PromoRefer />} />
+            <Route exact path="/invite" element={<InviteRefer />} />
+            <Route exact path="/myrefer/:refer_link" element={<MyRefer />} />
           </>
         ) : (
           <>
@@ -120,91 +133,76 @@ export default function Routers() {
         <Route exact path="/app" element={<AppDownloadPage />} />
 
         {/* private route */}
-        <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-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="/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="/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="/work-in-progress" element={<FamWorkInProgressPage />} />
-          <Route
-            exact
-            path="/familysettings"
-            element={<FamilySettingsPage />}
-          />
-          <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="/add-job" element={<AddJobPage />} /> */}
-          <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 exact path="/acc-family" element={<FamilyAccPage />} />
-          <Route exact path="/acc-family/activities" element={<FamilyActivitiesPage />} />
-          <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 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
-            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 exact path="/job-groups" element={<JobGroupsPage />} />
+            <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>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>

src/assets/images/icons/refer-a-friend.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="add-friend" x="0" y="0" enable-background="new 0 0 56 56" version="1.1" viewBox="0 0 56 56">
+  <g id="_x34_">
+    <path fill="#ff614b" d="M20.1520596 48.5122223c-6.969367.6334381-16.1360435-2.538559-16.1360435-9.5089226 0-6.7552567 9.3379993-12.8340607 19.1365566-10.1025429C11.6365042 32.0076103 8.5797586 43.9628181 20.1520596 48.5122223zM23.2281342 21.9498482c-1.3167553 1.6189995-3.0113163 2.7414837-4.8678036 2.7414837-4.155407 0-7.544529-5.6017437-7.544529-9.7464113 0-6.0081682 6.6323166-9.4670734 11.4841213-6.4004383-1.3815784 1.4355316-2.223423 3.389122-2.223423 5.5477886C20.0764999 16.6826973 21.3177586 19.8127232 23.2281342 21.9498482z"></path>
+    <path d="M36.0304298 47.965065c-4.6939316 1.9150925-10.9132786 1.956356-15.6842041.0958252-.0213013-.0090942-.0412598-.0187378-.0639648-.0250244-11.5273151-4.5492096-7.7401743-16.8518009 4.2484741-18.9360332.30867.8989487 1.012928 1.4676666 1.9118042 1.8097534l-2.2802734 9.73419c-.1025391.4355469.03125.9023438.3491211 1.2177734l3.8803711 3.8544922c.2107143.2096252.5543423.188858.7397461-.0380859l3.3261719-4.0585938c.2789803-.3397827.3200912-.5983696.1914063-1.0166016-1.1257496-3.7452698.1548195.6061249-2.7582397-9.5864239.9509258-.3161449 1.663147-.9907551 2.2283325-1.8195801 3.4285889.5916748 6.3656006 2.1239014 8.2872314 4.3503399.1802521.2088089.496357.2312813.7050781.0517578.2089844-.1806641.2324219-.4970703.0517578-.7060547-2.1342773-2.4716778-5.3999023-4.1562481-9.1958008-4.7431622-.0008545-.0001221-.0016479.0002441-.0025024.0001221-.2167149-.0316906-.4131889.0921535-.4998169.2335205-.0004272.0006714-.0011597.0010376-.0015869.001709-.4018555.6640625-.8833008 1.1640625-1.4296875 1.4873047-1.3619595.8058376-4.409462.3548889-4.6435547-1.3857422-.0373135-.2786045-.2598305-.4986324-.766119-.4238281-.5176334.0825806-1.0214176.1906738-1.5172062.3118896C13.0129108 25.6687794 3.5157814 31.9572849 3.5157814 39.0031509c0 7.2062569 9.1560717 10.6395416 16.5500488 10.015564 4.9281864 1.9016037 11.3733406 1.899971 16.3425293-.1278687.2553711-.1044922.378418-.3964844.2739258-.6513672C36.5777931 47.9826431 36.2858009 47.8605728 36.0304298 47.965065zM28.9718361 31.4416294l.4660034 1.6382427c-.1742687.0852623.0627537-.0866661-3.2201538 3.1741943l1.1130371-4.7518902C27.8272762 31.4898281 28.4199524 31.4561787 28.9718361 31.4416294zM25.1358986 40.8722916l.649231-2.7717896 3.9557495-3.9552612.9927979 3.4902954-4.7506104 4.2474976c-.0058594.005249-.0079346.0126343-.0134888.0180664l-.7536011-.7485352C25.1432228 41.0793228 25.1124611 40.9728775 25.1358986 40.8722916zM31.6827736 40.9875259l-2.9765625 3.6318359-2.0285645-2.0148926 4.3604736-3.8986816c.7511387 2.5571251.4453716 1.4923744.6549072 2.1899414C31.7027931 40.9279556 31.7159767 40.9601822 31.6827736 40.9875259zM4.5157814 39.0031509c0-5.8982773 7.6678896-11.4824982 16.6328735-10.0299053-9.6517429 3.5520725-12.3788052 14.0203838-3.1348267 19.1047955C10.2978249 47.9708633 4.5157814 44.1104507 4.5157814 39.0031509zM23.2516823 22.6767979c1.3936768 1.3889771 3.0743408 2.2960815 4.8578491 2.2960815 3.8608398 0 6.9887695-4.0351563 8.0830078-8.0214844.0732422-.2666016-.0834961-.5419922-.3496094-.6152344-.2675781-.0703125-.5419922.0839844-.6142578.3496094-.9697266 3.5332031-3.7944336 7.2871094-7.1191406 7.2871094-4.1438522 0-7.5332031-5.7720966-7.5332031-9.8808603 0-4.1711521 3.4018421-7.5205073 7.5214844-7.5205073 3.9272461 0 7.2163086 3.0712886 7.487793 6.9912105.0195313.2753906.2602539.4755859.5336914.4648438.2753906-.0195313.4833984-.2578125.4643555-.5332031-.4944992-7.1314373-9.1289673-10.5536861-14.3618164-5.558105-5.3048058-2.9869342-11.90625.8975091-11.90625 7.0083003C10.3155861 21.4710331 17.3002548 29.2743626 23.2516823 22.6767979zM21.5162697 8.6711206c-3.2331066 3.9059381-2.063303 9.517417 1.0541992 13.2802744-5.3480682 6.0405064-11.2548828-1.5758038-11.2548828-7.0068369C11.3155861 9.6542807 16.9414864 6.3203502 21.5162697 8.6711206zM49.5030861 33.2590103l-1.8736572-.184082c.0150757-.0079346.0324707-.0045166.0469971-.0141602 6.2281075-4.1175671 6.166069-13.8392754 1.1938477-16.9414043-.0844727-2.0888681-.8623047-3.9804697-2.1958008-5.243165-1.9521484-1.8457031-5.0620117-2.0644531-6.934082-.4853516-.2114258.1777344-.237793.4931641-.0600586.7041016.1782227.2109375.4931641.2373047.7045898.0595703 1.4697266-1.2392578 4.034668-1.0351563 5.6020508.4482422 1.0302734.9746094 1.6738281 2.4042969 1.8452148 4.0136719-3.2912941-1.1423397-6.6737289 1.6315832-5.0351563 4.7509775 1.415638 2.6920357 5.6048317 2.0048065 6.0458984-3.0429688 3.8890877 3.1670475 3.621582 11.1923389-1.5643311 14.7892437l.4412842-.9708843c.2745361-.6030388-.6399498-1.0150375-.9101563-.4140625l-.824707 1.8144512c-.3768578.8212128.0631943 1.3852425.9770508 1.4716797l2.4433594.2402344C50.0908356 34.2954216 50.1399155 33.3223534 49.5030861 33.2590103zM43.6822853 19.9015903c-1.2788124-2.4307442 1.6810646-4.3558064 4.1933594-3.1884766C47.761219 21.1266956 44.6973381 21.8336697 43.6822853 19.9015903z"></path>
+    <g>
+      <circle cx="41.237" cy="41.649" r="8.435" fill="#f7d01c" transform="rotate(-76.717 41.237 41.649)"></circle>
+    </g>
+    <path d="M44.2379494,41.1486588H42.244297v-1.9941406c0-0.2763672-0.2236328-0.5-0.5-0.5s-0.5,0.2236328-0.5,0.5v1.9941406
+		h-1.9936523c-0.2763672,0-0.5,0.2236328-0.5,0.5s0.2236328,0.5,0.5,0.5h1.9936523v1.9941406c0,0.2763672,0.2236328,0.5,0.5,0.5
+		s0.5-0.2236328,0.5-0.5v-1.9941406h1.9936523c0.2763672,0,0.5-0.2236328,0.5-0.5S44.5143166,41.1486588,44.2379494,41.1486588z"></path>
+  </g>
+</svg>

src/assets/images/icons/resources.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="resources" enable-background="new 0 0 48 48" viewBox="0 0 48 48">
+  <ellipse cx="9.1" cy="5.4" fill="#ffd499" rx="4.4" ry="4.9"></ellipse>
+  <path fill="#b0f0a8" d="M20.2,22.2c0.5,0,1-0.2,1.4-0.6l5-5c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-3.7,3.7L15.1,13c-0.1-0.1-0.2-0.2-0.4-0.3c-1.2-1-2.8-1.5-4.4-1.5H7.9c-4.1,0-7.4,3.4-7.4,7.5v11.3h3.1v14.6c0,1.6,1.2,2.8,2.8,2.8c1.3,0,2.4-0.9,2.7-2.2c0.3,1.3,1.4,2.2,2.7,2.2c1.5,0,2.8-1.3,2.8-2.8V17.9l4.4,3.9C19.3,22.1,19.8,22.2,20.2,22.2z"></path>
+  <path fill="#c1e5ff" d="M39.8 45.1c1.8-.9 3.4-2.2 4.7-3.8h-2.8C41.2 42.8 40.6 44.1 39.8 45.1zM34.8 46.4c1.7-.6 3.2-2.5 4.3-5h-4.3V46.4zM42.4 38.9h3.6c.8-1.5 1.3-3.2 1.4-5h-4.4C43 35.7 42.8 37.4 42.4 38.9zM44.5 24c-1.3-1.6-2.8-2.9-4.7-3.8.7 1.1 1.4 2.4 1.9 3.8H44.5zM39.9 26.4h-5.1v5h5.8C40.6 29.7 40.3 28 39.9 26.4zM43.1 31.5h4.4c-.2-1.8-.7-3.5-1.4-5h-3.6C42.8 28 43 29.7 43.1 31.5zM34.8 19v5h4.3C38 21.4 36.5 19.6 34.8 19zM40.7 33.9h-5.8v5h5.1C40.3 37.4 40.6 35.7 40.7 33.9zM28.1 24h4.3v-5C30.7 19.6 29.2 21.4 28.1 24zM22.7 41.4c1.3 1.6 2.8 2.9 4.7 3.8-.7-1.1-1.4-2.4-1.9-3.8H22.7zM24.1 33.9h-4.4c.2 1.8.7 3.5 1.4 5h3.6C24.4 37.4 24.2 35.7 24.1 33.9zM26.6 31.5h5.8v-5h-5.1C26.9 28 26.7 29.7 26.6 31.5zM32.4 46.4v-5h-4.3C29.2 43.9 30.7 45.8 32.4 46.4zM27.4 20.2c-1.8.9-3.4 2.2-4.7 3.8h2.8C26 22.6 26.7 21.3 27.4 20.2zM27.3 38.9h5.1v-5h-5.8C26.7 35.7 26.9 37.4 27.3 38.9zM19.7 31.5h4.4c.1-1.8.3-3.5.7-5h-3.6C20.4 28 19.9 29.7 19.7 31.5z"></path>
+</svg>

src/assets/images/icons/waiting.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 672" id="waiting">
+  <path fill="#4d4d4d" d="M497 595H175a7 7 0 0 1-7-7v-79.237a112.163 112.163 0 0 1 37.076-83.249L304.536 336l-99.46-89.515A112.163 112.163 0 0 1 168 163.236V119a7 7 0 0 1 14 0v44.236a98.142 98.142 0 0 0 32.441 72.843L319.683 330.8a7 7 0 0 1 0 10.406L214.441 435.92A98.142 98.142 0 0 0 182 508.763V581h308v-72.237a98.142 98.142 0 0 0-32.441-72.843L352.317 341.2a7 7 0 0 1 0-10.406l105.242-94.718A98.142 98.142 0 0 0 490 163.236V119a7 7 0 0 1 14 0v44.236a112.163 112.163 0 0 1-37.076 83.249L367.464 336l99.46 89.514A112.163 112.163 0 0 1 504 508.763V588a7 7 0 0 1-7 7Z"></path>
+  <path fill="#5b96ff" d="M440.679 207.553a7 7 0 0 0-6.535-4.492H237.856a7 7 0 0 0-4.682 12.2l98.143 88.339a7 7 0 0 0 9.366 0l98.143-88.334a7 7 0 0 0 1.853-7.713Z"></path>
+  <path fill="#5b95ff" d="M330.475 469.1 238 588h196l-92.475-118.9a7 7 0 0 0-11.05 0Z"></path>
+  <rect width="420" height="35" x="126" y="49" fill="#ebeff2" rx="17.5"></rect>
+  <rect width="420" height="35" x="126" y="588" fill="#ebeff2" rx="17.5"></rect>
+  <path fill="#4d4d4d" d="M528.5 91h-385a24.5 24.5 0 0 1 0-49h385a24.5 24.5 0 0 1 0 49zm-385-35a10.5 10.5 0 0 0 0 21h385a10.5 10.5 0 0 0 0-21zm385 574h-385a24.5 24.5 0 0 1 0-49h385a24.5 24.5 0 0 1 0 49zm-385-35a10.5 10.5 0 0 0 0 21h385a10.5 10.5 0 0 0 0-21z"></path>
+</svg>

src/components/AddJob/AddJob.jsx

@@ -3,7 +3,7 @@ import {
   useDispatch,
   useSelector,
   usersService,
-  initialValues as IV,
+  // initialValues as IV,
   initialReqState,
   useState,
   tableReload,
@@ -39,7 +39,7 @@ function AddJob({ popUpHandler, categories }) {
 
     try {
       const res = await ApiCall.jobManagerCreateJob(reqData);
-      if (res.data.internal_return < 1) {
+      if (res?.data?.internal_return < 1) {
         setRequestStatus({
           loading: false,
           status: false,
@@ -72,50 +72,75 @@ 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 (
-    <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={IV}
+    <Formik
+        initialValues={initialValues}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
         {(props) => {
           return (
-            <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 ? (
-                          <>
+            <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="">
-                              Select a currency
+                              Loading...
                             </option>
-                            {walletDetails.data?.map((item, index) => (
+                          ) : 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 ?
+                          <>
+                            {walletDetails?.data?.map((item, index) => (
                               <option
                                 key={index}
                                 className="text-slate-500 text-lg"
@@ -125,238 +150,274 @@ function AddJob({ popUpHandler, categories }) {
                               </option>
                             ))}
                           </>
-                        ) : (
-                          <option className="text-slate-500 text-lg" value="">
-                            No Options Found! Try Again
-                          </option>
-                        )}
-                      </select>
+                          :(
+                            <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"
+                          >
+                            Delivery 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>
 
-                    {/* Price */}
-                    <div className="field w-full">
+                    {/* Title  */}
+                    <div className="field w-full mb-[5px]">
                       <InputCom
-                        fieldClass="px-6 text-right"
-                        label="Price"
-                        labelClass="tracking-wide"
-                        type="number"
-                        name="price"
-                        placeholder="0"
-                        value={props.values.price}
+                        fieldClass="px-6"
+                        label="Title"
+                        labelClass=""
+                        type="text"
+                        name="title"
+                        value={props.values.title}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
                         error={
-                          props.errors.price &&
-                          props.touched.price &&
-                          props.errors.price
+                          props.errors.title &&
+                          props.touched.title &&
+                          props.errors.title
                         }
                       />
                     </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="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}
+                    {/* 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>
 
-                    <div className="sm:w-[35%] w-full">
-                      <div
-                        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}
+                    {/* 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"
                         >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                  </div>
-                  {/* inputs ends here */}
-                </div>
-              </div>
+                          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>
 
-              {/* 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 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>
-                  ) : (
-                    requestStatus.status && (
+
+                    {/* <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>
+                        ))}
+                      </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-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        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>
-                    )
-                  ))}
-                {/* End of error or success display */}
-
-                <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="button"
-                      className="text-18 text-light-red tracking-wide "
-                    >
-                      <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"
-                      >
-                        Add Job
-                      </button>
-                    )}
-                  </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>
+              <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" />
+                  ) : (
+                    <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-white"
+                    >
+                      Add Job
+                    </button>
+                  )}
                 </div>
               </div>
             </Form>
           );
         }}
       </Formik>
-    </div>
   );
 }
 

src/components/AddJob/settings.js

@@ -51,7 +51,7 @@ const validationSchema = Yup.object().shape({
     .required("Price is required"),
   title: Yup.string()
     .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
+    .max(80, "Maximum 80 characters")
     .required("Title is required"),
   description: Yup.string()
     .min(5, "Minimum 5 characters")

src/components/AuthPages/AuthLayout2.jsx

@@ -1,11 +1,12 @@
 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 LoginLayout({ slogan, children }) {
-  const bgImg = localImgLoad("images/left-wrenchboard.jpg");
+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");
 
@@ -13,63 +14,86 @@ export default function LoginLayout({ slogan, children }) {
 
   return (
     <div
-      className={`h-screen overflow-y-auto bg-cover bg-center`}
+      className={`relative min-h-screen overflow-y-auto bg-cover bg-center flex flex-col items-center`}
       style={{
-        backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
+        backgroundImage: `url(${countryMode === "NG" ? bgImgNig : bgImgCom})`,
       }}
     >
-      <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
+      <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 lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            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 lg:col-start-2">
-          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 rounded-[0.475rem]">
+        <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 className="w-full flex flex-col justify-center items-center px-10">
-              <div className="w-full flex justify-center items-center pt-5">
-                <div className="flex items-center">
-                  <a
-                    href="https://www.wrenchboard.com/about-us"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    About
-                  </a>
-                  <a
-                    href="https://www.wrenchboard.com/service"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Services
-                  </a>
-                  <a
-                    href="https://www.wrenchboard.com/contact"
-                    className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Contact Us
-                  </a>
-                </div>
-              </div>
-              <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
-                <span className="dark:text-white">
-                  &copy; {new Date().getFullYear()} -
-                </span>
-                <Link to="/" className="text-[#009ef7] ml-1">
-                  WrenchBoard
-                </Link>{" "}
-              </p>
-            </div>
           </div>
         </div>
       </div>
+      <div className='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={process.env.REACT_APP_HOME_LINK}
+                  className='text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]' 
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Home
+                </a>
+                <a
+                  href={process.env.REACT_APP_ABOUT_LINK}
+                  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"
+                  href={process.env.REACT_APP_TERMS_LINK}
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Terms
+                </a>
+                <a
+                  href={process.env.REACT_APP_CONTACTS_LINK}
+                  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>
   );
 }

src/components/AuthPages/AuthProfile/ActivitiesTab.jsx

@@ -42,7 +42,7 @@ export default function ActivitiesTab({ className }) {
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b  default-border-b dark:border-[#5356fb29] ottom ">
               <td className="py-4 pr-12">List</td>
               <td className="py-4 text-start px-2">Product Name</td>
               <td className="py-4 text-start px-2">Price</td>

src/components/AuthPages/AuthProfile/index.jsx

@@ -1,63 +1,63 @@
-import React, { useState } from "react";
+import React 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 CollectionTab from "./CollectionTab";
-import CreatedTab from "./CreatedTab";
-import HiddenProductsTab from "./HiddenProductsTab";
-import OnSaleTab from "./OnSaleTab";
-import OwnTab from "./OwnTab";
+// 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";
 
 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>

src/components/AuthPages/AuthRedirect/AppleRedirect.jsx

@@ -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>

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useMemo, 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 = new usersService();
+    const userApi = useMemo(()=> 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>

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } 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 = new usersService();
+  const userApi = useMemo(()=> 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>

src/components/AuthPages/ForgotPassword/index.jsx

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

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+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";
@@ -38,7 +38,7 @@ export default function ForgotPassword() {
   }
 
   const resetHandler = async () => {
-    if (email == "") {
+    if (email === "") {
       setMsgError("An email is required");
       return setTimeout(() => {
         setMsgError(null);
@@ -63,7 +63,7 @@ export default function ForgotPassword() {
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);
-        if (res.status === 200) {
+        if (res.status === 200 && res?.data?.internal_return >= 0) {
           setMsgSuccess(true);
           setMail("");
           setValue(false);
@@ -89,15 +89,6 @@ export default function ForgotPassword() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             <div className="w-10/12">
             {msgSuccess == null ?

src/components/AuthPages/Login/LoginLanding.jsx

@@ -0,0 +1,124 @@
+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
+                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                    >
+                      Sign Up in App Store
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {/* <div className="login-links mt-10 flex justify-center text-gray-400 divide-x-4">
+                  <a className='text-sm font-bold px-5' href={process.env.REACT_APP_HOME_LINK}>Home</a>
+                  <a className='text-sm font-bold px-5' href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+                  <a className='text-sm font-bold px-5' href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+                  <a className='text-sm font-bold px-5' href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+              </div> */}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index.jsx

@@ -17,12 +17,13 @@ import { updateUserDetails } from "../../../store/UserDetails";
 import ReCAPTCHA from "react-google-recaptcha";
 
 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 dispatch = useDispatch();
-  const { state } = useLocation();
 
   const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired"))
 
@@ -220,7 +221,7 @@ export default function Login() {
     let loginValue = readCookie("loginType");
     setLoginType(loginValue);
 
-    if (state?.error) {
+    if (location?.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(() => {

src/components/AuthPages/Login/index2.jsx

@@ -16,13 +16,17 @@ 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 dispatch = useDispatch();
-  const { state } = useLocation();
 
   const [sessionExpired, setSessionExpired] = useState(
     queryParams.get("sessionExpired")
@@ -30,7 +34,7 @@ export default function Login() {
 
   const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
 
-  let [loginType, setLoginType] = useState("");
+  let [loginType, setLoginType] = useState('');
 
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -145,8 +149,10 @@ export default function Login() {
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
-        if (name === "family") {
+        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 }));
@@ -194,43 +200,43 @@ export default function Login() {
   // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
   // }, []);
 
-  useLayoutEffect(() => {
-    // checks the cookie in order to set the login type before components mounts
-    // if(document.cookie.includes("loginType=family")){
-    //   setLoginType('family')
-    // }else if(document.cookie.includes("loginType=full")){
-    //   setLoginType('full')
-    // }else{
-    //   setLoginType('full')
-    // }
-    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";
+  useEffect(()=>{
+    if(location?.state && location?.state.loginType){
+      setLoginType(location?.state.loginType)
+    }else{
+      navigate('/login', {replace: true})
     }
-    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);
-    }
-  }, []);
+  // 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("");
@@ -254,7 +260,7 @@ export default function Login() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
+          {/* <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -262,13 +268,13 @@ export default function Login() {
                 className="h-10 mx-auto"
               />
             </Link>
-          </div>
+          </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="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <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> */}
@@ -294,7 +300,7 @@ export default function Login() {
               )}
 
               {/* switch login component */}
-              <div className="ml-7 flex justify-start items-center gap-3">
+              <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 ${
@@ -322,6 +328,7 @@ export default function Login() {
               {/* 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
@@ -385,7 +392,7 @@ export default function Login() {
                         {msgError}
                       </div>
                     )}
-                    <div className="signin-area mb-3.5">
+                    <div className="signin-area">
                       <div className="flex justify-center">
                         <button
                           name="full"
@@ -519,49 +526,55 @@ export default function Login() {
                 )
                 // END of family login compoenent
               }
+              <div className='mt-4 w-full flex justify-center items-center text-center'>
+                <Link className='px-4 py-2 rounded-full text-xl text-white bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]' to='/login'>Return</Link>
+              </div>
               {/* END of login component */}
 
               {/* APP DOWNLOAD STORE */}
-              <div className="w-full mt-4">
+              <div className="hidden w-full mt-4">
                 <div className="w-full flex justify-center items-center gap-4">
-                  <div className="w-28 lg:w-32">
+                  <div className="w-32 lg:w-48">
                     <a
-                      className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"
                       rel="noreferrer"
                       href={process.env.REACT_APP_APPLE_APP}
                     >
-                      <i className="fa-brands fa-apple text-3xl"></i>
+                      {/* <i className="fa-brands fa-apple text-3xl"></i>
                       <div className="flex flex-col">
                         <span className="text-[11px]">Available on the</span>
                         <span className="text-[12px] lg:text-base">
                           App Store
                         </span>
-                      </div>
+                      </div> */}
+                      <img src={IOSDownload} className='w-full h-auto' alt='IOS Download' />
                     </a>
                   </div>
-                  <div className="w-28 lg:w-32">
+                  <div className="w-32 lg:w-48">
                     <a
-                      className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                      // className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
                       target="_blank"
                       rel="noreferrer"
                       href={process.env.REACT_APP_ANDROID_APP}
                     >
-                      <i className="fa-brands fa-google-play text-2xl"></i>
+                      {/* <i className="fa-brands fa-google-play text-2xl"></i>
                       <div className="flex flex-col">
                         <span className="text-[11px]">Available on the</span>
                         <span className="text-[12px] lg:text-base">
                           Google Play
                         </span>
-                      </div>
+                      </div> */}
+                      <img src={GoogleDownload} className='w-full h-auto' alt='IOS Download' />
                     </a>
                   </div>
                 </div>
               </div>
+
               {loginType == "full" && (
                 <>
-                  <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                    This site is protected by a Captcha. Our Privacy Policy and
+                  <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>
                 </>
@@ -608,7 +621,7 @@ const BrandBtn = ({
           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]">
+          <span className="text-thin-light-gray font-normal text-sm">
             Continue with {brand}
           </span>
         </a>
@@ -619,7 +632,7 @@ const BrandBtn = ({
           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]">
+          <span className="text-thin-light-gray font-normal text-sm">
             Continue with {brand}
           </span>
         </button>

src/components/AuthPages/Promo/Promo.jsx

@@ -0,0 +1,203 @@
+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>
+);

src/components/AuthPages/PromoPageLayout.jsx

@@ -0,0 +1,80 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+import DarkModeContext from "../Contexts/DarkModeContext";
+
+export default function PromoPageLayout({ children }) {
+  const bgImg = localImgLoad("images/left-wrenchboard.jpg");
+  const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg");
+  const bgImgCom = localImgLoad("images/wrench-promo-back-common.jpg");
+
+  const { countryMode } = useContext(DarkModeContext);
+
+  return (
+    <div
+      className={`min-h-screen overflow-y-auto bg-cover bg-center flex flex-col justify-between items-center`}
+      style={{
+        backgroundImage: `url(${countryMode == "NG" ? bgImgCom : bgImgCom})`,
+      }}
+    >
+      
+      <div className={`w-full grid grid-cols-1`}>
+        {/* <div 
+            className={`auth-bg hidden xl:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div> */}
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-5 w-full sm:w-11/12 max-w-[550px] shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]">
+            <div className="w-full flex justify-center items-center">
+              {children && children}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='hidden w-full shadow-md bg-slate-50 dark:bg-dark-white'>
+        <div className="w-full flex flex-col md:flex-row justify-center items-center px-10 py-2">
+          <div className="flex justify-center items-center">
+            <div className="flex items-center">
+              <a
+                href="https://www.wrenchboard.com/about-us"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                About
+              </a>
+              <a
+                href="https://www.wrenchboard.com/service"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Services
+              </a>
+              <a
+                href="https://www.wrenchboard.com/contact"
+                className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Contact Us
+              </a>
+            </div>
+          </div>
+          <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
+            <span className="dark:text-white">
+              &copy; {new Date().getFullYear()} -
+            </span>
+            <Link to="/" className="text-[#009ef7] ml-1">
+              WrenchBoard
+            </Link>{" "}
+          </p>
+        </div>
+      </div>
+
+    </div>
+  );
+}

src/components/AuthPages/SignUp/index.jsx

@@ -6,12 +6,13 @@ 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 {pathname} = useLocation()
-  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+  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);

src/components/AuthPages/SignUp/index2.jsx

@@ -1,19 +1,29 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+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";
 
-export default function SignUp() {
+import GoogleDownload from '../../../assets/images/download/andriod.jpg'
+import IOSDownload from '../../../assets/images/download/apple.jpg'
+
+/* Note 
+The Props in this component
+1. refer_link holds the value to be sent as the referral code
+2. details holds the value of the person either referred via invite or promo
+*/
+
+export default function SignUp({refer_link, details}) {
+  const location = useLocation();
+
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
   const country = queryParams.get("cnt")?.toUpperCase();
 
-  const { pathname } = useLocation();
   const currentPath = country
-    ? `${pathname}?cnt=${country.toLowerCase()}`
-    : pathname; // Determines the new pathname is country query params exist
+    ? `${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);
@@ -24,9 +34,9 @@ export default function SignUp() {
 
   const [formData, setFormData] = useState({
     country: country ? country : "",
-    first_name: "",
-    last_name: "",
-    email: "",
+    first_name: details ? details.firstname : "",
+    last_name: details ? details.lastname : "",
+    email: details ? details.email : "",
     password: "",
   });
 
@@ -100,6 +110,7 @@ export default function SignUp() {
         }
 
         setSignUpLoading(true);
+        let referral_link = refer_link ? {refer_link} : {} // FOR USER COMING FROM REFERRAL PROCESS
         const reqData = {
           country: country,
           firstname: first_name,
@@ -109,6 +120,7 @@ export default function SignUp() {
           password: password,
           terms: 1,
           news: 1,
+          ...referral_link
         };
 
         const res = await userApi.CreateUser(reqData);
@@ -154,15 +166,6 @@ export default function SignUp() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-5">
-            <Link to={currentPath}>
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <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">
@@ -180,11 +183,11 @@ export default function SignUp() {
                 </span>
               </div>
               <div className="w-full flex items-center gap-2">
-                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[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] max-w-[50%] w-full"></div>
+                <div className="border-b border-[#eff2f5] w-[48%]"></div>
               </div>
               <div className="input-area">
                 <SelectOption
@@ -207,6 +210,7 @@ export default function SignUp() {
                       type="text"
                       value={formData.first_name}
                       inputHandler={handleInputChange}
+                      disable={details ? true : false}
                     />
                   </div>
                   <div className="input-item flex-1">
@@ -218,6 +222,7 @@ export default function SignUp() {
                       type="text"
                       value={formData.last_name}
                       inputHandler={handleInputChange}
+                      disable={details ? true : false}
                     />
                   </div>
                 </div>
@@ -230,6 +235,7 @@ export default function SignUp() {
                     type="email"
                     value={formData.email}
                     inputHandler={handleInputChange}
+                    disable={details ? true : false}
                   />
                 </div>
                 <div className="input-item mb-4">
@@ -276,16 +282,17 @@ export default function SignUp() {
                       )}
                     </button>
                     <span
-                      onClick={rememberMe}
-                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                      // 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="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      <a
+                        target='_blank'
+                        href={process.env.REACT_APP_TERMS_LINK}
+                        className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition mx-1 inline-block"
                       >
                         terms and condition
-                      </Link>
+                      </a>
                     </span>
                   </div>
                 </div>
@@ -343,44 +350,6 @@ export default function SignUp() {
                     </button>
                   </div>
                 </div>
-
-                {/* APP DOWNLOAD STORE */}
-                <div className="w-full mt-4">
-                  <div className="w-full flex justify-center items-center gap-4">
-                    <div className="w-28 lg:w-32">
-                      <a
-                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        href={process.env.REACT_APP_APPLE_APP}
-                        rel="noreferrer"
-                      >
-                        <i className="fa-brands fa-apple text-3xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            App Store
-                          </span>
-                        </div>
-                      </a>
-                    </div>
-                    <div className="w-28 lg:w-32">
-                      <a
-                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                        target="_blank"
-                        href={process.env.REACT_APP_ANDROID_APP}
-                        rel="noreferrer"
-                      >
-                        <i className="fa-brands fa-google-play text-2xl"></i>
-                        <div className="flex flex-col">
-                          <span className="text-[11px]">Available on the</span>
-                          <span className="text-[12px] lg:text-base">
-                            Google Play
-                          </span>
-                        </div>
-                      </a>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
@@ -413,7 +382,7 @@ const SelectOption = ({
           disabled={disable}
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          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}
         >

src/components/AuthPages/UserProfile/ActivitiesTab.jsx

@@ -42,10 +42,10 @@ export default function ActivitiesTab({ className }) {
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
-            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
+            <tr className="text-base text-thin-light-gray whitespace-nowrap border-b default-border-b dark:border-[#5356fb29] ottom ">
               <td className="py-4 pr-12">List</td>
               <td className="py-4 text-start px-2">Product Name</td>
-              <td className="py-4 text-start px-2">Price</td>
+              <td className="py-4 text-start px-2">Reward</td>
               <td className="py-4 text-start px-2">Quantity</td>
               <td className="py-4 text-start px-2">From</td>
               <td className="py-4 text-start px-2 pr-12">To</td>

src/components/AuthPages/VerifyLink/index.jsx

@@ -84,7 +84,7 @@ export default function VerifyLink() {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log("TESTING VERIFY", data);
+        // console.log("TESTING VERIFY", data);
         if (
           data &&
           data.internal_return >= 0 &&

src/components/AuthPages/VerifyLink/index2.jsx

@@ -1,12 +1,18 @@
 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("");
@@ -49,12 +55,14 @@ export default function VerifyLink() {
           ) {
             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("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
+            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");
@@ -84,7 +92,7 @@ export default function VerifyLink() {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log("TESTING VERIFY", data);
+        // console.log("TESTING VERIFY", data);
         if (
           data &&
           data.internal_return >= 0 &&
@@ -119,18 +127,16 @@ export default function VerifyLink() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         {pageLoader ? (
-          <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <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="mb-12">
-              <Link to="#">
-                <img
-                  src={WrenchBoard}
-                  alt="wrenchboard"
-                  className="h-10 mx-auto"
-                />
-              </Link>
-            </div>
             <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">

src/components/AuthPages/VerifyPassword/index2.jsx

@@ -139,15 +139,6 @@ const VerifyPassword = () => {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <div className="flex place-content-center">
             {requestStatus.loading ? (
               <LoadingSpinner color="sky-blue" size="16" height="h-300px" />

src/components/AuthPages/VerifyYou/index2.jsx

@@ -8,15 +8,6 @@ export default function VerifyYou() {
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
-            <Link to="#">
-              <img
-                src={WrenchBoard}
-                alt="wrenchboard"
-                className="h-10 mx-auto"
-              />
-            </Link>
-          </div>
           <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">
@@ -28,21 +19,14 @@ export default function VerifyYou() {
                 </span>
               </div>
               <div className="input-area">
-                <div className="mb-5">
+              <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    <b>Verify Email.</b> Help us secure your WrenchBoard account
-                    by verifying your email registration address. Verification
-                    will let you access all of WrenchBoard's features.
+                    Please <span className="font-semibold tracking-wide">verify your email</span> to secure your account.
                   </p>
                 </div>
                 <div className="mb-5">
                   <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                    If you do not receive the confirmation message within a few
-                    minutes of signing up, please check your Junk E-mail folder
-                    just in case the confirmation email got delivered there
-                    instead of your inbox. If so, select the confirmation
-                    message and click Not Junk, which will allow future messages
-                    to get through.
+                    If you don't see the confirmation email, check your <span className='font-semibold tracking-wide'>Junk</span> or <span className='font-semibold tracking-wide'>Spam</span> folder and mark it as "Not Junk"
                   </p>
                 </div>
               </div>

src/components/Blogs/index.jsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { useNavigate, useLocation } 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";
-import { useSelector } from "react-redux";
-import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function BlogItem(props) {
 
+    const location = useLocation()
+
     const {
         userDetails: { account_type },
       } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details account type
@@ -26,9 +28,11 @@ 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){
-            navigate('/',{replace:true})
+            return navigate('/',{replace:true})
         }
         apiCall.getSingleBlogData({blog_id}).then(res => {
             setBlogdata({loading: false, data:res.data})
@@ -87,7 +91,11 @@ export default function BlogItem(props) {
                                 <div className="slider-btns flex space-x-4">
                                 </div>
                             </div> */}
-                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            {/* console.log('MUMU', 'meta_value', blogdata, blogdata.data.image_url) */}
+                            <div className='w-full mb-8'>
+                                <img src={`${blogdata.data.image_url}/${blogdata.data?.blogdata?.[0]?.meta_value}`} className='w-full h-auto' alt='Blog Image' />
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}} className='prose leading-relaxed'>
                             </div>
                     </div>
                     :

src/components/Cards/AvailableJobsCard.jsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 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,
@@ -8,11 +10,19 @@ export default function AvailableJobsCard({
   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,
@@ -34,63 +44,70 @@ export default function AvailableJobsCard({
     <>
       {contentDisplay == "grid" ? (
         <div
-          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+          className={`card-style-two w-full p-[10px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
             className || ""
           }`}
         >
           <div
             onClick={() => {
-              setMarketPopUp({ show: true, data: datas });
+              datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas });
             }}
-            className="flex flex-col justify-between w-full h-full"
+            className="flex flex-col gap-2 justify-between w-full h-full"
           >
-            <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 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-[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 className='w-full'>
+                <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>
               </div>
             </div>
             <div className="thumbnail-area w-full">
               <div
-                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
-                style={{
-                  backgroundImage: `url('${image}')`,
-                }}
+                className="w-full p-1 h-[150px] rounded-xl overflow-y-auto bg-center bg-cover bg-no-repeat"
+                // style={{
+                //   backgroundImage: `url('${image}')`,
+                // }}
               >
-                <div className="flex justify-center bg-slate-100 p-2 rounded-md">
-                  {datas.description}
+                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
+                  <p>{datas.description}</p>
                 </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> */}
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
-                  <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                  <div className='w-full'>
+                    <p className="w-full flex gap-1 items-center font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
+                      {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
                       {thePrice}
                     </p>
                     <p className="text-sm text-lighter-gray">
@@ -102,15 +119,27 @@ export default function AvailableJobsCard({
                   </div>
                 </div>
                 <div>
-                  <button
+                  {datas.market_uid != uid ?
+                    <button
                     type="button"
-                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                      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"
                     onClick={() => {
-                      setMarketPopUp({ show: true, data: datas });
+                      setJobPopout({ show: true, data: datas });
                     }}
-                  >
-                    View
-                  </button>
+                    >
+                      Manage
+                    </button>
+                  }
                 </div>
               </div>
             </div>
@@ -125,7 +154,7 @@ export default function AvailableJobsCard({
             <div className="flex flex-col flex-[0.9]">
               <h1
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
               >
@@ -134,7 +163,7 @@ export default function AvailableJobsCard({
 
               <div
                 onClick={() => {
-                  setMarketPopUp({ show: true, data: datas });
+                  datas.market_uid != uid ? setMarketPopUp({ show: true, data: datas }) :setJobPopout({ show: true, data: datas })
                 }}
                 className="my-2"
               >
@@ -144,8 +173,9 @@ export default function AvailableJobsCard({
               </div>
 
               <div className="block sm:flex flex-wrap gap-4">
-                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
-                  Price: <span className="text-purple">{thePrice}</span>
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1 items-center">
+                  {datas?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
+                  Reward: <span className="text-purple">{thePrice}</span>
                 </p>
                 <p className="text-sm text-thin-light-gray">
                   Duration:{" "}
@@ -162,8 +192,9 @@ 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 });
@@ -171,6 +202,17 @@ 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>
       )}
@@ -181,8 +223,21 @@ 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 */}
     </>
   );
 }

src/components/Cards/OfferCard.jsx

@@ -1,7 +1,10 @@
+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,
@@ -17,11 +20,15 @@ export default function OfferCard({
   let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
 
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+    <div className="card-style-one flex flex-col gap-3 justify-between w-full bg-white dark:bg-dark-white p-3 rounded-2xl">
       <div className="content">
-        {/* thumbnail */}
         <div className="w-full h-40">
-          {/* thumbnail image */}
+          {/* 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={{
@@ -30,6 +37,7 @@ export default function OfferCard({
           >
             {hidden && <div className="flex justify-center"></div>}
           </div>
+          }
         </div>
         {/* details */}
         <div className="details">
@@ -38,7 +46,7 @@ export default function OfferCard({
           </h1>
 
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-            <div className="grid grid-cols-2 gap-2">
+            {/* <div className="grid grid-cols-1 gap-2">
               <div className="flex flex-col justify-between items-center border-r-2">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Task Code
@@ -53,9 +61,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">
@@ -66,13 +74,19 @@ export default function OfferCard({
                   {thePrice}
                 </p>
               </div>
-              <div className="flex flex-col justify-between items-center">
+              {/* <div className="flex flex-col justify-between items-center">
                 <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
                   Timeline
                 </p>
                 <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
                   {`${datas.timeline_days} day(s)`}
                 </p>
+              </div> */}
+              <div className="flex flex-col justify-between items-center">
+                <p className="text-sm text-red-500 tracking-wide">Expires</p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  <CountDown lastDate={datas.expire} />
+                </p>
               </div>
             </div>
           </div>

src/components/Cards/ResourceBlogCard.jsx

@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
   
   return (
     <div
-      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full 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-[236px] p-6  rounded-xl overflow-hidden"
+            className="w-full h-[140px] p-6  rounded-lg 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}`}) 0% 0% / cover no-repeat`,
+              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
+              backgroundSize: '100%',
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 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>

src/components/Contexts/SocketIOContext.js

@@ -1,12 +1,14 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
 import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
+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); 
@@ -32,19 +34,60 @@ export default function SocketIOContextProvider({children}) {
 
     const marketUpdate = (message, room) => {
         if(message && room){
-            socket.emit("marketjob_addded", { 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'}))
+            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'}))
+            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 = {
@@ -52,8 +95,10 @@ export default function SocketIOContextProvider({children}) {
         sendMessage,
         joinRoom,
         setSocketMsgReceived,
-        socketMsgReceived,
         marketUpdate,
+        parentAssignJobToKid,
+        sendJobInterestToOwner,
+        socketMsgReceived,
         // room,
         // setRoom,
         // message,

src/components/Dashboards/AccountDashboard.jsx

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { Suspense, lazy, useState } from "react";
 import { Link } from "react-router-dom";
+import VideoElement from '../../components/VideoCom/VideoElement'
+import OfferJobPopout from '../../components/jobPopout/OfferJobPopout'
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CountDown from '../Helpers/CountDown'
+
+const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => {
+
+  let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
+  let offersListLength = offersList?.length > 2 ? 2 : offersList?.length
 
-const AccountDashboard = ({ className, bannerList }) => {
   // getting the upper three banners for the home layout
-  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2);
-  const getLowerBanner = bannerList?.filter((value, idx) => idx > 2);
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength);
+  const getLowerBanner = bannerList?.filter((value, idx) => !getUpperBanner?.map(item => item?.title)?.includes(value.title));
 
   let getImage = ({ banner_location, banner }) => {
     if (banner_location == "LOCAL") {
@@ -14,52 +23,97 @@ const AccountDashboard = ({ className, bannerList }) => {
     }
   };
 
-  console.log(getLowerBanner);
   return (
-    <div
-      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
-        className || ""
-      }`}
-    >
-      <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
-        {getUpperBanner?.map((props, idx) => {
-          let image = getImage(props);
+    <>
+      <div
+        className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
+          className || ""
+        }`}
+      >
 
-          let { short_title, short_description, short_button_text, link_path } =
-            props;
+        {/* for normal banner section */}
+        <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
+          {/* OFFER LIST DISPLAY */}
+          <>
+            {(offersList && offersList?.length > 0) &&
+              offersList.map((item, index) => {
+                let thePrice = PriceFormatter(
+                  item?.price * 0.01,
+                  item?.currency_code,
+                  item?.currency
+                );
+              
+                let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
+                if(index < offersListLength){
+                  return (
+                    <div key={item.offer_uid}>
+                        <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>
+                  )
+                }
+            })}
+          </>
 
-          return (
-            <TopBanner
-              btn={short_button_text}
-              image={image}
-              title={short_title}
-              desc={short_description}
-              link_path={link_path}
-              key={idx}
-            />
-          );
-        })}
+          {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 */}
+
+          {getLowerBanner?.map((props, idx) => {
+            let image = getImage(props);
+
+            let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
+              props;
+
+            return (
+              <div key={idx}>
+                <LowerBanner
+                  btn={short_button_text}
+                  image={image}
+                  title={short_title}
+                  desc={short_description}
+                  link_path={link_path}
+                  card_type={card_type}
+                  blog_id={blog_id}
+                />
+              </div>
+            );
+          })}
+        </div>
       </div>
-      <div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
-        {getLowerBanner?.map((props, idx) => {
-          let image = getImage(props);
 
-          let { short_title, short_description, short_button_text, link_path } =
-            props;
-
-          return (
-            <LowerBanner
-              btn={short_button_text}
-              image={image}
-              title={short_title}
-              desc={short_description}
-              link_path={link_path}
-              key={idx}
-            />
-          );
-        })}
-      </div>
-    </div>
+      {/* Offer Job Popout */}
+      {offerPopout.show && (
+        <OfferJobPopout
+          details={offerPopout.data}
+          onClose={() => {
+            setOfferPopout({ show: false, data: {} });
+          }}
+          situation={offerPopout.show}
+        />
+      )}
+      {/* End of Offer Job Popout */}
+    </>
   );
 };
 
@@ -67,26 +121,26 @@ export default AccountDashboard;
 
 const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   return (
-    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29]" key={key}>
-      <Link to={link_path} className="h-[12rem] rounded-t-xl">
+    <div className="flex flex-col shadow-md rounded-xl dark:border-[#5356fb29] overflow-hidden" key={key}>
+      <Link to={link_path} className="h-[12rem] bg-white">
         <img
           src={image}
           alt="banner-img"
           loading="lazy"
-          className="w-full h-full rounded-t-xl object-cover"
+          className="w-auto mx-auto h-full"
         />
       </Link>
-      <div className="h-[7rem] rounded-b-xl bg-white dark:bg-dark-white">
+      <div className="rounded-b-xl bg-white dark:bg-dark-white">
         <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
-          <Link to={link_path} className="font-bold text-lg">
+          <Link to={link_path} className="font-bold text-xl line-clamp-1">
             {title}
           </Link>
-          <Link to={link_path} className="text-sm">
+          <Link to={link_path} className="text-base line-clamp-1">
             {desc}
           </Link>
         </div>
-        <div className="flex justify-between w-full px-2 items-center pt-[0.2rem]">
-          <Link to={link_path} className="text-slate-300 font-semibold text-sm">
+        <div className="flex justify-between w-full p-1 items-center">
+          <Link to={link_path} className="text-slate-300 font-semibold text-base">
             {btn}
           </Link>
           <button className="flex items-center justify-center gap-2">
@@ -100,24 +154,144 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   );
 };
 
-const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
+const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) => {
+  return (
+    <div className="flex flex-col shadow-md bg-red-50 dark:bg-dark-white rounded-xl dark:border-[#5356fb29] overflow-hidden">
+      <div className="h-[12rem] bg-transparent">
+        {/* thumbnail image/video */}
+        {datas.job_type == "MEDIA" ?
+        <Suspense fallback={<p>Loading...</p>}>
+          <VideoElement videoId={datas?.media_uid} />
+        </Suspense>
+        :
+        <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+          style={{
+            // background: `url(${image}) center / contain no-repeat`,
+          }}
+        >
+          {/* <img src={image} className='' /> */}
+          <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden"
+          style={{
+            background: `url(${image}) center / contain no-repeat`,
+          }}
+        ></div>
+          {hidden && <div className="flex justify-center"></div>}
+        </div>
+        }
+      </div>
+      <div className="rounded-b-xl bg-transparent dark:bg-dark-transparent">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
+          <h1 className="font-bold text-xl 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-base 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-xl 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-base 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 flex justify-between border-b border-slate-300 p-2">
-        <div className="h-[130px] flex justify-between items-center">
+      <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={link_path} className="text-lg font-bold">
+            <Link to={newLinkPath} className="text-xl font-bold line-clamp-1">
               {title}
             </Link>
-            <p to={link_path} className="text-sm">
+            <p to={newLinkPath} className="text-base line-clamp-1">
               {desc}
             </p>
           </div>
         </div>
-        <Link to={link_path} className="w-[150px] h-[100px]">
+        <Link to={newLinkPath} className="w-[150px] h-[100px]">
           <img
             src={image}
             alt="banner-img"
@@ -126,8 +300,8 @@ const LowerBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
           />
         </Link>
       </div>
-      <div className="flex justify-between w-full px-2 items-center">
-        <Link to={link_path} className="text-slate-300 font-semibold text-sm">
+      <div className="flex justify-between w-full p-1 items-center">
+        <Link to={newLinkPath} className="text-slate-300 font-semibold text-base">
           {btn}
         </Link>
         <button className="flex items-center justify-center gap-2">
@@ -175,17 +349,17 @@ const BannerSection = ({ banners, variant }) => {
                 variant === "top"
                   ? "rounded-b-xl bg-white"
                   : "border-b border-slate-300"
-              } h-[7rem]`}
+              }`}
             >
               <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2">
-                <Link to={link_path} className="font-bold text-lg">
+                <Link to={link_path} className="font-bold text-xl">
                   {short_title}
                 </Link>
-                <Link to={link_path} className="text-sm">
+                <Link to={link_path} className="text-base">
                   {short_description}
                 </Link>
               </div>
-              <div className="flex justify-between w-full px-2 items-center">
+              <div className="flex justify-between w-full p-1 items-center">
                 <Link to={link_path} className="text-slate-300 font-semibold">
                   {short_button_text}
                 </Link>

src/components/Dashboards/FamilyParentDashboard.jsx

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

src/components/Dashboards/HomeDashboard.jsx

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

src/components/Dashboards/JobOwnerDashboard.jsx

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

src/components/Dashboards/WorkerDashboard.jsx

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

src/components/FamilyAcc/FamilyActivities.jsx

@@ -52,7 +52,13 @@ export default function FamilyActivities() {
               <span>Family</span>
             </Link>
           </div>
-          <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
+          <Suspense 
+            fallback={
+            <div className="bg-white">
+              <LoadingSpinner color="sky-blue" size="16" height='h-[30rem]' />
+            </div>
+            }
+          >
             <FamilyTableNew />
           </Suspense>
         </div>

src/components/FamilyAcc/FamilyListSettings.jsx

@@ -0,0 +1,346 @@
+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>
+    );
+  }
+  

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, 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");
@@ -34,7 +35,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
@@ -50,6 +51,40 @@ 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>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -14,6 +14,7 @@ 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"));
@@ -29,43 +30,32 @@ 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: null,
+    data: [],
   };
-// console.log('accountDetails',accountDetails)
-  // State for family details, tasks, waitlist, and pending
-  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 },
-    });
-  };
+  // 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 [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
 
-  // State for family task data
-  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+  // State for list of created jobs by FULL USER
+  const [jobList, setJobList] = useState({ loading: false, data: [] });
 
-  // State for active task
+  // State for active/selected job
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-  // State for error messages
-  const [errMsg, setErrMsg] = useState("");
-
   // State for family task popout
-  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
 
   let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
 
@@ -79,8 +69,8 @@ export default function FamilyManageTabs({
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout((prev) => !prev);
+  const familyAssignPopUpHandler = () => {
+    setAssignTaskPopout((prev) => !prev);
   };
 
   // Function to trigger a click on the hidden profile image input
@@ -177,44 +167,43 @@ export default function FamilyManageTabs({
     Tasks: (
       <FamilyTasks
         className={className}
-        loader={details.familyTasks.loading}
-        familyData={details.familyTasks.data}
+        familyData={familyTasks}
         accountDetails={accountDetails}
       />
     ),
     Waiting: (
       <FamilyWaitlist
-        familyData={details.familyWaitList.data}
+        familyData={familyWaitList}
         accountDetails={accountDetails}
-        loader={details.familyWaitList.loading}
         setUpdatePage={setUpdatePage}
+        jobList={jobList}
+        setActiveTask={setActiveTask}
+        activeTask={activeTask}
       />
     ),
     Pending: (
       <FamilyPending
-        familyData={details.familyPending.data}
+        familyData={familyPending}
         accountDetails={accountDetails}
-        loader={details.familyPending.loading}
+        setUpdatePage={setUpdatePage}
       />
     ),
     Account: (
       <FamilyAccount
-        familyData={details.familyDetails.data}
+        familyData={familyDetails}
         myRef={accountRef}
-        loader={details.familyDetails.loading}
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
-    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
+    Profile: <FamilyProfile familyData={familyDetails.data} />,
+    wallet: <FamilyWallet familyData={familyDetails.data} />,
   };
 
   // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
-      loader={details.familyTasks.loading}
-      familyData={details.familyTasks.data}
+      familyData={familyTasks}
       accountDetails={accountDetails}
     />
   );
@@ -222,67 +211,90 @@ export default function FamilyManageTabs({
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  // Effect to manage family details and related data
+  // Effect to manage family details
   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 [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;
+        const response = await apiCall.ManageFamily(reqData)
+        if(response.status != 200 || !response?.data){
+          return setFamilyDetails({loading:false, data: {}})
         }
-
-        setDetails({
-          familyDetails: { loading: false, data: familyData },
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
-        });
+        setFamilyDetails({loading:false, data: response?.data})
       } 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 tasks
+    // 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
   useEffect(() => {
-    let checkFamilyTask = true;
     const reqData = {
       limit: 30,
       offset: 0,
@@ -290,12 +302,11 @@ export default function FamilyManageTabs({
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-    if (checkFamilyTask) {
-      setFamilyTask({ loading: true });
+      setJobList({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          setJobList({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -304,15 +315,9 @@ export default function FamilyManageTabs({
           }
         })
         .catch((err) => {
-          setFamilyTask({ loading: false, data: [] });
+          setJobList({ loading: false, data: [] });
           console.log("Error", err);
         });
-    }
-
-    // Cleanup function to prevent memory leaks
-    return () => {
-      checkFamilyTask = false;
-    };
   }, []);
 
   return (
@@ -395,7 +400,7 @@ export default function FamilyManageTabs({
                   </ul>
                   <button
                     type="button"
-                    onClick={familyPopUpHandler}
+                    onClick={familyAssignPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -417,15 +422,14 @@ export default function FamilyManageTabs({
         </Suspense>
       </div>
 
-      {familyTaskPopout && (
+      {assignTaskPopout && (
         <AssignTaskPopout
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyTask={familyTask}
-          setFamilyTask={setFamilyTask}
+          action={familyAssignPopUpHandler}
+          situation={assignTaskPopout}
+          jobList={jobList}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
-          familyDetailsData={details.familyDetails.data}
+          familyDetailsData={familyDetails.data}
           setUpdatePage={setUpdatePage}
         />
       )}

src/components/FamilyAcc/FamilyPendingOffer.jsx

@@ -4,26 +4,27 @@ 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});
-            console.log('SAME', res.data)
         } catch (error) {
             setMyOffersList({loading:false, data:[]});
-            console.log("Error getting offers", error);
         }
     };
 
     useEffect(()=>{
         getMyOffersList()
-    },[])
+    },[familyOfferList])
     return (
         <Layout>
             {myOffersList.loading ?

src/components/FamilyAcc/FamilyPopout/AssignMediaTask.jsx

@@ -0,0 +1,359 @@
+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" },
+  ];

src/components/FamilyAcc/FamilyPopout/AssignPrevNewTask.jsx

@@ -0,0 +1,263 @@
+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>
+              </>
+            )  
+        }     
+    </>
+  )
+}

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import { useLocation } from "react-router-dom";
+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 { tableReload } from "../../../store/TableReloads";
 import ModalCom from "../../Helpers/ModalCom";
@@ -8,22 +8,37 @@ 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 = ({
   action,
   details,
   situation,
   familyDetailsData,
-  familyTask,
+  jobList,
   activeTask,
   setActiveTask,
   setUpdatePage,
-  assignTaskChecker,
-  
+  familyList
 }) => {
+
+  const newJobList = {...jobList, data:jobList?.data?.filter(item => item?.job_mode == 'FAMILY')}
+  
+  const {parentAssignJobToKid} = SocketValues()
+
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+
   const apiCall = new usersService();
+
   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) => {
@@ -33,9 +48,9 @@ const AssignTaskPopout = ({
 
   const dispatch = useDispatch();
 
-  const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
+  // const getFamilySession = JSON.parse(sessionStorage.getItem("family_list"));
 
-  const familyList = getFamilySession?.map((member) => (
+  const famList = familyList?.map((member) => (
     <option key={member?.family_uid} value={member?.family_uid}>
       {member?.firstname} {member?.lastname}
     </option>
@@ -47,6 +62,21 @@ const AssignTaskPopout = ({
     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 } }) => {
@@ -63,7 +93,7 @@ const AssignTaskPopout = ({
   const [formState, setFormState] = useState({
     // Initialize form state with desired fields
     banner: details?.banner || "default.jpg",
-    country: details?.country || "",
+    country: details?.country ? details?.country : walletDetails?.data?.length == 1 ? walletDetails?.data[0].country : '',
     price: details?.price || "",
     title: details?.title || "",
     description: details?.description || "",
@@ -76,20 +106,20 @@ const AssignTaskPopout = ({
     setRequestStatus({ loading: true, status: false, message: "" });
 
     if(!selectedFamilyUid){ // If no family found, throw error
-      setRequestStatus({ loading: false, status: false, message: "Please Select Family Member" });
+      setRequestStatus({ loading: false, status: false, message: "Please Select a Kid" });
       return setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 3000);
     }
 
     let reqData = {};
-    if (taskType == "select") {
+    if (taskType == "select" && assignType == 'task') {
       // RUNS HERE IF TASK TYPE IS SELECT
-      if (!Object.keys(activeTask.data).length) {
+      if (!Object.keys(activeTask.data)?.length) {
         setRequestStatus({
           loading: false,
           status: false,
-          message: "No Task is seleted",
+          message: "No Task is selected",
         });
         return setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
@@ -107,7 +137,7 @@ const AssignTaskPopout = ({
       };
     }
 
-    if (taskType === "new") {
+    if (taskType === "new" && assignType == 'task') {
       const {
         banner,
         category,
@@ -166,10 +196,13 @@ const AssignTaskPopout = ({
       .assignFamilyTask(reqData)
       .then((res) => {
         if (res.status != 200 || res.data.internal_return < 0) {
+
+          let error = errorMsg[res?.data?.error_msg] || ''
+
           setRequestStatus({
             loading: false,
             status: false,
-            message: "failed to assign task",
+            message: error? error : "failed to assign task",
           });
 
           return setTimeout(() => {
@@ -181,13 +214,23 @@ const AssignTaskPopout = ({
           setRequestStatus({
             loading: false,
             status: true,
-            message: "action successful",
+            message: "Task Assigned successfully",
           });
 
           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
+
           setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
             action(); // FUNCTION THAT CLOSES THE MODAL BOX
@@ -207,6 +250,48 @@ const AssignTaskPopout = ({
       });
   };
 
+  const closeModal = () => {  // FOR CLOSING ASSIGN TASK MODAL
+    action()
+  }
+
+  const assignMediaTask = (values, helpers) => {  // FUNCTION TO HANDLE ASSIGNING MEDIA TASK
+    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 = {...values, assign_mode:'110012', family_uid:selectedFamilyUid, media_uid:activeMedia.uid, amount:values.amount * 100}
+
+    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] || ''
+
+        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)
@@ -217,31 +302,41 @@ const AssignTaskPopout = ({
     }
   },[])
 
+  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="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-          <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] bg-sky-blue/50 border-b dark:border-[#5356fb29]  border-light-purple">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide flex items-center">
+        <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">
+                <div className="flex items-center gap-2">
                   <span className="text-black">Assign task to{" "}</span>
-                  <div className="w-[270px] h-[40px] ml-2">
+                  <div className="w-[270px] h-[40px] flex items-center">
                     <select
                       name=""
                       id=""
-                      className="text-white px-2 transition-all cursor-pointer bg-blue-900 focus:outline-none border border-gray-200 rounded-lg w-full h-full py-1"
+                      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}
                     >
-                      <option value="">
+                      <option value="" className="">
                         Select a kid
                       </option>
-                      {familyList}
+                      {famList}
                     </select>
                   </div>
                 </div>
@@ -249,7 +344,7 @@ const AssignTaskPopout = ({
             </h1>
             <button
               type="button"
-              className="text-[#000] dark:text-red-500"
+              className="modal-close-btn"
               onClick={action}
             >
               <svg
@@ -273,218 +368,52 @@ const AssignTaskPopout = ({
               </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="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}
               >
-                <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>
-
-                {/*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="job-label">
-                                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>
-
-                            <div className="my-3 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>
-                          
-                          {/* Dummy, no value found for created! thus commented*/}
-                          {/* <div className="my-3 sm:flex items-center">
-                            <Detail
-                              label="Created"
-                              value={`Dummy, no value found for created!`}
-                            />
-                          </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>
-
-              {/* 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>
-
-                {/* End of error or success display */}
-                <div className="w-auto h-auto flex items-center gap-20">
-                  <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"
-                  >
-                    <span className="text-gradient">Close</span>
-                  </button>
-                  <div className="">
-                    {requestStatus.loading ? (
-                      <LoadingSpinner color="sky-blue" size="8" />
-                    ) : (
-                      <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"
-                    //   >
-                    //     {details
-                    //       ? `Assign task to ${details?.firstname}`
-                    //       : familyDetailsData
-                    //       ? `Assign task to ${familyDetailsData.firstname}`
-                    //       : "Assign"}
-                    //   </button>
-                    // )
-                    }
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
+              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>
     </>

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -1,13 +1,17 @@
 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 }) {
-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  });
+
+  const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
+
+  // let [currency, setCurrency] = useState({
+  //   loading: true,
+  //   status: false,
+  //   data: null,
+  // });
 
   const selectImage = require(`../../../../assets/images/taskbanners/${
     formState.banner || "default.jpg"
@@ -15,25 +19,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;
@@ -43,79 +47,163 @@ export default function NewTasks({ formState, setFormState }) {
     }));
   };
 
-  useEffect(() => {
-    getUserCurrency();
-  }, []);
+  // useEffect(() => {
+  //   getUserCurrency();
+  // }, []);
 
   return (
     <form className="w-full flex justify-between items-start">
-      <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="job-label"
-            >
-              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="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="field w-full">
-            <label htmlFor="price" className="job-label">Price</label>
+            <label htmlFor="title" className="job-label">Title</label>
             <InputCom
-              fieldClass="px-6 text-right"
-              // label="Price"
+              fieldClass="px-6"
+              // label="Title"
               // labelClass="tracking-wide"
               inputBg="bg-slate-100"
-              type="number"
-              name="price"
-              placeholder="0"
-              value={formState.price}
+              type="text"
+              name="title"
+              value={formState.title}
               inputHandler={handleInputChange}
-              // blurHandler={props.handleBlur}
-              // error={props.errors.price && props.touched.price && props.errors.price}
+              //   blurHandler={props.handleBlur}
+              //   error={props.errors.title && props.touched.title && props.errors.title}
             />
           </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 mb-6 xl:mb-0">
+          <div className="field w-full">
             <label
               htmlFor="timeline_days"
               className="job-label"
@@ -127,17 +215,18 @@ export default function NewTasks({ formState, setFormState }) {
               id="timeline_days"
               name="timeline_days"
               value={formState.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`}
+              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}
               // onBlur={props.handleBlur}
             >
               {publicArray.length && (
                 <>
                   <option className="text-slate-500 text-[13.975px]" value="">
-                    Duration
+                    Select
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
                     <option
+                      key={idx}
                       className="text-slate-500 text-[13.975px]"
                       value={duration}
                     >
@@ -148,74 +237,19 @@ export default function NewTasks({ formState, setFormState }) {
               )}
             </select>
           </div>
-        </div>
 
-        {/* Title  */}
-        <div className="field w-full mb-[5px]">
-          <label htmlFor="title" className="job-label">Title</label>
-          <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]">
-          <label htmlFor="description" className="job-label">Description</label>
-          <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">
+          {/* Banner Image */}
           <div className="w-full">
-            <label
-              htmlFor="Job Delivery Details"
-              className='job-label'
-            >
-              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 className="h-32 w-full">
+              <img
+                src={selectImage}
+                alt="task_banner_img"
+                className="w-full h-full object-contain"
+              />
+            </div>
           </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>
   );

src/components/FamilyAcc/FamilyRoutes.jsx

@@ -0,0 +1,45 @@
+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}} />
+    </>
+  );
+}

src/components/FamilyAcc/FamilySettings/Tabs/AddFamily.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
+import React, {Suspense, lazy} from 'react'
+// import FamilyList from '../../FamilyList'
+import LoadingSpinner from '../../../../components/Spinners/LoadingSpinner'
 
 const AddFamily = () => {
+  const FamilyListSettings = lazy(() => import('../../FamilyListSettings'));
   return (
-    <div>Add Family</div>
+    <>
+      <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" height='h-full min-h-[500px]' />}>
+        <FamilyListSettings />
+      </Suspense>
+    </>
   )
 }
 

src/components/FamilyAcc/FamilySettings/Tabs/RelativePopout.jsx

@@ -0,0 +1,163 @@
+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;

src/components/FamilyAcc/FamilySettings/Tabs/RelativeReminderPopout.jsx

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

src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx

@@ -2,7 +2,10 @@ import React, { useState } from 'react'
 import { handlePagingFunc } from '../../../Pagination/HandlePagination';
 import PaginatedList  from '../../../Pagination/PaginatedList';
 
-export default function RelativeTable({relativeList}) {
+import RelativePopout from './RelativePopout';
+import RelativeReminderPopout from './RelativeReminderPopout';
+
+export default function RelativeTable({relativeList, familyList}) {
   
     // Handle Pagination
     const [currentPage, setCurrentPage] = useState(0);
@@ -10,21 +13,43 @@ export default function RelativeTable({relativeList}) {
     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='p-2'>
+                          <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}
@@ -34,13 +59,49 @@ export default function RelativeTable({relativeList}) {
                               </span>
                             </div>
                           </td>
-                          <td className='p-2'>
+                          <td className='py-4 px-2'>
                             {/* <span>Family Type</span> */}
                             <span>{value.family_type && value.family_type.toUpperCase()}</span>
                           </td>
-                          <td className='p-2 text-right'>
+                          {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>
                         ))
                     ) : (
@@ -69,5 +130,25 @@ export default function RelativeTable({relativeList}) {
               {/* 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}
+          />
+        }
+
+      </>
       );
     };

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -4,7 +4,7 @@ import InviteRelative from './InviteRelative'
 import usersService from '../../../../services/UsersService'
 import LoadingSpinner from '../../../Spinners/LoadingSpinner'
 
-const Relatives = () => {
+const Relatives = ({familyList}) => {
 
   const api = new usersService()
 
@@ -47,7 +47,7 @@ const Relatives = () => {
           {relativeList.loading ?
           <LoadingSpinner size='8' height='h-full' />
           :
-          <RelativeTable relativeList={relativeList.result_list} />
+          <RelativeTable relativeList={relativeList.result_list} familyList={familyList} />
           }
         </div>
       </div>

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -1,12 +1,20 @@
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useOutletContext } from "react-router-dom";
 import CustomBreadcrumb from "../../Breadcrumb/CustomBreadcrumb";
 import Icons from "../../Helpers/Icons";
 import Layout from "../../Partials/Layout";
 import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
 
 const FamilySettings = () => {
+
+  const {loader, setLoader, familyList, setListReload} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+
   let { state } = useLocation();
+
+  const imageServer = state?.imageServer
+
+  let relativeFamilyList = {loader, familyList, imageServer}
+
   const tabs = [
     {
       id: 1,
@@ -44,7 +52,7 @@ const FamilySettings = () => {
 
   const tabComponents = {
     add_family: <AddFamily />,
-    relatives: <Relatives />,
+    relatives: <Relatives familyList={relativeFamilyList} />,
     family_banner: <FamilyBanner imageServer={state.imageServer} />,
   };
 

src/components/FamilyAcc/FamilyTable.jsx

@@ -173,7 +173,7 @@ export default function FamilyTable({
 
   return (
     <div
-      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] flex flex-col justify-between ${
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl min-h-[520px] flex flex-col justify-between ${
         className || ""
       }`}
     >

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -1,9 +1,10 @@
 import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useOutletContext } from "react-router-dom";
 import { apiConst } from "../../lib/apiConst";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
+import { useSelector } from "react-redux";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyNewWaitlist"));
@@ -11,56 +12,48 @@ const FamilyTasks = lazy(() => import("./Tabs/FamilyNewTasks"));
 const FamilyPending = lazy(() => import("./Tabs/FamilyNewPending"));
 
 export default function FamilyTableNew() {
-  let { pathname } = useLocation();
+
+  const {familyList} = useOutletContext() // CONTEXT VALUES FROM OUTLET TO CHILD
+
+  const { jobListTable, pendingListTable, parentFamilyTaskList } = useSelector((state) => state.tableReload); // TABLE RELOAD TRIGGERS
+
+
+  let location = useLocation();
+
+  const queryParams = new URLSearchParams(location?.search);
+  const preSelectedTab = queryParams.get("tab");
 
   // Initial state for family details
   const initialDetailState = {
     loading: false,
-    data: null,
-    link: "",
+    data: [],
   };
 
-  const [assignTaskChecker, setAssignTaskChecker] = useState(false);
-
-  // console.log('accountDetails',accountDetails)
   // State for family details, tasks, waitlist, and pending
-  const [details, setDetails] = useState({
-    familyDetails: { ...initialDetailState },
-    familyTasks: { ...initialDetailState },
-    familyWaitList: { ...initialDetailState },
-    familyPending: { ...initialDetailState },
-  });
+  let [familyTasks, setFamilyTasks] = useState({...initialDetailState})
 
-  // Function to reset family details, tasks, waitlist, and pending
-  const resetDetails = () => {
-    setDetails({
-      familyDetails: { ...initialDetailState },
-      familyTasks: { ...initialDetailState },
-      familyWaitList: { ...initialDetailState },
-      familyPending: { ...initialDetailState },
-    });
-  };
+  let [familyPending, setFamilyPending] = useState({...initialDetailState})
+
+  let [familyWaitList, setFamilyWaitList] = useState({...initialDetailState})
 
   const [updatePage, setUpdatePage] = useState(false); // State to determine when to update the page
 
-  // State for family task data
-  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+  // State for list of created jobs by FULL USER
+  const [jobList, setJobList] = useState({ loading: false, data: [] });
 
-  // State for active task
+  // State for active/selected job
   const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
 
-  // State for error messages
-  const [errMsg, setErrMsg] = useState("");
-
   // State for family task popout
-  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const [assignTaskPopout, setAssignTaskPopout] = useState(false);
+
 
   // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
   // Function to handle toggling the family task popout
-  const familyPopUpHandler = () => {
-    setFamilyTaskPopout((prev) => !prev);
+  const familyAssignPopUpHandler = () => {
+    setAssignTaskPopout((prev) => !prev);
   };
 
   // Array of tab names
@@ -75,113 +68,103 @@ export default function FamilyTableNew() {
 
   // Function to handle tab changes
   const tabHandler = (value) => {
-    setTab(value);
+    setTab(value.toLowerCase());
   };
 
   // Object that maps tab names to their corresponding components
   const tabComponents = {
-    Tasks: (
+    tasks: (
       <FamilyTasks
-        image_link={details.familyTasks.link}
-        loader={details.familyTasks.loading}
-        familyData={details.familyTasks.data}
-        action={familyPopUpHandler}
-        setAssignTaskChecker={setAssignTaskChecker}
+        familyData={familyTasks}
+        action={familyAssignPopUpHandler}
       />
     ),
-    Waiting: (
+    waiting: (
       <FamilyWaitlist
-        image_link={details.familyWaitList.link}
-        familyData={details.familyWaitList.data}
-        loader={details.familyWaitList.loading}
+        familyData={familyWaitList}
         setUpdatePage={setUpdatePage}
       />
     ),
-    Pending: (
+    pending: (
       <FamilyPending
-        image_link={details.familyPending.link}
-        familyData={details.familyPending.data}
-        loader={details.familyPending.loading}
+        familyData={familyPending}
       />
     ),
   };
 
-  const defaultTabComponent = tabComponents.Tasks;
+  const defaultTabComponent = tabComponents.tasks;
 
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
-  // Effect to manage family details and related data
+  useEffect(()=>{ // EFFECT TO CHECK FOR PRE SELECTED TAB AND DEFAULT TO IT OR TO DEFAULT IF NOT AVALIABLE
+    if(preSelectedTab && tabs.map(item => item.name.toLowerCase()).includes(preSelectedTab.toLowerCase())){
+      setTab(preSelectedTab)
+    }else{
+      setTab(tabs[0].name)
+    }
+  },[])
+
+
+  // Effect to manage active family task details
   useEffect(() => {
-    const manageFamily = async () => {
+    const manageTasks = async () => {
+      setFamilyTasks({loading:true, data: []})
       try {
-        resetDetails();
-
-        setDetails({
-          familyTasks: { loading: true },
-          familyWaitList: { loading: true },
-          familyPending: { loading: true },
-        });
-
-        //   const { family_uid } = accountDetails;
-        //   const reqData = { family_uid };
-
-        const [familyTasksData, familyWaitingRes, familyPendingRes] =
-          await Promise.all([
-            apiCall.getMyActiveJobList(),
-            apiCall.ManageFamilyNewWaitlist(),
-            apiCall.ManageFamilyPending(),
-          ]);
-
-        let tasksData = familyTasksData?.data?.result_list;
-        let _familyWaitData = familyWaitingRes?.data?.result_list;
-        let familyPendingData = familyPendingRes?.data?.result_list;
-
-        // Getting the image server link
-        let imageServerLink = familyWaitingRes.data?.session_image_server;
-
-        // Function to check for errors in data
-        const checkDataError = (data) => data?.internal_return < 0;
-
-        if (
-          checkDataError(tasksData) ||
-          checkDataError(_familyWaitData) ||
-          checkDataError(familyPendingData)
-        ) {
-          return;
+        const response = await apiCall.getMyActiveJobList()
+        if(response.status != 200 || !response?.data){
+          return setFamilyTasks({loading:false, data: []})
         }
-
-        setDetails({
-          familyTasks: {
-            loading: false,
-            data: tasksData,
-            link: imageServerLink,
-          },
-          familyWaitList: {
-            loading: false,
-            data: _familyWaitData,
-            link: imageServerLink,
-          },
-          familyPending: {
-            loading: false,
-            data: familyPendingData,
-            link: imageServerLink,
-          },
-        });
+        setFamilyTasks({loading:false, data: response?.data})
       } catch (error) {
-        resetDetails();
-        setErrMsg("An error occurred");
         throw new Error(error);
+        setFamilyTasks({loading:false, data: []})
       }
     };
-
     // Invoke the manageFamily function when the component mounts
-    manageFamily();
+    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 tasks
+  // 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
   useEffect(() => {
-    let checkFamilyTask = true;
     const reqData = {
       limit: 30,
       offset: 0,
@@ -189,12 +172,11 @@ export default function FamilyTableNew() {
       action: apiConst.WRENCHBOARD_PICTURE_FAMMEMBER,
     };
 
-    if (checkFamilyTask) {
-      setFamilyTask({ loading: true });
+      setJobList({ loading: true });
       apiCall
         .getMyJobList(reqData)
         .then((res) => {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          setJobList({ loading: false, data: res?.data?.result_list });
           if (res?.data?.result_list?.length) {
             setActiveTask((prev) => ({
               ...prev,
@@ -203,15 +185,9 @@ export default function FamilyTableNew() {
           }
         })
         .catch((err) => {
-          setFamilyTask({ loading: false, data: [] });
+          setJobList({ loading: false, data: [] });
           console.log("Error", err);
         });
-    }
-
-    // Cleanup function to prevent memory leaks
-    return () => {
-      checkFamilyTask = false;
-    };
   }, []);
 
   // console.log(updatePage);
@@ -224,7 +200,7 @@ export default function FamilyTableNew() {
         <Suspense
           fallback={
             <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
-              <LoadingSpinner size="16" color="sky-blue" />
+              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
             </div>
           }
         >
@@ -237,7 +213,7 @@ export default function FamilyTableNew() {
                       <li
                         onClick={() => tabHandler(name)}
                         className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                          tab === name
+                          tab.toLowerCase() === name.toLowerCase()
                             ? "text-purple border-r"
                             : "text-thin-light-gray"
                         }`}
@@ -249,7 +225,7 @@ export default function FamilyTableNew() {
                   </ul>
                   <button
                     type="button"
-                    onClick={familyPopUpHandler}
+                    onClick={familyAssignPopUpHandler}
                     className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   >
                     Add task
@@ -259,7 +235,7 @@ export default function FamilyTableNew() {
                 <div className="flex-[0.9] h-full">
                   <div className="h-full relative overflow-y-auto">
                     <Suspense
-                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                      fallback={<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />}
                     >
                       {selectedTabComponent}
                     </Suspense>
@@ -271,20 +247,19 @@ export default function FamilyTableNew() {
         </Suspense>
       </div>
 
-      {familyTaskPopout && (
+      {assignTaskPopout && (
         <AssignTaskPopout
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyTask={familyTask}
-          setFamilyTask={setFamilyTask}
+          action={familyAssignPopUpHandler}
+          situation={assignTaskPopout}
+          jobList={jobList}
           setActiveTask={setActiveTask}
           activeTask={activeTask}
+          familyDetailsData={''}
           setUpdatePage={setUpdatePage}
-          // updateFamilyPendingTable={updateFamilyPendingTable}
-          pathname={pathname}
-          assignTaskChecker={assignTaskChecker}
+          familyList={familyList?.result_list}
         />
       )}
+
     </div>
   );
 }

src/components/FamilyAcc/FamilyTableSettings.jsx

@@ -0,0 +1,244 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import familyImage from "../../assets/images/no-family-side.png";
+import { formatDateString } from "../../lib";
+import localImgLoad from "../../lib/localImgLoad";
+
+/**
+ * Renders a list of family members that can be managed. 
+ * It has its current maximum members at 8 and it comes with pagination and loading spinner functionality.
+
+ * @returns {JSX.Element} - The rendered component.
+ */
+export default function FamilyTableSettings({
+  className,
+  familyList,
+  loader,
+  popUpHandler,
+  imageServer,
+}) {
+  const navigate = useNavigate();
+  const [currentPage, setCurrentPage] = useState(0);
+  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
+
+  const handleManageClick = (familyMember) => {
+    navigate("/manage-family", { state: familyMember });
+  };
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  /**
+   * Renders a table row for a family member.
+   * @returns {JSX.Element} - The table row component.
+   */
+  const FamilyRow = ({
+    firstname,
+    lastname,
+    age,
+    added,
+    last_login,
+    task_count,
+    family_uid,
+    banner,
+    enable_traking,
+    profile_picture,
+    imageServer,
+    username,
+  }) => {
+    // Check for valid dates
+    const addedDate = added ? added.split(" ")[0] : "N/A";
+    const loginDate = last_login ? formatDateString(last_login) : "N/A";
+    const key = `family-${family_uid}`; // Assign a unique key
+    const image = localStorage.getItem("session_token")
+      ? `${imageServer}${localStorage.getItem(
+          "session_token"
+        )}/family/${family_uid}`
+      : "";
+
+    const trackingStatus =
+      enable_traking === "0"
+        ? "Stopped"
+        : enable_traking === "100"
+        ? "Active"
+        : "";
+
+    return (
+      <tr
+        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+        key={key}
+      >
+        <td className="py-4">
+          <div className="flex space-x-2 items-center w-full">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+              <img
+                // src={profile_picture}
+                src={
+                  image ||
+                  profile_picture ||
+                  localImgLoad(`images/icons/${banner}`)
+                }
+                alt={`Avatar of ${firstname} ${lastname}`}
+                className="w-full h-full"
+              />
+            </div>
+            <div className="flex flex-col flex-[0.9]">
+              <h1 className="font-bold text-lg text-dark-gray dark:text-white whitespace-nowrap">
+                {`${firstname} ${lastname}`}{" "}
+                <span className="ml-1 text-sm">{`[${username}]`}</span>
+              </h1>
+              <span className="text-sm text-thin-light-gray">
+                Added: <span className="text-purple ml-1">{addedDate}</span>
+              </span>
+              <span className="text-sm text-thin-light-gray">
+                Last Login:{" "}
+                <span className="text-purple ml-1">{loginDate}</span>
+              </span>
+            </div>
+          </div>
+        </td>
+
+        {/* <td className="text-center py-4 px-2">
+          <div className="flex space-x-1 items-center justify-center">
+            <span
+              className={`text-base font-medium whitespace-nowrap ${
+                enable_traking === "0"
+                  ? "text-[#FF0000] dark:text-[#FF6666]"
+                  : enable_traking === "100"
+                  ? "text-[#00A000] dark:text-[#00FF00]"
+                  : "text-dark-gray dark:text-white"
+              }`}
+            >
+              {trackingStatus}
+            </span>
+          </div>
+        </td>
+
+        <td className="text-center py-4 px-2">
+          <div className="flex space-x-1 items-center justify-center">
+            <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+              {task_count}
+            </span>
+          </div>
+        </td> */}
+
+        <td className="text-right py-4 px-2 flex items-center justify-center">
+          <button
+            onClick={() =>
+              handleManageClick({
+                firstname,
+                lastname,
+                age,
+                added,
+                last_login,
+                task_count,
+                family_uid,
+                banner,
+                image,
+              })
+            }
+            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>
+    );
+  };
+
+  return (
+    <div
+      className={`update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl min-h-[520px] flex flex-col justify-between ${
+        className || ""
+      }`}
+    >
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
+        {loader ? (
+          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+            <LoadingSpinner size="16" color="sky-blue" height='h-full' />
+          </div>
+        ) : (
+          <>
+            {familyList?.length > 0 ? (
+              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 relative">
+                <thead className="sticky top-0">
+                  <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-bottom ">
+                    <th className="py-4">Name</th>
+                    {/* <th className="py-4 text-center">Tracking</th>
+                    <th className="py-4 text-center">No of Tasks</th> */}
+                    <th className="py-4 text-right"></th>
+                  </tr>
+                </thead>
+                <tbody className="h-full">
+                  {currentFamilyList?.map((familyMember, index) => {
+                    return (
+                      <FamilyRow
+                        key={index}
+                        {...familyMember}
+                        imageServer={imageServer}
+                      />
+                    );
+                  })}
+                </tbody>
+              </table>
+            ) : (
+              <div className="font-bold text-center text-xl md:text-2xl lg:text-4xl text-dark-gray md:flex items-center justify-between">
+                <div className="p-2 w-full md:w-1/2">
+                  <p className="mb-4 p-3 md:p-16">
+                    Add your family, assign tasks, and get the whole team
+                    engaged.
+                  </p>
+                  <button
+                    onClick={popUpHandler}
+                    type="button"
+                    className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  >
+                    Add Family
+                  </button>
+                </div>
+                <div className="p-2 w-full md:w-1/2">
+                  <img className="w-full" src={familyImage} alt="Add Family" />
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0}
+        next={currentPage + itemsPerPage >= familyList?.length}
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
+    </div>
+  );
+}

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -3,7 +3,7 @@ import QRCode from "react-qr-code";
 import { useSelector } from "react-redux";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint}, ref) => {
   const { userDetails } = useSelector((state) => state.userDetails);
   return (
     <div
@@ -13,16 +13,19 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
       <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
         <div className="flex items-center justify-around h-[380px]">
           <div className="flex flex-col">
+            <h2 className="print:block hidden font-bold text-lg tracking-wide text-dark-gray dark:text-white capitalize mb-10">
+              Firstname: {familyData?.data?.firstname ? familyData?.data?.firstname : "please wait..."}
+            </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.username ? familyData?.username : "please wait..."}
+                {familyData?.data?.username ? familyData?.data?.username : "please wait..."}
               </span>
             </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Pin:{" "}
               <span className="ml-2 normal-case">
-                {familyData?.pin ? familyData?.pin : "please wait..."}
+                {familyData?.data?.pin ? familyData?.data?.pin : "please wait..."}
               </span>
             </h2>
           </div>
@@ -35,7 +38,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
             <p className="text-xl tracking-wide mb-[15px] text-center font-bold text-dark-gray dark:text-white">
               Scan the code from mobile app
             </p>
-            {loader ?
+            {familyData.loading ?
             <div className="w-full">
               <LoadingSpinner size='8' color='sky-blue' />
             </div>
@@ -44,7 +47,7 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, re
               size={256}
               style={{ height: "auto", maxWidth: "100%", width: "100%" }}
               // value={`https://www.google.com`}
-              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
+              value={`${userDetails?.uid}@${familyData?.data?.username}@${familyData?.data?.uid}`}
               viewBox={`0 0 256 256`}
             />
             }

src/components/FamilyAcc/Tabs/FamilyNewPending.jsx

@@ -2,13 +2,14 @@ import { useMemo, useState } from "react";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-export default function FamilyPending({ familyData, image_link, loader }) {
+export default function FamilyPending({ familyData }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   let filteredFamilyData = useMemo(
-    () => familyData?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -25,13 +26,18 @@ export default function FamilyPending({ familyData, image_link, loader }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
-  console.log(image_link);
 
   return (
     <div
       className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px]`}
     >
-      {familyData && (
+      {familyData.loading ? 
+      (<div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+      </div>
+      ):
+      <>
+      {familyData?.data?.result_list && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
             <tbody>
@@ -45,7 +51,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${image_link}${localStorage.getItem(
+                      let image = `${familyData?.data?.session_image_server}${localStorage.getItem(
                         "session_token"
                       )}/job/${value.job_uid}`;
                       return (
@@ -68,7 +74,7 @@ export default function FamilyPending({ familyData, image_link, loader }) {
                                 </h1>
                                 <div>{value.description}</div>
                                 <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                   <span className="text-purple">
                                     {thePrice}
                                   </span>
@@ -137,7 +143,8 @@ export default function FamilyPending({ familyData, image_link, loader }) {
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
-
+      </>
+      }
       {/* Active Job Popout */}
       {jobPopout.show && (
         <PendingJobsPopout

src/components/FamilyAcc/Tabs/FamilyNewTasks.jsx

@@ -9,17 +9,15 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyNewTasks({
   familyData,
   className,
-  loader,
   action,
-  image_link,
 }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
   // ...
   let filteredFamilyData = useMemo(
-    () => familyData?.filter((data) => data.family_uid !== ""),
-    [familyData]
+    () => familyData?.data?.result_list?.filter((data) => data.family_uid !== ""),
+    [familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -36,22 +34,22 @@ export default function FamilyNewTasks({
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
-        familyData?.length <= 0 && "flex items-center justify-center"
+        familyData?.data?.result_list?.length <= 0 && "flex items-center justify-center"
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   {
                     <>
-                      {familyData?.length <= 0 ? (
+                      {familyData?.data?.result_list?.length <= 0 ? (
                         <tr>
                           <td
                             colSpan="2"
@@ -76,7 +74,7 @@ export default function FamilyNewTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${image_link}${localStorage.getItem(
+                          let image = `${familyData?.data?.result_list}${localStorage.getItem(
                             "session_token"
                           )}/job/${value.job_uid}`;
                           return (
@@ -99,7 +97,7 @@ export default function FamilyNewTasks({
                                     </h1>
                                     <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                       <span className="text-sm text-thin-light-gray flex flex-start gap-1">
-                                        Price:{" "}
+                                      Reward:{" "}
                                         <span className="text-purple">
                                           {thePrice}
                                         </span>

src/components/FamilyAcc/Tabs/FamilyNewWaitlist.jsx

@@ -8,8 +8,6 @@ import Icons from "../../Helpers/Icons";
 const FamilyNewWaitlist = ({
   familyData,
   className,
-  accountDetails,
-  loader,
   setUpdatePage
 }) => {
   const [popUp, setPopUp] = useState({ show: false, data: {} });
@@ -22,7 +20,7 @@ const FamilyNewWaitlist = ({
   const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
   const indexOfFirstItem = currentPage;
   const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = familyData?.slice(
+  const currentTask = familyData?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -45,7 +43,7 @@ const FamilyNewWaitlist = ({
     setContinueTaskPopup({ show: false, data: {} });
   };
 
-  console.log("Check this >>",continueTaskPopup)
+  // console.log("Check this >>",continueTaskPopup)
 
   return (
     <div
@@ -53,13 +51,13 @@ const FamilyNewWaitlist = ({
         className || ""
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && (
+          {familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
@@ -69,7 +67,7 @@ const FamilyNewWaitlist = ({
                       value?.banner || "default.jpg"
                     }`);
                     // console.log("VALUE", value);
-                    // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                    // let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                     return (
                       <tr
                         className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -121,8 +119,8 @@ const FamilyNewWaitlist = ({
               <PaginatedList
                 onClick={handlePagination}
                 prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= familyData?.length}
-                data={familyData}
+                next={currentPage + itemsPerPage >= familyData?.data?.result_list?.length}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -3,21 +3,23 @@ import localImgLoad from "../../../lib/localImgLoad";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { PaginatedList, handlePagingFunc } from "../../Pagination";
 import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 export default function FamilyPending({
   familyData,
   className,
   accountDetails,
   loader,
+  setUpdatePage,
 }) {
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   let filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [accountDetails?.family_uid, familyData?.result_list]
+    [accountDetails?.family_uid, familyData?.data?.result_list]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -40,6 +42,12 @@ export default function FamilyPending({
         className || ""
       }`}
     >
+      {familyData.loading ? 
+      (<div className="w-full h-full flex justify-center items-center">
+        <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
+      </div>
+      ):
+      <>
       {filteredFamilyData && (
         <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
           <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -54,7 +62,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -75,7 +83,7 @@ export default function FamilyPending({
                                 </h1>
                                 <div>{value.description}</div>
                                 <span className="text-sm text-thin-light-gray flex items-start gap-1">
-                                  Price:{" "}
+                                Reward:{" "}
                                   <span className="text-purple">
                                     {thePrice}
                                   </span>
@@ -144,6 +152,8 @@ export default function FamilyPending({
           {/* END OF PAGINATION BUTTON */}
         </div>
       )}
+      </>
+      }
 
       {/* Active Job Popout */}
       {jobPopout.show && (
@@ -151,6 +161,7 @@ export default function FamilyPending({
           details={jobPopout.data}
           onClose={() => {
             setJobPopout({ show: false, data: {} });
+            setUpdatePage(prev => !prev);
           }}
           situation={jobPopout.show}
         />

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -10,7 +10,6 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 export default function FamilyTasks({
   familyData,
   className,
-  loader,
   accountDetails,
 }) {
   let navigate = useNavigate();
@@ -19,17 +18,17 @@ export default function FamilyTasks({
   // ...
   const filteredFamilyData = useMemo(
     () =>
-      familyData?.result_list?.filter(
+      familyData?.data?.result_list?.filter(
         (data) => data?.family_uid === accountDetails?.family_uid
       ),
-    [familyData, accountDetails]
+    [familyData?.data, accountDetails]
   );
 
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
     Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentTask = familyData?.result_list.slice(
+  const currentTask = familyData?.data?.result_list?.slice(
     indexOfFirstItem,
     indexOfLastItem
   );
@@ -43,21 +42,21 @@ export default function FamilyTasks({
         className || ""
       }`}
     >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
+      {familyData.loading ? (
+        <div className="w-full h-full flex justify-center items-center">
+          <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
         </div>
       ) : (
         <>
-          {familyData && familyData?.result_list && (
+          {familyData?.data && familyData?.data?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   {
                     <>
-                      {familyData &&
-                      familyData?.result_list &&
-                      familyData.result_list.length > 0 ? (
+                      {familyData?.data &&
+                      familyData?.data?.result_list &&
+                      familyData?.data.result_list.length > 0 ? (
                         currentTask.map((value, index) => {
                           // find due date
                           const dueDate = value?.delivery_date.split(" ")[0];
@@ -67,7 +66,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                          let image = `${familyData?.data?.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                           return (
                             <tr
                               key={index}
@@ -88,7 +87,7 @@ export default function FamilyTasks({
                                     </h1>
                                     <div className="flex flex-col sm:flex-row items-start gap-1 md:gap-4 md:items-center">
                                       <span className="text-sm text-thin-light-gray flex flex-start gap-1">
-                                        Price:{" "}
+                                      Reward:{" "}
                                         <span className="text-purple">
                                           {thePrice}
                                         </span>
@@ -149,11 +148,11 @@ export default function FamilyTasks({
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  familyData?.result_list.length
+                  familyData?.data?.result_list.length
                     ? true
                     : false
                 }
-                data={familyData?.result_list}
+                data={familyData?.data?.result_list}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -5,7 +5,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
 const FamilyWaitlist = memo(
-  ({ familyData, className, accountDetails, loader, setUpdatePage }) => {
+  ({ familyData, className, accountDetails, setUpdatePage, jobList, setActiveTask, activeTask }) => {
     const [popUp, setPopUp] = useState({ show: false, data: {} });
     const [continueTaskPopup, setContinueTaskPopup] = useState({
       show: false,
@@ -13,10 +13,10 @@ const FamilyWaitlist = memo(
     });
     const filteredFamilyData = useMemo(
       () =>
-        familyData?.result_list?.filter(
+        familyData?.data?.result_list?.filter(
           (data) => data?.family_uid === accountDetails?.family_uid
         ),
-      [familyData, accountDetails]
+      [familyData.data, accountDetails]
     );
 
     const [currentPage, setCurrentPage] = useState(0);
@@ -52,9 +52,9 @@ const FamilyWaitlist = memo(
           className || ""
         }`}
       >
-        {loader ? (
-          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-            <LoadingSpinner size={16} color="sky-blue" />
+        {familyData.loading ? (
+          <div className="w-full h-full flex justify-center items-center">
+            <LoadingSpinner size={16} color="sky-blue" height='h-[30rem]' />
           </div>
         ) : (
           <>
@@ -67,14 +67,13 @@ const FamilyWaitlist = memo(
                       const selectedImage = require(`../../../assets/images/family/${
                         value?.banner || "default.jpg"
                       }`);
-                      console.log('VALUE', value)
-                      // let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      // let image = `${familyData.data.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
                           key={value.uid}
                         >
-                          <td className="py-4">
+                          <td className="px-2 py-4">
                             <div className="w-full flex justify-between items-center">
                               <div className="account-name flex space-x-4 items-center">
                                 <div className="icon w-14 h-14 flex justify-center items-center">
@@ -93,23 +92,40 @@ const FamilyWaitlist = memo(
                                   </p>
                                 </div>
                               </div>
-                              <div className="px-2 flex flex-col items-center justify-center">
+                              {/* <div className="px-2 flex flex-col items-center justify-center">
                                 <p className="text-sm font-bold text-dark-gray dark:text-white">
                                   {addedDate}
                                 </p>
                                 <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
                                   {value.status_text}
                                 </p>
-                              </div>
+                              </div> */}
                             </div>
                           </td>
-                          <td className="text-right py-4 px-2">
-                            <button
-                              onClick={() => openPopUp(value)}
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                              View
-                            </button>
+                          <td className="text-right px-2 py-4">
+                            <div className='w-full flex justify-end items-center gap-4'>
+                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                {value.status_text}
+                              </p>
+                              <button
+                                onClick={() => openPopUp(value)}
+                                className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                              >
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 11 20"
+                                  id="Arrow"
+                                  className="w-[0.7rem]"
+                                >
+                                  <path
+                                    fillRule="evenodd"
+                                    d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                                    // fill=""
+                                    className="color000000 svgShape fill-[#fff]"
+                                  ></path>
+                                </svg>
+                              </button>
+                            </div>
                           </td>
                         </tr>
                       );
@@ -132,19 +148,22 @@ const FamilyWaitlist = memo(
         )}
         {popUp.show && (
           <SuggestTask
-            details={popUp.data}
+            details={popUp?.data}
             onClose={closePopUp}
             continuePopupData={openContinueTaskPopup}
-            situation={popUp.show}
+            situation={popUp?.show}
           />
         )}
 
         {continueTaskPopup.show && (
           <AssignTaskPopout
-            details={continueTaskPopup.data}
+            details={continueTaskPopup?.data}
             action={closeContinueTaskPopup}
-            situation={continueTaskPopup.show}
+            situation={continueTaskPopup?.show}
             setUpdatePage={setUpdatePage}
+            jobList={jobList}
+            setActiveTask={setActiveTask}
+            activeTask={activeTask}
           />
         )}
       </div>

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -15,7 +15,7 @@ function FamilyWallet({familyData}) {
 
   useEffect(()=>{
     setFamilyWallet({loading:true, data: []})
-    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
+    apiUrl.getKidWallets({family_uid:familyData?.uid}).then(res => {
       setFamilyWallet({loading:false, data: res?.data?.result_list || []})
     }).catch(error => {
       setFamilyWallet({loading:false, data: []})

src/components/FamilyAcc/Tabs/wallet/FamilyAddFundPopout.jsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from "react";
-import ModalCom from "../../../Helpers/ModalCom";
-import InputCom from "../../../Helpers/Inputs/InputCom";
 import { Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
 import * as Yup from "yup";
+import InputCom from "../../../Helpers/Inputs/InputCom";
+import ModalCom from "../../../Helpers/ModalCom";
 
-import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
-import usersService from "../../../../services/UsersService";
-import LoadingSpinner from "../../../Spinners/LoadingSpinner";
-import { PriceFormatter } from "../../../Helpers/PriceFormatter";
-import { tableReload } from "../../../../store/TableReloads";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { apiConst } from "../../../../lib/apiConst";
+import usersService from "../../../../services/UsersService";
+import { tableReload } from "../../../../store/TableReloads";
+import { SocketValues } from "../../../Contexts/SocketIOContext";
+import { AmountTo2DP } from "../../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
 
 const validationSchema = Yup.object().shape({
   // amount: Yup.string()
@@ -30,6 +30,10 @@ const validationSchema = Yup.object().shape({
 });
 
 function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
+  const { userDetails } = useSelector((state) => state?.userDetails); // Gets User Detail
+
+  const { parentAssignJobToKid } = SocketValues(); // socket emit event from FULL account
+
   const dispatch = useDispatch();
 
   const apiUrl = new usersService();
@@ -132,6 +136,17 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
           status: true,
           message: "Transfer Successful",
         });
+
+        //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+        // message, room
+        let socketMsg = {
+          audience: "MEMBER",
+          action: "REFRESH_WALLET",
+          family_uid: reqData.family_uid,
+        };
+        let socketRoom = `FAMILY-${userDetails.uid}`;
+        parentAssignJobToKid(socketMsg, socketRoom); //SENDS MESSAGE TO SOCKET TO UPDATE CHILD ACCOUNT
+
         setTimeout(() => {
           setRequestStatus({ loading: false, status: false, message: "" });
           dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
@@ -170,15 +185,9 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
   return (
     <ModalCom action={action} situation={situation}>
       <div className="relative logout-modal-wrapper lg:w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-        <div className="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">
-            Add Fund
-          </h1>
-          <button
-            type="button"
-            className="text-[#374557] dark:text-red-500"
-            onClick={action}
-          >
+        <div className="modal-header-con">
+          <h1 className="modal-title">Add Fund</h1>
+          <button type="button" className="modal-close-btn" onClick={action}>
             <svg
               width="36"
               height="36"
@@ -271,7 +280,7 @@ function FamilyAddFundPopout({ action, situation, wallet, familyData }) {
                       <div className="field w-full mb-[0.5rem]">
                         <div className="w-full">
                           <label
-                            htmlFor="Job Delivery Details"
+                            htmlFor="job-label"
                             className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
                           >
                             Comment

src/components/FamilyAcc/Tabs/wallet/VirtualAddCardFamilyPopout.jsx

@@ -0,0 +1,600 @@
+import { useEffect, useState } from "react";
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+import { useSelector } from "react-redux";
+import ModalCom from "../../../Helpers/ModalCom";
+import LoadingSpinner from "../../../Spinners/LoadingSpinner";
+import CustomTimer from "../../../countdown/CustomTimer";
+import InputCom from '../../../Helpers/Inputs/InputCom'
+import usersService from "../../../../services/UsersService";
+
+
+const validationSchema = Yup.object().shape({
+
+  country: Yup.string()
+    .required("Required"),
+  phone_number: Yup.string()
+    .min(9, "Invalid")
+    .max(11, "Invalid")
+    .required("Required"),
+  // birthYear: Yup.string()
+  //   .required("Required"),
+  // birthMonth: Yup.string()
+  //   .required("Required"),
+  // birthDay: Yup.string()
+  //   .required("Required"),
+  address: Yup.string()
+    .min(5, "Min 3 characters")
+    .max(50, "Max 25 characters")
+    .required("Required"),
+  city: Yup.string()
+    .min(2, "Min 3 characters")
+    .max(25, "Max 25 characters")
+    .required("Required"),
+  state: Yup.string()
+    .required("Required"),
+  zipCode: Yup.string()
+    .min(1, "Min 3 characters")
+    .max(8, "Max 8 characters")
+    .required("Required"),
+  dob: Yup.string()
+    .required("Required"),
+checked: Yup.bool() // use bool instead of boolean
+    .oneOf([true], "You must accept the terms and conditions")
+});
+
+const VirtualAddCardFamilyPopout = ({ details, onClose, situation, walletItem, familyData }) => {
+    // console.log('PROPS', 'DETAILS', details, 'WALLET', walletItem, 'FAMILYDATA', familyData)
+
+  const { userDetails } = useSelector((state) => state.userDetails);
+
+  const countryCode = walletItem?.country
+
+  const userApi = new usersService()
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status:false, message: ''})
+
+  const [allCountries, setAllCountries] = useState({loading: true, data: []}) // VARIABLE TO HOLD COUNTRY LIST
+
+  const [state, setState] = useState({loading: true, data: {}}) // VARIABLE TO HOLD STATE LIST
+
+  
+  let initialValues = {
+    // initial values for formik
+    country: countryCode ? countryCode : '',
+    phone_number: '',
+    email: userDetails?.email,
+    firstname: familyData?.firstname,
+    lastname: familyData?.lastname,
+    family_uid: familyData?.uid,    
+    birthYear: '',
+    birthMonth: '',
+    birthDay: '',
+    address: '',
+    city: '',
+    // city: userDetails?.city ? userDetails.city : '',
+    state: '',
+    zipCode: '',
+    dob: '',
+    checked: false
+  };
+
+  
+  const handleSubmit = (values) => {
+    let date = new Date(values.dob)
+    const reqData = {
+      request_type: '100',
+      address: values.address,
+      city: values.city,
+      state: values.state,
+      country: values.country,
+      postal_code: values.zipCode,
+      phone_number: values.phone_number,
+      family_uid: values.family_uid,
+      // dob_day: values.birthDay,
+      // dob_month: values.birthMonth,
+      // dob_year: values.birthYear,
+      dob_day: Number(date.getDate()),
+      dob_month: Number(date.getMonth()) + 1,
+      dob_year: Number(date.getFullYear()),
+      dob: values.dob
+    }
+    // console.log('Values', reqData)
+    setRequestStatus({loading: true, status:false, message: ''})
+    userApi.walletCardFamilyRequest(reqData).then(res => {
+      if(res?.data?.internal_return < 0){
+        setRequestStatus({loading: false, status:false, message: 'Failed, try again'})
+        setTimeout(()=>{
+          setRequestStatus({loading: false, status:true, message: ''})
+        },4000)
+        return 
+      }
+      setRequestStatus({loading: false, status:true, message: 'Successful'})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status:true, message: ''})
+        onClose()
+      },4000)
+    }).catch(err => {
+      console.log('ERR', err)
+      setRequestStatus({loading: false, status:false, message: 'Unable to complete'})
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status:false, message: ''})
+      },4000)
+    })
+  }
+
+  useEffect(()=>{
+      // Get Country Api
+    userApi.getSignupCountryData().then(res =>{
+    if(!res?.data?.result_list){
+      return setAllCountries({ loading: false, data: [] });
+    }
+    // if(countryCode){
+    //   return setAllCountries({ loading: false, data: res?.data?.result_list?.filter(item => item?.code == countryCode) });
+    // }
+    setAllCountries({ loading: false, data: res?.data?.result_list });
+    }).catch(err => {
+      setAllCountries({ loading: false, data: [] });
+      console.log('err', err)
+    })
+  },[])
+
+  useEffect(()=>{
+    // GET STATE API
+    setState({loading: true, data: {}})
+  userApi.getStateFromCountry({country: countryCode}).then(res =>{
+  if(!res?.data?.country_state){
+    return setState({ loading: false, data: {} });
+  }
+  setState({ loading: false, data: res?.data?.country_state});
+  }).catch(err => {
+    setState({ loading: false, data: {} });
+    console.log('err', err)
+  })
+},[initialValues.country])
+
+  return (
+    <ModalCom
+      action={onClose}
+      situation={situation}
+    >
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+      >
+        {(props) => (
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+            <Form className="w-full">
+              <div className="modal-header-con">
+                <h1 className="modal-title">
+                  {walletItem?.description}
+                </h1>
+                <button
+                  type="button"
+                  className="modal-close-btn"
+                  onClick={onClose}
+                >
+                  <svg
+                    width="36"
+                    height="36"
+                    viewBox="0 0 36 36"
+                    fill="none"
+                    className="fill-current"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                      fill=""
+                      fillOpacity="0.6"
+                    />
+                    <path
+                      d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                      fill="#"
+                      fillOpacity="0.6"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
+                <div className='pb-4'>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{familyData.lastname} {familyData.firstname}</h1>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
+                  {/* left part */}
+                  <div className='w-full flex flex-col gap-4'>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
+                        <div className="md:col-span-2 field w-full">
+                          <label
+                            htmlFor="country"
+                            className="job-label job-label-flex"
+                          >
+                            <span>Country</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}
+                            disabled={countryCode ? true : false}
+                          >
+                            {allCountries.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : allCountries.data?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select Country
+                              </option>
+                              {allCountries.data?.map(item => (
+                                <option key={item.uid} className="text-slate-500 text-lg" value={item.code}>
+                                  {item.country}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                          </select>
+                        </div>
+                        <div className='md:col-span-3'>
+                          <InputCom
+                          fieldClass="px-6"
+                          label="Phone Number"
+                          labelClass="tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="w-full input-curve lg border border-light-purple"
+                          type="text"
+                          name="phone_number"
+                          value={props.values.phone_number}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.phone_number && props.touched.phone_number) && props.errors.phone_number}
+                          />
+                        </div>
+                    </div>
+                    <InputCom
+                      disable={true}
+                      fieldClass="px-6"
+                      label="Email"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="email"
+                      value={props.values.email}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.email && props.touched.email) && props.errors.email}
+                    />
+                    <div className="hidden field w-full md:grid-cols-2 gap-4">
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Firstname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="firstname"
+                        value={props.values.firstname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.firstname && props.touched.firstname) && props.errors.firstname}
+                      />
+                      <InputCom
+                        disable={true}
+                        fieldClass="px-6"
+                        label="Lastname"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="lastname"
+                        value={props.values.lastname}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
+                      />
+                    </div>
+
+                    {/* hidden section */}
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthDay"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Day</span>
+                              {props.errors.birthDay && props.touched.birthDay && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthDay}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthDay"
+                              name="birthDay"
+                              value={props.values.birthDay}
+                              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}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {day.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthMonth"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Month</span>
+                              {props.errors.birthMonth && props.touched.birthMonth && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthMonth}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthMonth"
+                              name="birthMonth"
+                              value={props.values.birthMonth}
+                              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}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {month.map(item => (
+                                <option key={item.value} className="text-slate-500 text-lg" value={item.value}>
+                                  {item.name}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                          <div className="field w-full">
+                            <label
+                              htmlFor="birthYear"
+                              className="job-label job-label-flex"
+                            >
+                              <span>Year</span>
+                              {props.errors.birthYear && props.touched.birthYear && (
+                                <span className="text-[12px] text-red-500">
+                                  {props.errors.birthYear}
+                                </span>
+                              )}
+                            </label>
+                            <select
+                              id="birthYear"
+                              name="birthYear"
+                              value={props.values.birthYear}
+                              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}
+                            >
+                              <>
+                              <option className="text-slate-500 text-lg" value=''>
+                                  select
+                              </option>
+                              {year.map(item => (
+                                <option key={item} className="text-slate-500 text-lg" value={item}>
+                                  {item}
+                                </option>
+                              ))}
+                              </>
+                            </select>
+                          </div>
+                        </div>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
+                        <InputCom
+                          fieldClass="px-6"
+                          label="Date of Birth"
+                          labelClass="md:hidden tracking-wide"
+                          inputBg="bg-slate-100"
+                          inputClass="input-curve lg border border-light-purple"
+                          type="date"
+                          name="dob"
+                          value={props.values.dob}
+                          inputHandler={props.handleChange}
+                          error={(props.errors.dob && props.touched.dob) && props.errors.dob}
+                          maxDate={year[0] + '-12-31'}
+                          minDate={year[year?.length - 1] + '-01-01'}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* right part */}
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Address"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="address"
+                      value={props.values.address}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.address && props.touched.address) && props.errors.address}
+                    />
+                    <InputCom
+                      fieldClass="px-6"
+                      label="City"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="city"
+                      value={props.values.city}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.city && props.touched.city) && props.errors.city}
+                    />
+                    {/* <InputCom
+                      fieldClass="px-6"
+                      label="State/Province"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      inputClass="input-curve lg border border-light-purple"
+                      type="text"
+                      name="state"
+                      value={props.values.state}
+                      inputHandler={props.handleChange}
+                      error={(props.errors.state && props.touched.state) && props.errors.state}
+                    /> */}
+
+                    <div className="field w-full grid md:grid-cols-2 gap-4">
+                      <div className="field w-full">
+                        <label
+                          htmlFor="state"
+                          className="job-label job-label-flex"
+                        >
+                          <span>State/Province</span>
+                          {props.errors.state && props.touched.state && (
+                            <span className="text-[12px] text-red-500">
+                              {props.errors.state}
+                            </span>
+                          )}
+                        </label>
+                        <select
+                          id="state"
+                          name="state"
+                          value={props.values.state}
+                          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}
+                        >
+                          {state.loading ?
+                              <option className="text-slate-500 text-lg" value="">
+                                Loading...
+                              </option>
+                            : Object.keys(state.data)?.length > 0 ?
+                            <>
+                              <option className="text-slate-500 text-lg" value="">
+                                Select State
+                              </option>
+                              {Object.keys(state.data)?.map((item, index) => (
+                                <option key={index} className="text-slate-500 text-lg" value={item}>
+                                  {state?.data[item]}
+                                </option>
+                              ))}
+                            </>
+                            :
+                              <option className="text-slate-500 text-lg" value="">
+                                Not Found
+                              </option>
+                            }
+                        </select>
+                      </div>
+                  
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Zip Code"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        inputClass="input-curve lg border border-light-purple"
+                        type="text"
+                        name="zipCode"
+                        value={props.values.zipCode}
+                        inputHandler={props.handleChange}
+                        error={(props.errors.zipCode && props.touched.zipCode) && props.errors.zipCode}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className='p-4 w-full job-label'>
+                <div className='flex gap-4 items-center'>
+                    <input 
+                    type='checkbox' 
+                    name="checked"
+                    className='accent-purple w-4 h-4 p-2 text-purple bg-gray-100 border-gray-300 rounded focus:ring-purple' 
+                    onChange={props.handleChange}
+                    />
+                    <p className='text-[14px] text-justify'>
+                        I agree with the <span className='text-bue-600'>cardholder </span> 
+                        terms & conditions {props.errors.checked && props.touched.checked && <span className='text-[12px] text-red-500'>{props.errors.checked}</span>}
+                    </p>
+                </div>
+              </div>
+              {requestStatus.message &&
+              <div className='px-4 my-1'>
+                <p className={`text-center text-base py-1 font-bold ${requestStatus.status ? 'bg-emerald-600 text-white' : 'bg-red-100 text-red-600'}`}>{requestStatus.message}</p>
+              </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"
+                      onClick={onClose}
+                      className="custom-btn bg-[#f5a430] text-black text-base"
+                      >
+                      Cancel
+                      </button>
+
+                      <>
+                      {requestStatus.loading ?
+                      <LoadingSpinner size="6" color="sky-blue" />
+                      :
+                      <button
+                      type="submit"
+                      className="custom-btn btn-gradient text-base text-white"
+                      disabled={requestStatus.loading || requestStatus.status}
+                      >
+                      Continue
+                      </button>
+                      }
+                      </>
+                  </div>
+              </div>
+            </Form>
+          </div>
+        )}
+      </Formik>
+    </ModalCom>
+  );
+};
+
+export default VirtualAddCardFamilyPopout;
+
+
+
+const day = new Array(31).fill(0).map((_,i) => i+1 )
+
+const month = [
+  {value: 1, name: 'January'},
+  {value: 2, name: 'February'},
+  {value: 3, name: 'March'},
+  {value: 4, name: 'April'},
+  {value: 5, name: 'May'},
+  {value: 6, name: 'June'},
+  {value: 7, name: 'July'},
+  {value: 8, name: 'August'},
+  {value: 9, name: 'September'},
+  {value: 10, name: 'October'},
+  {value: 11, name: 'November'},
+  {value: 12, name: 'December'},
+]
+
+const date = new Date().getFullYear()
+
+const year = new Array(100).fill(0).map((_,i) =>  (date-2) - i+1 )

src/components/FamilyAcc/Tabs/wallet/Wallet.jsx

@@ -2,9 +2,32 @@ import React, { useState } from 'react'
 import { localImgLoad } from '../../../../lib'
 import { PriceFormatter } from '../../../Helpers/PriceFormatter'
 import FamilyAddFundPopout from './FamilyAddFundPopout'
+import VirtualAddCardFamilyPopout from './VirtualAddCardFamilyPopout'
 
 function Wallet({wallet, familyData, setFamilyWalletReload}) {
     const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
+    // console.log('WALLET', wallet.brand)
+
+    // virtual add card popout
+    const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); 
+
+    /*OPENS the virtual add card popout*/
+    const openVirtualPopUp = (value) => {
+      setVirtualPopup({
+        show: true,
+        data: { ...value },
+      });
+    };
+
+    /*Closes the virtual add card popout*/
+    const closeVirtualPopUp = () => {
+      setVirtualPopup({ show: false, data: {} });
+      // dispatch(tableReload({ type: "WALLETTABLE" }));
+    };
+
+  // console.log('Extra Actions', Object.keys(wallet.extra_actions))
+  let extraActions = Object.keys(wallet.extra_actions) // VARIABLE TO HOLD EXTRA ACTIONS VALUES
+
   return (
     <div className='w-full p-4 bg-[aliceblue] rounded-lg'
     // style={{
@@ -14,28 +37,39 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
     <div className="w-full flex justify-start items-center gap-3">
       <div className="min-w-[50px] min-h-[50px] max-w-min md:max-w-[80px] max-h-min md:max-h-[80px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
         <img
-          src={localImgLoad(`images/currency/${(wallet.code).toLowerCase()}.svg`)}
+          src={wallet.icon}
           className="w-full h-full"
           alt="currency-icon"
         />
       </div>
       <div className="w-full flex flex-col">
-        <div className="w-full flex gap-2">
-          <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
-            Balance:
-          </p>
-          <p 
-            className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
-            // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
-            >
-            {PriceFormatter(
-              Number(wallet.amount) * 0.01,
-              wallet.code,
-              wallet.country,
-              ""
-            )}
-          </p>
-        </div>
+        {wallet?.brand && wallet?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+          <div className="w-full flex flex-col gap-2">
+            {/* <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
+              Balance:
+            </p> */}
+            <p className="text-base md:text-lg font-bold text-purple leading-10">
+              {wallet.brand} <span> **** **** ***** </span> {wallet?.card_last4}
+            </p>
+          </div>
+          :
+          <div className="w-full flex gap-2">
+            <p className="text-base md:text-lg text-thin-light-gray tracking-wide">
+              Balance:
+            </p>
+            <p 
+              className="text-base md:text-lg font-bold text-purple tracking-wide leading-10"
+              // className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125"
+              >
+              {PriceFormatter(
+                Number(wallet.amount) * 0.01,
+                wallet.code,
+                wallet.country,
+                ""
+              )}
+            </p>
+          </div>
+        }
         {/* BTN */}
         <div className='mt-1 flex justify-end items-center gap-2'>
             <button
@@ -47,13 +81,28 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
             >
                 Add Money
             </button>
-            <button
-                className="w-[150px] h-[48px] rounded-full text-base text-white bg-[#4687ba] hover:bg-[#009ef7]"
-                name="plan"
-                // onClick={onClose}
-            >
-                Plan Wallet
-            </button>
+            
+            {/* EXTRA ACTIONS BTN */}
+            {(extraActions && extraActions?.length > 0) &&
+              extraActions.map((action, index) => (
+                <div key={index}>
+                  <button
+                    onClick={() => { 
+                      action == 'ADD_VIRTUAL_CARD' ? 
+                      openVirtualPopUp({wallet})
+                      :
+                      ()=>{}
+                    }}
+                    className={`w-[150px] h-[48px] rounded-full text-base text-white bg-[#4687ba] hover:bg-[#009ef7]`}
+                  >
+                    {/* Add Card */}
+                    {wallet?.extra_actions?.[action][0]?.text}
+                  </button>
+                  {/* <WalletExtraFamilyActionBtn /> // TO BE USED lATER IF NEED BE */}
+                </div>
+              ))
+            }
+
         </div>
       </div>
     </div>
@@ -70,6 +119,17 @@ function Wallet({wallet, familyData, setFamilyWalletReload}) {
             familyData={familyData}
         />
     }
+
+    {/* VIRTUAL CARD POPOUT */}
+    {virtualPopup.show && (
+      <VirtualAddCardFamilyPopout
+        details={virtualPopup.data}
+        walletItem={wallet}
+        onClose={closeVirtualPopUp}
+        situation={virtualPopup.show}
+        familyData={familyData}
+      />
+    )}
 </div>
   )
 }

src/components/FamilyAcc/index.jsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { Link } from "react-router-dom";
+import { Link, useOutletContext } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
@@ -16,13 +16,16 @@ import FamilyTable from "./FamilyTable";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 
 export default function FamilyAcc() {
+
+  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 [familyList, setFamilyList] = useState({});
+  // const [loader, setLoader] = useState(false);
   const [popUp, setPopUp] = useState(false);
-  const [listReload, setListReload] = useState(false);
+  // const [listReload, setListReload] = useState(false);
   const [msgErr, setMsgErr] = useState("");
   const [formData, setFormData] = useState({
     first_name: "",
@@ -101,34 +104,34 @@ export default function FamilyAcc() {
     }
   };
 
-  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]);
+  // 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]);
+  // useEffect(() => {
+  //   let checkMemberList = true;
+  //   if (checkMemberList) {
+  //     memberList();
+  //   }
+  //   return () => {
+  //     checkMemberList = false;
+  //   };
+  // }, [listReload, memberList]);
 
   return (
     <Layout>
@@ -177,7 +180,7 @@ export default function FamilyAcc() {
                 </span>
               </Link>
               <Link
-                to={`/familysettings`}
+                to={`/acc-family/familysettings`}
                 state={{ imageServer: familyList?.session_image_server }}
                 className="slider-btns flex space-x-4 w-12 h-12 rounded-md shadow-sm justify-center items-center cursor-pointer dark:bg-[linear-gradient(134.38deg,#f539f8_0%,#c342f9_43.55%,#5356fb_104.51%)] bg-[#76a5df] text-white"
               >
@@ -248,13 +251,13 @@ const FamilyForm = ({
 }) => {
   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="logout-modal-header 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 dark:border-[#5356fb29] ">
-        <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+      <div className="modal-header-con">
+        <h1 className="modal-title">
           Add Members
         </h1>
         <button
           type="button"
-          className="text-[#374557] dark:text-red-500"
+          className="modal-close-btn"
           onClick={popUpHandler}
         >
           <CloseIcon />
@@ -267,8 +270,8 @@ const FamilyForm = ({
           name="first_name"
           type="text"
           parentClass="flex items-center gap-1 w-full"
-          labelClass="flex-[0.2] mb-0"
-          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
+          labelClass="flex-[0.4] mb-0"
+          inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
           fieldClass="px-2"
           value={first_name}
           inputHandler={inputHandler}
@@ -279,8 +282,8 @@ const FamilyForm = ({
           name="last_name"
           type="text"
           parentClass="flex items-center gap-1 w-full"
-          labelClass="flex-[0.2] mb-0"
-          inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
+          labelClass="flex-[0.4] mb-0"
+          inputClass="flex-[0.6] input-curve lg border border-[#dce4e9]"
           fieldClass="px-2"
           value={last_name}
           inputHandler={inputHandler}
@@ -289,7 +292,7 @@ const FamilyForm = ({
           {/* Age dropdown */}
           <div className="">
             <label
-              className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+              className="job-label"
               htmlFor="age-selection"
             >
               Birthday: (Year/Month)

src/components/FamilyPopup/SuggestTask.jsx

@@ -19,7 +19,8 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     setSuggestedNextStep(value);
   };
 
-  const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
+  // const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
+  const selectedImage = require(`../../assets/images/family/${details ? details.banner : 'default.jpg'}`);
   const initialValues = {
     title: details?.title || "",
     description: details?.description || "",
@@ -80,13 +81,11 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
     }
   };
 
-  console.log(details);
-
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lw-[90%] md:w-[48rem] h-full lg:h-[627px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[1.875rem] py-[1.4375rem] border-b dark:border-[#5356fb29]  border-light-purple">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+      <div className="logout-modal-wrapper lw-[90%] md:w-[48rem] min-h-[500px] bg-white dark:bg-dark-white lg:rounded-2xl">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             {isManageFamilyPage
               ? `${state?.firstname}'s Suggested Task`
               : isActivitiesPage
@@ -95,7 +94,7 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={onClose}
           >
             <svg
@@ -179,10 +178,10 @@ const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
                     </div>
 
                     {/* Description */}
-                    <div className="field w-full mb-[.3125rem]">
+                    <div className="w-full mb-[.3125rem]">
                       <label
                         htmlFor="description"
-                        className='input-label text-[#181c32] dark:text-white text-[1.125rem] leading-[1.3102rem] font-semibold flex items-center gap-1'
+                        className='job-label'
                       >
                         Description
                         {props.errors.description &&

src/components/Helpers/DataIteration.jsx

@@ -7,7 +7,7 @@ function DataIteration(props) {
       {datas &&
         datas?.length >= endLength &&
         datas?.slice(startLength, endLength)
-          .map((value) => children({ datas: value }))}
+          .map((value, index) => children({ datas: value, index }))}
     </>
   );
 }

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -28,7 +28,9 @@ export default function InputCom({
   direction,
   tabIndex,
   error,
-  autoComplete="on"
+  autoComplete="on",
+  minDate='1900-01-01',
+  maxDate='2099-09-13'
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -54,7 +56,7 @@ export default function InputCom({
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
         {label && (
           <label
-            className={`input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1 ${labalClass}`}
+            className={`job-label ${error && 'job-label-flex'} ${labalClass}`}
             htmlFor={name}
           >
             {label}
@@ -90,27 +92,51 @@ export default function InputCom({
             : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa]  border"
         }`}
       >
-        <input
-          placeholder={placeholder}
-          value={value}
-          onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA] dark:bg-[#11131F] dark:text-white tracking-wide"
-          } focus:ring-0 focus:outline-none ${fieldClass}`}
-          type={type}
-          id={name}
-          name={name}
-          onInput={onInput}
-          minLength={minLengthValidation()}
-          maxLength={maxLengthValidation()}
-          tabIndex={tabIndex}
-          // pattern={inputPatterns()}
-          ref={inputRef}
-          readOnly={disable}
-          onBlur={blurHandler}
-          dir={direction}
-          autoComplete={autoComplete}
-        />
+        <>
+          {type == 'date' ?
+          <input
+            placeholder={placeholder}
+            value={value}
+            onChange={inputHandler}
+            className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
+              inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
+            type={type}
+            id={name}
+            name={name}
+            onInput={onInput}
+            min={minDate}
+            max={maxDate}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          :
+          <input
+            placeholder={placeholder}
+            value={value}
+            onChange={inputHandler}
+            className={`input-field placeholder:text-base text-dark-gray w-full h-full ${iconName && 'pr-6'} ${
+              inputBg && inputBg} tracking-wide focus:ring-0 focus:outline-none ${fieldClass}`}
+            type={type}
+            id={name}
+            name={name}
+            onInput={onInput}
+            minLength={minLengthValidation()}
+            maxLength={maxLengthValidation()}
+            tabIndex={tabIndex}
+            // pattern={inputPatterns()}
+            ref={inputRef}
+            readOnly={disable}
+            onBlur={blurHandler}
+            dir={direction}
+            autoComplete={autoComplete}
+          />
+          }
+        </>
         {iconName && (
           <div className="absolute right-6 bottom-3 z-10 flex gap-2">
             {iconName.split(" ").map((item, index) => (

src/components/Helpers/ModalCom.jsx

@@ -14,9 +14,9 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
     <div className="modal-com">
       <div
         onClick={action || isOpen}
-        className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
+        className="fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
+      <div className={`fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>

src/components/Helpers/PriceFormatter.jsx

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

src/components/History/JobsCompleted.jsx

@@ -7,13 +7,14 @@ import PaginatedList from '../../components/Pagination/PaginatedList';
 
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';
+import {NewDateTimeFormatter} from '../../lib/NewDateTimeFormatter'
 
 function JobsCompleted() {
 
     const apiCall = new usersService()
 
-    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+    let [jobHistory, setJobHistory] = useState({ // FOR PURCHASE HISTORY
         loading: true,
         data: [],
         error: false
@@ -22,7 +23,7 @@ function JobsCompleted() {
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentReward = jobHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
@@ -31,18 +32,15 @@ function JobsCompleted() {
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
     const getJobCompletedHistory = ()=>{
-        // apiCall.getFamilyRewardHx().then((res)=>{
-        //     if(res.data.internal_return < 0){ // success but no data
-        //         setFamilyRewardHistory(prev => ({...prev, loading: false}))
-        //         return
-        //     }
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
-        // }).catch((error)=>{
-        //     setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
-        // })
-        setTimeout(()=>{
-            setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
-        },3000)
+        apiCall.getContractHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setJobHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setJobHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setJobHistory(prev => ({...prev, loading: false, error: true}))
+        })
     }
 
     useEffect(()=>{
@@ -50,43 +48,42 @@ function JobsCompleted() {
       }, [])
 
   return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
-    {familyRewardHistory.loading ? 
+    <div className='py-4 flex flex-col justify-between min-h-[500px]'>
+    {jobHistory?.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
-    : familyRewardHistory.data.length ?
+    : jobHistory?.data?.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4">Title</th>
+            <th className="p-4 text-right">Amount</th>
+            {/* <th className="p-4">Date</th>
+            <th className="p-4">Contract</th> */}
             </tr>
         </thead>
         <tbody>
-            {currentReward.map((item, index) => {
-                let date = new Date(item.added).toLocaleDateString()
+            {currentReward?.map((item, index) => {
+                let date = new Date(item?.delivery_date).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4 w-full">
                             <div className='flex items-center gap-2'>
-                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
+                                {/* <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' /> */}
                                 <div className='flex flex-col'>
-                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
-                                    <p className='text-sm'>{item.description}</p>
+                                    <h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
+                                    <p className='text-sm line-clamp-2'>{item?.description}</p>
+                                    <p className='text-sm line-clamp-2'>{NewDateTimeFormatter(item?.delivery_date)}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4 flex text-right justify-end items-center">{currencySymbol(item?.currency_code, item?.price*0.01)}</td>
                     </tr>
                 )
             }
             )}
         </tbody>
     </table>
-    :familyRewardHistory.error ?
+    :jobHistory?.error ?
     <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
         <span>Opps! an error occurred. Please try again!</span>
     </div>
@@ -97,7 +94,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import React, {memo, useCallback, useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
 import usersService from '../../services/UsersService';
@@ -7,10 +7,10 @@ import PaginatedList from '../../components/Pagination/PaginatedList';
 
 import LoadingSpinner from '../Spinners/LoadingSpinner';
 
-import { AmountTo2DP } from '../Helpers/PriceFormatter';
+import { currencySymbol } from '../Helpers/PriceFormatter';
 
-function RewardsTable() {
 
+export const RewardsTable = memo(() => {
     const apiCall = new usersService()
 
     let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
@@ -30,7 +30,7 @@ function RewardsTable() {
 
 
     //FUNCTION TO GET FAMILY REWARD HISTORY
-    const getFamilyRewardHistory = ()=>{
+    const getFamilyRewardHistory = useCallback(()=>{
         apiCall.getFamilyRewardHx().then((res)=>{
             if(res.data.internal_return < 0){ // success but no data
                 setFamilyRewardHistory(prev => ({...prev, loading: false}))
@@ -40,43 +40,43 @@ function RewardsTable() {
         }).catch((error)=>{
             setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
         })
-    }
+    },[])
 
     useEffect(()=>{
         getFamilyRewardHistory()
       }, [])
 
   return (
-    <div className='flex flex-col justify-between min-h-[500px]'>
+    <div className='py-4 flex flex-col justify-between min-h-[500px] w-full overflow-x-auto'>
     {familyRewardHistory.loading ? 
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4 text-center">Amount</th>
+            <th className="p-4 text-center">Date</th>
+            <th className="p-4 text-center">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
-                            <div className='flex items-center gap-2'>
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4 min-w-[300px]">
+                            <div className='flex w-full items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
-                                <div className='flex flex-col'>
+                                <div className='flex flex-col w-full'>
                                     <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
                                     <p className='text-sm'>{item.description}</p>
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4 text-right flex-nowrap">{currencySymbol(item.currency, item.amount*0.01)}</td>
+                        <td className="p-4 text-center">{date}</td>
+                        <td className="p-4 text-center">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -99,5 +99,5 @@ function RewardsTable() {
     </div>
   )
 }
-
+)
 export default RewardsTable

src/components/History/index.jsx

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

src/components/Home/FamilyDash.jsx

@@ -6,15 +6,15 @@ import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import { useDispatch, useSelector } from "react-redux";
 import { tableReload } from "../../store/TableReloads";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import HomeModal from "./HomeModal";
 
-export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
-  // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+export default function FamilyDash() {
 
   const dispatch = useDispatch();
+
+  const [firstTimeModal, setFirstTimeModal] = useState(true)
   
   const userApi = new usersService();
-
-  // const trending = MyActiveJobList;
   
   const { familyBannersList } = useSelector((state) => state.familyBannersList);
 
@@ -22,121 +22,98 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  let [reloadBanner, setReloadBanner] = useState(0)
-
-  useEffect(()=>{
-    if(reloadBanner >= 2){
-      dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS
-      setReloadBanner(0)
-    }
-    const timer = setInterval(()=>{
-      setReloadBanner(prev => prev+1)
-    },300000)
-
-    return ()=>{
-      clearInterval(timer)
-    }
-  },[reloadBanner])
-
   return (
-    <div>
-      <div className="home-page-wrapper">
-        {/* Header */}
-        <div className="text-white mb-4 min-h-[3rem] px-2 w-full flex justify-between items-center rounded-xl bg-family-header-bg">
-          <div className="w-full">
-            <div className="w-full flex flex-wrap gap-x-4 ">
-              <p className="text-lg font-normal leading-5">Welcome</p>
-              <div className="">
-                <h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+    <>
+      <div>
+        <div className="home-page-wrapper">
+          {/* Header */}
+          <div className="text-white mb-4 min-h-[3rem] px-2 w-full flex justify-between items-center rounded-xl bg-family-header-bg">
+            <div className="w-full">
+              <div className="w-full flex flex-wrap gap-x-4 ">
+                <p className="text-xl font-normal leading-5">Welcome</p>
+                <div className="">
+                  <h1 className="text-xl font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
+                </div>
               </div>
             </div>
+            <div className="py-1 w-full text-base text-right self-end">
+              <p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
+            </div>
           </div>
-          <div className="py-1 w-full text-sm text-right self-end">
-            <p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
-          </div>
-        </div>
 
-        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
-        <>
-          {familyBannersList?.loading ?
-          <div className="w-full bg-white rounded-2xl">
-            <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
-          </div>
-          :
-          familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 ?
-            // Loop for Family Banners
-            <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
-              {Object.keys(familyBannersList?.result_list).map((item, index) => {
-                let content = familyBannersList?.result_list[item]
-                // let action = item == 'recommend' ? 'familymarket' : 'mytask'
-                return (
-                  <Link key={item} to={`/${content.banner.action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
-                    <div className="h-full w-full">
-                      <img className="w-full h-[10rem] object-cover rounded-t-xl" src={content.banner.image} alt='banner image' />
-                      <div className="flex flex-col justify-between">
-                        <div className="px-2 py-2 border-b border-transparent min-h-[4rem] flex flex-col gap-1">
-                          <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
-                          <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
-                        </div>
-                      </div>
-                    </div>
-                  </Link>
-                )
-              })}
+          {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
+          <>
+            {familyBannersList?.loading ?
+            <div className="w-full bg-white rounded-2xl">
+              <LoadingSpinner size='10' color='sky-blue' height='h-[20rem]' />
             </div>
             :
-            null
-          }
-          
-          {tab_categories?.data &&
-          <div className="mb-4">
-            <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
-            <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
-              {tab_categories.data.map((item) => {
-                // if(item.enabled){
-                // }
-                return (
-                  <Link key={item.uid} to={`/${item?.action}`} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
-                    <div className="h-full w-full">
-                      <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
-                        <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />
-                      </div>
-                      <div className="flex flex-col justify-between">
-                        <div className="px-2 py-1 border-b border-transparent min-h-[2rem] flex justify-between items-center gap-1">
-                          <h1 className="text-lg text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
-                          <div className="flex justify-center gap-1">
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
-                            <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+            familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 ?
+              // Loop for Family Banners
+              <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
+                {Object.keys(familyBannersList?.result_list).map((item, index) => {
+                  let content = familyBannersList?.result_list[item]
+                  // let action = item == 'recommend' ? 'familymarket' : 'mytask'
+                  return (
+                    <Link key={item} to={`/${content.banner.action}`} className={`rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                      <div className="h-full w-full">
+                        <img className="w-full h-[10rem] object-cover rounded-t-xl" src={content.banner.image} alt='banner image' />
+                        <div className="flex flex-col justify-between">
+                          <div className="px-2 py-2 border-b border-transparent min-h-[4rem] flex flex-col gap-1">
+                            <h1 className="text-xl text-[#083e21] dark:text-white font-bold tracking-wide">{content.banner.text}</h1>
+                            <p className="text-base text-black dark:text-white">{content.banner.description}</p>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  </Link>
+                    </Link>
                   )
                 })}
+              </div>
+              :
+              null
+            }
+            
+            {tab_categories?.data &&
+            <div className="mb-4">
+              <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
+              <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+                {tab_categories.data.map((item) => {
+                  // if(item.enabled){
+                  // }
+                  return (
+                    <Link key={item.uid} to={`/${item?.action}`} className={`group rounded-xl bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                      <div className="h-full w-full">
+                        <div className="w-full h-[8rem] rounded-t-xl overflow-hidden">
+                          <img className="w-full h-full group-hover:scale-110 object-cover transition-all duration-300" src={item?.banner} alt='banner image' />
+                        </div>
+                        <div className="flex flex-col justify-between">
+                          <div className="px-2 py-1 border-b border-transparent min-h-[2rem] flex justify-between items-center gap-1">
+                            <h1 className="text-xl text-[#083e21] dark:text-white font-bold tracking-wide">{item?.content}</h1>
+                            <div className="flex justify-center gap-1">
+                              <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                              <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                              <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </Link>
+                    )
+                  })}
+              </div>
             </div>
-          </div>
+            }
+          </>
           }
-        </>
-        }
-
-        {/* {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
-          <MyOffersFamilyTable
-            familyOffers={familyOffers?.result_list}
-            image_server={familyOffers?.session_image_server}
-            className="mb-10"
-          />
-        )} */}
-
-        {/* {trending && trending.length > 0 && (
-          <FamilyActiveLSlde
-            trending={trending}
-            className="mb-10"
-            image_server={serverImg}
-          />
-        )} */}
+        </div>
       </div>
-    </div>
+
+      
+      {/* last_login */}
+
+      {(!familyBannersList?.loading && firstTimeModal) &&
+        <HomeModal userDetails={userDetails} action={()=>setFirstTimeModal(prev => !prev)} situation={firstTimeModal} />
+      }
+    </>
   );
 }

src/components/Home/FullAccountDash.jsx

@@ -22,7 +22,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "FAMILY_PARENT_DASH":
@@ -31,7 +30,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "WORKER_HOME_DASH":
@@ -40,7 +38,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "JOBOWNER_HOME_DASH":
@@ -49,7 +46,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       default:
@@ -62,16 +58,18 @@ export default function FullAccountDash(props) {
       <div className="home-page-wrapper">
         {renderDashboard()}
         {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
-          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} offersList={props.offersList} imageServer={props.imageServer} />
         )}
 
-        {props?.dashTypes !== "undefined" &&
+        {/* {props?.dashTypes !== "undefined" &&
         props.offersList?.data?.result_list?.length ? (
           <MyOffersTable
             MyActiveOffersList={props.offersList?.data}
             className="mb-10"
           />
-        ) : props.MyActiveJobList?.data?.length ? (
+        ) 
+        : 
+        props.MyActiveJobList?.data?.length ? (
           <>
             <div className="w-full mb-5 flex justify-between items-center gap-1">
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
@@ -84,7 +82,7 @@ export default function FullAccountDash(props) {
               imageServer={props.offersList?.data?.session_image_server}
             />
           </>
-        ) : null}
+        ) : null} */}
       </div>
     </>
   );

src/components/Home/HomeActivities.jsx

@@ -49,11 +49,11 @@ export default function HomeActivities({ className }) {
     getRecentActivities();
   }, []);
 
-  console.log(recentActivitiesData);
+  // console.log(recentActivitiesData);
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
+      className={`update-table w-full bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
         className || ""
       }`}
     >

src/components/Home/HomeModal.jsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import ModalCom from '../Helpers/ModalCom'
+import ModalBG from '../../assets/images/modalbg.png'
+
+export default function HomeModal({userDetails, action, situation}) {
+
+  const {firstname, lastname} = userDetails
+
+    const options = [
+        'Suggest Task to Parent', 'Suggest Task to Parent'
+    ]
+
+    const onSelectOption = () => {
+        action()
+    }
+
+  return (
+    <>
+      <div className=''>
+        <div className='fixed top-0 left-0 bottom-0 w-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50'></div>
+        <div className='fixed h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center overflow-y-auto'>
+          <div className="relative w-11/12 md:w-[600px] lg:w-[992px] rounded-2xl overflow-hidden">
+            <div className='relative p-4 bg-sky-blue flex items-center'>
+              <img className='block w-2/3 max-w-lg mx-auto' src={ModalBG} alt='modal image' />
+              <div className='absolute text-white top-5 right-5'>
+                <button
+                  type="button"
+                  className="text-white"
+                  onClick={onSelectOption}
+                >
+                  <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>
+            <div className='p-4 bg-slate-100'>
+              <div className='w-2/3 max-w-5xl mx-auto flex flex-col gap-4 tracking-wider'>
+                {/* <h1 className='text-3xl'>Welcome to <span className='font-semibold'>WrenchBoard</span></h1> */}
+                <h1 className='text-3xl'>Welcome <span className='font-semibold'>{firstname} {lastname}</span></h1>
+                <p className='text-2xl'>
+                  Here's where you can explore informative vidoes that provide valuable insight
+                  into <span className='font-semibold'>how you can connect with siblings and family and explore more on personal development</span>
+                </p>
+                <div className='self-end'>
+                  <button onClick={onSelectOption} className='bg-sky-blue px-4 py-2 text-xl text-white rounded-lg'>Done</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/Home/index.jsx

@@ -1,94 +1,55 @@
 import React, { useState, useEffect } from "react";
+import {Navigate} from 'react-router-dom'
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
+import LoadingSpinner from '../../components/Spinners/LoadingSpinner'
+import { tableReload } from '../../store/TableReloads';
 
 export default function Home(props) {
- // console.log("PROPS IN HOME->", props);
-  const userApi = new usersService();
+
+  const dispatch = useDispatch()
+
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-
-  let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
-
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
-  // const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
-
-  const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
-    try {
-      const res = await userApi.getMyActiveTaskList();
-      setMyActiveJobList({loading:false, data:res?.data?.result_list});
-      // setMyActiveJobList(res?.data?.result_list);
-    } catch (error) {
-      setMyActiveJobList({loading:false, data:[]});
-      // setMyActiveJobList([]);
-      console.log("Error getting tasks");
+  useEffect(()=>{
+    if(!commonHeadBanner.loading && (!commonHeadBanner?.data || Object.keys(commonHeadBanner?.data).length < 1)){
+      dispatch(tableReload({ type: "HOMEBANNERS" })); // reloads home banner in case it fails to load or encounters error while loading
     }
-  };
-
-  // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
-  const getHomeDate = () => {
-    userApi
-      .getHomeDate()
-      .then((res) => {
-        if (res.status != 200 || res.internal_return < 0) {
-          return;
-        }
-        setNextDueTask(res.data);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
-
-  const getMyOffersList = async () => {
-    try {
-      const res = await userApi.getOffersList();
-      setMyOffersList({loading:false, data:res.data});
-    } catch (error) {
-      setMyOffersList({loading:false, data:[]});
-      console.log("Error getting offers", error);
-    }
-  };
-
-  useEffect(() => {
-    const fetchData = async () => {
-      await Promise.all([getHomeDate(), getMyOffersList(), getMyActiveJobList()]);
-    };
-    if(userDetails?.account_type == 'FULL'){
-      fetchData();
-    }
-  }, []);
+  },[])
 
   return (
     <Layout>
-      <div className="home-page-wrapper">
+      <div className="w-full">
+        <>
         {userDetails && userDetails?.account_type == "FAMILY" ? (
           <FamilyDash
             account={userDetails}
-            commonHeadData={props.bannerList}
-            // familyOffers={MyOffersList?.data}
-            serverImg = {userDetails?.session_image_server}
-            // MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
-          <FullAccountDash
-            nextDueTask={nextDueTask}
-            bannerList={props.bannerList}
-            dashTypes={props.dashTypes}
-            offersList={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
-          />
+          <>
+              {commonHeadBanner.loading ?
+                <LoadingSpinner height='h-48' size='16' />
+                :
+                <FullAccountDash
+                  bannerList={commonHeadBanner?.data?.result_list}
+                  dashTypes={commonHeadBanner?.data?.home_dash_type}
+                  offersList={commonHeadBanner?.data?.offers_list}
+                  imageServer={commonHeadBanner?.data?.session_image_server}
+                />
+              }
+          </>
         ) : (
-          <div>
-            You are not logged in or your account type is not supported.
-          </div>
+          // <div>
+          //   You are not logged in or your account type is not supported.
+          // </div>
+          <Navigate to='/login' />
         )}
+        </>
       </div>
     </Layout>
   );