added link icons

.env

@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
 
-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -64,12 +63,39 @@ REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
 # /* 'client_id' => */ 'com.wrenchboard.users.client',
 # /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
 # /* 'redirect_uri' => */ site_url('login/auth/apple')
+#SOCIALS Links Display
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
+#File Handling
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
+#Auth Text(s)
 REACT_APP_LOGOUT_TEXT="Sign Out"
 
-
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+#Cards Handling
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+#Family
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.development

@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
 
-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -43,4 +42,28 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
-REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=1

.env.production

@@ -24,7 +24,6 @@ REACT_APP_SESSION_EXPIRE_CHECKER=60000
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
 
-REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
 
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
@@ -50,4 +49,27 @@ DISABLE_ESLINT_PLUGIN=true
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
-REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_LOGOUT_TEXT="Sign Out"
+REACT_APP_APPLE_SOCIAL_LOGIN=0
+REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
+
+REACT_APP_MAX_CREDIT_CARDS=4
+REACT_APP_MAX_CREDIT_BANK_ACCOUNT=4
+
+REACT_APP_MAX_FAMILY_MEMBERS=8
+
+REACT_APP_SHOW_OFFER_GROUP_JOB=0
+
+#UPLOAD PROFILE PICTURE
+REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
+
+#GOOGLE RECAPTCHA SITEKEY
+REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
+#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+
+#FAMILY MEMBER MINIMUM AGE
+REACT_APP_FAMILY_MINIMUM_AGE=4
+REACT_APP_FAMILY_MAXIMUM_AGE=18
+
+#CHANGE LOGIN LAYOUT
+REACT_APP_NEW_LOGIN_LAYOUT=0

.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+#package-lock.json
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package-lock.json

@@ -22,13 +22,17 @@
         "flutterwave-react-v3": "^1.3.0",
         "formik": "^2.2.9",
         "react": "^18.2.0",
+        "react-apple-login": "^1.1.6",
         "react-chartjs-2": "^4.1.0",
         "react-countup": "^6.2.0",
         "react-dom": "^18.2.0",
+        "react-google-recaptcha": "^3.1.0",
+        "react-qr-code": "^2.0.11",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.0.2",
         "react-scripts": "5.0.1",
         "react-slick": "^0.29.0",
+        "react-to-print": "^2.14.12",
         "react-toastify": "^9.0.1",
         "redux": "^4.2.0",
         "slick-carousel": "^1.8.1",
@@ -14801,6 +14805,11 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -14944,6 +14953,32 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/react-apple-login": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/react-apple-login/-/react-apple-login-1.1.6.tgz",
+      "integrity": "sha512-ySV6ax0aB+ksA7lKzhr4MvsgjwSH068VtdHJXS+7rL380IJnNQNl14SszR31k3UqB8q8C1H1oyjJFGq4MyO6tw==",
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.5.4",
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-chartjs-2": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
@@ -15044,11 +15079,41 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.12.tgz",
+      "integrity": "sha512-k+pzP5CKLEGBRwZsDPp98/CAJeXlsYRHM2iZn1Sd5Th/HnKhIZCSg27PXO58zk8z02RaEryg+60xa4vyywMJwg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x",
+        "react-native-svg": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-svg": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -15218,6 +15283,15 @@
         "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-to-print": {
+      "version": "2.14.15",
+      "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.14.15.tgz",
+      "integrity": "sha512-SKnwOzU2cJ8eaAkoJO7+gNhvfEDmm+Y34IdcHsjtHioUevUPhprqbVtvNJlZ2JkGJ8ExK2QNWM9pXECTDR5D8w==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-qr-code": "^2.0.11",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.0.2",

public/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/App.jsx

@@ -1,16 +1,22 @@
 import Toaster from "./components/Helpers/Toaster";
 import Routers from "./Routers";
 import Default from "./components/Partials/Default";
+import { Navigate, useLocation } from "react-router-dom";
 
 function App() {
-  return (
-      <Default>
-          <>
-              <Routers />
-              <Toaster />
-          </>
-      </Default>
-  );
+    const {pathname} = useLocation()
+    return (
+        <Default>
+            <>
+            {pathname.startsWith('/@') ?
+                <Navigate to="/app" replace={true} />
+            :
+                <Routers />
+            }
+                <Toaster />
+            </>
+        </Default>
+    );
 }
 
 export default App;

src/Routers.jsx

@@ -8,9 +8,11 @@ import AcitveBidsPage from "./views/AcitveBidsPage";
 import AuthProfilePage from "./views/AuthProfilePage";
 import CollectionItemPage from "./views/CollectionItemPage";
 import ForgotPasswordPages from "./views/ForgotPasswordPages";
+import ForgotPasswordPagesTwo from "./views/ForgotPasswordPagesTwo";
 import HistoryPage from "./views/HistoryPage";
 import HomePages from "./views/HomePages";
 import LoginPage from "./views/LoginPage";
+import LoginPageTwo from "./views/LoginPageTwo";
 import MarketPlacePage from "./views/MarketPlacePage";
 import MyWalletPage from "./views/MyWalletPage";
 import SavedPage from "./views/SavedPage";
@@ -18,11 +20,15 @@ import SellPage from "./views/SellPage";
 import SettingsPage from "./views/SettingsPage";
 import ShopDetailsPage from "./views/ShopDetailsPage";
 import SignupPage from "./views/SignupPage";
+import SignupPageTwo from "./views/SignupPageTwo";
 import UpdatePasswordPages from "./views/UpdatePasswordPages";
+import UpdatePasswordPagesTwo from "./views/UpdatePasswordPagesTwo";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
+import VerifyYouPagesTwo from "./views/VerifyYouPagesTwo";
 import VerifyPasswordPages from "./views/VerifyPasswordPages";
+import VerifyPasswordPagesTwo from "./views/VerifyPasswordPagesTwo";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -31,6 +37,7 @@ import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
 import VerifyLinkPages from "./views/VerifyLinkPages";
+import VerifyLinkPagesTwo from "./views/VerifyLinkPagesTwo";
 import MyActiveJobsPage from "./views/MyActiveJobsPage";
 import FamilyAccPage from "./views/FamilyAccPage";
 import StartJob from "./components/MyJobs/StartJob";
@@ -49,32 +56,47 @@ import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
 import FacebookRedirect from "./views/FacebookRedirect";
 import AppleRedirectPage from "./views/AppleRedirectPage";
+import LndPage from "./views/LndPage";
+import FamilySettingsPage from "./views/FamilySettingsPage";
+import AppDownloadPage from "./views/AppDownloadPage";
+import JobGroupsPage from "./views/JobGroupsPage";
+import YourPages from "./views/YourPage_";
 
 export default function Routers() {
   return (
     <ScrollToTop>
       <Routes>
         {/* guest routes */}
-        <Route exact path="/login" element={<LoginPage />} />
-        <Route exact path="/eoffer" element={<LoginPage />} />
-
-        <Route exact path="/signup" element={<SignupPage />} />
+        {process.env.REACT_APP_NEW_LOGIN_LAYOUT == 1 ?
+        <>
+          <Route exact path="/login" element={<LoginPageTwo />} />
+          <Route exact path="/signup" element={<SignupPageTwo />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPagesTwo />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPagesTwo />} />
+          <Route path="/vemail" element={<VerifyLinkPagesTwo />} />
+          <Route path="/complereset" element={<VerifyPasswordPagesTwo />} />
+          <Route exact path="/outmessage" element={<VerifyYouPagesTwo />} />
+          <Route exact path="/eoffer" element={<LoginPageTwo />} />
+          <Route exact path="/invite" element={<LoginPageTwo />} />
+        </>
+        :
+        <>
+          <Route exact path="/login" element={<LoginPage />} />
+          <Route exact path="/signup" element={<SignupPage />} />
+          <Route exact path="/forgot-password" element={<ForgotPasswordPages />} />
+          <Route exact path="/update-password" element={<UpdatePasswordPages />} />
+          <Route path="/vemail" element={<VerifyLinkPages />} />
+          <Route path="/complereset" element={<VerifyPasswordPages />} />
+          <Route exact path="/outmessage" element={<VerifyYouPages />} />
+          <Route exact path="/eoffer" element={<LoginPage />} />
+          <Route exact path="/invite" element={<LoginPage />} />
+        </>
+        }
         <Route exact path="/login/auth" element={<AuthRedirect />} />
         <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
         <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
-        <Route
-          exact
-          path="/forgot-password"
-          element={<ForgotPasswordPages />}
-        />
-        <Route
-          exact
-          path="/update-password"
-          element={<UpdatePasswordPages />}
-        />
-        <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route path="/complereset" element={<VerifyPasswordPages />} />
-        <Route exact path="/outmessage" element={<VerifyYouPages />} />
+        <Route exact path="/lnd/*" element={<LndPage />} />
+        <Route exact path="/app" element={<AppDownloadPage />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
@@ -95,6 +117,7 @@ export default function Routers() {
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
           <Route exact path="/familymarket" element={<FamilyMarketPage />} />
+          <Route exact path="/familysettings" element={<FamilySettingsPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
@@ -107,6 +130,7 @@ export default function Routers() {
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <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 />} />
@@ -127,6 +151,7 @@ export default function Routers() {
           <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 path="*" element={<FourZeroFour />} />
       </Routes>

src/assets/images/icons/download-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="DownloadArrow"><g fill="#4687ba" class="color9a7baa svgShape"><path d="M30.179 3.525V1.857c0-1.551-1.784-2.415-3.011-1.449L24 2.907 20.824.402c-1.216-.959-3.002-.093-3.002 1.456v1.668a1 1 0 0 0 1 1h10.357c.552-.001 1-.449 1-1.001zM30.179 25.172v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM30.179 10.74V8.217a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357c.552-.001 1-.448 1-1.001zM30.179 17.956v-2.524a1 1 0 0 0-1-1H18.822a1 1 0 0 0-1 1v2.524a1 1 0 0 0 1 1h10.357a1 1 0 0 0 1-1zM25.748 47.029l9.336-15.018c.852-1.371-.133-3.145-1.748-3.145H14.664c-1.614 0-2.6 1.774-1.748 3.145l9.336 15.018a2.058 2.058 0 0 0 3.496 0z" fill="#000000" class="color000000 svgShape"></path></g></svg>

src/assets/images/icons/job_active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 32 28" viewBox="0 0 32 28" id="List"><circle cx="2" cy="2" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M8 0h24v4H8z" class="color4e4e50 svgShape"></path><circle cx="10" cy="10" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 8h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="10" cy="26" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M16 24h16v4H16z" class="color4e4e50 svgShape"></path><circle cx="18" cy="18" r="2" fill="#767fad" class="color4e4e50 svgShape"></circle><path fill="#767fad" d="M24 16h8v4h-8z" class="color4e4e50 svgShape"></path></svg>

src/assets/images/icons/job_group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="Group" x="0" y="0" version="1.1" viewBox="0 0 52 52" xml:space="preserve"><path d="M26.003 13.05c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43zM11.293 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.43 1.99-4.43 4.44 0 2.44 1.98 4.43 4.43 4.43z" fill="#4687ba" class="color000000 svgShape"></path><path d="M49.493 41.93a10.091 10.091 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.58 6.392 6.392 0 0 1-4.371-1.737.975.975 0 0 0-.158-.258l-9.184-9.903V22.1h4.344c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.09 10.09 0 0 0-3.643-3.739 6.418 6.418 0 0 1-5.138 2.579 6.43 6.43 0 0 1-5.144-2.58 10.085 10.085 0 0 0-3.645 3.74c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h4.346v6.624c-.01.022-.016.044-.025.066l-9.22 9.941a.978.978 0 0 0-.22.42 6.378 6.378 0 0 1-4.242 1.62 6.417 6.417 0 0 1-5.14-2.584 10.086 10.086 0 0 0-3.65 3.743c-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95a10.03 10.03 0 0 0-2.134-2.612l8.01-8.636 8.055 8.685c-.815.73-1.53 1.58-2.08 2.563-.69 1.25-.67 2.72.05 3.95a3.9 3.9 0 0 0 3.39 1.94h10.69c1.41 0 2.68-.73 3.4-1.94.72-1.23.73-2.7.04-3.95z" fill="#4687ba" class="color000000 svgShape"></path><path d="M40.713 38.77c2.44 0 4.43-1.99 4.43-4.43a4.44 4.44 0 0 0-4.43-4.44c-2.45 0-4.44 1.99-4.44 4.44a4.44 4.44 0 0 0 4.44 4.43z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/job_list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" id="List"><switch><g fill="#767fad" class="color000000 svgShape"><g fill="#4687ba" class="color0ac5ab svgShape"><path d="M20 0H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM56 0H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V8a8 8 0 00-8-8zM20 36H8a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8zM56 36H44a8 8 0 00-8 8v12a8 8 0 008 8h12a8 8 0 008-8V44a8 8 0 00-8-8z" fill="#767fad" class="color000000 svgShape"></path></g></g></switch></svg>

src/assets/images/icons/job_past_due.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" id="List"><path d="M0 0v3h3V0H0zm4 0v1h4V0H4zm0 2v1h3V2H4zM0 4v3h3V4H0zm4 0v1h4V4H4zm0 2v1h3V6H4z" fill="#b22b7d" class="color000000 svgShape"></path></svg>

src/assets/images/icons/job_pending.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="List"><path d="M9 3a6 6 0 1 0 6 6A6 6 0 0 0 9 3zM9 13a4 4 0 1 1 4-4A4 4 0 0 1 9 13zM17 9H28a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM17 13h6a1 1 0 0 0 0-2H17a1 1 0 0 0 0 2zM9 17a6 6 0 1 0 6 6A6 6 0 0 0 9 17zM9 27a4 4 0 1 1 4-4A4 4 0 0 1 9 27zM28 21H17a1 1 0 0 0 0 2H28a1 1 0 0 0 0-2zM23 25H17a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/my-page.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page"><path fill-rule="evenodd" d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z" fill="#767fad" class="color000000 svgShape"></path></svg>

src/assets/images/icons/wallet.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 64 64" viewBox="0 0 64 64" id="wallet"><path d="M60.94,33.76H59.6V19.85c0-1.69-1.37-3.06-3.06-3.06h-1.61l-0.47-6.54c-0.12-1.67-1.57-2.94-3.27-2.84l-7.3,0.52
+		l-0.18-2.48c-0.12-1.67-1.57-2.95-3.27-2.84L7.83,4.93c-0.82,0.06-1.56,0.43-2.1,1.05C5.19,6.6,4.93,7.39,4.99,8.2l0.61,8.59H3.06
+		C1.37,16.79,0,18.17,0,19.85v38.48c0,1.69,1.37,3.06,3.06,3.06h53.48c1.69,0,3.06-1.37,3.06-3.06V44.43h1.33
+		c1.69,0,3.06-1.37,3.06-3.06v-4.55C64,35.13,62.63,33.76,60.94,33.76z M51.42,9.94c0.27,0,0.51,0.22,0.53,0.49l0.45,6.36H18.55
+		l-0.28-3.97c-0.01-0.19,0.07-0.32,0.13-0.38c0.05-0.06,0.17-0.17,0.36-0.18L51.42,9.94z M7.65,7.64C7.7,7.58,7.82,7.47,8.01,7.46
+		l32.66-2.32c0.27,0,0.51,0.22,0.53,0.49l0.18,2.48L18.58,9.73c-0.82,0.06-1.56,0.43-2.1,1.05c-0.54,0.62-0.8,1.41-0.74,2.22
+		l0.27,3.79H8.14L7.52,8.02C7.5,7.83,7.59,7.7,7.65,7.64z M57.07,58.34c0,0.28-0.24,0.53-0.53,0.53H3.06
+		c-0.28,0-0.53-0.24-0.53-0.53V19.85c0-0.29,0.24-0.53,0.53-0.53h53.48c0.28,0,0.53,0.24,0.53,0.53v13.91h-4.43
+		c-1.69,0-3.06,1.37-3.06,3.06v4.55c0,1.69,1.37,3.06,3.06,3.06h4.43V58.34z M61.47,41.37c0,0.28-0.24,0.53-0.53,0.53h-8.3
+		c-0.28,0-0.53-0.24-0.53-0.53v-4.55c0-0.28,0.24-0.53,0.53-0.53h8.3c0.29,0,0.53,0.24,0.53,0.53V41.37z"></path></svg>

src/assets/images/myfiles/default.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="files"><circle cx="64" cy="64" r="64" fill="#EF4C45"></circle><path fill="#CD2E30" d="M128 64v-2L92.4 26.5l-63.1 74 27.2 27c2.4.3 4.9.4 7.4.4C99.3 128 128 99.3 128 64z"></path><path fill="#E5E8EC" d="M93.5 78.4V29c0-1.9-1.5-3.4-3.4-3.4H41.8c-1.9 0-3.4 1.5-3.4 3.4v49.4h55.1z"></path><path fill="#FFF" d="M89.5 78.4V44.6H78.1c-1.9 0-3.4-1.5-3.4-3.4V29.9H37.8c-1.9 0-3.4 1.5-3.4 3.4v45.1h55.1z"></path><path fill="#FFCC04" d="m79.3 65.9-1.5 4c-.5 1.2-1.6 2-2.9 2H53.1c-1.3 0-2.4-.8-2.9-2l-1.5-4c-.5-1.3-1.7-2.2-3.1-2.2H30.9c-1.9 0-3.4 1.5-3.4 3.4v28.8c0 3.5 2.9 6.4 6.4 6.4H94c3.5 0 6.4-2.9 6.4-6.4V67.1c0-1.9-1.5-3.4-3.4-3.4H82.5c-1.4 0-2.7.9-3.2 2.2z"></path><path fill="#CED4DF" d="m74.9 45.8-.1-.1.1.1z"></path><path fill="#22D2FC" d="M74.7 29.9v11.4c0 1.9 1.5 3.4 3.4 3.4h11.4L74.7 29.9z"></path><path fill="#FFF" d="M74.1 81.6H53.9c-2 0-3.7 1.6-3.7 3.7 0 2 1.6 3.7 3.7 3.7h20.2c2 0 3.7-1.6 3.7-3.7 0-2-1.7-3.7-3.7-3.7z"></path></svg>

src/assets/images/myfiles/jpg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51" id="jpg"><circle cx="25.5" cy="25.5" r="24" fill="#FED000"></circle><path fill="#F39F03" d="M37.462 16.607v4.741a.924.924 0 0 1-.877.924v16.361c0 1.027-.84 1.867-1.867 1.867H18.282a1.866 1.866 0 0 1-1.867-1.867V22.272a.924.924 0 0 1-.877-.924v-4.741c0-.495.392-.906.877-.924v-1.316a1.86 1.86 0 0 1 1.867-1.867h16.436c1.027 0 1.867.83 1.867 1.867v1.316c.485.018.877.43.877.924z"></path><path fill="#FFF" d="M35.585 13.367v24.266c0 1.031-.836 1.867-1.867 1.867H17.282a1.867 1.867 0 0 1-1.867-1.867V13.367c0-1.031.836-1.867 1.867-1.867h16.436c1.03 0 1.867.836 1.867 1.867z" opacity=".96"></path><path fill="#33ACFE" d="M18.143 25.5h14.715v9.894H18.143z"></path><path fill="#273E56" d="M32.859 35.394h-7.622l3.959-4.357z"></path><path fill="#334861" d="M29.048 35.394H18.143l5.664-7.357z"></path><circle cx="27.697" cy="28.037" r="1.094" fill="#FED000"></circle><path fill="#EB4B33" d="M35.462 21.28H15.538a1 1 0 0 1-1-1v-4.604a1 1 0 0 1 1-1h19.924a1 1 0 0 1 1 1v4.605a1 1 0 0 1-1 1z"></path><path fill="#FFF" d="M22.511 18.797c0 .57-.155 1.499-1.475 1.499-.737 0-1.456-.403-1.456-1.37v-.384h.88v.199c0 .427.105.737.564.737.514 0 .514-.409.514-.725v-2.987h.973v3.03zm.857-3.031h1.996c1.109 0 1.53.7 1.53 1.42 0 .718-.421 1.418-1.53 1.418H24.34v1.587h-.973v-4.425zm.973 2.082h.756c.446 0 .855-.099.855-.663 0-.564-.409-.663-.855-.663h-.756v1.326zm6.36 1.84a1.49 1.49 0 0 1-1.214.608c-1.364 0-2.176-1.023-2.176-2.299 0-1.314.812-2.336 2.176-2.336.905 0 1.766.552 1.865 1.561h-.93c-.117-.496-.47-.743-.935-.743-.874 0-1.202.743-1.202 1.518 0 .738.328 1.48 1.202 1.48.638 0 .997-.334 1.053-.953h-.98V17.8h1.86v2.392h-.62l-.099-.502z"></path></svg>

src/assets/images/myfiles/mp4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512" id="mp4-file"><circle cx="256" cy="256" r="256" fill="#8ABE4F"></circle><path fill="#7BA840" d="M511.9 262.5 346.6 96.8c-1.1-1.1-3.1-1.1-4.3 0l-37.4 43.4c-.6.6-.8 1.2-.7 1.9l-3.4-6.1H159.2c-13.1 0-23.7 10.6-23.7 23.7v145.6l7.9 5.9h-16.2v66.6l8.3 7.9v6.6c0 7.6 3.5 14.3 9 18.6.7.9 58.1 58.3 100.6 100.9 3.6.1 7.2.2 10.8.2 139.3 0 252.5-111.1 256-249.5z"></path><g fill="#FFF"><path d="M169.1 193.7h145.4V206H169.1zM169.1 213.5h145.4v12.3H169.1zM169.1 233.4h145.4v12.3H169.1zM169.1 253.3h145.4v12.3H169.1zM169.1 273.1H282v12.3H169.1zM384.1 140.2l-37.4-43.4c-1.1-1.1-3.1-1.1-4.3 0L305 140.2c-1.7 1.6-.4 4.3 2.1 4.3h17.6v34h39.8v-34h17.6c2.3 0 3.6-2.6 2-4.3zM324.6 184.7h39.8v15.5h-39.8zM324.6 212c0 1.4 1.3 2.6 2.9 2.6h34c1.6 0 2.9-1.1 2.9-2.6v-5.7h-39.8v5.7z"></path><path d="M339.7 389.3c0 10.1-8.2 18.3-18.3 18.3H162.2c-10.1 0-18.3-8.2-18.3-18.3v-5.6h-8.4v8.6c0 13.1 10.6 23.7 23.7 23.7h165.2c13.1 0 23.7-10.6 23.7-23.7V220.4h-8.4v168.9zM143.9 162.7c0-10.1 8.2-18.3 18.3-18.3h136.4c-.9-2.8-.2-6 1.9-8.2l.2-.3H159.2c-13.1 0-23.7 10.6-23.7 23.7v145.6h8.4V162.7z"></path><path d="M313.2 344.5c0-18.4-14.9-33.3-33.3-33.3H127.2v66.6h152.7c18.4 0 33.3-14.9 33.3-33.3zm-109 19.2h-6.4v-27.6h-.2L187 363.7h-4.4l-10.8-28.1-.2.1v28.1h-6.4v-38.4h8.4l11 29.5h.2l11.1-29.5h8.2v38.3zm34.4-17.8c-2.4 2.2-5.7 3.3-10 3.3h-8.3v14.6h-6.4v-38.4h14.7c4.2 0 7.6 1.1 10 3.3 2.4 2.2 3.6 5.1 3.6 8.6s-1.2 6.4-3.6 8.6zm36.5 9.3h-4.9v8.5h-6.4v-8.5h-16.1l-.2-3.9 16-26h6.6V350h4.9v5.2z"></path><path d="m263.1 335.8-9.2 14.2h9.9v-15.7h-.1zM228.6 330.4h-8.3V344h8.3c2.4 0 4.2-.6 5.4-1.9 1.2-1.3 1.8-2.9 1.8-4.8s-.6-3.6-1.8-4.9c-1.2-1.3-3-2-5.4-2z"></path></g></svg>

src/assets/images/myfiles/pdf.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 90 90" viewBox="0 0 90 90" id="pdf"><circle cx="45" cy="45" r="44.5" fill="#84D2ED"></circle><polygon fill="#EFC41C" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978" points="35.6 18.8 35.6 31.9 22.5 31.9 22.5 71.2 62.8 71.2 62.8 18.8"></polygon><polygon fill="#8CC749" stroke="#010101" stroke-miterlimit="10" stroke-width="1.978" points="22.5 31.9 22.5 31.9 22.5 31.9"></polygon><polygon fill="#EB665F" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978" points="35.6 18.8 22.5 31.9 22.5 31.9 35.6 31.9"></polygon><rect width="35.9" height="15.7" x="31.6" y="40.2" fill="#F2DFD5" stroke="#010101" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.978"></rect><path fill="#010101" d="M43 44c.7.6 1 1.5 1 2.7 0 1.2-.4 2.1-1.1 2.7-.7.6-1.8.9-3.3.9h-1.3v2.8h-2.2v-9.9h3.5C41.2 43.1 42.3 43.4 43 44zM41.4 47.9c.3-.3.4-.7.4-1.3 0-.6-.2-1-.5-1.2C41 45.2 40.4 45 39.7 45h-1.3v3.3h1.5C40.6 48.4 41.2 48.2 41.4 47.9zM53.4 44.4c.9.9 1.4 2.1 1.4 3.6 0 1.5-.5 2.8-1.4 3.7-.9.9-2.3 1.3-4.2 1.3h-3.4v-9.9h3.5C51.1 43.1 52.5 43.6 53.4 44.4zM51.8 50.3c.5-.5.8-1.3.8-2.2s-.3-1.7-.8-2.3c-.5-.5-1.4-.8-2.5-.8H48v6h1.4C50.5 51.1 51.2 50.9 51.8 50.3zM63.6 43.1v1.9H59v2.1h4.4v1.9H59v3.9h-2.2v-9.9H63.6z"></path></svg>

src/assets/images/myfiles/png.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="655.359" height="655.359" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.827 6.827" id="png-file"><circle cx="3.413" cy="3.413" r="3.413" fill="#42a5f5"></circle><path fill="#fffffe" d="M1.744 4.074h.27V1.75a.164.164 0 0 1 .164-.164H4.3l.023.022.544.545.023.023v1.898h.191a.198.198 0 0 1 .198.199v.77a.198.198 0 0 1-.198.198H1.744a.198.198 0 0 1-.198-.199v-.769a.198.198 0 0 1 .198-.199zm.425 0h2.567V2.24l-.004-.004h-.498v-.495H2.178a.009.009 0 0 0-.007.003.009.009 0 0 0-.002.006v2.324zm.389-.7h1.789v.156h-1.79v-.156zm0-.544h1.789v.156h-1.79V2.83zm.07 2.094V4.37h.179c.068 0 .112.003.132.009a.145.145 0 0 1 .08.054.172.172 0 0 1 .032.107.18.18 0 0 1-.018.086.152.152 0 0 1-.047.055.162.162 0 0 1-.058.026.637.637 0 0 1-.116.008h-.073v.209h-.111zm.111-.46v.157H2.8a.29.29 0 0 0 .089-.009.074.074 0 0 0 .034-.027.075.075 0 0 0 .013-.043.072.072 0 0 0-.018-.05.077.077 0 0 0-.044-.024.532.532 0 0 0-.08-.004h-.055zm.405.46V4.37h.109l.226.37v-.37h.104v.554h-.112l-.223-.361v.36h-.104zm.814-.204v-.093H4.2v.22a.372.372 0 0 1-.237.086.304.304 0 0 1-.15-.036.232.232 0 0 1-.098-.105.337.337 0 0 1-.032-.147.32.32 0 0 1 .036-.154.244.244 0 0 1 .106-.102.285.285 0 0 1 .132-.028.26.26 0 0 1 .161.043.195.195 0 0 1 .075.12l-.111.02a.118.118 0 0 0-.044-.064.133.133 0 0 0-.08-.024.152.152 0 0 0-.117.047c-.029.03-.043.077-.043.138 0 .065.014.114.044.147.029.033.067.05.114.05a.194.194 0 0 0 .07-.014.244.244 0 0 0 .061-.034v-.07h-.128z"></path><path fill="none" d="M1.547 1.547H5.28V5.28H1.547z"></path></svg>

src/assets/images/twitter_icon.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

src/components/AddJob/AddJob.jsx

@@ -1,98 +1,31 @@
-import { Field, Form, Formik } from "formik";
-import React, { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
-import * as Yup from "yup";
-import usersService from "../../services/UsersService";
-import { tableReload } from "../../store/TableReloads";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+import {
+  validationSchema as VS,
+  useDispatch,
+  useSelector,
+  usersService,
+  initialValues as IV,
+  initialReqState,
+  useState,
+  tableReload,
+  Formik,
+  InputCom,
+  Field,
+  Form,
+  LoadingSpinner,
+} from "./settings";
 
-const validationSchema = Yup.object().shape({
-  country: Yup.string()
-    .min(1, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Country is required"),
-  price: Yup.string()
-    .typeError("Invalid number")
-    .min(1, "Price must be greater than 0")
-    .test("no-e", "Invalid number", (value) => {
-      if (value && /\d+e/.test(value)) {
-        return false;
-      }
-      return true;
-    })
-    .required("Price is required"),
-  title: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(149, "Maximum 149 characters")
-    .required("Title is required"),
-  description: Yup.string()
-    .min(5, "Minimum 5 characters")
-    .max(299, "Maximum 299 characters")
-    .required("Description is required"),
-  job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(1440, "Maximum 1440 characters")
-    .required("Details is required"),
-  timeline_days: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, "Price must be greater than 0")
-    .required("Timeline is required"),
-  category: Yup.array().min(1, "Select at least one checkbox"),
-});
+const validationSchema = VS;
 
 function AddJob({ popUpHandler, categories }) {
   const ApiCall = new usersService();
+  const { walletDetails } = useSelector((state) => state.walletDetails);
 
   let dispatch = useDispatch();
 
-  let [currency, setCurrency] = useState({
-    loading: true,
-    status: false,
-    data: null,
-  }); // To Hold the array of currency getUserCurrency returns
+  const [requestStatus, setRequestStatus] = useState(initialReqState); // Holds state when submit button is pressed
 
-  let initialValues = {
-    // initial values for formik
-    country: "",
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  };
-
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // Holds state when submit button is pressed
-
-  // 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;
-        }
-
-        setCurrency({
-          loading: false,
-          status: true,
-          data: res.data.result_list,
-        });
-      })
-      .catch((err) => {
-        setCurrency({ loading: false, status: false, data: [] });
-      });
-  };
-
-  // FUNCTION TO HANDLE ADD JOB FORM
-  const handleAddJob = (values, helpers) => {
-    let reqData = {
+  const handleAddJob = async (values, helpers) => {
+    const reqData = {
       country: values?.country,
       price: Number(values.price) * 100,
       title: values?.title,
@@ -103,19 +36,19 @@ function AddJob({ popUpHandler, categories }) {
     };
 
     setRequestStatus({ loading: true, status: false, message: "" });
-    ApiCall.jobManagerCreateJob(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 1) {
-          setRequestStatus({
-            loading: false,
-            status: false,
-            message: "Could not complete your request at the moment",
-          });
-          setTimeout(() => {
-            popUpHandler();
-          }, 1500);
-          return;
-        }
+
+    try {
+      const res = await ApiCall.jobManagerCreateJob(reqData);
+      if (res.data.internal_return < 1) {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Could not complete your request at the moment",
+        });
+        setTimeout(() => {
+          popUpHandler();
+        }, 1500);
+      } else {
         setRequestStatus({
           loading: false,
           status: true,
@@ -125,29 +58,24 @@ function AddJob({ popUpHandler, categories }) {
           dispatch(tableReload({ type: "JOBTABLE" }));
           popUpHandler();
         }, 1000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "Opps! something went wrong. Try Again",
-        });
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
+      }
+    } catch (err) {
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: "Oops! Something went wrong. Try Again",
       });
+    } finally {
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
   };
 
-  useEffect(() => {
-    getUserCurrency();
-  }, []);
-
   return (
-    <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
+    <div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
       <Formik
-        initialValues={initialValues}
+        initialValues={IV}
         validationSchema={validationSchema}
         onSubmit={handleAddJob}
       >
@@ -164,26 +92,30 @@ function AddJob({ popUpHandler, categories }) {
                         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>}
+                        {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`}
+                        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}
                       >
-                        {currency.loading ? (
+                        {walletDetails?.loading ? (
                           <option className="text-slate-500 text-lg" value="">
                             Loading...
                           </option>
-                        ) : currency.data.length ? (
+                        ) : walletDetails.data.length ? (
                           <>
                             <option className="text-slate-500 text-lg" value="">
                               Select a currency
                             </option>
-                            {currency.data?.map((item, index) => (
+                            {walletDetails.data?.map((item, index) => (
                               <option
                                 key={index}
                                 className="text-slate-500 text-lg"
@@ -207,14 +139,17 @@ function AddJob({ popUpHandler, categories }) {
                         fieldClass="px-6 text-right"
                         label="Price"
                         labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
                         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}
+                        error={
+                          props.errors.price &&
+                          props.touched.price &&
+                          props.errors.price
+                        }
                       />
                     </div>
                   </div>
@@ -225,13 +160,16 @@ function AddJob({ popUpHandler, categories }) {
                       fieldClass="px-6"
                       label="Title"
                       labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
                       type="text"
                       name="title"
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      error={props.errors.title && props.touched.title && props.errors.title}
+                      error={
+                        props.errors.title &&
+                        props.touched.title &&
+                        props.errors.title
+                      }
                     />
                   </div>
 
@@ -241,13 +179,16 @@ function AddJob({ popUpHandler, categories }) {
                       fieldClass="px-6"
                       label="Description"
                       labelClass="tracking-wide"
-                      inputBg="bg-slate-100"
                       type="text"
                       name="description"
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      error={props.errors.description && props.touched.description && props.errors.description}
+                      error={
+                        props.errors.description &&
+                        props.touched.description &&
+                        props.errors.description
+                      }
                     />
                   </div>
 
@@ -256,15 +197,20 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                        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>}
+                        {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]`}
+                        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}
@@ -286,19 +232,28 @@ function AddJob({ popUpHandler, categories }) {
                         role="group"
                         aria-labelledby="checked-group"
                       >
-                        {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>
+                        {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 &&
@@ -324,7 +279,7 @@ function AddJob({ popUpHandler, categories }) {
                     <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 ${
+                      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"
@@ -335,6 +290,7 @@ function AddJob({ popUpHandler, categories }) {
                       <option value="">Select Duration</option>
                       {publicArray.map(({ name, duration }, idx) => (
                         <option
+                          key={idx}
                           className="text-slate-500 text-lg"
                           value={duration}
                         >
@@ -383,13 +339,12 @@ function AddJob({ popUpHandler, categories }) {
                       </span>
                     </button>
 
-                    {requestStatus.loading ? (
+                    {requestStatus?.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />
                     ) : (
                       <button
                         type="submit"
                         className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
                       >
                         Add Job
                       </button>

src/components/AddJob/settings.js

@@ -0,0 +1,100 @@
+import { Field, Form, Formik } from "formik";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+// Initialize state for request values
+const initialReqState = {
+  loading: false,
+  status: false,
+  message: "",
+};
+
+// For form initial values
+const initialValues = {
+  // initial values for formik
+  country: "",
+  price: "",
+  title: "",
+  description: "",
+  job_detail: "",
+  timeline_days: "",
+  category: [],
+};
+
+// const getWalletDetail = (country) => { // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+//   const walletChecker = walletDetails?.data.find(
+//     (item) => item.country === country
+//   );
+//   return walletChecker ? walletChecker.amount : 0;
+// };
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Currency is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(499, "Maximum 499 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select category"),
+});
+
+const getWalletDetail = (countryParams, walletDetails) => {
+  // A FUNCTION TO GET USER BALANCE BASED ON COUNTRY SELECTED
+  const walletChecker = walletDetails?.data.find(
+    (item) => item.country === countryParams
+  );
+  return walletChecker
+    ? {
+        description: walletChecker.description,
+        country: walletChecker.country,
+      }
+    : "";
+};
+
+export {
+  Field,
+  Form,
+  Formik,
+  useState,
+  useEffect,
+  useDispatch,
+  useSelector,
+  usersService,
+  InputCom,
+  LoadingSpinner,
+  initialReqState,
+  initialValues,
+  validationSchema,
+  getWalletDetail,
+  tableReload
+};

src/components/AppDownload/AppDownload.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function AppDownload() {
+  return (
+    <div>
+      <div className='h-screen flex justify-center items-center'>App Download Content Comes here</div>
+    </div>
+  )
+}

src/components/AuthPages/AuthLayout2.jsx

@@ -0,0 +1,62 @@
+import React, { lazy } from "react";
+import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
+
+export default function LoginLayout({ slogan, children }) {
+  const bgImg = localImgLoad('images/left-wrenchboard.jpg')
+
+  return (
+    <div className={`layout-wrapper login`}>
+      <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
+        <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`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div>
+        <div className="p-5 sm:p-7 flex place-content-center">
+          <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white 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="">&copy; {new Date().getFullYear()} -</span>
+                <Link to="/" className="text-[#009ef7] ml-1">
+                  WrenchBoard
+                </Link>{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -1,26 +1,26 @@
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
+import React, { useEffect } from "react";
 import { useDispatch } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+import usersService from "../../../services/UsersService";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";
 
 function Redirect() {
-    const location = useLocation();
-    const navigate = useNavigate();
-    const userApi = new usersService();
-    const dispatch = useDispatch()
+  const location = useLocation();
+  const navigate = useNavigate();
+  const userApi = new usersService();
+  const dispatch = useDispatch();
 
-    const queryParams = new URLSearchParams(location?.search);
-    const codeResponse = queryParams.get("code");
+  const queryParams = new URLSearchParams(location?.search);
+  const codeResponse = queryParams.get("code");
 
-    useEffect(()=>{
-      if(!codeResponse){
-        navigate('/login', {state: {error: true}})
-        return
-      }
-      console.log(codeResponse);
-      /*
+  useEffect(() => {
+    if (!codeResponse) {
+      navigate("/login", { state: { error: true } });
+      return;
+    }
+    console.log(codeResponse);
+    /*
       POST /token HTTP/1.1
       Host: oauth2.googleapis.com
       Content-Type: application/x-www-form-urlencoded
@@ -31,34 +31,40 @@ function Redirect() {
       redirect_uri=https%3A//oauth2.example.com/code&
       grant_type=authorization_code
       */
-      var reqData = {
-        auth_type: "GOOGLE",
-        code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
-      };
-      userApi
-        .authStart(reqData)
-        .then((res) => {
-          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}`);
-            dispatch(updateUserDetails({...res.data}));
-            navigate('/', {replace: true})
-            return
-          }
-          navigate('/login', {state: {error: true}})
-        })
-        .catch((error) => {
-          navigate('/login', {state: {error: true}})
-          console.log(error);
-        });
-    },[])
+    var reqData = {
+      auth_type: "GOOGLE",
+      code: codeResponse,
+      redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    };
+    userApi
+      .authStart(reqData)
+      .then((res) => {
+        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}`);
+          dispatch(updateUserDetails({ ...res.data }));
+          navigate("/", { replace: true });
+          return;
+        }
+        navigate("/login", { state: { error: true } });
+      })
+      .catch((error) => {
+        navigate("/login", { state: { error: true } });
+        console.log(error);
+      });
+  }, []);
   return (
     <AuthLayout>
-    <div className='min-h-[70vh]'>Redirecting ... </div>
-  </AuthLayout>
-  )
+      <div className="min-h-[70vh]">Redirecting ... </div>
+    </AuthLayout>
+  );
 }
 
-export default Redirect
+export default Redirect;

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -24,7 +24,7 @@ const ForgetPwdResponse = ({title, message, type}) => {
                 <button
                 type="button"
                 onClick={() => navigate("/login")}
-                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                 >
                     <span>Home</span>
                 </button>

src/components/AuthPages/ForgotPassword/index.jsx

@@ -7,6 +7,8 @@ import AuthLayout from "../AuthLayout";
 import EmailValidator from "../../../lib/EmailValidator";
 import ForgetPwdResponse from "../ForgetPwdResponse";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
   const [resetLoading, setResetLoading] = useState(false);
@@ -22,9 +24,18 @@ export default function ForgotPassword() {
     setMail(e?.target.value);
   };
 
-  const humanChecker = () => {
-    setValue(!checked);
-  };
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
 
   const resetHandler = async () => {
     if (email == "") {
@@ -113,10 +124,16 @@ export default function ForgotPassword() {
                     />
                   </div>
                   {/* hCaptha clone for the time being */}
-                  <div className="mb-10">
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
                     <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
                       <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                        {/* Checkbox */}
+                        
                         <div className="h-full relative inline-block">
                           <div className="relative table top-0 h-full">
                             <div className="table-cell align-middle">
@@ -148,18 +165,25 @@ export default function ForgotPassword() {
                         <div className="h-full relative inline-block w-16"></div>
                       </div>
                     </div>
-                  </div>
+                  </div> */}
                   {msgError && (
                     <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
                       {msgError}
                     </div>
                   )}
                   <div className="signin-area mb-3.5">
-                    <div className="flex justify-center items-center gap-2">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
                       <button
                         type="button"
                         onClick={resetHandler}
-                        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                       >
                         {resetLoading ? (
                           <div className="signup btn-loader"></div>
@@ -167,13 +191,6 @@ export default function ForgotPassword() {
                           <span>Send Code</span>
                         )}
                       </button>
-                      <button
-                        type="button"
-                        onClick={() => navigate("/login")}
-                        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.8125rem] `}
-                      >
-                        Cancel
-                      </button>
                     </div>
                   </div>
                 </div>

src/components/AuthPages/ForgotPassword/index2.jsx

@@ -0,0 +1,211 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+
+import ReCAPTCHA from "react-google-recaptcha";
+
+export default function ForgotPassword() {
+  const [checked, setValue] = useState(false);
+  const [resetLoading, setResetLoading] = useState(false);
+  // email
+  const [email, setMail] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [msgSuccess, setMsgSuccess] = useState(null);
+
+  const navigate = useNavigate();
+  const userApi = new usersService();
+
+  const handleEmail = (e) => {
+    setMail(e?.target.value);
+  };
+
+  // const humanChecker = () => {
+  //   setValue(!checked);
+  // };
+
+  function humanChecker(value) {
+    // console.log("Captcha value:", value);
+    if(value){
+      setValue(true)
+    }else{
+      setValue(false)
+    }
+  }
+
+  const resetHandler = async () => {
+    if (email == "") {
+      setMsgError("An email is required");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
+      setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if (email !== "" && checked) {
+      const reqData = { email, action:11013 };
+      setResetLoading(true);
+      try {
+        const res = await userApi.StartResetPassword(reqData);
+        if (res.status === 200) {
+          setMsgSuccess(true);
+          setMail("");
+          setValue(false);
+          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
+        }
+      } catch (error) {
+        setMsgSuccess(false);
+        setResetLoading(false);
+        setMail("");
+        setMsgError("An error occurred");
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          setMsgError(null);
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+      }
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="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-11/12 sm:max-w-[400px]">
+            {msgSuccess == null ?
+              <>
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    Forget Password
+                  </h1>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter your email to reset your password.
+                  </span>
+                </div>
+                <div className="input-area">
+                  <div className="input-item mb-10">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </div>
+                  {/* hCaptha clone for the time being */}
+                  <div className="mb-10 flex justify-center w-full">
+                    <ReCAPTCHA
+                      sitekey={process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY}
+                      onChange={humanChecker}
+                    />
+                  </div>
+                  {/* <div className="mb-10">
+                    <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
+                      <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
+                        
+                        <div className="h-full relative inline-block">
+                          <div className="relative table top-0 h-full">
+                            <div className="table-cell align-middle">
+                              <div className="relative w-[30px] h-[30px] mx-[15px]">
+                                <input
+                                  type="checkbox"
+                                  name="human-checkbox"
+                                  id="human-checkbox"
+                                  className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="h-full relative inline-block w-[170px]">
+                          <label className="relative table top-0 h-full">
+                            <label className="table-cell align-middle">
+                              <label
+                                className="text-800 text-sm"
+                                htmlFor="human-checkbox"
+                              >
+                                I am human
+                              </label>
+                            </label>
+                          </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
+                      </div>
+                    </div>
+                  </div> */}
+                  {msgError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                      {msgError}
+                    </div>
+                  )}
+                  <div className="signin-area mb-3.5">
+                    <div className="flex justify-center items-center gap-4">
+                    <button
+                        type="button"
+                        onClick={() => navigate("/login")}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white hover:text-white flex justify-center bg-red-500 hover:bg-red-600 transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="button"
+                        onClick={resetHandler}
+                        className={`h-[48px] rounded-full mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      >
+                        {resetLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Send Code</span>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={'Forget Password'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/Login/index.jsx

@@ -14,10 +14,20 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
+import ReCAPTCHA from "react-google-recaptcha";
+
 export default function Login() {
+  // 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"))
+
+  const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
+
   let [loginType, setLoginType] = useState("");
 
   const [loginLoading, setLoginLoading] = useState(false);
@@ -107,6 +117,15 @@ export default function Login() {
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
       return;
     }
+    if (name == "full" && !validCaptcha.valid && validCaptcha.show) {
+      // RUNS AND DISPLAYS CAPTCHA, IF ERROR OCCURED DURING LOGIN FOR FULL LOGIN ALONE
+      setMsgError("Please Verify Captcha");
+      setLoginLoading(false);
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
     userApi
       .logInUser(postData)
       .then((res) => {
@@ -120,11 +139,15 @@ export default function Login() {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
+          setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
           return;
         }
         localStorage.setItem("member_id", `${res.data.member_id}`);
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
+        if (name === "family") {
+          sessionStorage.setItem("family_uid", res.data?.family_uid);
+        }
         // localStorage.setItem("session", `${res.data.session}`);
         dispatch(updateUserDetails({ ...res.data }));
         setTimeout(() => {
@@ -135,6 +158,7 @@ export default function Login() {
       .catch((error) => {
         setMsgError("Unable to login, try again");
         setLoginLoading(false);
+        setValidCaptcha((prev) => ({ ...prev, show: true })); // DISPLAYS CAPTCHA IF ERROR
       })
       .finally(() => {
         setTimeout(() => {
@@ -145,6 +169,15 @@ export default function Login() {
       });
   };
 
+  function captchaChecker(value) {
+    // FUNCTION TO VALIDATE CAPTCHA
+    if (value) {
+      setValidCaptcha({ show: true, valid: value });
+    } else {
+      setValidCaptcha({ show: true, valid: "" });
+    }
+  }
+
   const googleLogin = useGoogleLogin({
     flow: "auth-code",
     ux_mode: "redirect",
@@ -204,6 +237,20 @@ export default function Login() {
     setPassword("");
   }, [loginType]);
 
+
+  // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
+  useEffect(()=>{
+    let timer;
+    if(sessionExpired == "true"){
+     timer = setTimeout(()=>{
+        setSessionExpired(false)
+      },5000)
+    }
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -219,20 +266,32 @@ export default function Login() {
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+              {/* HIDES THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired != "true" && (
+                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                  {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1> */}
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  New Here?{" "}
-                  <Link
-                    to="/signup"
-                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
-                  >
-                    Create an Account
-                  </Link>
-                </span>
-              </div>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    New Here?{" "}
+                    <Link
+                      to="/signup"
+                      className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                    >
+                      Create an Account
+                    </Link>
+                  </span>
+                </div>
+              )}
+
+              {/* SHOWS THIS IF USER SESSION HAS EXPIRED */}
+              {sessionExpired == "true" && (
+                <div className="w-full p-1 mb-7">
+                  <p className="text-red-500 text-base text-center">
+                    Your session expired and will need to login again
+                  </p>
+                </div>
+              )}
 
               {/* switch login component */}
               <div className="ml-7 flex justify-start items-center gap-3">
@@ -296,6 +355,19 @@ export default function Login() {
                         forgotPassword
                       />
                     </div>
+
+                    {/* hCaptha clone for the time being */}
+                    {validCaptcha.show && (
+                      <div className="mb-5 flex justify-center w-full">
+                        <ReCAPTCHA
+                          sitekey={
+                            process.env.REACT_APP_GOOGLE_RECAPTCHA_SITEKEY
+                          }
+                          onChange={captchaChecker}
+                        />
+                      </div>
+                    )}
+
                     {loginError && (
                       <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
                         Invalid username or password- Please{" "}
@@ -320,7 +392,7 @@ export default function Login() {
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
-                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
@@ -329,34 +401,51 @@ export default function Login() {
                           )}
                         </button>
                       </div>
-                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn
-                          link="#"
-                          imgSrc={googleLogo}
-                          brand="Google"
-                          onClick={googleLogin}
-                        />
-                        <BrandBtn
-                          // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
-                          link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
-                          imgSrc={appleLogo}
-                          brand="Apple"
-                          isAnchor={true}
-                        />
-                      </div>
-                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn
-                          link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
-                          imgSrc={facebookLogo}
-                          brand="Facebook"
-                          isAnchor={true}
-                        />
-                        <BrandBtn
-                          // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
-                          imgSrc={linkedInLogo}
-                          brand="LinkedIn"
-                          isAnchor={true}
-                        />
+                      <div className="sm:grid grid-cols-2 gap-1">
+                        <div className="w-full">
+                          <BrandBtn
+                            link="#"
+                            imgSrc={googleLogo}
+                            brand="Google"
+                            onClick={googleLogin}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_APPLE_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                            link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                            imgSrc={appleLogo}
+                            brand="Apple"
+                            isAnchor={true}
+                            // style={{visibility: 'hidden'}}
+                          />
+                        </div>
+                        <div className="w-full">
+                          <BrandBtn
+                            link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                            imgSrc={facebookLogo}
+                            brand="Facebook"
+                            isAnchor={true}
+                          />
+                        </div>
+                        <div
+                          className={`w-full ${
+                            process.env.REACT_APP_LINKEDIN_SOCIAL_LOGIN !== 0 &&
+                            "hidden"
+                          }`}
+                        >
+                          <BrandBtn
+                            // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                            imgSrc={linkedInLogo}
+                            brand="LinkedIn"
+                            isAnchor={true}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -416,7 +505,7 @@ export default function Login() {
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
-                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                          className={`btn-login  rounded-full text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
                         >
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
@@ -432,12 +521,12 @@ export default function Login() {
               }
               {/* END of login component */}
 
-              {loginType == "full" &&
-              <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
-                This site is protected by hCaptcha and the our Privacy Policy
-                and Terms of Service apply.
-              </div>
-              }
+              {loginType == "full" && (
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                  This site is protected by a Captcha. Our Privacy Policy and
+                  Terms of Service apply.
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -446,7 +535,14 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand,
+  onClick,
+  isAnchor = false,
+  style = { visibility: "visible" },
+}) => {
   // const doGoogle = async () => {
   //   alert("start google");
   // };
@@ -466,7 +562,7 @@ const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
   //   alert("start facebook");
   // };
   return (
-    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
+    <div className="w-full flex justify-center bottomMargin" style={style}>
       {isAnchor ? (
         <a
           href={link}

src/components/AuthPages/Login/index2.jsx

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

src/components/AuthPages/SignUp/index.jsx

@@ -1,20 +1,27 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
+  // eslint-disable-next-line no-restricted-globals
+  const queryParams = new URLSearchParams(location?.search);
+  const country = queryParams.get("cnt")?.toUpperCase();
+  
+  const {pathname} = useLocation()
+  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
   const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState([]);
+  const [countries, setCountries] = useState({loading:true, data:[]});
 
   const [formData, setFormData] = useState({
-    country: "",
+    country: country? country : "",
     first_name: "",
     last_name: "",
     email: "",
@@ -40,14 +47,22 @@ export default function SignUp() {
 
   // Get Country Api
   const getCountryList = useCallback(async () => {
-    const res = await userApi.getSignupCountryData();
-
+    
     try {
-      if (res.status === 200) {
-        const { signup_country } = await res.data;
-        setCountries(signup_country);
+      const res = await userApi.getSignupCountryData();
+      if (res.status === 200 && res.data.internal_return >= 0) {
+        const { result_list } = await res.data;
+        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData(prev => ({...prev, country: ''}))
+            return setCountries({loading: false, data: result_list});
+          }
+          return setCountries({loading: false, data: cnt});
+        }
+        setCountries({loading: false, data:result_list});
       } else if (res.data.result !== 100) {
-        setCountries("Nothing see here!");
+        setCountries({loading: false, data:[]});
       }
     } catch (error) {
       throw new Error(error);
@@ -134,7 +149,7 @@ export default function SignUp() {
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
           <div className="mb-5">
-            <Link to="#">
+            <Link to={currentPath}>
               <img
                 src={WrenchBoard}
                 alt="wrenchboard"
@@ -172,6 +187,7 @@ export default function SignUp() {
                   name="country"
                   value={formData.country}
                   inputHandler={handleInputChange}
+                  disable={country && countries?.data?.length <= 1 ? true : false}
                 />
                 <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
                   <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
@@ -306,9 +322,10 @@ export default function SignUp() {
                 <div className="signin-area mb-1">
                   <div className="flex justify-center">
                     <button
+                      disabled={countries.loading}
                       type="button"
                       onClick={handleSignUp}
-                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
+                      className={`rounded-full mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                     >
                       {signUpLoading ? (
                         <div className="signup btn-loader"></div>
@@ -333,6 +350,7 @@ const SelectOption = ({
   inputHandler,
   value,
   data, // passing the data from parent
+  disable
 }) => {
   return (
     <div className="input-com mb-7">
@@ -346,19 +364,39 @@ const SelectOption = ({
       </div>
       <div>
         <select
+        disabled={disable}
           name={name}
           id={name}
           className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
-          <option value={""}>Select your Country</option>
-          {data?.length > 0 &&
-            data?.map((item, idx) => (
-              <option value={item[0]} key={idx}>
-                {item[1]}
+          {data?.data?.length > 1 ?
+            <>
+            <option value={""}>Select your Country</option>
+            {data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
               </option>
             ))}
+            </>
+            :
+            data?.data?.length == 1 ?
+            data?.data?.map((item) => (
+              <option value={item.code} key={item.uid}>
+                {item.country}
+              </option>
+            ))
+            :
+            data?.data?.length < 1 && data.loading ?
+            <option value=''>
+              Loading...
+            </option>
+            :
+            <option value=''>
+              No Country Found!
+            </option>
+          }
         </select>
       </div>
     </div>

src/components/AuthPages/SignUp/index2.jsx

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

src/components/AuthPages/UpdatePassword/index2.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import titleShape from "../../../assets/images/shape/title-shape-two.svg";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout2";
+import ThankYou from "../ThankYou";
+
+export default function UpdatePassword() {
+  const [updated, setValue] = useState(false);
+  const [message, setMessage] = useState(false);
+  const updatePassword = () => {
+    setValue(!updated);
+    setTimeout(() => {
+      setMessage(!message);
+    }, 100);
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to  myFit">
+        {updated === false ? (
+          <div className="flex place-content-center">
+            <div className="w-11/12 sm:max-w-[600px]">
+              <div className="title-area relative flex flex-col justify-center items-center mb-7">
+                <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+                  Update Password
+                </h1>
+                {/* w-[341px] absolute top-14 left-12 */}
+                <div className="shape sm:w-[341px] w-[270px] -mt-5 sm:-mt-1 ml-5">
+                  <img src={titleShape} alt="shape" />
+                </div>
+              </div>
+              <div className="input-area">
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Old Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="New Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="*********"
+                    label="Re-enter Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                  />
+                </div>
+                <div className="signin-area mb-3.5">
+                  <button
+                    onClick={updatePassword}
+                    type="button"
+                    className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                  >
+                    Continue
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <ThankYou className={`thankyou-section ${message ? "active" : ""}`} />
+        )}
+      </AuthLayout>
+    </>
+  );
+}

src/components/AuthPages/VerifyLink/index.jsx

@@ -54,6 +54,8 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
+            localStorage.setItem("uid", data?.uid)
+
 
             navigate("/", { replace: true });
             setLinkLoader(false);

src/components/AuthPages/VerifyLink/index2.jsx

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

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

src/components/AuthPages/VerifyYou/index2.jsx

@@ -0,0 +1,64 @@
+import { useNavigate, Link } from "react-router-dom";
+import AuthLayout from "../AuthLayout2";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
+
+export default function VerifyYou() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="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-11/12 sm:max-w-[500px]">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Check your email.
+                </span>
+              </div>
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <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.
+                  </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.
+                  </p>
+                </div>
+              </div>
+              <div className="signin-area flex justify-center mb-3.5">
+                <button
+                  onClick={() => navigate("/")}
+                  type="button"
+                  className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                  <span>Return Home</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+}

src/components/Blogs/index.jsx

@@ -47,7 +47,7 @@ export default function BlogItem(props) {
                     </h1>
                 </div>
                 <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                    {blogdata.loading ? 
+                    {blogdata?.loading ? 
                         <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
                     :
                         blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?

src/components/Cards/AvailableJobsCard.jsx

@@ -1,15 +1,13 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
-import usersService from "../../services/UsersService";
+import { useEffect, useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 
 export default function AvailableJobsCard({
   className,
   datas,
   hidden = false,
   contentDisplay,
+  image_server,
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -25,6 +23,13 @@ export default function AvailableJobsCard({
     const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
     setImageUrl(imagePath);
   }, []);
+
+  const image = localStorage.getItem("session_token")
+    ? `${image_server}${localStorage.getItem("session_token")}/job/${
+        datas.job_uid
+      }`
+    : "";
+
   return (
     <>
       {contentDisplay == "grid" ? (
@@ -133,7 +138,7 @@ export default function AvailableJobsCard({
         <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
           <div className="flex gap-5 items-center w-full">
             <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
-              <img src={dataImage2} alt="data" className="w-full h-full" />
+              <img src={image} alt="data" className="w-full h-full" />
             </div>
             <div className="flex flex-col flex-[0.9]">
               <h1
@@ -156,27 +161,6 @@ export default function AvailableJobsCard({
                 </p>
               </div>
 
-              {/* <div className="card-two-info flex gap-2 items-center">
-              <div className="owned-by flex space-x-2 items-center">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
-                  <p className="text-base   text-dark-gray dark:text-white">
-                    {datas.offer_added}
-                  </p>
-                </div>
-              </div>
-              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                <div>
-                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                    Expires
-                  </p>
-                  <p className="text-base text-dark-gray dark:text-white text-right">
-                    {datas.expire}
-                  </p>
-                </div>
-              </div>
-            </div> */}
               <div className="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>

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -5,7 +5,7 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
-export default function FamilyActiveJobsCard({ datas, hidden = false }) {
+export default function FamilyActiveJobsCard({ datas, hidden = false, image_server }) {
 
     let { pathname } = useLocation();
 
@@ -22,7 +22,8 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
         }
     };
 //debugger;
-    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    // const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    let image = `${image_server}${localStorage.getItem('session_token')}/job/${datas.origin_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="content">
@@ -31,10 +32,13 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
                     {/* thumbnail image */}
                     <div
                         className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+                        // style={{
+                        //     background: `url(${localImgLoad(
+                        //         `images/taskbanners/${bannerName}`
+                        //     )}) center / contain no-repeat`,
+                        // }}
                         style={{
-                            background: `url(${localImgLoad(
-                                `images/taskbanners/${bannerName}`
-                            )}) center / contain no-repeat`,
+                            background: `url(${image}) center / contain no-repeat`,
                         }}
                     >
               {/*          <div className="product-options flex justify-between relative">*/}

src/components/Cards/OfferCard.jsx

@@ -2,13 +2,20 @@ import localImgLoad from "../../lib/localImgLoad";
 import CountDown from "../Helpers/CountDown";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
-export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
+export default function OfferCard({
+  datas,
+  hidden = false,
+  setOfferPopout,
+  image_server,
+}) {
   let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
   );
 
+  let image = `${image_server}${localStorage.getItem("session_token")}/job/${datas.job_uid}`
+
   return (
     <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
       <div className="content">
@@ -18,9 +25,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
-              background: `url(${localImgLoad(
-                `images/taskbanners/${datas?.banner || "default.jpg"}`
-              )}) center / contain no-repeat`,
+              background: `url(${image}) center / contain no-repeat`,
             }}
           >
             {hidden && <div className="flex justify-center"></div>}
@@ -31,26 +36,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
           <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
             {datas.title}
           </h1>
-          {/* countdown */}
-          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Task Code
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                {datas.contract}
-                            </p>
-                        </div>
-                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
-                        <div className="flex flex-col justify-between">
-                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
-                                Remaining Time
-                            </p>
-                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
-                                <CountDown lastDate={datas.expire} />
-                            </p>
-                        </div>
-                    </div> */}
+
           <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
             <div className="grid grid-cols-2 gap-2">
               <div className="flex flex-col justify-between items-center border-r-2">
@@ -96,7 +82,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
         <button
           type="button"
           onClick={() =>
-            setOfferPopout({ show: true, data: { ...datas, thePrice } })
+            setOfferPopout({ show: true, data: { ...datas, thePrice, image } })
           }
           className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
         >

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -1,19 +1,18 @@
 import React, {
   Suspense,
   lazy,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
-  useTransition,
 } from "react";
 import { useReactToPrint } from "react-to-print";
-import profile from "../../assets/images/profile-info-profile.png";
+import profile from "../../assets/images/icons/family.svg";
 import localImgLoad from "../../lib/localImgLoad";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
+import FamilyWallet from "./Tabs/FamilyWallet";
 
 // Lazy Imports for components
 const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
@@ -29,113 +28,150 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+  // Initial state for family details
+  const initialDetailState = {
+    loading: false,
+    data: null,
+  };
+// console.log('accountDetails',accountDetails)
+  // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
-    familyDetails: { loading: false, data: null },
-    familyTasks: { loading: false, data: null },
-    familyWaitList: { loading: false, data: null },
-    familyPending: { loading: false, data: null },
+    familyDetails: { ...initialDetailState },
+    familyTasks: { ...initialDetailState },
+    familyWaitList: { ...initialDetailState },
+    familyPending: { ...initialDetailState },
   });
+
+  // Function to reset family details, tasks, waitlist, and pending
+  const resetDetails = () => {
+    setDetails({
+      familyDetails: { ...initialDetailState },
+      familyTasks: { ...initialDetailState },
+      familyWaitList: { ...initialDetailState },
+      familyPending: { ...initialDetailState },
+    });
+  };
+
+  const [updatePage, setUpdatePage] = useState(false) // State to determine when to update the page
+
+  // State for family task data
+  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+
+  // State for active task
+  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 [profileImg, setProfileImg] = useState(profile);
+
+  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+
+  // State for profile image
+  const [profileImg, setProfileImg] = useState(accountDetails.image ? accountDetails.image : profile);
+
+  // Ref for profile image input
   const profileImgInput = useRef(null);
-  const [isPending, startTransition] = useTransition();
+
+  // 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);
   };
 
+  // Function to trigger a click on the hidden profile image input
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
 
+  /**
+   * Handles the change event of the profile image input field.
+   * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
+   * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
+   */
+
   const profileImgChangeHandler = (e) => {
+    setUploadStatus({loading: false, status: false, message:''})
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0] //UPLOADED FILE
+
+    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    if(!acceptedFormat.includes(fileFormat)){ //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat.slice(0, -1).join(', ')} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({loading: false, status: false, message:msg})
+      return setTimeout(()=>{
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
+    }
+
+    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
+      return setTimeout(()=>{
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
+    }
+
     if (e.target.value !== "") {
       const imgReader = new FileReader();
       imgReader.onload = (event) => {
-        setProfileImg(event.target.result);
+        let base64Img = imgReader.result.split(",")[1];
+        let reqData = { // PAYLOAD FOR API CALL
+          family_uid: accountDetails?.family_uid,
+          file_name: uploadedFile?.name,
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: base64Img,
+          msg_type: 'FILE',
+          action: 11305
+        }
+        setUploadStatus({loading: true, status: false, message:'Loading...'})
+        apiCall.sendFiles(reqData).then(res=>{
+          if(res.status != 200 || res.data.internal_return < 0){
+            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
+          }
+          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
+          setProfileImg(event.target.result);
+        }).catch(error=>{
+          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
+        }).finally(()=>{
+          setTimeout(()=>{
+            setUploadStatus({loading: false, status: false, message: ''})
+          },5000)
+        })
       };
       imgReader.readAsDataURL(e.target.files[0]);
     }
   };
 
-  const manageFamily = useCallback(async () => {
-    try {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        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;
-
-      if (
-        familyData?.internal_return < 0 ||
-        tasksData?.internal_return < 0 ||
-        familyWaitData?.internal_return < 0 ||
-        familyPendingData?.internal_return < 0
-      ) {
-        return;
-      }
-
-      startTransition(() => {
-        setDetails({
-          familyDetails: { loading: false, data: familyData },
-          familyTasks: { loading: false, data: tasksData },
-          familyWaitList: { loading: false, data: familyWaitData },
-          familyPending: { loading: false, data: familyPendingData },
-        });
-      });
-    } catch (error) {
-      setDetails((prevDetails) => ({
-        ...prevDetails,
-        familyDetails: { loading: false },
-        familyTasks: { loading: false },
-        familyWaitList: { loading: false },
-        familyPending: { loading: false },
-      }));
-      setErrMsg("An error occurred");
-      throw new Error(error);
-    }
-  }, [apiCall, accountDetails]);
-
+  // Ref for the account section
   const accountRef = useRef();
 
+  // React-to-Print hook for handling printing
   const useHandlePrint = useReactToPrint({
     content: () => accountRef.current,
   });
 
+  // Array of tab names
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
     { id: 3, name: "Pending" },
   ];
 
+  // State for the currently selected tab
   const [tab, setTab] = useState(tabs[0].name);
 
+  // Function to handle tab changes
   const tabHandler = (value) => {
-    startTransition(() => {
-      setTab(value);
-    });
+    setTab(value);
   };
 
+  // Object that maps tab names to their corresponding components
   const tabComponents = {
     Tasks: (
       <FamilyTasks
@@ -156,7 +192,7 @@ export default function FamilyManageTabs({
       <FamilyPending
         familyData={details.familyPending.data}
         accountDetails={accountDetails}
-        loader={details.familyWaitList.loading}
+        loader={details.familyPending.loading}
       />
     ),
     Account: (
@@ -167,9 +203,11 @@ export default function FamilyManageTabs({
         handlePrint={useHandlePrint}
       />
     ),
-    Profile: <FamilyProfile />,
+    Profile: <FamilyProfile familyData={details.familyDetails.data} />,
+    wallet: <FamilyWallet familyData={details.familyDetails.data} />,
   };
 
+  // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
@@ -179,17 +217,101 @@ 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
   useEffect(() => {
-    let __manageFamily = true;
-    if (__manageFamily) {
-      manageFamily();
-    }
-    return () => {
-      __manageFamily = false;
+    const manageFamily = async () => {
+      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;
+        }
+
+        setDetails({
+          familyDetails: { loading: false, data: familyData },
+          familyTasks: { loading: false, data: tasksData },
+          familyWaitList: { loading: false, data: familyWaitData },
+          familyPending: { loading: false, data: familyPendingData },
+        });
+      } catch (error) {
+        resetDetails();
+        setErrMsg("An error occurred");
+        throw new Error(error);
+      }
     };
-  }, [tab, manageFamily]);
+
+    // Invoke the manageFamily function when the component mounts
+    manageFamily();
+  }, [updatePage]);
+
+  // Effect to manage family tasks
+  useEffect(() => {
+    let checkFamilyTask = true;
+    const reqData = {
+      limit: 30,
+      offset: 0,
+      job_type: "FAMILY",
+      action: 13005,
+    };
+
+    if (checkFamilyTask) {
+      setFamilyTask({ loading: true });
+      apiCall
+        .getMyJobList(reqData)
+        .then((res) => {
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
+          if (res?.data?.result_list?.length) {
+            setActiveTask((prev) => ({
+              ...prev,
+              data: res?.data?.result_list[0],
+            }));
+          }
+        })
+        .catch((err) => {
+          setFamilyTask({ loading: false, data: [] });
+          console.log("Error", err);
+        });
+    }
+
+    // Cleanup function to prevent memory leaks
+    return () => {
+      checkFamilyTask = false;
+    };
+  }, []);
 
   return (
     <div
@@ -213,18 +335,19 @@ export default function FamilyManageTabs({
                 profileImgChangeHandler={profileImgChangeHandler}
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
+                uploadStatus={uploadStatus}
               />
-              <div className="mt-4 flex justify-start items-center gap-2">
+              <div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
                 <button
                   onClick={() => tabHandler("Account")}
                   className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/account.svg")}
-                    className="max-w-[30px] w-full"
+                    className="max-w-[30px]"
                     alt="Settings-Icon"
                   />
-                  <p className="text-lg text-sky-blue">Acc.</p>
+                  <p className="text-[16px] text-sky-blue">Acc.</p>
                 </button>
                 <button
                   onClick={() => tabHandler("Profile")}
@@ -232,10 +355,21 @@ export default function FamilyManageTabs({
                 >
                   <img
                     src={localImgLoad("images/icons/profile.svg")}
-                    className="max-w-[30px] w-full"
+                    className="max-w-[30px]"
                     alt="Settings-Icon"
                   />
-                  <p className="text-lg text-sky-blue">Profile</p>
+                  <p className="text-[16px] text-sky-blue">Profile</p>
+                </button>
+                <button
+                  onClick={() => tabHandler("wallet")}
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
+                >
+                  <img
+                    src={localImgLoad("images/icons/wallet.svg")}
+                    className="max-w-[30px]"
+                    alt="Settings-Icon"
+                  />
+                  <p className="text-[16px] text-sky-blue">Wallet</p>
                 </button>
               </div>
             </div>
@@ -265,7 +399,7 @@ export default function FamilyManageTabs({
                     Add task
                   </button>
                 </div>
-                
+
                 <div className="flex-[0.9] h-full">
                   <div className="h-full relative overflow-y-auto">
                     <Suspense
@@ -285,7 +419,12 @@ export default function FamilyManageTabs({
         <AssignTaskPopout
           action={familyPopUpHandler}
           situation={familyTaskPopout}
-          familyDetails={details.familyDetails.data}
+          familyTask={familyTask}
+          setFamilyTask={setFamilyTask}
+          setActiveTask={setActiveTask}
+          activeTask={activeTask}
+          familyDetailsData={details.familyDetails.data}
+          setUpdatePage={setUpdatePage}
         />
       )}
     </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -1,441 +1,424 @@
-import React, { useState, useEffect, useTransition } from "react";
-import ModalCom from "../../Helpers/ModalCom";
-import Detail from "../../jobPopout/popoutcomponent/Detail";
+import React, { useState } from "react";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import Detail from "../../jobPopout/popoutcomponent/Detail";
 import { NewTasks } from "./forms";
+import { tableReload } from "../../../store/TableReloads";
+import { useDispatch } from "react-redux";
 
-const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetails }) => {
-  const apiCall = new usersService();
+const AssignTaskPopout = React.memo(
+  ({
+    action,
+    details,
+    situation,
+    familyDetailsData,
+    familyTask,
+    activeTask,
+    setActiveTask,
+    setUpdatePage
+  }) => {
+    const apiCall = new usersService();
 
-  let [requestStatus, setRequestStatus] = useState({
-    loading: false,
-    status: false,
-    message: "",
-  }); // HOLDS RESPONSE FOR SENDING API REQUEST
+    const dispatch = useDispatch()
 
-  let [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
+    let [requestStatus, setRequestStatus] = useState({
+      loading: false,
+      status: false,
+      message: "",
+    }); // HOLDS RESPONSE FOR SENDING API REQUEST
 
-  let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
+    let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK
 
-  let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
+    const switchTaskType = ({ target: { value } }) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setTaskType(value);
+    };
 
-  const switchTaskType = ({ target: { value } }) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setTaskType(value);
-  };
+    const handleActiveTask = (id = 0, data = {}) => {
+      // FUNCTION TO CHANGE SELECTED ACTIVE TASK
+      setActiveTask({ id, data });
+    };
 
-  const handleActiveTask = (id = 0, data = {}) => {
-    // FUNCTION TO CHANGE SELECTED ACTIVE TASK
-    setActiveTask({ id, data });
-  };
+    // New Task
+    const [formState, setFormState] = useState({
+      // Initialize form state with desired fields
+      banner: details?.banner || "default.jpg",
+      country: details?.country || "",
+      price: details?.price || "",
+      title: details?.title || "",
+      description: details?.description || "",
+      job_detail: details?.job_detail || "",
+      timeline_days: details?.timeline_days || "",
+      category: details?.category || "",
+    });
 
-  // New Task
-  const [formState, setFormState] = useState({
-    // Initialize form state with desired fields
-    banner: details?.banner || "default.jpg",
-    country: details?.country || "",
-    price: details?.price || "",
-    title: details?.title || "",
-    description: details?.description || "",
-    job_detail: details?.job_detail || "",
-    timeline_days: details?.timeline_days || "",
-    category: details?.category || "",
-  });
-
-  const assignFamilyTask = () => {
-    setRequestStatus({ loading: true, status: false, message: "" });
-    let reqData = {};
-    if (taskType == "select") {
-      // RUNS HERE IF TASK TYPE IS SELECT
-      if (!Object.keys(activeTask.data).length) {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "No Task is seleted",
-        });
-        return setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
-      }
-      reqData = {
-        // API PAYLOADS
-        job_id: activeTask.data?.job_id,
-        job_uid: activeTask.data?.job_uid,
-        family_uid: familyDetails?.uid || details?.family_uid,
-        job_description: activeTask.data?.description,
-        assign_mode: 110011,
-      };
-    }
-
-    if (taskType === "new") {
-      const {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price,
-        timeline_days,
-        title,
-      } = formState;
-
-      const requiredFields = {
-        banner,
-        // category,
-        country,
-        description,
-        job_detail,
-        price,
-        timeline_days,
-        title,
-      };
-
-      for (let field in requiredFields) {
-        if (requiredFields[field] == "") {
-          // let currencyErrMsg = field == "country" && "currency"
+    const assignFamilyTask = () => {
+      setRequestStatus({ loading: true, status: false, message: "" });
+      let reqData = {};
+      if (taskType == "select") {
+        // RUNS HERE IF TASK TYPE IS SELECT
+        if (!Object.keys(activeTask.data).length) {
           setRequestStatus({
             loading: false,
             status: false,
-            message: `${field} is empty`,
+            message: "No Task is seleted",
           });
           return setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 3000);
         }
+        reqData = {
+          // API PAYLOADS
+          job_id: activeTask.data?.job_id,
+          job_uid: activeTask.data?.job_uid,
+          family_uid: familyDetailsData?.uid || details?.family_uid,
+          job_description: activeTask.data?.description,
+          assign_mode: 110011,
+        };
       }
 
-      reqData = {
-        banner,
-        category,
-        country,
-        description,
-        job_detail,
-        price: price * 100,
-        timeline_days,
-        title,
-        assign_mode: 110055,
-        family_uid: details?.family_uid || familyDetails?.uid,
-      };
-    }
+      if (taskType === "new") {
+        const {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price,
+          timeline_days,
+          title,
+        } = formState;
 
-    apiCall
-      .assignFamilyTask(reqData)
-      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        const requiredFields = {
+          banner,
+          // category,
+          currency:country,
+          description,
+          'job detail':job_detail,
+          price,
+          timeline:timeline_days,
+          title,
+        };
+
+        for (let field in requiredFields) {
+          if (requiredFields[field] == "") {
+            // let currencyErrMsg = field == "country" && "currency"
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: `${field[0].toUpperCase()+field.slice(1).toLowerCase()} is empty`,
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 3000);
+          }
+        }
+
+        reqData = {
+          banner,
+          category,
+          country,
+          description,
+          job_detail,
+          price: price * 100,
+          timeline_days,
+          title,
+          assign_mode: 110055,
+          family_uid: details?.family_uid || familyDetailsData?.uid,
+        };
+      }
+
+      apiCall
+        .assignFamilyTask(reqData)
+        .then((res) => {
+          if (res.status != 200 || res.data.internal_return < 0) {
+            setRequestStatus({
+              loading: false,
+              status: false,
+              message: "failed to assign task",
+            });
+            return setTimeout(() => {
+              setRequestStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          }
+          setRequestStatus({
+            loading: false,
+            status: true,
+            message: "action successful",
+          });
+          setUpdatePage(prev => !prev) // Updates family task page by calling the useeffect hook
+          dispatch(tableReload({ type: "WALLETTABLE" })); // RELOADS USER WALLET
+          setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+            action(); // FUNCTION THAT CLOSES THE MODAL BOX
+          }, 5000);
+        })
+        .catch((err) => {
           setRequestStatus({
             loading: false,
             status: false,
-            message: "failed to assign task",
+            message: "An Error occured, try again",
           });
-          return setTimeout(() => {
+          setTimeout(() => {
             setRequestStatus({ loading: false, status: false, message: "" });
           }, 5000);
-        }
-        setRequestStatus({
-          loading: false,
-          status: true,
-          message: "action successful",
         });
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-          action(); // FUNCTION THAT CLOSES THE MODAL BOX
-        }, 5000);
-      })
-      .catch((err) => {
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: "An Error occured, try again",
-        });
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 5000);
-      });
-  };
-
-  useEffect(() => {
-    let checkFamilyTask = true;
-    const reqData = {
-      limit: 30,
-      offset: 0,
-      job_type: "FAMILY",
-      action: 13005,
     };
 
-    apiCall
-      .getMyJobList(reqData)
-      .then((res) => {
-        if (checkFamilyTask) {
-          setFamilyTask({ loading: false, data: res?.data?.result_list });
-          if (res?.data?.result_list?.length) {
-            setActiveTask((prev) => ({
-              ...prev,
-              data: res?.data?.result_list[0],
-            }));
-          }
-        }
-      })
-      .catch((err) => {
-        setFamilyTask({ loading: false, data: [] });
-        console.log("Error", err);
-      });
-
-    return () => {
-      checkFamilyTask = false;
-    };
-  }, []);
-
-  return (
-    <>
-      <ModalCom
-        action={action}
-        situation={situation}
-        className="assign-task-popup"
-      >
-        <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
-          <div className="w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-              Assign task to {familyDetails?.firstname || details.firstName}
-            </h1>
-            <button
-              type="button"
-              className="text-[#374557] dark:text-red-500"
-              onClick={action}
-            >
-              <svg
-                width="36"
-                height="36"
-                viewBox="0 0 36 36"
-                fill="none"
-                className="fill-current"
-                xmlns="http://www.w3.org/2000/svg"
+    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] border-b dark:border-[#5356fb29]  border-light-purple">
+              <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+                Assign task to{" "}
+                {familyDetailsData?.firstname || details?.firstName}
+              </h1>
+              <button
+                type="button"
+                className="text-[#374557] dark:text-red-500"
+                onClick={action}
               >
-                <path
-                  d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
-                  fill=""
-                  fillOpacity="0.6"
-                />
-                <path
-                  d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
-                  fill="#"
-                  fillOpacity="0.6"
-                />
-              </svg>
-            </button>
-          </div>
-          {familyTask.loading ? (
-            <div className="h-[100px] w-full flex justify-center items-center">
-              <LoadingSpinner color="sky-blue" size="16" />
+                <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={`job-action-modal-body w-full md:grid ${
-                  taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
-                }`}
-              >
-                <div className="p-4">
-                  <div className="mb-2 w-full flex items-center gap-4">
-                    <div className="flex items-center gap-2 text-sky-blue text-base">
-                      <input
-                        type="radio"
-                        name="task-type"
-                        value="select"
-                        className="w-[20px] h-[20px] cursor-pointer"
-                        checked={taskType == "select"}
-                        onChange={switchTaskType}
-                      />
-                      <span>Select Task</span>
+            {familyTask?.loading ? (
+              <div className="h-[100px] w-full flex justify-center items-center">
+                <LoadingSpinner color="sky-blue" size="16" />
+              </div>
+            ) : (
+              <>
+                <div
+                  className={`job-action-modal-body w-full md:grid ${
+                    taskType !== "new" ? "md:grid-cols-2" : "md:grid-cols-1"
+                  }`}
+                >
+                  <div className="p-4">
+                    <div className="mb-2 w-full flex items-center gap-4">
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="select"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "select"}
+                          onChange={switchTaskType}
+                        />
+                        <span>Select Task</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sky-blue text-base">
+                        <input
+                          type="radio"
+                          name="task-type"
+                          value="new"
+                          className="w-[20px] h-[20px] cursor-pointer"
+                          checked={taskType == "new"}
+                          onChange={switchTaskType}
+                        />
+                        <span>New Task</span>
+                      </div>
                     </div>
-                    <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">
-                      {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={() =>
+                    {/* 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)
                               }
-                              className="w-[15px] h-[15px] cursor-pointer"
-                            />
-                            <p className="w-full text-dark-gray tracking-wide">
-                              {item?.title}
+                            >
+                              <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="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Price
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">
+                                  {PriceFormatter(
+                                    activeTask?.data?.price * 0.01,
+                                    activeTask?.data?.currency,
+                                    activeTask?.data?.curreny_code
+                                  )}
+                                </p>
+                              </div>
+
+                              <div className="my-3 w-full flex items-center gap-1">
+                                <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
+                                  Timeline
+                                </label>
+                                <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
+                              </div>
+                            </div>
+
+                            <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 text-slate-900 dark:text-white tracking-wide font-semibold">
+                                Delivery Detail
+                              </label>
+                              <textarea
+                                className={`p-1 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                                rows="5"
+                                style={{ resize: "none" }}
+                                value={activeTask?.data?.job_detail}
+                                readOnly
+                                // onChange={handleInputChange}
+                              />
+                            </div>
                           </div>
-                        ))
+                        </div>
                       ) : (
-                        <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="text-slate-900 dark:text-white tracking-wide font-semibold">
-                                Price
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">
-                                {PriceFormatter(
-                                  activeTask?.data?.price * 0.01,
-                                  activeTask?.data?.currency,
-                                  activeTask?.data?.curreny_code
-                                )}
-                              </p>
-                            </div>
-
-                            <div className="my-3 w-full flex items-center gap-1">
-                              <label className="text-slate-900 dark:text-white tracking-wide font-semibold">
-                                Timeline
-                              </label>
-                              <p className="p-1 text-sm text-slate-900 dark:text-white">{`${activeTask?.data?.timeline_days} day(s)`}</p>
-                            </div>
-                          </div>
-
-                          <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 text-slate-900 dark:text-white tracking-wide font-semibold">
-                              Delivery Detail
-                            </label>
-                            <textarea
-                              className={`p-1 w-full text-sm text-slate-900 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 && (
+                {/* 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-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-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px] self-start`}
                         >
                           {requestStatus.message}
                         </div>
-                      )
-                    ))}
-                </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-3">
-                  <button
-                    disabled={requestStatus.loading}
-                    onClick={action}
-                    type="button"
-                    className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
-                  >
-                    <span className="text-gradient">Close</span>
-                  </button>
-                  <div className="">
-                    {requestStatus.loading ? (
-                      <LoadingSpinner color="sky-blue" size="8" />
-                    ) : taskType == "select" ? (
-                      <button
-                        type="button"
-                        disabled={requestStatus.loading}
-                        onClick={assignFamilyTask}
-                        className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                      >
-                        Assign
-                      </button>
-                    ) : (
-                      <button
-                        type="button"
-                        disabled={requestStatus.loading}
-                        onClick={assignFamilyTask}
-                        className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
-                      >
-                        {`Assign to ${
-                          familyDetails?.firstname || details?.firstName
-                        }`}
-                      </button>
-                    )}
+                  {/* End of error or success display */}
+                  <div className="w-auto h-auto flex items-center gap-3">
+                    <button
+                      disabled={requestStatus.loading}
+                      onClick={action}
+                      type="button"
+                      className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
+                    >
+                      <span className="text-gradient">Close</span>
+                    </button>
+                    <div className="">
+                      {requestStatus.loading ? (
+                        <LoadingSpinner color="sky-blue" size="8" />
+                      ) : taskType == "select" ? (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          Assign
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          disabled={requestStatus.loading}
+                          onClick={assignFamilyTask}
+                          className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        >
+                          {`Assign to ${
+                            familyDetailsData?.firstname || details?.firstName
+                          }`}
+                        </button>
+                      )}
+                    </div>
                   </div>
                 </div>
-              </div>
-            </>
-          )}
-        </div>
-      </ModalCom>
-    </>
-  );
-})
+              </>
+            )}
+          </div>
+        </ModalCom>
+      </>
+    );
+  }
+);
 
-export default AssignTaskPopout;
+export default AssignTaskPopout;

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

@@ -69,7 +69,7 @@ export default function NewTasks({ formState, setFormState }) {
               onChange={handleInputChange}
               // onBlur={props.handleBlur}
             >
-              {currency.loading ? (
+              {currency?.loading ? (
                 <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AddFamily = () => {
+  return (
+    <div>Add Family</div>
+  )
+}
+
+export default AddFamily

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

@@ -0,0 +1,153 @@
+import React, { useMemo, useRef, useState } from "react";
+import usersService from "../../../../services/UsersService";
+
+const FamilyBanner = ({ imageServer }) => {
+  const uploadedImage = `${imageServer}${localStorage.getItem(
+    "session_token"
+  )}/familybanner/${localStorage.getItem("uid")}`;
+
+  const familyBannerRef = useRef(null);
+  const jobApi = useMemo(() => new usersService(), []);
+
+  const [familyBannerImage, setFamilyBannerImage] = useState(uploadedImage);
+  const [uploadStatus, setUploadStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  /**
+   * Handles the change event of the family image input field.
+   * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
+   * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
+   */
+
+  const familyBannerHandler = (e) => {
+    setUploadStatus({ loading: false, status: false, message: "" });
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp"]; // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0]; //UPLOADED FILE
+
+    const fileFormat = uploadedFile?.type?.split("/")[1]?.toLowerCase();
+    if (!acceptedFormat.includes(fileFormat)) {
+      //CHECKING FOR CORRECT UPLOAD FORMAT
+      const msg = `Please select ${acceptedFormat
+        .slice(0, -1)
+        .join(", ")} or ${acceptedFormat.slice(-1)}`;
+      setUploadStatus({ loading: false, status: false, message: msg });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (uploadedFile.size > 5 * 1048576) {
+      // CHECKING FOR CORRECT FILE SIZE
+      setUploadStatus({
+        loading: false,
+        status: false,
+        message: "File must not exceed 5MB",
+      });
+      return setTimeout(() => {
+        // profileImgInput.current.value = '' // clear the input
+        setUploadStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+    }
+
+    if (e.target.value !== "") {
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let base64Img = imgReader.result.split(",")[1];
+        let reqData = {
+          // PAYLOAD FOR API CALL
+          job_uid: localStorage.getItem("uid"),
+          file_name: uploadedFile?.name.slice(0, 19),
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: base64Img,
+          msg_type: "FILE",
+          action: 11303,
+        };
+        setUploadStatus({
+          loading: true,
+          status: false,
+          message: "Loading...",
+        });
+        jobApi
+          .sendFiles(reqData)
+          .then((res) => {
+            if (res.status != 200 || res.data.internal_return < 0) {
+              return setUploadStatus({
+                loading: false,
+                status: false,
+                message: "Something went wrong, try again",
+              });
+            }
+            setUploadStatus({
+              loading: false,
+              status: true,
+              message: "Uploaded successfully",
+            });
+            setFamilyBannerImage(event.target.result);
+          })
+          .catch((error) => {
+            setUploadStatus({
+              loading: false,
+              status: false,
+              message: "Network error, try again",
+            });
+          })
+          .finally(() => {
+            setTimeout(() => {
+              setUploadStatus({ loading: false, status: false, message: "" });
+            }, 5000);
+          });
+      };
+      imgReader.readAsDataURL(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="w-full lg:h-[400px] rounded-2xl">
+        <img
+          src={familyBannerImage}
+          alt="familyBanner"
+          className="w-full h-full object-cover rounded-2xl"
+        />
+      </div>
+      <div className="flex justify-between w-full">
+        <div>
+          {uploadStatus.message && !uploadStatus.loading && (
+            <p
+              className={`text-center ${
+                uploadStatus.status ? "text-green-500" : "text-red-500"
+              }`}
+            >
+              {uploadStatus.message}
+            </p>
+          )}
+          {uploadStatus.loading && (
+            <p className="text-center">{uploadStatus.message}</p>
+          )}
+        </div>
+        <div>
+          <input
+            ref={familyBannerRef}
+            className="hidden"
+            type="file"
+            accept="image/*"
+            onChange={familyBannerHandler}
+          />
+          <button
+            className="btn-gradient w-[153px] h-[46px] rounded-full text-white lg:flex hidden justify-center items-center"
+            onClick={() => familyBannerRef.current.click()}
+          >
+            Change Banner
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FamilyBanner;

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Relatives = () => {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives

src/components/FamilyAcc/FamilySettings/Tabs/index.js

@@ -0,0 +1,5 @@
+import AddFamily from "./AddFamily";
+import FamilyBanner from "./FamilyBanner";
+import Relatives from "./Relatives";
+
+export {AddFamily, FamilyBanner, Relatives}

src/components/FamilyAcc/FamilySettings/index.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import Icons from "../../Helpers/Icons";
+import Layout from "../../Partials/Layout";
+import { AddFamily, FamilyBanner, Relatives } from "./Tabs";
+
+const FamilySettings = () => {
+  let {state} = useLocation()
+  const tabs = [
+    {
+      id: 1,
+      name: "add_family",
+      title: "Add Family",
+      iconName: "new-family",
+    },
+    {
+      id: 2,
+      name: "relatives",
+      title: "Relatives",
+      iconName: "people-hover",
+    },
+    {
+      id: 3,
+      name: "family_banner",
+      title: "Family Banner",
+      iconName: "people-hover",
+    },
+  ];
+
+  const [tab, setTab] = useState(() => {
+    // Retrieve the active tab from local storage or use the default tab
+    return localStorage.getItem("activeTab") || tabs[0].name;
+  });
+
+  const tabHandler = (value) => {
+    setTab(value);
+  };
+
+  // Update local storage when the tab changes
+  useEffect(() => {
+    localStorage.setItem("activeTab", tab);
+  }, [tab]);
+
+  const tabComponents = {
+    add_family: <AddFamily />,
+    relatives: <Relatives />,
+    family_banner: <FamilyBanner imageServer={state.imageServer} />,
+  };
+
+  const defaultTabComponent = Array(tabComponents)[0].add_family;
+
+  const selectedComponent = tabComponents[tab] || defaultTabComponent;
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          {/* heading */}
+          <div className="sm:flex justify-between items-center mb-6">
+            <div className="mb-5 sm:mb-0">
+              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                <span className={``}>Family Settings</span>
+              </h1>
+            </div>
+            <Link to="/acc-family">Go Back</Link>
+          </div>
+          {/* Something Here */}
+          {/* <form className="logout-modal-body w-full flex flex-col items-center px-10 py-8 gap-4"></form> */}
+          <div className="w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ">
+            <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] lg:flex lg:px-10 px-4 justify-between">
+              <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                <ul className="overflow-hidden mb-10 lg:mb-0 py-8">
+                  {tabs.map(({ name, id, title, iconName }) => (
+                    <li
+                      onClick={() => tabHandler(name)}
+                      key={id}
+                      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+                        tab === name ? "text-purple" : " text-thin-light-gray"
+                      }`}
+                    >
+                      <div>
+                        <Icons name={iconName} />
+                      </div>
+                      <div>
+                        <p className="text-18 tracking-wide">{title}</p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+              <div className="flex-1">
+                <div className="tab-item">{selectedComponent}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default FamilySettings;

src/components/FamilyAcc/FamilyTable.jsx

@@ -1,29 +1,169 @@
 import React, { useState } from "react";
-import dataImage1 from "../../assets/images/data-table-user-1.png";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 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 familyImage from "../../assets/images/no-family-side.png";
+import { formatDateString } from "../../lib";
 import localImgLoad from "../../lib/localImgLoad";
 
-export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
-  const navigate = useNavigate();
+/**
+ * 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 FamilyTable({
+  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 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
+  }) => {
+    // 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-xl text-dark-gray dark:text-white whitespace-nowrap">
+                {`${firstname} ${lastname} (${age < 10 ? `0${age}` : age})`}
+              </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 section-shadow min-h-[520px] ${
+      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 || ""
       }`}
     >
@@ -32,125 +172,52 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
           </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">Last Login</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((props, idx) => {
-                      let {
-                        firstname,
-                        lastname,
-                        age,
-                        added,
-                        last_login,
-                        task_count,
-                        family_uid,
-                        banner
-                      } = props;
-                      let addedDate = added?.split(" ")[0];
-                      let LoginDate = last_login?.split(" ")[0];
-                      return (
-                        <tr
-                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29]  hover:bg-gray-50"
-                          key={family_uid}
-                        >
-                          <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 flex-[0.1]">
-                                <img
-                                  // src={dataImage1}
-                                  src={localImgLoad(`images/icons/${banner}`)}
-                                  alt="data"
-                                  className="w-full h-full"
-                                />
-                              </div>
-                              <div className="flex flex-col flex-[0.9]">
-                                <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                                  {`${firstname} ${lastname} (${age})`}
-                                </h1>
-                                <span className="text-sm text-thin-light-gray">
-                                  Added:{" "}
-                                  <span className="text-purple ml-1">
-                                    {addedDate}
-                                  </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 text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                                {LoginDate}
-                              </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={() => {
-                                navigate("/manage-family", {
-                                  state: { ...props },
-                                });
-                              }}
-                              type="button"
-                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
-                              Manage
-                            </button>
-                          </td>
-                        </tr>
-                      );
-                    })
-                  }
-              </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>
-          )
-        }
+        ) : (
+          <>
+            {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
+      {/* PAGINATION BUTTON */}
+      <PaginatedList
         onClick={handlePagination}
-        prev={currentPage == 0 ? true : false}
-        next={
-          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-          familyList?.length
-            ? true
-            : false
-        }
+        prev={currentPage == 0}
+        next={currentPage + itemsPerPage >= familyList?.length}
         data={familyList}
         start={indexOfFirstItem}
         stop={indexOfLastItem}

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -1,7 +1,10 @@
 import { forwardRef } from "react";
 import QRCode from "react-qr-code";
+import { useSelector } from "react-redux";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
+const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint, loader }, ref) => {
+  const { userDetails } = useSelector((state) => state.userDetails);
   return (
     <div
       className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
@@ -32,12 +35,19 @@ const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
             <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 ?
+            <div className="w-full">
+              <LoadingSpinner size='8' color='sky-blue' />
+            </div>
+            :
             <QRCode
               size={256}
               style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-              value={`https://www.google.com`}
+              // value={`https://www.google.com`}
+              value={`${userDetails?.uid}@${familyData?.username}@${familyData?.uid}`}
               viewBox={`0 0 256 256`}
             />
+            }
           </div>
         </div>
         <div className="h-[50px] w-full flex justify-center items-center">

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -54,7 +54,7 @@ export default function FamilyPending({
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = value.banner ? value.banner : "default.jpg";
+                      let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                       return (
                         <tr
                           key={index}
@@ -64,9 +64,7 @@ export default function FamilyPending({
                             <div className="flex space-x-2 items-center w-full">
                               <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                 <img
-                                  src={localImgLoad(
-                                    `images/taskbanners/${image}`
-                                  )}
+                                  src={image}
                                   alt="data"
                                   className="w-full h-full rounded-full"
                                 />

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -1,11 +1,308 @@
-export default function FamilyProfile({ className }) {
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+export default function FamilyProfile({ familyData, className }) {
+  const validationSchema = Yup.object().shape({
+    firstname: Yup.string().required("Firstname is required"),
+    lastname: Yup.string()
+      // .min(3, "Minimum 3 characters")
+      // .max(25, "Maximum 25 characters")
+      .required("Lastname is required"),
+    year: Yup.number()
+      .required("Year is required")
+      .min(
+        new Date().getFullYear() - process.env.REACT_APP_FAMILY_MAXIMUM_AGE,
+        `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
+      )
+      .max(
+        new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE,
+        `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
+      ),
+    month: Yup.number()
+      .required("Month is required")
+      .min(1, "Month is required"),
+  });
+
+  const navigate = useNavigate();
+  const api = new usersService();
+
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  });
+
+  // let [updateDetails, setUpdateDetails] = useState({
+  //   family_uid: familyData.uid,
+  //   firstname: familyData.firstname,
+  //   lastname: familyData.lastname,
+  //   year: familyData.year,
+  //   month: familyData.month,
+  //   action: 22020
+  // })
+
+  // initial values for formik
+  let initialValues = {
+    family_uid: familyData?.uid,
+    firstname: familyData?.firstname,
+    lastname: familyData?.lastname,
+    year: familyData?.year,
+    month: familyData?.month,
+    enable_traking: familyData?.enable_traking,
+    action: 22020,
+  };
+
+  // const handleChange = ({ target: { name, value } }) => {
+  //   setUpdateDetails((prev) => ({ ...prev, [name]: value }));
+  // };
+
+  const updateFamily = (values, helpers) => {
+    setRequestStatus({ loading: true, status: false, message: "" });
+    // let {firstname, lastname, year, month} = updateDetails
+    // if(!firstname || !lastname || year == 0 || month == 0) {
+    //   setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
+    //   return setTimeout(()=>{
+    //     setRequestStatus({loading:false, status:false, message: ''})
+    //   }, 5000)
+    // }
+    api
+      .getFamilyUpdate(values)
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          return setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Failed, try again!",
+          });
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Family account updated",
+        });
+        setTimeout(() => {
+          navigate("/acc-family", { replace: true });
+        }, 5000);
+      })
+      .catch((error) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Unable to update, try again!",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
+
   return (
     <div
-      className={`update-table w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
+      className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
         className || ""
       }`}
     >
-      <h1>Profile</h1>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={updateFamily}
+      >
+        {(props) => {
+          return (
+            <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
+              <InputCom
+                placeholder="Firstname"
+                label="First Name:"
+                name="firstname"
+                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] ${
+                  props.errors.firstname && props.touched.firstname
+                    ? "border border-red-500"
+                    : ""
+                }`}
+                fieldClass="px-2"
+                value={props.values.firstname}
+                inputHandler={props.handleChange}
+              />
+              <InputCom
+                placeholder="Lastname"
+                label="Last Name:"
+                name="lastname"
+                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] ${
+                  props.errors.lastname && props.touched.lastname
+                    ? "border border-red-500"
+                    : ""
+                }`}
+                fieldClass="px-2"
+                value={props.values?.lastname}
+                inputHandler={props.handleChange}
+              />
+
+              <div className="input-com flex flex-col gap-1 w-full">
+                {/* Age dropdown */}
+                <div className="">
+                  <label
+                    className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                    htmlFor="age-selection"
+                  >
+                    Birthday: (Year/Month)
+                  </label>
+                  {((props.errors.year && props.touched.year) ||
+                    (props.errors.month && props.touched.month)) && (
+                    <span className="text-[12px] text-red-500">
+                      {" "}
+                      {props.errors.year || props.errors.month}
+                    </span>
+                  )}
+                </div>
+                <div className="flex max-w-[330px] w-full self-end gap-4">
+                  <select
+                    name="year"
+                    id="yearDropdown"
+                    value={props.values.year}
+                    onChange={props.handleChange}
+                    className={`input-wrapper border border-[#f5f8fa] ${
+                      props.errors.year && props.touched.year
+                        ? "border border-red-500"
+                        : ""
+                    } 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`}
+                  >
+                    <option value="">Select a Year</option>
+                    {years.map((year) => (
+                      <option key={year} value={year}>
+                        {year}
+                      </option>
+                    ))}
+                  </select>
+
+                  <select
+                    name="month"
+                    id="monthDropdown"
+                    // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
+                    value={
+                      months.filter(
+                        (month) => month.id == props.values.month
+                      )[0]?.id || 0
+                    }
+                    onChange={props.handleChange}
+                    className={`input-wrapper border border-[#f5f8fa] ${
+                      props.errors.month && props.touched.month
+                        ? "border border-red-500"
+                        : ""
+                    } 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`}
+                  >
+                    <option value="">Select a Month</option>
+                    {months.map(({ id, name }) => (
+                      <option key={id} value={id}>
+                        {name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="input-com mb-7 flex flex-col gap-1 w-full">
+                {/* Location dropdown */}
+                <div className="">
+                  <label
+                    className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
+                    htmlFor="age-selection"
+                  >
+                    Location Tracking
+                  </label>
+                  {/* {((props.errors.year && props.touched.year) ||
+                    (props.errors.month && props.touched.month)) && (
+                    <span className="text-[12px] text-red-500">
+                      {" "}
+                      {props.errors.year || props.errors.month}
+                    </span>
+                  )} */}
+                </div>
+                <div className="flex max-w-[330px] w-full self-end gap-4">
+                  <select
+                    name="enable_traking"
+                    id="enable_traking"
+                    value={props.values.enable_traking}
+                    onChange={props.handleChange}
+                    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`}
+                  >
+                    <option value={+0}>Disabled</option>
+                    <option value={+100}>Enabled</option>
+                  </select>
+                </div>
+              </div>
+
+              {requestStatus.message && (
+                <div
+                  className={`relative p-2 ${
+                    !requestStatus.status
+                      ? "text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]"
+                      : "text-green-700"
+                  } mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )}
+              <div className="flex justify-end w-full">
+                {requestStatus.loading ? (
+                  <>
+                    <div className="signup btn-loader"></div>
+                    <LoadingSpinner size="4" />
+                  </>
+                ) : (
+                  <button
+                    type="submit"
+                    // onClick={updateFamily}
+                    // 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"
+                  >
+                    Update
+                  </button>
+                )}
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
     </div>
   );
 }
+
+// Get the current year
+// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
+
+// Calculate the current year and the year 3 years before the current year
+const currentYear = new Date().getFullYear();
+const startYear = currentYear - 3;
+
+// Generate an array of years from 4 years before the current year to 18 years before the current year
+const years = Array.from({ length: 15 }, (_, index) => startYear - index).reverse();
+// const latestYears = years.slice(0, process.env.REACT_APP_FAMILY_YEAR_RANGE);
+
+const months = [
+  { id: "1", name: "January" },
+  { id: "2", name: "February" },
+  { id: "3", name: "March" },
+  { id: "4", name: "April" },
+  { id: "5", name: "May" },
+  { id: "6", name: "June" },
+  { id: "7", name: "July" },
+  { id: "8", name: "August" },
+  { id: "9", name: "September" },
+  { id: "10", name: "October" },
+  { id: "11", name: "November" },
+  { id: "12", name: "December" },
+];

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -67,9 +67,7 @@ export default function FamilyTasks({
                             value?.currency_code,
                             value?.currency
                           );
-                          let image = value.banner
-                            ? value.banner
-                            : "default.jpg";
+                          let image = `${familyData.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
                           return (
                             <tr
                               key={index}
@@ -79,9 +77,7 @@ export default function FamilyTasks({
                                 <div className="flex space-x-2 items-center w-full">
                                   <div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
                                     <img
-                                      src={localImgLoad(
-                                        `images/taskbanners/${image}`
-                                      )}
+                                      src={image}
                                       alt="data"
                                       className="w-full h-full rounded-full"
                                     />
@@ -90,7 +86,7 @@ export default function FamilyTasks({
                                     <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                       {value.title}
                                     </h1>
-                                    <div className="flex gap-4 items-center">
+                                    <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:{" "}
                                         <span className="text-purple">

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -67,6 +67,8 @@ 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}`
                       return (
                         <tr
                           className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"

src/components/FamilyAcc/Tabs/FamilyWallet.jsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+
+import usersService from '../../../services/UsersService'
+
+import LoadingSpinner from '../../Spinners/LoadingSpinner'
+import background from '../../../assets/images/bg-sky-blue.jpg'
+import Wallet from './wallet/Wallet'
+
+function FamilyWallet({familyData}) {
+  const apiUrl = new usersService()
+
+  let [familyWallet, setFamilyWallet] = useState({loading:true, data: []})
+
+  let [familyWalletReload, setFamilyWalletReload] = useState(false) // STATE TO DETERMINE WHEN TO RELOAD FAMILY WALLET TAB/PAGE
+
+  useEffect(()=>{
+    setFamilyWallet({loading:true, data: []})
+    apiUrl.getFamilyWallet({family_uid:familyData?.uid}).then(res => {
+      setFamilyWallet({loading:false, data: res?.data?.result_list || []})
+    }).catch(error => {
+      setFamilyWallet({loading:false, data: []})
+    })
+  },[familyWalletReload])
+
+  return (
+    <div className='p-3 w-full h-full bg-white dark:bg-dark-white flex flex-col justify-start items-start'>
+        {familyWallet.loading ?
+        <div className='w-full h-20 flex justify-center items-center'>
+          <LoadingSpinner size='8' color='sky-blue' />
+        </div>
+        :
+        familyWallet?.data?.length > 0 ?
+        <div className='w-full p-4 flex flex-col gap-2'>
+        {familyWallet?.data?.map((wallet, index)=>(
+            <Wallet key={index} wallet={wallet} familyData={familyData} setFamilyWalletReload={setFamilyWalletReload} />
+          ))}
+        </div>
+        :
+        <p className='text-lg text-gray-500 dark:text-gray-400'>No Wallet Found!</p>
+        }
+    </div>
+  )
+}
+
+export default FamilyWallet

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -1,26 +1,32 @@
 import React from "react";
 import localImgLoad from "../../../lib/localImgLoad";
 
-
 export default function ProfileInfo({
   profileImg,
   profileImgInput,
-  profileImgChangHandler,
+  profileImgChangeHandler,
   browseProfileImg,
   accountDetails,
+  uploadStatus
 }) {
+  // console.log(accountDetails.banner)
   return (
     <div className="flex flex-col items-center gap-4">
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
-            src={localImgLoad(`images/icons/${accountDetails.banner}`)}
-            alt=""
+            src={
+              profileImg
+                ? profileImg
+                : localImgLoad(`images/icons/${accountDetails.banner}`)
+            }
+            alt="profile"
             className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />
           <input
             ref={profileImgInput}
-            onChange={(e) => profileImgChangHandler(e)}
+            accept="image/*"
+            onChange={profileImgChangeHandler}
             type="file"
             className="hidden"
           />
@@ -47,6 +53,11 @@ export default function ProfileInfo({
           </div>
         </div>
       </div>
+      {/* DISPLAYS PROFILE UPLOADING STATUS */}
+      <div className="w-full">
+        {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
+        {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
+      </div>
       <div className="flex flex-col justify-center gap-3 items-center">
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           {accountDetails?.firstname}

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

@@ -0,0 +1,301 @@
+import React, { useEffect, useState } from 'react'
+import ModalCom from '../../../Helpers/ModalCom'
+import InputCom from '../../../Helpers/Inputs/InputCom'
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+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';
+
+const validationSchema = Yup.object().shape({
+  // amount: Yup.string()
+  //   .typeError("Invalid number")
+  //   .min(1, "Price must be greater than 0")
+  //   .test("no-e", "Invalid number", (value) => {
+  //     if (value && /\d+e/.test(value)) {
+  //       return false;
+  //     }
+  //     return true;
+  //   })
+  //   .required("Amount is required"),
+  amount: Yup.number('Please enter a number')
+  .min(1, "Price must be greater than 0")
+  .required("Amount is required"),
+  comment: Yup.string()
+  .required("Comment is required"),
+});
+
+function FamilyAddFundPopout({action, situation, wallet, familyData}) {
+
+  const dispatch = useDispatch()
+
+  const apiUrl = new usersService()
+
+  const [startTransfer, setStartTransfer] = useState({loading:true, data: {}})
+
+  const [requestStatus, setRequestStatus] = useState({loading:false, status:false, message:''})
+
+
+  // initial values for formik
+  let initialValues = {
+    amount: '',
+    from : AmountTo2DP(startTransfer?.data?.origing_current_balance*0.01),
+    to: `${familyData.firstname} ${familyData.lastname}`,
+    comment: ''
+  };
+  // FUNCTION TO PERFORM FAMILY TRANSFER
+  const handleAddFund = (values) => {
+    setRequestStatus({loading:true, status:false, message:''})
+
+    let senderBal = startTransfer?.data?.origing_current_balance || '' // SENDER'S ACCOUNT BALANCE
+    let senderLimit = startTransfer?.data?.origing_transfer_limit || '' // SENDER'S TRANSFER LIMIT
+
+    let reqData = { // API REQUEST DATA
+      family_uid : familyData.uid,
+      wallet_uid : wallet.wallet_uid,
+      origing_wallet_uid : startTransfer?.data?.origing_wallet_uid,
+      currency : startTransfer?.data?.currency,
+      amount : values.amount*100,
+      description : values.comment,
+      family_transfer_mode : 100,
+      action : 22014
+    }
+
+    if(!senderBal || !senderLimit){ // RETURNS UNAUTHORIZED, IF SENDER BAL OR LIMIT IS NOT AVAILABLE
+      setRequestStatus({loading:false, status:false, message:'Unauthorized, try again later'})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    if(values.amount > senderBal*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS BALANCE
+      setRequestStatus({loading:false, status:false, message:'You cannot send more than your balance'})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    if(values.amount > senderLimit*0.01){ // CHECKS TO SEE IF SENDER IS SENDING MORE THAN HIS LIMIT
+      setRequestStatus({loading:false, status:false, message:`You cannot exceed ${senderLimit*0.01} ${startTransfer?.data?.origing_currency.charAt(0).toUpperCase() + startTransfer?.data?.origing_currency.slice(1).toLowerCase()}`})
+      return setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    }
+
+    apiUrl.familyTransfer(reqData).then(({data}) => {
+      if(data.internal_return < 0 || data.credit_confirm == '' || data.pay_confirm == ''){
+        setRequestStatus({loading:false, status:false, message:'Transfer Failed'})
+        return setTimeout(()=>{
+          setRequestStatus({loading:false, status:false, message:''})
+        }, 5000)
+      }
+      setRequestStatus({loading:false, status:true, message:'Transfer Successful'})
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+        dispatch(tableReload({ type: "WALLETTABLE" })); // UPDATES PARENT WALLET ACCOUNT
+        action() // TO CLOSE THE MODAL
+      }, 5000)
+    }).catch(error => {
+      setRequestStatus({loading:false, status:false, message:'Network Error, try again'})
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:''})
+      }, 5000)
+    })
+  }
+
+  // LOAD FAMILY START TRANSFER
+  useEffect(()=>{
+    let reqData = {
+      family_uid: familyData.uid,
+      wallet_uid: wallet.wallet_uid,
+      action: 22013
+    }
+    apiUrl.familyTransferStart(reqData).then(response => {
+      setStartTransfer({loading:false, data:response?.data })
+    }).catch(err => {
+      setStartTransfer({loading:false, data: {}})
+    })
+  },[])
+
+  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}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          {startTransfer.loading && <LoadingSpinner size='16' color='sky-blue' height={'h-64'} />}
+          
+          { !startTransfer.loading &&
+          <Formik
+            initialValues={initialValues}
+            validationSchema={validationSchema}
+            onSubmit={handleAddFund}
+          >
+            {(props) => (
+              <Form className="w-full">
+                <div className="flex flex-col-reverse sm:flex-row">
+                  <div className="fields w-full">
+                    {/* AMOUNT  */}
+                    <div className="field w-full mb-[0.5rem]">
+                      <InputCom
+                        placeholder="0"
+                        label={`Amount (${startTransfer?.data?.currency})`}
+                        name="amount"
+                        type="text"
+                        parentClass="flex items-center gap-1 w-full"
+                        labelClass="flex-[0.3] mb-0"
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9] ${props.errors.amount && props.touched.amount ? 'border border-red-500' : ''}`}
+                        fieldClass="px-2 text-right"
+                        value={props.values.amount}
+                        inputHandler={props.handleChange}
+                      />
+                    </div>
+
+                    {/* FROM  */}
+                    <div className="field w-full mb-[0.5rem]">
+                      <InputCom
+                        placeholder="From"
+                        label={`From (${startTransfer?.data?.origing_currency})`}
+                        name="from"
+                        type="text"
+                        parentClass="flex items-center gap-1 w-full"
+                        labelClass="flex-[0.3] mb-0"
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                        fieldClass="px-2 text-right"
+                        value={props.values.from}
+                        disable={true}
+                      />
+                    </div>
+
+                     {/* TO  */}
+                     <div className="field w-full mb-[0.5rem]">
+                      <InputCom
+                        placeholder="To"
+                        label="To:"
+                        name="to"
+                        type="text"
+                        parentClass="flex items-center gap-1 w-full"
+                        labelClass="flex-[0.3] mb-0"
+                        inputClass={`flex-[0.7] input-curve lg border border-[#dce4e9]`}
+                        fieldClass="px-2 text-right"
+                        value={props.values.to}
+                        disable={true}
+                      />
+                    </div>
+
+                    {/* COMMENT  */}
+                    <div className="field w-full mb-[0.5rem]">
+                      <div className="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"
+                      >
+                        Comment
+                        {/* {props.errors.comment && props.touched.comment && <span className='text-sm text-red-500'>{' '}{props.errors.comment}</span>} */}
+                      </label>
+                      <textarea
+                        // id="Job Delivery Details"
+                        rows="2"
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border ${props.errors.comment && props.touched.comment ? 'border border-red-500' : ''}`}
+                        style={{ resize: "none" }}
+                        name="comment"
+                        value={props.values.comment}
+                        onChange={props.handleChange}
+                      />
+                      </div>
+                    </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 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-[#912741] rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+
+                      >
+                        {requestStatus.message}
+                      </div>
+                    ) : (
+                      requestStatus.status && (
+                        <div
+                          className={`relative p-4 text-green-700 bg-slate-200 border-slate-800 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                          // className={`pb-1 absolute bottom-0 left-1/2 -translate-x-1/2 text-green-700 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                        >
+                          {requestStatus.message}
+                        </div>
+                      )
+                    ))}
+                  {/* End of error or success display */}
+
+                  <div className="pt-2 w-full border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                    <div className="w-full flex justify-between gap-2 items-center">
+                        <button
+                          type="button"
+                          onClick={action}
+                          className="w-[150px] h-[48px] rounded-full text-base text-white bg-red-600 hover:bg-red-500"
+                        >
+                          Cancel
+                        </button>
+                        <>
+                          {requestStatus.loading ?
+                          <LoadingSpinner size='6' color='sky-blue' />
+                          :
+                          <button
+                            type="submit"
+                            className={`w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400 ${requestStatus.status ? 'opacity-50' : ''}`}
+                            disabled={requestStatus.status}
+                          >
+                            Send
+                          </button>
+                          }
+                        </>
+                    </div>
+                  </div>
+                </div>
+              </Form>
+            )}
+          </Formik>
+          }
+        </div>
+      </div>
+    </ModalCom>
+  )
+}
+
+export default FamilyAddFundPopout

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

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { localImgLoad } from '../../../../lib'
+import { PriceFormatter } from '../../../Helpers/PriceFormatter'
+import FamilyAddFundPopout from './FamilyAddFundPopout'
+
+function Wallet({wallet, familyData, setFamilyWalletReload}) {
+    const [addFundPopout, setAddFundPopout] = useState({ show: false, data: {} })
+  return (
+    <div className='w-full p-4 bg-[aliceblue] rounded-lg'
+    // style={{
+    //   background: `url(${background}) 0% 0% / cover no-repeat`,
+    // }}
+  >
+    <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`)}
+          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>
+        {/* BTN */}
+        <div className='mt-1 flex justify-end items-center gap-2'>
+            <button
+                className="w-[150px] h-[48px] rounded-full text-base text-white bg-sky-500 hover:bg-sky-400"
+                name="add"
+                onClick={()=>{
+                    setAddFundPopout({ show: true, data: {} });
+                }}
+            >
+                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>
+        </div>
+      </div>
+    </div>
+
+    {/* MODAL TO ADD FUND */}
+    {addFundPopout.show &&
+        <FamilyAddFundPopout 
+            action={() => {
+                setAddFundPopout({ show: false, data: {} });
+                setFamilyWalletReload(prev => !prev) // TO RELOAD FAMILY WALLET // DETERMINES WHEN TO RELOAD FAMILY WALLET TAB/PAGE
+            }}
+            situation={addFundPopout.show}
+            wallet={wallet}
+            familyData={familyData}
+        />
+    }
+</div>
+  )
+}
+
+export default Wallet

src/components/FamilyAcc/index.jsx

@@ -5,17 +5,19 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { Link } from "react-router-dom";
+import usersService from "../../services/UsersService";
 import InputCom from "../Helpers/Inputs/InputCom";
-import Layout from "../Partials/Layout";
-import FamilyTable from "./FamilyTable";
-import SiteService from "../../services/SiteService";
 import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import FamilyTable from "./FamilyTable";
 
 export default function FamilyAcc() {
-  const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
-  const [familyList, setFamilyList] = useState([]);
+  // 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);
@@ -25,27 +27,20 @@ export default function FamilyAcc() {
     last_name: "",
   });
 
-  const apiCall = useMemo(() => new SiteService(), []);
+  const apiCall = useMemo(() => new usersService(), []);
 
   const popUpHandler = () => {
     setPopUp((prev) => !prev);
   };
 
-  const filterHandler = (value) => {
-    setValue(value);
+  // Handle year selection
+  const handleYearChange = (e) => {
+    setSelectedYear(e.target.value);
   };
 
-  const ageRange = useMemo(() => {
-    const startAge = 5;
-    const endAge = 16;
-    return Array.from(
-      { length: endAge - startAge + 1 },
-      (_, index) => startAge + index
-    );
-  }, []);
-
-  const handleAgeSelect = (event) => {
-    setSelectedAge(parseInt(event.target.value));
+  // Handle month selection
+  const handleMonthChange = (e) => {
+    setSelectedMonth(e.target.value);
   };
 
   const handleInputChange = (event) => {
@@ -53,6 +48,13 @@ export default function FamilyAcc() {
     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);
@@ -61,7 +63,8 @@ export default function FamilyAcc() {
         const reqData = {
           firstname: first_name,
           lastname: last_name,
-          age: selectedAge,
+          year: +selectedYear,
+          month: +selectedMonth,
         };
 
         const res = await apiCall.addFamily(reqData);
@@ -91,7 +94,8 @@ export default function FamilyAcc() {
         first_name: "",
         last_name: "",
       });
-      setSelectedAge("");
+      setSelectedMonth("");
+      setSelectedYear("");
     }
   };
 
@@ -107,8 +111,8 @@ export default function FamilyAcc() {
       const res = await apiCall.familyListings(reqData);
       const { data } = res;
       if (data?.internal_return >= 0 && data?.status === "OK") {
-        const { result_list } = data;
-        setFamilyList(result_list);
+        const { result_list, session_image_server } = data;
+        setFamilyList({ result_list, session_image_server });
         setLoader(false);
       } else {
         return;
@@ -138,32 +142,52 @@ export default function FamilyAcc() {
           <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
-                  className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Family Accounts
-                </span>
-                <button
-                  onClick={popUpHandler}
-                  type="button"
-                  className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
-                >
-                  Add
-                </button>
+                <span className={``}>Family Accounts</span>
+                {familyList?.result_list?.length <
+                  process.env.REACT_APP_MAX_FAMILY_MEMBERS &&
+                  !loader && (
+                    <button
+                      onClick={popUpHandler}
+                      type="button"
+                      className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                    >
+                      Add
+                    </button>
+                  )}
               </h1>
             </div>
-            <div className="slider-btns flex space-x-4">
-              <div
-                onClick={() => filterHandler("today")}
-                className="relative"
-              ></div>
-            </div>
+            <Link
+              to={`/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%)]"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-6 h-6 dark:stroke-white"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                />
+              </svg>
+            </Link>
           </div>
           <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
             <FamilyTable
-              familyList={familyList}
+              familyList={familyList?.result_list}
               loader={loader}
               popUpHandler={popUpHandler}
+              imageServer={familyList?.session_image_server}
             />
           </Suspense>
         </div>
@@ -173,9 +197,10 @@ export default function FamilyAcc() {
           <FamilyForm
             popUpHandler={popUpHandler}
             value={formData}
-            ageHandler={handleAgeSelect}
-            ageRange={ageRange}
-            ageValue={selectedAge}
+            selectedYear={selectedYear}
+            selectedMonth={selectedMonth}
+            monthHandler={handleMonthChange}
+            yearHandler={handleYearChange}
             inputHandler={handleInputChange}
             msgErr={msgErr}
             onClick={addMember}
@@ -191,15 +216,17 @@ const FamilyForm = ({
   value: { first_name, last_name },
   ageValue,
   inputHandler,
-  ageHandler,
-  ageRange,
+  selectedMonth,
+  selectedYear,
+  monthHandler,
+  yearHandler,
   msgErr,
   loader,
   onClick,
   popUpHandler,
 }) => {
   return (
-    <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <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">
           Add Members
@@ -237,33 +264,22 @@ const FamilyForm = ({
           value={last_name}
           inputHandler={inputHandler}
         />
-        <div className="input-com mb-7 flex gap-1 items-center w-full justify-between">
+        <div className="input-com mb-7 flex flex-col gap-1 w-full">
           {/* Age dropdown */}
-          <div className="flex items-center justify-between flex-[0.3]">
+          <div className="">
             <label
               className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
               htmlFor="age-selection"
             >
-              Select your age:
+              Birthday: (Year/Month)
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">
-            <select
-              name="age-selection"
-              id="age-selection"
-              className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[35px] 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 px-4"
-              onChange={ageHandler}
-              value={ageValue}
-            >
-              <option value={""}>Select age</option>
-              {ageRange?.length > 0 &&
-                ageRange?.map((age) => (
-                  <option value={age} key={age}>
-                    {age}
-                  </option>
-                ))}
-            </select>
-          </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]">
@@ -312,3 +328,66 @@ const CloseIcon = () => (
     />
   </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/FourZeroFour/index.jsx

@@ -2,6 +2,8 @@ import React from "react";
 // import Lottie from "react-lottie";
 import { useNavigate } from "react-router-dom";
 import * as animationData from "../../assets/images/Lotties/77618-website-404-error-animation.json";
+import { localImgLoad } from "../../lib";
+// import BgError from '../../assets/images/wrench-page-notfound.jpg'
 
 export default function FourZeroFour() {
   const navigate = useNavigate();
@@ -14,16 +16,21 @@ export default function FourZeroFour() {
     },
   };
   return (
-    <div className="flex justify-center items-center w-full h-screen bg-[#232247]">
-      <div>
+    <div className={`my-custom-bg-class flex justify-center items-center w-full min-h-screen before:content-[''] before:absolute before:inset-0 before:bg-[#cdcdcd]/[.8]`}>
+      <div className="relative pt-32 max-w-3xl">
         {/* <Lottie options={defaultOptions} width={600} height={600} /> */}
-        <div className="flex justify-center">
+        <div className="px-16 md:px-24 flex flex-col items-center justify-center gap-4">
+          <img src={localImgLoad('images/404.png')} className="w-72" alt='404Image' />
+          <p className="mt-8 text-red-600 font-black text-4xl md:text-5xl tracking-wider text-center">Sorry!</p>
+          <h1 className="text-black text-4xl md:text-5xl font-black tracking-wide text-center leading-tight">The page can’t be found.</h1>
+          <p className="px-2 md:px-8 text-slate-700 text-base md:text-lg text-center">The page you're looking for isn't available. Use the go back button below</p>
           <button
             onClick={() => navigate(-1)}
             type="button"
-            className="btn-gradient text-white text-lg w-[150px] h-[50px] rounded-full"
+            className="px-4 md:px-8 border-2 border-[#2b70fa] rounded-lg text-[#007bff] text-base md:text-lg h-[48px] flex justify-center items-center gap-1"
           >
-            Go Back
+            <span>Go Back</span>
+            <span className="pb-1">&rarr;</span>
           </button>
         </div>
       </div>

src/components/Helpers/Icons.jsx

@@ -462,6 +462,15 @@ export default function Icons({ name }) {
             clipRule="evenodd"
           />
         </svg>
+      ) : name === "my-page" ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+          <path
+            fillRule="evenodd"
+            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+            fill="#ffffff"
+            className="color000000 svgShape"
+          ></path>
+        </svg>
       ) : name === "accordion-minus" ? (
         <svg
           width="20"
@@ -478,13 +487,13 @@ export default function Icons({ name }) {
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
-          stroke-width="1.5"
+          strokeWidth="1.5"
           stroke="currentColor"
           className="w-4 h-4"
         >
           <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
+            strokeLinecap="round"
+            strokeLinejoin="round"
             d="M8.25 4.5l7.5 7.5-7.5 7.5"
           />
         </svg>
@@ -510,20 +519,66 @@ export default function Icons({ name }) {
       ) : name === "master-card" ? (
         <img className="w-[30px]" src={MasterCard} alt="card" />
       ) : name === "new-dashboard" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/dashboard.svg')} alt="dashboard" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/dashboard.svg")}
+          alt="dashboard"
+        />
       ) : name === "new-family" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/family.svg')} alt="family" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/family.svg")}
+          alt="family"
+        />
       ) : name === "new-logout" ? (
-        <img className="w-[45px] rounded-full bg-white p-1" src={localImgLoad('images/icons/logout.svg')} alt="logout" />
+        <img
+          className="w-[45px] rounded-full bg-white p-1"
+          src={localImgLoad("images/icons/logout.svg")}
+          alt="logout"
+        />
       ) : name === "new-market" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/market.svg')} alt="market" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/market.svg")}
+          alt="market"
+        />
       ) : name === "new-mytask" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/my-task.svg')} alt="task" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/my-task.svg")}
+          alt="task"
+        />
       ) : name === "family-id" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-id.svg')} alt="family-id" />
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-id.svg")}
+          alt="family-id"
+        />
       ) : name === "family-pin" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-pin.svg')} alt="family-pin" />
-      ): (
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-pin.svg")}
+          alt="family-pin"
+        />
+      ) : name === "pending-job" ? (
+        <img
+          className="w-[19px] h-[19px]"
+          src={localImgLoad("images/icons/job_pending.svg")}
+          alt="Pending Job"
+        />
+      ) : name === "active-job" ? (
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/job_active.svg")}
+          alt="Active Job"
+        />
+      ) : name === "job-list" ? (
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/job_list.svg")}
+          alt="Job List"
+        />
+      ) : (
         ""
       )}
     </>

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

@@ -25,6 +25,7 @@ export default function InputCom({
   maxLength = 45,
   minLength = 0,
   direction,
+  tabIndex,
   error,
 }) {
   const inputRef = useRef(null);
@@ -92,14 +93,15 @@ export default function InputCom({
           value={value}
           onChange={inputHandler}
           className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA] tracking-wide"
-          } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
+            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}

src/components/Helpers/ModalCom.jsx

@@ -16,7 +16,7 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
         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"
       ></div>
-      <div className={`children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ${className}`}>
+      <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}`}>
         {children && children}
       </div>
     </div>

src/components/Helpers/PriceFormatter.jsx

@@ -50,3 +50,29 @@ export const PriceFormatter = (
     </span>
   );
 };
+
+
+// FUNCTION TO RETURN AMOUNT TO TWO DECIMAL PLACES
+export const AmountTo2DP = (
+  amount = "00",
+) => {
+  // Convert the number to a string
+  let numStr = String(amount);
+
+  // Split the string into integer and decimal parts
+  let parts = numStr.split(".");
+  let integerPart = parts[0] || "";
+  let decimalPart = parts[1] || "";
+
+  // Add thousands separators to the integer part
+  let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  // Truncate or pad the decimal part to two decimal points
+  let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
+
+  // Combine the formatted integer and decimal parts
+  let formattedNumber = formattedInteger + '.' + formattedDecimal;
+
+  // return formattedNumber;
+  return formattedNumber;
+};

src/components/History/JobsCompleted.jsx

@@ -0,0 +1,106 @@
+import React, {useEffect, useState} from 'react'
+import Image from '../../assets/images/taskbanners/default.jpg'
+
+import usersService from '../../services/UsersService';
+import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
+import PaginatedList from '../../components/Pagination/PaginatedList';
+
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
+import { AmountTo2DP } from '../Helpers/PriceFormatter';
+
+function JobsCompleted() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    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 handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+
+    //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)
+    }
+
+    useEffect(()=>{
+        getJobCompletedHistory()
+      }, [])
+
+  return (
+    <div className='flex flex-col justify-between min-h-[500px]'>
+    {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>
+            </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'>
+                                <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>
+                                </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>
+                    </tr>
+                )
+            }
+            )}
+        </tbody>
+    </table>
+    :familyRewardHistory.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>
+    :
+    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        <span>No Completed Job History Found!</span>
+    </div>
+    }
+
+    {/* 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} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default JobsCompleted

src/components/History/RewardsTable.jsx

@@ -0,0 +1,103 @@
+import React, {useEffect, useState} from 'react'
+import Image from '../../assets/images/taskbanners/default.jpg'
+
+import usersService from '../../services/UsersService';
+import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
+import PaginatedList from '../../components/Pagination/PaginatedList';
+
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
+import { AmountTo2DP } from '../Helpers/PriceFormatter';
+
+function RewardsTable() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
+    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 handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+
+    //FUNCTION TO GET FAMILY REWARD HISTORY
+    const getFamilyRewardHistory = ()=>{
+        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}))
+        })
+    }
+
+    useEffect(()=>{
+        getFamilyRewardHistory()
+      }, [])
+
+  return (
+    <div className='flex flex-col justify-between min-h-[500px]'>
+    {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>
+            </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'>
+                                <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>
+                                </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>
+                    </tr>
+                )
+            }
+            )}
+        </tbody>
+    </table>
+    :familyRewardHistory.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>
+    :
+    <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
+        <span>No Rewards History Found!</span>
+    </div>
+    }
+
+    {/* 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} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default RewardsTable

src/components/History/index.jsx

@@ -10,6 +10,8 @@ import usersService from "../../services/UsersService";
 import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
 import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RewardsTable from "./RewardsTable";
+import JobsCompleted from "./JobsCompleted";
 
 export default function History() {
 
@@ -58,6 +60,9 @@ export default function History() {
 
   useEffect(()=>{
     getPaymentHistory()
+  }, [])
+
+  useEffect(()=>{
     getPurchaseHistory()
   }, [])
 
@@ -236,15 +241,33 @@ export default function History() {
                     >
                     Recent Activity
                     </button>
+                    <button
+                    name="reward"
+                    onClick={(e) => setTab(e.target.name)}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "reward" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
+                    >
+                    Rewards
+                    </button>
+                    <button
+                    name="jobs_completed"
+                    onClick={(e) => setTab(e.target.name)}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "jobs_completed" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
+                    >
+                    Jobs Completed
+                    </button>
                 </div>
                 {/* END OF switch button */}
                 <div className="history-tables w-full">
                     {/* 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>
+                            {/* <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' />
+                            <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
                             :
                             <PurchasesTable purchase={purchaseHistory} />
                             }
@@ -255,16 +278,32 @@ export default function History() {
                     {/* 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>
+                            {/* <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' />
+                            <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 */}
+
+                    {/* JOBS COMPLETED SECTION */}
+                    {tab == 'jobs_completed' &&
+                        <div className="wallet w-full border-t">
+                            <JobsCompleted />
+                        </div>
+                    }
+                    {/* END OF JOBS COMPLETED SECTION */}
                 </div>
             </div>
             {/*<HistoryTable />*/}

src/components/Home/FamilyActiveLSlde.jsx

@@ -4,7 +4,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 import FamilyActiveJobsCard from "../Cards/FamilyActiveJobsCard";
 
-export default function FamilyActiveLSlde({ className, trending }) {
+export default function FamilyActiveLSlde({ className, trending, image_server }) {
     const settings = {
         arrows: false,
         slidesToShow: 3,
@@ -98,7 +98,7 @@ export default function FamilyActiveLSlde({ className, trending }) {
                     {trending &&
                         trending.length > 0 &&
                         trending.map((item) => (
-                            <FamilyActiveJobsCard key={item.id} datas={item} />
+                            <FamilyActiveJobsCard key={item.id} datas={item} image_server={image_server} />
                         ))}
                 </SliderCom>
             </div>

src/components/Home/FamilyDash.jsx

@@ -1,26 +1,27 @@
 import React from "react";
-import datas from "../../data/product_data.json";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import CommonHead from "../UserHeader/CommonHead";
-import FamilyActiveLSlde from "./FamilyActiveLSlde";
 import ParentWaiting from "../MyPendingJobs/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
+import FamilyActiveLSlde from "./FamilyActiveLSlde";
 
-export default function FamilyDash({familyOffers, MyActiveJobList}) {
-  console.log("PROPS IN FAMILY DASH->", familyOffers);
+export default function FamilyDash({ familyOffers, MyActiveJobList }) {
+  // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
 
   const trending = MyActiveJobList;
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
-        {familyOffers && familyOffers.length > 0 &&
-        <MyOffersFamilyTable familyOffers={familyOffers} className="mb-10" />
-        }
-        {trending && trending.length > 0 &&
-        <FamilyActiveLSlde trending={trending} className="mb-10" />
-        }
-        
+        {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={familyOffers?.session_image_server} />
+        )}
+
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
         <ParentWaiting className="mb-10" />
       </div>

src/components/Home/FullAccountDash.jsx

@@ -1,20 +1,17 @@
-import React from "react";
-import datas from "../../data/product_data.json";
-import Hero from "./Hero";
-// import HomeTaskDisplay from "./HomeTaskDisplay";
-import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
-// import SellHistoryMarketVisitorAnalytic from './SellHistoryMarketVisitorAnalytic';
-// import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-//import UpdateTable from "./UpdateTable";
+import MyJobTable from "../MyTasks/MyJobTable";
+import MyOffersTable from "../MyTasks/MyOffersTable";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import Hero from "./Hero";
 import HomeActivities from "./HomeActivities";
 
 export default function FullAccountDash(props) {
-  console.log("PROPS IN HOME->", props);
+  // console.log("PROPS IN HOME->", props);
+
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   return (
-    <div>
+    <>
       <div className="home-page-wrapper">
         <Hero
           className="mb-10"
@@ -22,7 +19,32 @@ export default function FullAccountDash(props) {
           bannerList={props.bannerList}
           nextDueTask={props.nextDueTask}
         />
-        <HomeActivities className="mb-10" />
+        {props.offersList?.data?.result_list?.length ? (
+          <MyOffersTable
+            MyActiveOffersList={props.offersList?.data}
+            className="mb-10"
+          />
+        ) : 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">
+                <span>My Tasks</span>
+              </h1>
+            </div>
+            <MyJobTable
+              ActiveJobList={props.MyActiveJobList}
+              Account={userDetails}
+              imageServer={props.offersList?.data?.session_image_server}
+            />
+          </>
+        ) : !props.offersList?.loading && !props.MyActiveJobList?.loading ? (
+          <HomeActivities className="mb-10" />
+        ) : (
+          <div className="w-full h-[220px] flex items-center justify-center">
+            <LoadingSpinner size="16" color="sky-blue" />
+          </div>
+        )}
+
         {/*<UpdateTable className="mb-10"/>*/}
         {/*<SellHistoryMarketVisitorAnalytic className="mb-10"/>*/}
         {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
@@ -33,24 +55,6 @@ export default function FullAccountDash(props) {
         {/*    bannerList={props.bannerList}*/}
         {/*/>*/}
       </div>
-    </div>
+    </>
   );
 }
-// /*
-//      <Layout>
-//             <div className="home-page-wrapper">
-//                 <Hero className="mb-10" data={userDetails} />
-//                 {/* <CreateNft />
-//         <TrendingSection trending={trending} className="mb-10" />*/}
-// <HomeTaskDisplay
-//     jobData={jobData}
-//     className="mb-10"
-//     bannerList={props.bannerList}
-// />
-{
-  /*  <SellHistoryMarketVisitorAnalytic className="mb-10"/>
-                <TopSellerTopBuyerSliderSection className="mb-10" />
-                <UpdateTable className="mb-10"/>*/
-}
-// </div>
-// </Layout>

src/components/Home/HomeActivities.jsx

@@ -1,267 +1,133 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
-import dataImage2 from "../../assets/images/data-table-user-2.png";
-import dataImage3 from "../../assets/images/data-table-user-3.png";
-import dataImage4 from "../../assets/images/data-table-user-4.png";
-import SelectBox from "../Helpers/SelectBox";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function HomeActivities({ className }) {
-    const filterCategories = ["All Categories", "Explore", "Featured"];
-    const [selectedCategory, setCategory] = useState(filterCategories[0]);
-    return (
-        <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
-                className || ""
-            }`}
-        >
-            <div className="header w-full sm:flex justify-between items-center mb-5">
-                <div className="flex space-x-2 items-center mb-2 sm:mb-0">
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                       Recent Activities
-                    </h1>
+  const [recentActivitiesData, setRecentActivitiesData] = useState({
+    loading: false,
+    status: false,
+    msg: "",
+    data: null,
+  });
 
-                </div>
-            </div>
-            <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>
-                    {/* table heading */}
-                    {/*<tr className="text-base text-thin-light-gray whitespace-nowrap px-2 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
-                    {/*    <td className="py-4 w-[300px] block whitespace-nowrap">*/}
-                    {/*        All Product*/}
-                    {/*    </td>*/}
-                    {/*    <td className="py-4 whitespace-nowrap text-center">.</td>*/}
-                    {/*    <td className="py-4 whitespace-nowrap text-center"></td>*/}
+  const _apiCall = new usersService();
 
-                    {/*    <td className="py-4 whitespace-nowrap text-right"></td>*/}
-                    {/*</tr>*/}
-                    <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                        <td className=" py-4">
-                            <div className="flex space-x-2 items-center">
-                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                    <img
-                                        src={dataImage1}
-                                        alt="data"
-                                        className="w-full h-full"
-                                    />
-                                </div>
-                                <div className="flex flex-col">
-                                    <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
-                                        Mullican Computer Joy
-                                    </h1>
-                                    <span className="text-sm text-thin-light-gray">
-                          Owned by <span className="text-purple">Xoeyam</span>
-                        </span>
-                                </div>
-                            </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                      <span>
-                        <svg
-                            width="18"
-                            height="18"
-                            viewBox="0 0 18 18"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                              d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-                              fill="#627EEA"
-                          />
-                          <path
-                              d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                          <path
-                              d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
-                              fill="white"
-                          />
-                          <path
-                              d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                          <path
-                              d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
-                              fill="white"
-                          />
-                          <path
-                              d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
-                              fill="white"
-                              fillOpacity="0.2"
-                          />
-                          <path
-                              d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                        </svg>
-                      </span>
-                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        7473 ETH
-                      </span>
-                            </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                      <span>
-                        <svg
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                              d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
-                              fill="#59BE59"
-                          />
-                          <path
-                              d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
-                              fill="#FEFEFE"
-                          />
-                          <path
-                              d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
-                              fill="#59BE59"
-                          />
-                          <path
-                              d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
-                              fill="#59BE59"
-                          />
-                        </svg>
-                      </span>
-                                <span className="text-base text-dark-gray dark:text-white font-medium">
-                        6392.99$
-                      </span>
-                            </div>
-                        </td>
+  const getRecentActivities = async () => {
+    setRecentActivitiesData((prev) => ({ ...prev, loading: true }));
+    let res;
+    try {
+      res = await _apiCall.getRecentActivities(null);
+      res = res.data;
+      if (res?.internal_return >= 0) {
+        setRecentActivitiesData((prev) => ({
+          ...prev,
+          loading: false,
+          status: true,
+          data: res.result_list,
+        }));
+      } else {
+        setRecentActivitiesData((prev) => ({
+          ...prev,
+          loading: false,
+          status: false,
+          msg: "Something went wrong",
+        }));
+      }
+    } catch (error) {
+      setRecentActivitiesData((prev) => ({
+        ...prev,
+        loading: false,
+        status: false,
+        msg: "Unable to see this",
+      }));
+      throw new Error(`Unable to see this because: ${error}`);
+    }
+  };
 
-                        <td className="text-right py-4">
-                            <button
-                                type="button"
-                                className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
-                            >
-                                Active
-                            </button>
-                        </td>
-                    </tr>
-                    <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
-                        <td className=" py-4">
-                            <div className="flex space-x-2 items-center">
-                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
-                                    <img
-                                        src={dataImage2}
-                                        alt="data"
-                                        className="w-full h-full"
-                                    />
-                                </div>
-                                <div className="flex flex-col">
-                                    <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
-                                        Mullican Computer Joy
-                                    </h1>
-                                    <span className="text-sm text-thin-light-gray">
-                          Owned by <span className="text-purple">Xoeyam</span>
-                        </span>
-                                </div>
-                            </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                      <span>
-                        <svg
-                            width="18"
-                            height="18"
-                            viewBox="0 0 18 18"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                              d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
-                              fill="#627EEA"
-                          />
-                          <path
-                              d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                          <path
-                              d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
-                              fill="white"
-                          />
-                          <path
-                              d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                          <path
-                              d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
-                              fill="white"
-                          />
-                          <path
-                              d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
-                              fill="white"
-                              fillOpacity="0.2"
-                          />
-                          <path
-                              d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
-                              fill="white"
-                              fillOpacity="0.602"
-                          />
-                        </svg>
-                      </span>
-                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
-                        7473 ETH
-                      </span>
-                            </div>
-                        </td>
-                        <td className="text-center py-4 px-2">
-                            <div className="flex space-x-1 items-center justify-center">
-                      <span>
-                        <svg
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                              d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
-                              fill="#59BE59"
-                          />
-                          <path
-                              d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
-                              fill="#FEFEFE"
-                          />
-                          <path
-                              d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
-                              fill="#59BE59"
-                          />
-                          <path
-                              d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
-                              fill="#59BE59"
-                          />
-                        </svg>
-                      </span>
-                                <span className="text-base text-dark-gray dark:text-white font-medium">
-                        6392.99$
-                      </span>
-                            </div>
-                        </td>
+  useEffect(() => {
+    getRecentActivities();
+  }, []);
 
-                        <td className="text-right py-4">
-                            <button
-                                type="button"
-                                className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
-                            >
-                                Complated
-                            </button>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
+  console.log(recentActivitiesData);
+
+  return (
+    <div
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
+        className || ""
+      }`}
+    >
+      <div className="header w-full sm:flex justify-between items-center mb-5">
+        <div className="flex space-x-2 items-center mb-4 sm:mb-0">
+          <h1 className="text-center text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
+            Recent Activities
+          </h1>
         </div>
-    );
+      </div>
+      <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>
+            {/* table heading */}
+            {/*<tr className="text-base text-thin-light-gray whitespace-nowrap px-2 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+            {/*    <td className="py-4 w-[300px] block whitespace-nowrap">*/}
+            {/*        All Product*/}
+            {/*    </td>*/}
+            {/*    <td className="py-4 whitespace-nowrap text-center">.</td>*/}
+            {/*    <td className="py-4 whitespace-nowrap text-center"></td>*/}
+
+            {/*    <td className="py-4 whitespace-nowrap text-right"></td>*/}
+            {/*</tr>*/}
+
+            {recentActivitiesData.loading ? (
+              <tr>
+                <td>
+                  <div className="h-[100px] w-full flex justify-center items-center">
+                    <LoadingSpinner color="sky-blue" size="16" />
+                  </div>
+                </td>
+              </tr>
+            ) : recentActivitiesData.data ? (
+              recentActivitiesData.data?.map((item) => {
+                let addedDate = item?.added?.split(" ")[0];
+                return (
+                  <tr
+                    className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                    key={item.uid}
+                  >
+                    <td className="py-3">
+                      <div className="flex space-x-2 items-center">
+                        {/* <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                          <img
+                            src={dataImage1}
+                            alt="data"
+                            className="w-full h-full"
+                          />
+                        </div> */}
+                        <div className="flex flex-col">
+                          <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                            {item.title ? item.title : "Title"}
+                          </h1>
+                          <span className="text-sm text-thin-light-gray">
+                            {item.description ? item.description : ""}
+                          </span>
+                        </div>
+                      </div>
+                    </td>
+
+                    <td className="text-right py-3">
+                      <div className="flex space-x-1 items-center justify-end">
+                        <span className="text-base text-dark-gray dark:text-white font-medium">
+                          {item.added ? addedDate : ""}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 }

src/components/Home/index.jsx

@@ -7,28 +7,30 @@ import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
 
 export default function Home(props) {
-  console.log("PROPS IN HOME->", props);
+ // console.log("PROPS IN HOME->", props);
   const userApi = new usersService();
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
   let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState([]);
+  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
+  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(res?.data?.result_list);
+      setMyActiveJobList({loading:false, data:res?.data?.result_list});
+      // setMyActiveJobList(res?.data?.result_list);
     } catch (error) {
-      setMyActiveJobList([]);
+      setMyActiveJobList({loading:false, data:[]});
+      // setMyActiveJobList([]);
       console.log("Error getting tasks");
     }
   };
 
-
   // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
   const getHomeDate = () => {
     userApi
@@ -47,8 +49,9 @@ export default function Home(props) {
   const getMyOffersList = async () => {
     try {
       const res = await userApi.getOffersList();
-      setMyOffersList(res.data?.result_list);
+      setMyOffersList({loading:false, data:res.data});
     } catch (error) {
+      setMyOffersList({loading:false, data:[]});
       console.log("Error getting offers", error);
     }
   };
@@ -72,13 +75,15 @@ export default function Home(props) {
           <FamilyDash
             account={userDetails}
             commonHeadData={props.bannerList}
-            familyOffers={MyOffersList}
-            MyActiveJobList={MyActiveJobList}
+            familyOffers={MyOffersList?.data}
+            MyActiveJobList={MyActiveJobList?.data}
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
           <FullAccountDash
             nextDueTask={nextDueTask}
             bannerList={props.bannerList}
+            offersList={MyOffersList}
+            MyActiveJobList={MyActiveJobList}
           />
         ) : (
           <div>

src/components/JobGroups/AddGroup.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from '../Helpers/Inputs/InputCom/index'
+
+import usersService from '../../services/UsersService'
+
+export default function AddGroup({action, situation , setUpdateList}) {
+
+    const api = new usersService()
+
+    const [name, setName] = useState('')
+
+    const handleChange = ({target:{name, value}}) =>{
+        setName(value)
+    }
+
+    let [requestStatus, setRequestStatus] = useState({
+        loading: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const addGroup = () => {
+        setRequestStatus({loading:true, status:false, message:''})
+        if(name == ''){
+            setRequestStatus({loading:false, status:false, message:'Please enter a group name'})
+            return setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        }
+        if(name.length < 6){
+            setRequestStatus({loading:false, status:false, message:'Group name must be up to six characters'})
+            return setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        }
+        api.jobGroupAdd({group_name:name, action:13025}).then(response => {
+            let {status, data} = response
+            if(status != 200 || data.internal_return < 0){
+                setRequestStatus({loading:false, status:false, message:'Unable to add Group'})
+                return 
+            }
+            setRequestStatus({loading:false, status:true, message:'Group Added'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+                // close modal
+                action()
+                // reload group page
+                setUpdateList(prev => !prev)
+            },3000)
+        }).catch(error => {
+            setRequestStatus({loading:false, status:false, message:'Unable to add Group, try again later'})
+        }).finally(()=>{
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, message:''})
+            },3000)
+        })
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="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 Group
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="mb-6 w-full">
+            <div className="input-item">
+                <InputCom
+                labelClass="tracking-wider"
+                fieldClass="sm:px-6 px-2"
+                value={name}
+                placeholder="Group Name"
+                label="Group Name"
+                name="name"
+                type="text"
+                inputHandler={handleChange}
+                // iconName="message"
+                />
+            </div>
+          </div>
+          <div className="w-full flex justify-between items-center gap-4">
+            <button
+              onClick={action}
+              type="button"
+              className="text-base text-light-red tracking-wide "
+            >
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">Cancel</span>
+            </button>
+            {requestStatus.loading ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => addGroup()}
+                type="button"
+                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              >
+                Add Group
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/DeleteGroup.jsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+export default function DeleteGroup({action, situation, details}) {
+
+    let [requestStatus, setRequestStatus] = useState({
+        laoding: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const deleteGroup = () => {
+
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="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">
+            Delete Group
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="what-icon mb-6 cursor-pointer">
+            <svg
+              width="136"
+              height="136"
+              viewBox="0 0 136 136"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
+              <path
+                d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                fill="white"
+              />
+              <path
+                d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <div className="mb-6">
+            <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
+              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span>
+            </p>
+          </div>
+          <div className="flex space-x-2.5">
+            <button
+              onClick={action}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteGroup()}
+                type="button"
+                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/DeleteMember.jsx

@@ -0,0 +1,122 @@
+import React, { useState } from 'react'
+
+import ModalCom from '../Helpers/ModalCom'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+export default function DeleteMember({action, situation, details}) {
+
+    let [requestStatus, setRequestStatus] = useState({
+        laoding: false,
+        status: false,
+        message: "",
+      }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
+
+    const deleteMember = () => {
+
+    }
+
+  return (
+    <ModalCom   
+        action={action}
+        situation={situation}
+    >
+      <div className="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">
+            Delete Member
+          </h1>
+          <button
+            type="button"
+            className="text-[#374557] dark:text-red-500"
+            onClick={action}
+          >
+            <svg
+              width="36"
+              height="36"
+              viewBox="0 0 36 36"
+              fill="none"
+              className="fill-current"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M36 16.16C36 17.4399 36 18.7199 36 20.0001C35.7911 20.0709 35.8636 20.2554 35.8385 20.4001C34.5321 27.9453 30.246 32.9248 22.9603 35.2822C21.9006 35.6251 20.7753 35.7657 19.6802 35.9997C18.4003 35.9997 17.1204 35.9997 15.8401 35.9997C15.5896 35.7086 15.2189 35.7732 14.9034 35.7093C7.77231 34.2621 3.08728 30.0725 0.769671 23.187C0.435002 22.1926 0.445997 21.1199 0 20.1599C0 18.7198 0 17.2798 0 15.8398C0.291376 15.6195 0.214408 15.2656 0.270759 14.9808C1.71321 7.69774 6.02611 2.99691 13.0428 0.700951C14.0118 0.383805 15.0509 0.386897 15.9999 0C17.2265 0 18.4532 0 19.6799 0C19.7156 0.124041 19.8125 0.136067 19.9225 0.146719C27.3 0.868973 33.5322 6.21922 35.3801 13.427C35.6121 14.3313 35.7945 15.2484 36 16.16ZM33.011 18.0787C33.0433 9.77105 26.3423 3.00309 18.077 2.9945C9.78479 2.98626 3.00344 9.658 2.98523 17.8426C2.96667 26.1633 9.58859 32.9601 17.7602 33.0079C26.197 33.0577 32.9787 26.4186 33.011 18.0787Z"
+                fill=""
+                fillOpacity="0.6"
+              />
+              <path
+                d="M15.9309 18.023C13.9329 16.037 12.007 14.1207 10.0787 12.2072C9.60071 11.733 9.26398 11.2162 9.51996 10.506C9.945 9.32677 11.1954 9.0811 12.1437 10.0174C13.9067 11.7585 15.6766 13.494 17.385 15.2879C17.9108 15.8401 18.1633 15.7487 18.6375 15.258C20.3586 13.4761 22.1199 11.7327 23.8822 9.99096C24.8175 9.06632 26.1095 9.33639 26.4967 10.517C26.7286 11.2241 26.3919 11.7413 25.9133 12.2178C24.1757 13.9472 22.4477 15.6855 20.7104 17.4148C20.5228 17.6018 20.2964 17.7495 20.0466 17.9485C22.0831 19.974 24.0372 21.8992 25.9689 23.8468C26.9262 24.8119 26.6489 26.1101 25.4336 26.4987C24.712 26.7292 24.2131 26.3441 23.7455 25.8757C21.9945 24.1227 20.2232 22.3892 18.5045 20.6049C18.0698 20.1534 17.8716 20.2269 17.4802 20.6282C15.732 22.4215 13.9493 24.1807 12.1777 25.951C11.7022 26.4262 11.193 26.7471 10.4738 26.4537C9.31345 25.9798 9.06881 24.8398 9.98589 23.8952C11.285 22.5576 12.6138 21.2484 13.9387 19.9355C14.5792 19.3005 15.2399 18.6852 15.9309 18.023Z"
+                fill="#"
+                fillOpacity="0.6"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="logout-modal-body w-full flex flex-col items-center px-10 py-8">
+          <div className="what-icon mb-6 cursor-pointer">
+            <svg
+              width="136"
+              height="136"
+              viewBox="0 0 136 136"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="68" cy="68" r="68" fill="#4687ba" />
+              <path
+                d="M69.8844 35.7891C71.1588 36.0357 72.4569 36.1967 73.7044 36.5423C81.5447 38.7098 87.2705 45.5378 87.9574 53.6156C88.5113 60.1147 86.3075 65.6006 81.5043 70.0195C79.8359 71.5545 78.0497 72.9604 76.3408 74.4534C76.127 74.6397 75.9654 75.0037 75.9604 75.2872C75.9284 77.2752 75.9435 79.2649 75.9435 81.2965C70.8895 81.2965 65.8758 81.2965 60.7915 81.2965C60.7915 81.0616 60.7915 80.8385 60.7915 80.6137C60.7915 76.5454 60.7999 72.4772 60.7797 68.4106C60.778 67.9392 60.9312 67.649 61.2831 67.3537C64.5643 64.5957 67.8271 61.8175 71.1033 59.0545C72.2616 58.0781 72.9215 56.8702 72.9081 55.3419C72.8878 52.916 70.8608 50.9146 68.423 50.8911C65.9701 50.8693 63.9145 52.8053 63.832 55.2328C63.8084 55.8988 63.8286 56.5665 63.8286 57.2695C58.7745 57.2695 53.7744 57.2695 48.6917 57.2695C48.6917 56.3149 48.6462 55.3385 48.6984 54.3655C49.222 44.699 56.7442 36.8745 66.4331 35.8914C66.5762 35.8763 66.7142 35.8243 66.854 35.7891C67.8641 35.7891 68.8742 35.7891 69.8844 35.7891Z"
+                fill="white"
+              />
+              <path
+                d="M67.485 100.21C66.1617 99.9268 64.9041 99.5091 63.803 98.6787C61.3804 96.8484 60.2877 93.7699 61.0386 90.7888C61.7726 87.8747 64.2138 85.6703 67.2089 85.2157C71.273 84.6 75.2024 87.3681 75.8135 91.277C76.4937 95.6153 73.8202 99.3782 69.544 100.103C69.4429 100.12 69.3487 100.172 69.2527 100.209C68.6635 100.21 68.0742 100.21 67.485 100.21Z"
+                fill="white"
+              />
+            </svg>
+          </div>
+          <div className="mb-6">
+            <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
+              Are you sure, you want to delete <br /> <span>'{details?.firstname} {details.lastname}'</span>
+            </p>
+          </div>
+          <div className="flex space-x-2.5">
+            <button
+              onClick={action}
+              type="button"
+              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+            >
+              <span className="text-gradient">Cancel</span>
+            </button>
+            {requestStatus.laoding ? (
+              <LoadingSpinner size="8" color="sky-blue" />
+            ) : (
+              <button
+                onClick={() => deleteMember()}
+                type="button"
+                className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              >
+                Confirm Delete
+              </button>
+            )}
+          </div>
+
+          {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
+        </div>
+      </div>
+    </ModalCom>
+  )
+}

src/components/JobGroups/GroupList.jsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import InputCom from '../../components/Helpers/Inputs/InputCom/index'
+import DeleteGroup from './DeleteGroup'
+import AddGroup from './AddGroup'
+
+export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
+
+    const [deletePopout, setDeletePopout] = useState({
+        status: false,
+        data: {}
+    })
+
+    const [addGroupPopout, setAddGroupPopout] = useState(false)
+
+    const handleAddGroup = () => {
+        setAddGroupPopout(true)
+    }
+
+    const handleDeleteGroup = (item) => {
+        setDeletePopout({
+            status: true,
+            data: {...item}
+        })
+    }
+
+
+  return (
+    <>
+        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
+            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
+            <div className='flex justify-end items-center'>
+                <button onClick={handleAddGroup} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Group</button>
+            </div>
+
+            {groupList && groupList.length < 1 ?
+            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
+            :
+            <div className='my-4 max-h-[400px] overflow-y-auto'>
+                <div className='flex flex-col'>
+                    {groupList.map(item=> (
+                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
+                            <div className='flex gap-2 items-center'>
+                                <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
+                                <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
+                            </div>
+                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            }
+        </div>
+        
+        {deletePopout.status &&
+            <DeleteGroup 
+                action={()=>setDeletePopout({status:false, data:{}})}
+                situation={deletePopout.status}
+                details={deletePopout.data}
+            />
+        }
+
+        {addGroupPopout &&
+            <AddGroup 
+                action={()=>setAddGroupPopout(false)}
+                situation={addGroupPopout}
+                setUpdateList={setUpdateList}
+            />
+        }
+    </>
+  )
+}

src/components/JobGroups/GroupMemberTable.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { handlePagingFunc } from '../Pagination/HandlePagination';
+import PaginatedList  from '../Pagination/PaginatedList';
+import DeleteMember from './DeleteMember';
+
+export default function GroupMemberTable({selectedList}) {
+  
+    // Handle Pagination
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+
+    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e, setCurrentPage);
+    };
+
+    const [deletePopout, setDeletePopout] = useState({
+        status: false,
+        data: {}
+    })
+
+    const handleDeleteMember = (item) => {
+        setDeletePopout({
+            status: true,
+            data: {...item}
+        })
+    }
+   
+    return (
+        <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
+            <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">
+                <tbody>
+                  <>
+                    {selectedList && selectedList?.length > 0 ? (
+                        currentSelectedList.map((value, index) => (
+                        <tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
+                          {/* <td className="p-1">{value?.firstname}</td>
+                          <td className="p-1">{value?.lastname}</td>
+                          <td className="p-1">{value?.email}</td>
+                          <td className="p-1 text-right">
+                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
+                          </td> */}
+                          <td className='py-2'>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.firstname && value.firstname} {value.lastname && value.lastname}
+                              </h1>
+                              <span className="text-sm text-thin-light-gray">
+                                {value.email && value.email}
+                              </span>
+                            </div>
+                          </td>
+                          <td className='py-2 text-right'>
+                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
+                          </td>
+                        </tr>
+                        ))
+                    ) : (
+                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                        <td className="p-2">No Members Found</td>
+                      </tr>
+                    )}
+                  </>
+                </tbody>
+              </table>
+    
+              {/* PAGINATION BUTTON */}
+              <PaginatedList
+                onClick={handlePagination}
+                prev={currentPage == 0 ? true : false}
+                next={
+                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+                  selectedList?.length
+                    ? true
+                    : false
+                }
+                data={selectedList}
+                start={indexOfFirstItem}
+                stop={indexOfLastItem}
+              />
+              {/* END OF PAGINATION BUTTON */}
+            </div>
+    
+          {/* DELETE MEMBER POPOUT */}
+          {deletePopout.status &&
+                <DeleteMember 
+                    action={()=>setDeletePopout({status:false, data:{}})}
+                    situation={deletePopout.status}
+                    details={deletePopout.data}
+                />
+            }
+          {/* END OF DELETE MEMBER POPOUT */}
+        </div>
+      );
+    };

src/components/JobGroups/JobGroups.jsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react'
+import Layout from '../Partials/Layout'
+
+import GroupList from './GroupList'
+import MemberList from './MemberList'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+import usersService from '../../services/UsersService'
+
+export default function JobGroups() {
+
+    const userApi = new usersService();
+
+    const [updateList, setUpdateList] = useState(false)
+
+    
+    const [groupList, setGroupList] = useState({
+        loading:true,
+        groups: [],
+        members: []
+    })
+
+    const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
+
+    const changeSelectedGroup = (e) => {
+        let groupID = e.target.value
+        const activeMembers = groupList?.members?.filter(item => item.group_id == groupID)
+        const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID)
+        setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers})
+    }
+
+    useEffect(()=>{
+        setGroupList({loading: true, groups: [], members: []})
+        userApi.jobGroupList({}).then(res => {
+            const {status, data} = res
+            if(status != 200 || data?.internal_return < 0){
+                setGroupList({loading: false, groups: [], members: []})
+                return
+            }
+            if(data.result_list.length < 0){
+                setGroupList({loading: false, groups: [], members: []})
+                return
+            }
+            setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
+            if(selectedGroup.id == ''){
+                let activeGroupId = data.result_list[0].group_id
+                let activeGroup = data.result_list[0].group_name
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
+                setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
+            }else{
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id)
+                setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers})
+            }
+        }).catch(error => {
+            setGroupList({loading: false, groups: [], members: []})
+            console.log(error)
+        })
+    },[updateList])
+
+  return (
+    <Layout>
+        <div>
+            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1>
+        </div>
+        <div className='p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white'>
+            {groupList.loading ?
+                <div className='w-full h-[400px] flex justify-center items-center'>
+                    <LoadingSpinner size='16' />
+                </div>
+            :
+            <>
+                <GroupList groupList={groupList?.groups} selectedGroup={selectedGroup} changeSelectedGroup={changeSelectedGroup} setUpdateList={setUpdateList} />
+                <MemberList groupList={groupList?.groups} selectedGroup={selectedGroup} setUpdateList={setUpdateList} />
+            </>
+            }
+        </div>
+    </Layout>
+  )
+}

src/components/JobGroups/MemberList.jsx

@@ -0,0 +1,262 @@
+import React, { useState } from 'react'
+
+import InputCom from '../../components/Helpers/Inputs/InputCom/index'
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+import GroupMemberTable from './GroupMemberTable'
+
+import EmailValidator from '../../lib/EmailValidator'
+
+import usersService from '../../services/UsersService'
+
+export default function MemberList({groupList, selectedGroup, setUpdateList}) {
+
+    const api = new usersService()
+
+    const [fields, setFields] = useState({
+        firstname: '',
+        lastname: '',
+        email: ''
+    })
+
+    const handleFieldsChange = ({target:{name, value}}) => {
+        setFields(prev => ({...prev, [name]:value}))
+        // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+        // if(error >= 0){
+        //   let oldErrorArr = requestState.errors
+        //   let newErrorArr = oldErrorArr.splice(error, 1)
+        //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
+        // }
+
+        if(value == ''){
+            setRequestState({
+                loading: false,
+                status: false,
+                message: '',
+                data: [],
+                errors: [name]
+            })
+        }else{
+            let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+            if(error >= 0){
+              let oldErrorArr = requestState.errors
+              let newErrorArr = oldErrorArr.splice(error, 1)
+              setRequestState(prev => ({...prev, errors:oldErrorArr}))
+            }
+        }
+
+        if(name == 'email'){
+             //checks if email is a valid email address
+            let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+            if (!EmailValidator(value)) {
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: ['email']
+                })
+            }
+        }
+    }
+
+    const [requestState, setRequestState] = useState({
+        loading: false,
+        status: false,
+        message: '',
+        data: [],
+        errors: ['email', 'firstname', 'lastname']
+      })
+
+    const addMember = () => {
+        // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
+        //     if(typeof item == 'string' && fields[item] === ''){
+        //         return item
+        //     }
+        // })
+    
+        // if(errors.length){
+        // setRequestState({
+        //     loading: false,
+        //     status: false,
+        //     message: '',
+        //     data: [],
+        //     errors: [...errors]
+        // })
+        // return
+        // }
+
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (!EmailValidator(fields.email)) {
+            setRequestState({
+                loading: false,
+                status: false,
+                message: 'Email is invalid',
+                data: [],
+                errors: []
+            })
+            return setTimeout(()=>{
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+            },3000)
+        }
+              
+        setRequestState({
+        loading: true,
+        status: false,
+        message: '',
+        data: [],
+        errors: []
+        })
+         const requestData = {
+            firstname:fields.firstname,lastname:fields.lastname, email:fields.email, group_id: selectedGroup?.id, action:13015
+         }
+        
+         api.groupMemberAdd(requestData).then(response => {
+            let {status, data} = response
+            if(status != 200 || data?.internal_return < 0){
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: 'Unable to add member',
+                    data: [],
+                    errors: []
+                })
+                return
+            }
+            setRequestState({
+                loading: false,
+                status: true,
+                message: 'Member added',
+                data: [],
+                errors: []
+            })
+
+            setTimeout(()=>{
+                // trigger group page reload
+                setUpdateList(prev => !prev)
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+            }, 3000)
+
+         }).catch(error=>{
+            setRequestState({
+                loading: false,
+                status: false,
+                message: 'Something went wrong, try again',
+                data: [],
+                errors: []
+            })
+         }).finally(()=>{
+            setTimeout(()=>{
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: []
+                })
+                setFields({
+                    firstname: '',
+                    lastname: '',
+                    email: ''
+                })
+            }, 3000)
+        })
+    }
+
+  return (
+    <>
+    <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
+        {groupList && groupList.length < 1 ?
+        <>
+            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
+        </>
+        :
+        <>
+            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
+            <div className='w-full flex flex-col-reverse lg:flex-col'>
+                <div className='py-3 w-full'>
+                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.firstname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="First Name"
+                                // label="Firstname"
+                                name="firstname"
+                                type="text"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.lastname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Last Name"
+                                // label="Lastname"
+                                name="lastname"
+                                type="text"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className="input-item w-full sm:w-[150%]">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.email}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Email"
+                                // label="Email"
+                                name="email"
+                                type="email"
+                                // iconName="message"
+                            />
+                        </div>
+                        <div className='flex justify-end items-end'>
+                            {requestState.loading ?
+                            <LoadingSpinner size='8' color='sky-blue' />
+                            :
+                            <button 
+                                onClick={addMember} 
+                                disabled={requestState.loading || requestState.status || requestState.errors.length} 
+                                className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
+                            >
+                                Add Member
+                            </button>
+                            }
+                        </div>
+
+                        {!requestState.loading && requestState.message &&
+                        <p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
+                        }
+                    </div>
+                </div>
+                <div className='my-2 flex flex-col min-h-[300px]'>
+                    {selectedGroup?.data?.length < 1 ?
+                    <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Member Found, Please Add</h1>
+                    :
+                    <GroupMemberTable selectedList={selectedGroup?.data} />
+                    }
+                </div>
+            </div>
+        </>
+        }
+    </div>
+    </>
+  )
+}

src/components/Lnd/Lnd.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useState } from 'react'
+import Layout from '../Partials/Layout'
+
+import LoadingSpinner from '../Spinners/LoadingSpinner'
+
+function Lnd() {
+
+  const [reqStatus, setReqStatus] = useState({loading:true, data: []})
+
+  useEffect(()=>{
+    const timer = setTimeout(()=>{
+      setReqStatus({loading:false, data: []})
+    },2000)
+    return () => clearTimeout(timer)
+  }, [])
+  return (
+    <>
+      {reqStatus.loading ?
+        <LoadingSpinner color='sky-blue' size='32' height='min-h-screen' />
+      :
+        <div className='min-h-screen flex flex-col justify-center items-center'>Empty Dummy Page</div>
+      }
+    </>
+  )
+}
+
+export default Lnd

src/components/MarketPlace/MainSection.jsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo, useState } from "react";
-import DataIteration from "../Helpers/DataIteration";
-import AvailableJobsCard from "../Cards/AvailableJobsCard";
-import ListView from "../../assets/images/list-view.png";
 import GridView from "../../assets/images/grid-view.svg";
+import ListView from "../../assets/images/list-view.png";
+import AvailableJobsCard from "../Cards/AvailableJobsCard";
+import DataIteration from "../Helpers/DataIteration";
 import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({
   className,
   marketPlaceProduct,
+  image_server,
   categories,
 }) {
   // Creating All cart..
@@ -110,6 +111,7 @@ export default function MainSection({
               {({ datas }) => (
                 <AvailableJobsCard
                   contentDisplay={contentDisplay}
+                  image_server={image_server}
                   key={datas.id}
                   datas={datas}
                 />

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -7,6 +7,10 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
   const [textValue, setTextValue] = useState("");
+  const [errMsg, setErrMsg] = useState({
+    market: false,
+    manage: false,
+  });
   const apiCall = useMemo(() => new usersService(), []);
 
   const handleInputChange = ({ target: { value } }) => {
@@ -48,20 +52,17 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           return;
         }
 
-        toast.success("Message sent", {
-          autoClose: 2500,
-          hideProgressBar: true,
-        });
-
         setMarketMsg({ data: marketMessageRes, state: true });
-        setTimeout(() => onClose(), 2000);
       } catch (error) {
+        setErrMsg({ market: true });
+        setMarketMsg({ loading: false, state: false });
         throw new Error(error);
       } finally {
+        setTextValue("");
         setTimeout(() => {
-          setTextValue("");
-          setMarketMsg({ loading: false });
-        }, 2000);
+          setMarketMsg({ loading: false, state: false });
+          setErrMsg({ market: false });
+        }, 5000);
       }
     };
 
@@ -116,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     .replace(/&/g, "&");
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full 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-[30px] py-[23px]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}
@@ -125,10 +126,10 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:flex bg-white rounded-lg">
+        <div className="md:flex bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           <div className="p-4 w-full md:w-[75%] md:border-r-1">
-            <div className="min-h-[263px]">
-              <h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
+            <div className="max-h-[240px] h-full">
+              <h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
                 {details?.title}
               </h2>
 
@@ -152,32 +153,32 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 },
               ].map(({ name, content, danger }, idx) => (
                 <div className={`my-3 md:flex items-center`} key={idx}>
-                  <label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
+                  <label className="w-full md:w-[19%] tracking-wide font-semibold whitespace-pre-wrap">
                     {name}
                   </label>
                   <div
-                    className={`w-full md:w-3/4 text-slate-900 market-pop ${
+                    className={`w-full md:w-3/4 text-slate-900 dark:text-white market-pop ${
                       name !== "Delivery Detail"
-                        ? " h-full max-h-28 flex items-center"
-                        : " overflow-y-auto max-h-[100px]"
-                    }`}
+                        ? " h-full flex items-center"
+                        : " overflow-y-auto max-h-[80px]"
+                    }  ${name === "Description" && "max-h-14 h-full overflow-auto"}`}
                   >
                     {danger ? (
                       <p
-                        className={``}
+                        className={`dark:text-white`}
                         dangerouslySetInnerHTML={{
                           __html: danger && content,
                         }}
                       />
                     ) : (
-                      <p className={`w-full text-slate-900`}>
+                      <p className={`w-full text-slate-900 dark:text-white`}>
                         {name !== "Delivery Detail" ? (
                           <>
                             {typeof content !== "object" ? content : null}
                             {typeof content === "object" && (
                               <>
                                 <hr className="mb-1" />
-                                <span className="flex items-center gap-2">
+                                <span className="flex items-center gap-2 dark:text-white">
                                   {content?.text}
                                   <strong>{thePrice}</strong>
                                 </span>
@@ -195,40 +196,46 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               ))}
             </div>
             <hr />
-            <div className="my-3 w-full flex flex-col gap-3">
+            <div className="w-full flex flex-col gap-3">
               <div className="w-full">
-                <label className="w-full text-slate-900 tracking-wide">
+                <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                   If you have any questions about this task:
                 </label>
                 <textarea
-                  className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
-                  rows="5"
+                  className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                    marketMsg.loading && "italic text-[#9CA3AF]"
+                  } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                  rows="3"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
-                  value={textValue}
+                  value={marketMsg.loading ? "Sending..." : textValue}
                   onChange={handleInputChange}
                 />
               </div>
-              <button
-                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
-                name="market-message"
-                onClick={MarketDetail}
-              >
-                {marketMsg.loading ? (
-                  <LoadingSpinner size={5} color="white" />
-                ) : !marketMsg.state ? (
-                  "Send Message"
-                ) : (
-                  "Message Sent"
-                )}
-              </button>
+              <div className="relative flex w-full justify-end ">
+                <span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
+                  {marketMsg.state && "Message Sent!"}
+                  {errMsg.market && "Something went wrong"}
+                </span>
+                <button
+                  className="self-end w-[150px] h-[48px] rounded-full text-base bg-yellow-500 text-white"
+                  name="market-message"
+                  onClick={MarketDetail}
+                >
+                  {marketMsg.loading ? (
+                    <LoadingSpinner size={5} color="white" />
+                  ) : (
+                    "Send Message"
+                  )}
+                </button>
+              </div>
             </div>
           </div>
 
-          <div className="w-full md:w-[23%] h-full ">
-            <div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
-              <div className="w-full flex flex-col justify-center py-4 gap-2">
-                <p className="w-full text-slate-900 tracking-wide my-1">
+          <div className="w-full md:w-[23%] h-full flex flex-col">
+            <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
+              <div className="w-full flex flex-col justify-center pb-4 gap-2">
+                <p className="w-full text-slate-900 tracking-wide my-1 font-semibold">
                   Interested in the task?
                 </p>
                 <hr />
@@ -261,7 +268,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 </>
               </div>
 
-              <div className="">
+              <div className="text-slate-900">
                 <p className="flex items-center tracking-wide">
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
@@ -270,7 +277,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
               </div>
             </div>
             <button
-              className="self-end w-[150px] mt-2 h-[52px] rounded-md text-base bg-transparent border border-red-500 text-red-500 mx-auto"
+              className="self-center w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500 mx-auto"
               name="cancel"
               onClick={onClose}
             >

src/components/MarketPlace/index.jsx

@@ -1,12 +1,13 @@
-import Layout from "../Partials/Layout";
-import MainSection from "./MainSection";
-import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+import MainSection from "./MainSection";
 
 export default function MarketPlace({ commonHeadData }) {
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   const categories = jobLists?.categories;
+  const image_server = jobLists?.session_image_server;
 
   return (
     <>
@@ -15,9 +16,10 @@ export default function MarketPlace({ commonHeadData }) {
         <MainSection
           marketPlaceProduct={marketData}
           categories={categories}
+          image_server={image_server}
           className="mb-10"
         />
       </Layout>
     </>
   );
-}
+}

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -30,17 +30,26 @@ export default function ActiveJobMessage({ activeJobMesList }) {
             {activeJobMesList?.data?.length ?
             (
             <tbody>
-                {activeJobMesList.data.map((item, index) => (
-                <tr key={index} className='text-slate-500'>
-                    <td>
-                        <div className={`msg_box ${item.who}`}>
-                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
-                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
-                        </div>
-
-                    </td>
-                </tr>
-                ))}
+                {activeJobMesList.data.map((item, index) => 
+                {
+                    let imageLink = `${activeJobMesList?.image}${localStorage.getItem('session_token')}/contracts/${item.msg_uid}`
+                    return (
+                        <tr key={index} className='text-slate-500'>
+                            <td>
+                                <div className={`msg_box ${item.who}`}>
+                                    <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                                    {item.msg_type == 'FILE' ?
+                                    <a href={imageLink} target="_blank" className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></a>
+                                    :
+                                    <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                                    }
+                                </div>
+        
+                            </td>
+                        </tr>
+                    )
+                }
+                )}
             </tbody>
             )
             :

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -1,33 +1,34 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
-import Layout from "../Partials/Layout";
 import { useNavigate } from "react-router-dom";
-import ActiveJobMessage from "./ActiveJobMessage";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import CountDown from "../Helpers/CountDown";
-import IndexJobActions from "./JobActions/IndexJobActions";
-import ModalCom from "../Helpers/ModalCom";
 import { useReactToPrint } from "react-to-print";
+import CountDown from "../Helpers/CountDown";
+import ModalCom from "../Helpers/ModalCom";
+import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import ActiveJobMessage from "./ActiveJobMessage";
+import IndexJobActions from "./JobActions/IndexJobActions";
 
 import usersService from "../../services/UsersService";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function ActiveJobs(props) {
   const ApiCall = new usersService();
-  let navigate = useNavigate();
+  const navigate = useNavigate();
 
-  let { userDetails } = useSelector((state) => state.userDetails);
+  const { userDetails } = useSelector((state) => state.userDetails);
 
-  let [passDue, setPassDue] = useState(
+  const [passDue, setPassDue] = useState(
     new Date() > new Date(props.details?.delivery_date)
   ); // STATE TO KNOW IF TASK IS PASSED DUE TIME
 
-  let [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
+  const [messageToSend, setMessageToSend] = useState(""); // State to hold the value of message to be sent
 
-  let [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
+  const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
 
-  let [tab, setTab] = useState("message");
+  const [tab, setTab] = useState("message");
 
-  let [requestStatus, setRequestStatus] = useState({
+  const [requestStatus, setRequestStatus] = useState({
     loading: false,
     status: false,
     message: "",
@@ -248,7 +249,11 @@ function ActiveJobs(props) {
     }
   }, [passDue]);
 
-  console.log("AC JOBS >>", props);
+  let thePrice = PriceFormatter(
+    props.details?.price * 0.01,
+    props.details?.currency_code,
+    props.details?.currency
+  );
 
   return (
     <Layout>
@@ -259,14 +264,17 @@ function ActiveJobs(props) {
             <button
               type="button"
               className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
-              onClick={() =>{
-                  if(props.details.pathname == '/manage-family'){
-                    navigate(props.details.pathname, {state: { ...props.details.accountDetails }}, { replace: true })
-                  }else{
-                    navigate(props.details.pathname, { replace: true })
-                  }
+              onClick={() => {
+                if (props.details.pathname == "/manage-family") {
+                  navigate(
+                    props.details.pathname,
+                    { state: { ...props.details.accountDetails } },
+                    { replace: true }
+                  );
+                } else {
+                  navigate(props.details.pathname, { replace: true });
                 }
-              }
+              }}
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -308,10 +316,11 @@ function ActiveJobs(props) {
                 <span className="font-semibold">Due: </span>
                 {props?.details && props.details.delivery_date.split(" ")[0]}
               </p>
-              <p className="py-2 text-base text-slate-700">
-                {props?.delivery_date &&
-                  props.details.delivery_date.split(" ")[1]}
-              </p>
+              {props?.delivery_date && (
+                <p className="py-2 text-base text-slate-700">
+                  {props.details.delivery_date.split(" ")[1]}
+                </p>
+              )}
             </div>
           ) : (
             <div className="my-1 flex items-start gap-3">
@@ -331,6 +340,13 @@ function ActiveJobs(props) {
             </div>
           )}
 
+          <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
+            <span className="font-semibold text-black dark:text-white">
+              Price:{" "}
+            </span>
+            <span className="">{thePrice}</span>
+          </div>
+
           <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
             <span className="font-semibold text-black dark:text-white">
               Duration:{" "}
@@ -367,15 +383,17 @@ function ActiveJobs(props) {
           {/* TEXTAREA SECTION */}
           <div className="mt-5">
             <div className="">
-              <div 
+              <div
                 className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
                 // className='ml-7 flex justify-start items-center gap-3'
-                >
+              >
                 <button
                   name="message"
                   onClick={(e) => setTab(e.target.name)}
                   className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    tab == "message"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                 >
                   Send Message
@@ -384,7 +402,9 @@ function ActiveJobs(props) {
                   name="files"
                   onClick={(e) => setTab(e.target.name)}
                   className={`px-4 py-1 rounded-t-2xl ${
-                    tab == "files" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                    tab == "files"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                 >
                   Send Files
@@ -398,6 +418,7 @@ function ActiveJobs(props) {
                   name="message"
                   onChange={handleMessageChange}
                   value={messageToSend}
+                  autoFocus
                 />
               ) : (
                 <div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
@@ -471,7 +492,7 @@ function ActiveJobs(props) {
                   <button
                     onClick={sendFile}
                     type="button"
-                    className='btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center'
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
                   >
                     {requestStatus.loading ? (
                       <LoadingSpinner size="6" color="sky-blue" />
@@ -495,7 +516,7 @@ function ActiveJobs(props) {
                   <button
                     onClick={sendTaskMessage}
                     type="button"
-                    className='btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer'
+                    className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                   >
                     {requestStatus.loading ? (
                       <LoadingSpinner size="6" color="sky-blue" />
@@ -579,10 +600,10 @@ const PopModal = ({
   myRef,
 }) => {
   return (
-    <ModalCom action={popUpHandler} situation={popUp} className="edit-popup">
+    <ModalCom action={popUpHandler} situation={popUp}>
       <div
         ref={myRef}
-        className="message-modal-wrapper min-w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"
+        className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
         <div className="message-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">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">