Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into wallet-styles

added uploaded files
Merge branch 'upload-payload-fix' of WrenchBoard/Users-Wrench into master
2023-08-09 22:00:11 +01:00 · 2023-08-09 21:59:46 +01:00 · 2023-08-09 20:36:46 +00:00 · 2023-08-09 21:23:51 +01:00 · 2023-08-09 19:52:37 +00:00 · 2023-08-09 20:28:19 +01:00
183 changed files with 7762 additions and 14319 deletions
@@ -42,13 +42,34 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/

-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#development Account Social
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
+
+REACT_APP_APPLE_CLIENT_ID='com.wrenchboard.users.client'
+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')

 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4

+REACT_APP_LOGOUT_TEXT="Sign Out"
+

 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
@@ -41,4 +41,6 @@ REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https:
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/

 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -40,7 +40,14 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/

+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true

 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"
@@ -17,6 +17,7 @@
    "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",
@@ -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"}
@@ -47,6 +47,8 @@ import OffersInterestPage from "./views/OffersInterestPage";
 import ManageInterestOfferPage from './views/ManageInterestOfferPage'
 import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
+import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";

 export default function Routers() {
  return (
@@ -54,8 +56,12 @@ export default function Routers() {
      <Routes>
        {/* guest routes */}
        <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/eoffer" element={<LoginPage />} />
+
        <Route exact path="/signup" element={<SignupPage />} />
        <Route exact path="/login/auth" element={<AuthRedirect />} />
+        <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
+        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
        <Route
          exact
          path="/forgot-password"
@@ -115,7 +121,8 @@ export default function Routers() {
          <Route exact path="/sell" element={<SellPage />} />
          <Route exact path="/saved" element={<SavedPage />} />
          <Route exact path="/history" element={<HistoryPage />} />
-          <Route exact path="/upload-product" element={<UploadProductPage />} />
+          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
+          <Route exact path="/my-uploads" element={<UploadProductPage />} />
          <Route exact path="/profile" element={<AuthProfilePage />} />
          <Route exact path="/user-profile" element={<UserProfilePage />} />
          <Route exact path="/settings" element={<SettingsPage />} />
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" id="Bank"><path d="m896 78.526 896 358.4v119.466h-119.467q0 24.267-19.133 42-19.133 17.734-45.267 17.734H183.867q-26.134 0-45.267-17.734-19.133-17.733-19.133-42H0V436.926ZM238.933 675.859h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h55.066q26.134 0 45.267 17.733 19.133 17.734 19.133 42v59.734H119.467v-59.734q0-24.266 19.133-42 19.133-17.733 45.267-17.733h55.066v-716.8zm1488.667 896q26.133 0 45.267 17.733 19.133 17.734 19.133 42v119.467H0v-119.467q0-24.266 19.133-42 19.134-17.733 45.267-17.733h1663.2z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="identificationcard"><path fill="#4687ba" d="M0 6v13c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V6" class="color2d98d4 svgShape"></path><path fill="#ff6699" d="M22 3H2a2 2 0 0 0-2 2v2h24V5a2 2 0 0 0-2-2z" class="color0377be svgShape"></path><path fill="#e6e7f9" d="M22 3H2C.897 3 0 3.897 0 5v.25c0-1.103.897-2 2-2h20c1.103 0 2 .897 2 2V5c0-1.103-.897-2-2-2z" opacity=".2" class="colorffffff svgShape"></path><path fill="#4687ba" d="M22 20.75H2c-1.103 0-2-.897-2-2V19c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2v-.25c0 1.103-.897 2-2 2z" opacity=".1" class="color010101 svgShape"></path><path fill="#e6e7f9" d="M13 17h8v1h-8zM13 14h8v1h-8zM13 11h8v1h-8z" class="colorffffff svgShape"></path><circle cx="7" cy="12" r="2" fill="#e6e7f9" class="colorffffff svgShape"></circle><path fill="#e6e7f9" d="M9.987 15.237C9.288 14.9 8.203 14.5 7 14.5s-2.288.4-2.987.737c-.625.3-1.013.9-1.013 1.566V18h8v-1.197c0-.665-.388-1.265-1.013-1.566z" class="colorffffff svgShape"></path><circle cx="17" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M17 4.25a.99.99 0 0 1 .975.875C17.98 5.082 18 5.045 18 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 17 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="a" x1="6.973" x2="21.55" y1="1.973" y2="16.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#010101" stop-opacity=".1" class="stopColor010101 svgShape"></stop><stop offset="1" stop-color="#010101" stop-opacity="0" class="stopColor010101 svgShape"></stop></linearGradient><path fill="url(#a)" d="M22 21c1.103 0 2-.897 2-2V7H0l14 14h8z"></path><circle cx="7" cy="5" r="1" fill="#ff6699" class="color0a70b9 svgShape"></circle><path fill="#4687ba" d="M7 4.25a.99.99 0 0 1 .975.875C7.98 5.082 8 5.045 8 5a1 1 0 0 0-2 0c0 .044.02.082.025.125A.99.99 0 0 1 7 4.25z" opacity=".1" class="color010101 svgShape"></path><linearGradient id="b" x1="-.708" x2="24.708" y1="6.074" y2="17.925" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffffff" stop-opacity=".2" class="stopColorffffff svgShape"></stop><stop offset="1" stop-color="#ffffff" stop-opacity="0" class="stopColorffffff svgShape"></stop></linearGradient><path fill="url(#b)" d="M22 3H2a2 2 0 0 0-2 2v14c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2V5a2 2 0 0 0-2-2z"></path></svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Pin"><path fill="#4687ba" d="M106,13.8L91.7,4.6C86.2,1,78.9,2,74.5,7L41.9,46.9c-9.1,0.4-17.9,3.3-25.4,8.7c-0.7,0.5-0.7,1.6,0.1,2.1
+				l10.2,6.6l0,0L46.4,77l-24,41.4c-1.2,2.1-0.7,4.9,1.4,6.3c2.2,1.6,5.2,1.1,6.7-1.1l28-38.8L78,97.5l0,0l10.2,6.6
+				c0.7,0.5,1.7,0.1,1.9-0.8c1.8-9,0.9-18.3-2.5-26.8l23.1-46C113.6,24.5,111.5,17.4,106,13.8z" class="color2d3e50 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" id="success"><path fill="#80af52" d="M256 26c127.03 0 230 102.97 230 230S383.03 486 256 486 26 383.03 26 256 128.97 26 256 26z"></path><path fill="#fff" d="M215.999 386a9.998 9.998 0 0 1-7.525-3.415l-70-80c-3.637-4.156-3.215-10.474.941-14.11s10.475-3.217 14.111.94l60.961 69.67 142.938-238.23c2.842-4.736 8.983-6.273 13.72-3.43 4.736 2.841 6.271 8.984 3.431 13.72l-150 250a9.998 9.998 0 0 1-8.577 4.855z"></path></svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Alert"><path fill="#f34093" d="M122.9,100.2L74.3,15.9c-4.6-7.9-16-7.9-20.6,0L5.1,100.2C0.5,108.1,6.2,118,15.4,118h97.3
+		C121.8,118,127.5,108.1,122.9,100.2z M63.9,101c-3.5-0.1-6.7-3.3-6.6-6.8c0.1-3.5,3.3-6.7,6.8-6.6c3.5,0.1,6.7,3.3,6.6,6.8
+		C70.6,98,67.4,101.1,63.9,101z M71.3,51.8c-0.7,7.8-1.5,15.6-2.3,23.4c-0.5,4.4-3.2,6.1-7.3,4.5c-1-0.4-2-2-2.2-3.2
+		C58.6,70,58,63.4,57.3,56.8c-0.3-2.8-0.5-5.6-0.8-8.5c-0.4-3.3,0.6-4.5,4-4.5c1.1,0,2.3,0,3.4,0C72,43.8,72,43.8,71.3,51.8z" class="color343433 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="Messages"><path fill="#4687ba" d="m447.372 413.112-17.544-52.629c-1-3.002-.674-6.23.775-9.043 13.184-25.615 18.629-55.858 12.925-87.736-8.746-48.868-44.53-89.475-90.943-105.048 11.976 28.924 15.628 61.084 9.645 92.984-12.155 64.837-64.074 116.246-129.191 127.924-8.429 1.512-16.945 2.248-25.396 2.463 19.776 21.336 46.173 36.503 75.619 41.784 31.682 5.682 61.784.393 87.322-12.594 2.802-1.425 6.007-1.742 8.99-.748l52.83 17.61c9.251 3.084 18.052-5.716 14.968-14.967z" class="color173042 svgShape"></path><path fill="#4687ba" d="M177.161 85.744C122.283 95.941 78.306 140.526 68.472 195.47c-5.704 31.878-.259 62.121 12.925 87.736 1.449 2.813 1.775 6.041.776 9.043l-17.545 52.629c-3.083 9.251 5.717 18.051 14.968 14.968l52.83-17.61c2.984-.994 6.19-.677 8.991.748 25.537 12.987 55.638 18.276 87.321 12.594 54.809-9.829 99.281-53.698 109.541-108.428 18.078-96.414-64.733-179.316-161.118-161.406zm34.938 177.536h-68.234c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h68.234c6.731 0 12.185 5.455 12.185 12.185 0 6.731-5.454 12.185-12.185 12.185zm48.739-48.739H143.864c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h116.973c6.731 0 12.185 5.455 12.185 12.185.001 6.731-5.453 12.185-12.184 12.185z" class="color173042 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="phone" x="0" y="0" version="1.1" viewBox="0 0 29 29" xml:space="preserve"><path d="M5.661 23.339c4.882 4.882 12.796 4.882 17.678 0 4.882-4.882 4.882-12.796 0-17.678s-12.796-4.882-17.678 0C.78 10.543.78 18.457 5.661 23.339zm5.545-16.613l1.86 1.86c.372.372.451.947.193 1.406l-.699 1.241a.781.781 0 0 0 .129.937l4.141 4.141a.781.781 0 0 0 .937.128l1.241-.699a1.173 1.173 0 0 1 1.406.193l1.861 1.861a1.175 1.175 0 0 1 0 1.66l-.881.881a3.135 3.135 0 0 1-3.786.493l-.084-.048a24.54 24.54 0 0 1-8.868-8.681l-.423-.706a3.128 3.128 0 0 1 .469-3.823l.844-.844a1.173 1.173 0 0 1 1.66 0z" fill="#4687ba" class="color000000 svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512" id="Sms"><circle cx="256" cy="256" r="256" fill="#4687ba" class="color00aebb svgShape"></circle><path fill="#ffffff" d="M256 129.3c-88.4 0-160 52-160 116.2 0 26.6 12.3 51.1 33 70.7-11.6 26.2-22.6 66.2-22.6 66.2 6.1 3.1 60.9-23.9 78.4-32.8 21.4 7.7 45.6 12.1 71.2 12.1 88.4 0 160-52 160-116.2s-71.6-116.2-160-116.2zm-59.2 148.9c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-6-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.6-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.7 11.9-7.8 15.7zm99.3 4.7h-15.5v-52.6l-.3-.1-19.1 52.7h-10.5l-19.1-52.8-.3.1v52.7h-15.5v-77.1h20.3l19.6 56.8h.3l19.8-56.8H296v77.1zm62.1-4.7c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-5.9-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.7-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.6 11.9-7.8 15.7z" class="colorffffff svgShape"></path></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>
@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function AppleRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+
+      setTimeout(()=>{ // remove LATER
+        navigate('/login', {state: {error: true}})
+      },2000)
+      
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "APPLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+    //   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>
+  )
+}
+
+export default AppleRedirect
@@ -0,0 +1,77 @@
+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 FbookRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+      
+      /*
+      https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/#exchangecode
+      Step 1. Get access token by code
+
+      GET https://graph.facebook.com/v17.0/oauth/access_token?
+        client_id={app-id}
+        &redirect_uri={redirect-uri}
+        &client_secret={app-secret}
+        &code={code-parameter}
+
+      https://developers.facebook.com/docs/facebook-login/guides/access-tokens/get-long-lived
+      Step 2. Get long-lived token by access token
+      
+      curl -i -X GET "https://graph.facebook.com/{graph-api-version}/oauth/access_token?  
+      grant_type=fb_exchange_token&          
+      client_id={app-id}&
+      client_secret={app-secret}&
+      fb_exchange_token={your-access-token}" 
+      */
+
+      // process.env.REACT_APP_FACEBOOK_CLIENT_ID
+      // process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE
+      
+      var reqData = {
+        auth_type: "FACEBOOK",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_FACEBOOK_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>
+  )
+}
+
+export default FbookRedirect
@@ -1,23 +1,64 @@
-import React, {useState, useEffect} from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";

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

    const queryParams = new URLSearchParams(location?.search);
    const codeResponse = queryParams.get("code");

    useEffect(()=>{
-        if(!codeResponse){
-            navigate('/login', {replace: true})
+      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
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      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
-        }
-        console.log(codeResponse)
+          }
+          navigate('/login', {state: {error: true}})
+        })
+        .catch((error) => {
+          navigate('/login', {state: {error: true}})
+          console.log(error);
+        });
    },[])
  return (
-    <div>Redirecting ... </div>
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
  )
 }

-export default Redirect
+export default Redirect
@@ -0,0 +1,37 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import localImgLoad from '../../lib/localImgLoad'
+
+const ForgetPwdResponse = ({title, message, type}) => {
+  const navigate = useNavigate()
+  return (
+    <>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <h1 className={`${type ? 'text-black' : 'text-red-500'}text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]`}>
+            {title}
+            </h1>
+        </div>
+        <div className="title-area w-[100px] h-[100px] mx-auto flex flex-col justify-center items-center relative text-center mb-7">
+            <img className='w-full h-full' src={`${type ? localImgLoad('images/icons/success.svg') : localImgLoad('images/icons/error.svg')}`} alt='alert-banner' />
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <p className={`${type ? 'text-sky-blue' : 'text-red-500'} font-semibold dark:text-white mb-3 leading-[27.3px] text-[18px]`}>
+            {message}
+            </p>
+        </div>
+        <div className="signin-area mb-3.5">
+            <div className="flex justify-center items-center gap-2">
+                <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]`}
+                >
+                    <span>Home</span>
+                </button>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default ForgetPwdResponse
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";

 export default function ForgotPassword() {
  const [checked, setValue] = useState(false);
@@ -11,7 +13,7 @@ export default function ForgotPassword() {
  // email
  const [email, setMail] = useState("");
  const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(false);
+  const [msgSuccess, setMsgSuccess] = useState(null);

  const navigate = useNavigate();
  const userApi = new usersService();
@@ -27,12 +29,26 @@ export default function ForgotPassword() {
  const resetHandler = async () => {
    if (email == "") {
      setMsgError("An email is required");
-    } else if (!checked) {
+      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 };
+      const reqData = { email, action:11013 };
      setResetLoading(true);
      try {
        const res = await userApi.StartResetPassword(reqData);
@@ -41,8 +57,11 @@ export default function ForgotPassword() {
          setMail("");
          setValue(false);
          setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
        }
      } catch (error) {
+        setMsgSuccess(false);
        setResetLoading(false);
        setMail("");
        setMsgError("An error occurred");
@@ -53,9 +72,6 @@ export default function ForgotPassword() {
        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
      }
    }
-    setTimeout(() => {
-      setMsgError(null);
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
  };

  return (
@@ -73,106 +89,102 @@ export default function ForgotPassword() {
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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 flex-col justify-center w-full h-full px-5">
-              <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"
-                  />
+            {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>
-                {/* hCaptha clone for the time being */}
-                <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">
-                            <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 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">
+                    <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">
+                              <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>
-                      <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
+                        <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>
-                        </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
                      </div>
-                      <div className="h-full relative inline-block w-16"></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">
+                      <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]`}
+                      >
+                        {resetLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <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>
-                {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>
-                )}
-                {msgSuccess && (
-                  <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    If we find your email, you will receive a link to reset your
-                    password. Please use or{" "}
-                    <Link
-                      to="/contact"
-                      className="text-[#4687ba] hover:text-[#009ef7]"
-                    >
-                      contact form
-                    </Link>{" "}
-                    if you did not get our message after few minutes.
-                  </div>
-                )}
-
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center items-center gap-2">
-                    <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]`}
-                    >
-                      {resetLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <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>
+              </>
+            :
+            <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>
@@ -1,41 +1,44 @@
 import React, { useEffect, useLayoutEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+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.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 // import { GoogleOAuthProvider } from '@react-oauth/google';
-import { googleLogout, useGoogleLogin } from "@react-oauth/google";
+import { useGoogleLogin } from "@react-oauth/google";

 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";

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

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

-  const [checked, setValue] = useState(false);
  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("");

-  const rememberMe = () => {
-    setValue(!checked);
+  // 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));
+    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=/;`;
@@ -70,6 +73,15 @@ export default function Login() {
    }

    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,
@@ -98,7 +110,13 @@ export default function Login() {
    userApi
      .logInUser(postData)
      .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        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);
@@ -108,7 +126,7 @@ export default function Login() {
        localStorage.setItem("uid", `${res.data.uid}`);
        localStorage.setItem("session_token", `${res.data.session}`);
        // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails({...res.data, loggedIn:true}));
+        dispatch(updateUserDetails({ ...res.data }));
        setTimeout(() => {
          navigate("/", { replace: true });
          setLoginLoading(false);
@@ -139,11 +157,12 @@ export default function Login() {

  // 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=/;";
+  // 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
+  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")){
@@ -151,25 +170,34 @@ export default function Login() {
    // }else{
    //   setLoginType('full')
    // }
-    function readCookie(cname) { // checks the cookie in order to set the login type before components mounts
+    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 carr = decoded_cookie.split(";");
+      for (let i = 0; i < carr.length; i++) {
        let c = carr[i];
-        while(c.charAt(0)==' '){
-            c=c.substring(1);
+        while (c.charAt(0) == " ") {
+          c = c.substring(1);
        }
-        if(c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
+        if (c.indexOf(name) == 0) {
+          return c.substring(name.length, c.length);
        }
      }
-      return 'full'
+      return "full";
    }
-    let loginValue = readCookie('loginType')
-    setLoginType(loginValue)
-  },[])
-  
+    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("");
@@ -189,7 +217,7 @@ export default function Login() {
              />
            </Link>
          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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="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]">
@@ -211,7 +239,9 @@ export default function Login() {
                <button
                  name="full"
                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='full' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                  }`}
                  onClick={handleLoginType}
                >
@@ -220,7 +250,9 @@ export default function Login() {
                <button
                  name="family"
                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType=='family' ? "bg-white text-[#000] border-t-[2px]" : "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                  }`}
                  onClick={handleLoginType}
                >
@@ -232,9 +264,9 @@ export default function Login() {

              {/* for login component */}
              {
-                loginType == 'full' ? (
+                loginType == "full" ? (
                  //user login component
-                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                    <div className="input-item mb-5">
                      <InputCom
                        labelClass="tracking-wider"
@@ -252,14 +284,15 @@ export default function Login() {
                    <div className="input-item mb-5">
                      <InputCom
                        labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
                        value={password}
                        inputHandler={handlePassword}
                        placeholder="● ● ● ● ● ●"
                        label="Password"
                        name="password"
-                        type="password"
-                        iconName="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
                        forgotPassword
                      />
                    </div>
@@ -303,18 +336,26 @@ export default function Login() {
                          brand="Google"
                          onClick={googleLogin}
                        />
-                        <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                        <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="#"
+                          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="#"
+                          // 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>
@@ -322,7 +363,7 @@ export default function Login() {
                ) : (
                  // END of user login compoenent
                  // family login compoenent
-                  <div className="p-2 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
                    <div className="input-item mb-5">
                      <InputCom
                        labelClass="tracking-wider"
@@ -333,7 +374,7 @@ export default function Login() {
                        label="Username"
                        name="email"
                        type="email"
-                        iconName="message"
+                        iconName="family-id"
                      />
                    </div>

@@ -346,9 +387,9 @@ export default function Login() {
                        placeholder="● ● ● ● ● ●"
                        label="Pin"
                        name="password"
-                        type="password"
-                        iconName="password"
-                        // forgotPassword
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
                      />
                    </div>
                    {loginError && (
@@ -391,10 +432,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>
+              }
            </div>
          </div>
        </div>
@@ -403,7 +446,7 @@ export default function Login() {
  );
 }

-const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
  // const doGoogle = async () => {
  //   alert("start google");
  // };
@@ -422,19 +465,30 @@ const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
  // const doFacebook = async () => {
  //   alert("start facebook");
  // };
-
  return (
    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <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>
+      {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>
  );
 };
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -69,7 +68,17 @@ export default function SignUp() {
        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)
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
+        }
+
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(() => {
+            setMsgError("");
+          }, 3000);
        }

        setSignUpLoading(true);
@@ -89,7 +98,9 @@ export default function SignUp() {
        if (res.status === 200) {
          const { data } = res;
          if (data && data.acc === "DULPICATE") {
-            setMsgError("This account has been already created");
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
            setSignUpLoading(false);
          }
          if (data && data.status === "1") {
@@ -131,7 +142,7 @@ export default function SignUp() {
              />
            </Link>
          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] 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 mb-0">
+          <div className="content-wrapper login relative 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 mb-0">
            <div>
              <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]">
@@ -199,25 +210,64 @@ export default function SignUp() {
                </div>
                <div className="input-item mb-5">
                  <InputCom
-                    fieldClass="px-6"
+                    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"
-                    }
+                    passIcon={showPassword ? "show-password" : "hide-password"}
                    value={formData.password}
                    inputHandler={handleInputChange}
                  />
                </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]">
+                  <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}
@@ -252,7 +302,7 @@ export default function SignUp() {
                      </Link>
                    </span>
                  </div>
-                </div>
+                </div> */}
                <div className="signin-area mb-1">
                  <div className="flex justify-center">
                    <button
@@ -298,7 +348,7 @@ const SelectOption = ({
        <select
          name={name}
          id={name}
-          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="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}
        >
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+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";
@@ -86,10 +86,14 @@ export default function VerifyLink() {
      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.internal_return >= 0 && 
+          data.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
          data.status_text === "Link Verified"
        ) {
          setPageLoader(false);
@@ -1,16 +1,20 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+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(true);
+  const [linkSuccess, setLinkSuccess] = useState(null);
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
@@ -23,11 +27,6 @@ const VerifyPassword = () => {
    setShowPassword(!showPassword);
  };

-  // little checker for the validity of the token
-  if (token?.length != 64) {
-    setLinkSuccess(false);
-  }
-
  // Password
  const handlePassword = (e) => {
    let { name, value } = e?.target;
@@ -36,46 +35,60 @@ const VerifyPassword = () => {
  };

  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 {
-      if (password !== "" && confirmPassword !== "") {
-        if (password === confirmPassword) {
          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) {
+          if (res.status == 200) {
            const { data } = res;
-
-            if (data?.status > 0 && data?.email) {
-              setTimeout(() => {
-                navigate("/login", { replace: true });
-                setLinkLoader(false);
-              }, 2000);
-            } else if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
+            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);
          }
-        } else {
-          setLinkLoader(false);
-          setMsgError("Passwords does not match");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
    } catch (error) {
      setLinkLoader(false);
      setLinkSuccess(false);
@@ -87,6 +100,31 @@ const VerifyPassword = () => {
    }
  };

+  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">
@@ -101,39 +139,59 @@ const VerifyPassword = () => {
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
            <div className="w-full">
-              <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 ? "Password Reset" : "Invalid verification link"}
-                </h1>
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Enter a new password to reset
-                  </span>
-                )}
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    We'll send an email to confirm reset
-                  </span>
-                )}
-              </div>
-              {/* If the verification was a success */}
-              {linkSuccess ? (
-                <SuccessfulComponent
-                  password={password}
-                  confirmPassword={confirmPassword}
-                  handlePassword={handlePassword}
-                  onSubmit={completeReset}
-                  msgErr={msgError}
-                  loader={linkLoader}
-                  showPassword={showPassword}
-                  onClick={togglePasswordVisibility}
-                  navigateHandler={() => navigate("/login")}
-                />
-              ) : (
-                <ErrorComponent onClick={() => navigate("/login")} />
-              )}
+              {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="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>
@@ -158,7 +216,7 @@ const SuccessfulComponent = ({
    {/* INPUT */}
    <div className="mb-5">
      <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
        value={password}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
@@ -171,7 +229,7 @@ const SuccessfulComponent = ({
    </div>
    <div className="mb-5">
      <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
        value={confirmPassword}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
@@ -209,25 +267,3 @@ const SuccessfulComponent = ({
    </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 used this link or the link
-        has broken/expired. Start with the reset process again. If it doesn't
-        work, try to create the account from the start.
-      </p>
-    </div>
-
-    <div className="signin-area flex justify-center mb-3.5">
-      <button
-        onClick={onClick}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);
@@ -1,6 +1,6 @@
 import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";

 export default function VerifyYou() {
  const navigate = useNavigate();
@@ -1,38 +1,77 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CommonHead from "../UserHeader/CommonHead";

 export default function BlogItem(props) {
+
+    const apiCall = new usersService()
+    const navigate = useNavigate()
+
+    const [blogdata, setBlogdata] = useState({loading: true, data:{}})
+
    const [selectTab, setValue] = useState("today");
    const filterHandler = (value) => {
        setValue(value);
    };
+    // eslint-disable-next-line no-restricted-globals
+    const queryParams = new URLSearchParams(location?.search);
+    const blog_id = queryParams.get("blog_id");
+    
+    useEffect(()=>{
+        if(!blog_id){
+            navigate('/',{replace:true})
+        }
+        apiCall.getSingleBlogData({blog_id}).then(res => {
+            setBlogdata({loading: false, data:res.data})
+        }).catch(error => {
+            setBlogdata({loading: false, data:{}})
+            console.log('ERROR', error)
+        })
+    },[blog_id])
    return (
        <Layout>
            <CommonHead
                commonHeadData={props.commonHeadData}
            />
            <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   text-dark-gray dark:text-white">
-                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Title of this Blog Items
-                </span>
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-
-                        </div>
+                <div className="mb-5">
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                        <span
+                            className={`${selectTab === "today" ? "block" : "hidden"}`}
+                        >
+                        {blogdata.data?.blogdata?.[0]?.post_title}
+                        </span>
+                    </h1>
+                </div>
+                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
+                    {blogdata.loading ? 
+                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
+                    :
+                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
+                        <div className="w-full">
+                            {/* heading */}
+                            <div className="sm:flex justify-between items-center mb-6">
+                                {/* <div className="mb-5">
+                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                                        <span
+                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
+                                        >
+                                        {blogdata.data?.blogdata?.[0]?.post_title}
+                                        </span>
+                                    </h1>
+                                </div> */}
+                                {/* <div className="slider-btns flex space-x-4">
+                                </div> */}
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            </div>
                    </div>
-                   <div>
-                       Blog Items Details
-                   </div>
+                    :
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
+                    }  
                </div>
            </div>
        </Layout>
@@ -21,7 +21,8 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
            toast.warn("Remove to Favorite List");
        }
    };
-
+//debugger;
+    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
    return (
        <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
            <div className="content">
@@ -32,7 +33,7 @@ export default function FamilyActiveJobsCard({ datas, hidden = false }) {
                        className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
                        style={{
                            background: `url(${localImgLoad(
-                                `images/taskbanners/${datas.banner}`
+                                `images/taskbanners/${bannerName}`
                            )}) center / contain no-repeat`,
                        }}
                    >
@@ -16,22 +16,23 @@ export default function HomeBannerOffersCard(props) {

  return (
    <Link
-      to={link_result}
-      className="item w-full block group banner-630-340 bg-cover bg-center"
+      // to={link_result}
+      to={link_result == '/blog-page' ? `${link_result}?blog_id=${props.itemData.blog_id}` : `${link_result}`}
+      className="item p-2 w-full flex items-center min-h-[340px] bg-alice-blue bg-cover bg-center"
      style={{
        backgroundImage: `url('${imageUrl}')`,
      }}
    >
-      <div className="flex flex-col justify-between h-full">
+      <div className="w-[80%] h-full mx-auto flex flex-col justify-between">
        <div className="content flex justify-between items-center">
-          <div className="siderCardHeader">
-            <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
+          <div className="mb-2">
+            <h1 className="text-2xl lg:text-4xl font-bold text-dark-gray dark:text-white tracking-wide">
              <span className="heroSilderTitle">{props.itemData.title}</span>
            </h1>
          </div>
        </div>
        <div className="flex flex-col justify-around items-center flex-1">
-          <div className="siderCardDescription">
+          <div className="siderCardDescription mb-2">
            {props.itemData.description}
          </div>
          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
@@ -19,7 +19,7 @@ export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
            style={{
              background: `url(${localImgLoad(
-                `images/taskbanners/${datas.banner}`
+                `images/taskbanners/${datas?.banner || "default.jpg"}`
              )}) center / contain no-repeat`,
            }}
          >
@@ -50,22 +50,23 @@ export default function ProductCardStyleTwo({
        </div>
        <div className="details-area">
          {/* title */}
-          <a href={datas.guid} target="_blank" className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              {datas.post_title || "dummy title..."}
            </h1>
-          </a>
+          </Link>
          <div className="flex justify-between">
            <div className="flex items-center space-x-2"></div>
            <div className="my-1">
-              <a
-                href={datas.guid}
-                target="_blank"
+              <Link
+                // href={datas.guid}
+                // target="_blank"
+                to={`/blog-page?blog_id=${datas.ID}`}
                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                rel="noreferrer"
              >
                View
-              </a>
+              </Link>
            </div>
          </div>
        </div>
@@ -1,25 +1,27 @@
 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 localImgLoad from "../../lib/localImgLoad";
 import usersService from "../../services/UsersService";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";
-import {
-  FamilyWaitlist,
-  FamilyAccount,
-  FamilyProfile,
-  FamilyTasks,
-  ProfileInfo,
-  FamilyPending,
-} from "./Tabs";
-import localImgLoad from "../../lib/localImgLoad";
+
+// Lazy Imports for components
+const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
+const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
+const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
+const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
+const ProfileInfo = lazy(() => import("./Tabs/ProfileInfo"));
+const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));

 export default function FamilyManageTabs({
  className,
@@ -35,14 +37,15 @@ export default function FamilyManageTabs({
  });
  const [errMsg, setErrMsg] = useState("");
  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+  const [profileImg, setProfileImg] = useState(profile);
+  const profileImgInput = useRef(null);
+  const [isPending, startTransition] = useTransition();
+  const apiCall = useMemo(() => new usersService(), []);

  const familyPopUpHandler = () => {
    setFamilyTaskPopout((prev) => !prev);
  };

-  const [profileImg, setProfileImg] = useState(profile);
-  const profileImgInput = useRef(null);
-
  const browseProfileImg = () => {
    profileImgInput.current.click();
  };
@@ -57,16 +60,15 @@ export default function FamilyManageTabs({
    }
  };

-  const apiCall = useMemo(() => new usersService(), []);
-
  const manageFamily = useCallback(async () => {
    try {
-      setDetails({
+      setDetails((prevDetails) => ({
+        ...prevDetails,
        familyDetails: { loading: true },
        familyTasks: { loading: true },
        familyWaitList: { loading: true },
        familyPending: { loading: true },
-      });
+      }));

      const { family_uid } = accountDetails;
      const reqData = { family_uid };
@@ -89,22 +91,26 @@ export default function FamilyManageTabs({
        tasksData?.internal_return < 0 ||
        familyWaitData?.internal_return < 0 ||
        familyPendingData?.internal_return < 0
-      )
+      ) {
        return;
+      }

-      setDetails({
-        familyDetails: { loading: false, data: familyData },
-        familyTasks: { loading: false, data: tasksData },
-        familyWaitList: { loading: false, data: familyWaitData },
-        familyPending: { loading: false, data: familyPendingData },
+      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({
+      setDetails((prevDetails) => ({
+        ...prevDetails,
        familyDetails: { loading: false },
        familyTasks: { loading: false },
        familyWaitList: { loading: false },
        familyPending: { loading: false },
-      });
+      }));
      setErrMsg("An error occurred");
      throw new Error(error);
    }
@@ -119,13 +125,15 @@ export default function FamilyManageTabs({
  const tabs = [
    { id: 1, name: "Tasks" },
    { id: 2, name: "Waiting" },
-    { id: 3, name: "Pending" }
+    { id: 3, name: "Pending" },
  ];

  const [tab, setTab] = useState(tabs[0].name);

  const tabHandler = (value) => {
-    setTab(value);
+    startTransition(() => {
+      setTab(value);
+    });
  };

  const tabComponents = {
@@ -174,24 +182,30 @@ export default function FamilyManageTabs({
  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

  useEffect(() => {
-    manageFamily();
+    let __manageFamily = true;
+    if (__manageFamily) {
+      manageFamily();
+    }
+    return () => {
+      __manageFamily = false;
+    };
  }, [tab, manageFamily]);

  return (
    <div
-      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
        className || ""
      }`}
    >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full sm:rounded-lg overflow-x-auto">
        <Suspense
          fallback={
-            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
              <LoadingSpinner size="16" color="sky-blue" />
            </div>
          }
        >
-          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
+          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[575px]">
            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
              <ProfileInfo
                profileImg={profileImg}
@@ -200,25 +214,35 @@ export default function FamilyManageTabs({
                browseProfileImg={browseProfileImg}
                accountDetails={accountDetails}
              />
-              <div className="mt-4 flex justify-center items-center gap-2">
+              <div className="mt-4 flex justify-start items-center gap-2">
                <button
-                  onClick={() => tabHandler('Account')} 
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
-                  <img src={localImgLoad('images/icons/account.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
-                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                  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"
+                    alt="Settings-Icon"
+                  />
+                  <p className="text-lg text-sky-blue">Acc.</p>
                </button>
                <button
-                  onClick={() => tabHandler('Profile')} 
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
-                  <img src={localImgLoad('images/icons/profile.svg')} className="w-[70px] h-[70px]" alt='Settings-Icon' />
-                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                  onClick={() => tabHandler("Profile")}
+                  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/profile.svg")}
+                    className="max-w-[30px] w-full"
+                    alt="Settings-Icon"
+                  />
+                  <p className="text-lg text-sky-blue">Profile</p>
                </button>
              </div>
            </div>
-            <div className="col-span-3 justify-self-end h-full w-full">
+            <div className="col-span-3 h-full w-full">
              <div className="flex flex-col w-full">
-                <div className="w-full pr-8 flex items-center gap-1">
-                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
+                  <ul className="flex gap-2 items-center w-full">
                    {tabs.map(({ name, id }) => (
                      <li
                        onClick={() => tabHandler(name)}
@@ -241,9 +265,14 @@ export default function FamilyManageTabs({
                    Add task
                  </button>
                </div>
-                <div className="flex-[0.9] lg:min-h-[450px] h-full">
-                  <div className="h-full p-4 border border-[#dbd9d9] relative overflow-y-auto">
-                    {selectedTabComponent}
+                
+                <div className="flex-[0.9] h-full">
+                  <div className="h-full relative overflow-y-auto">
+                    <Suspense
+                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                    >
+                      {selectedTabComponent}
+                    </Suspense>
                  </div>
                </div>
              </div>
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useTransition } from "react";
 import ModalCom from "../../Helpers/ModalCom";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
 import usersService from "../../../services/UsersService";
@@ -6,7 +6,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { NewTasks } from "./forms";

-function AssignTaskPopout({ action, situation, familyDetails }) {
+const  AssignTaskPopout = React.memo(({ action, details, situation, familyDetails }) => {
  const apiCall = new usersService();

  let [requestStatus, setRequestStatus] = useState({
@@ -15,9 +15,9 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
    message: "",
  }); // HOLDS RESPONSE FOR SENDING API REQUEST

-  let [familyTask, setFamilyTask] = useState({ loading: true, data: [] });
+  let [familyTask, setFamilyTask] = useState({ loading: false, data: [] });

-  let [taskType, setTaskType] = useState("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

@@ -34,14 +34,14 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
  // New Task
  const [formState, setFormState] = useState({
    // Initialize form state with desired fields
-    banner: "" || "default.jpg",
-    country: "" || "",
-    price: "" || "",
-    title: "" || "",
-    description: "" || "",
-    job_detail: "" || "",
-    timeline_days: "" || "",
-    category: [] || "",
+    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 = () => {
@@ -63,7 +63,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
        // API PAYLOADS
        job_id: activeTask.data?.job_id,
        job_uid: activeTask.data?.job_uid,
-        family_uid: familyDetails.uid,
+        family_uid: familyDetails?.uid || details?.family_uid,
        job_description: activeTask.data?.description,
        assign_mode: 110011,
      };
@@ -81,30 +81,29 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
        title,
      } = formState;

-      const requiredFields = [
+      const requiredFields = {
        banner,
-        category,
+        // category,
        country,
        description,
        job_detail,
        price,
        timeline_days,
        title,
-      ];
+      };

-      if (requiredFields.some((field) => !field)) {
-        const emptyField = requiredFields.find((field) => !field);
-        setRequestStatus({
-          loading: false,
-          status: false,
-          message: `${emptyField} Empty`,
-        });
-
-        setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
-
-        return;
+      for (let field in requiredFields) {
+        if (requiredFields[field] == "") {
+          // let currencyErrMsg = field == "country" && "currency"
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: `${field} is empty`,
+          });
+          return setTimeout(() => {
+            setRequestStatus({ loading: false, status: false, message: "" });
+          }, 3000);
+        }
      }

      reqData = {
@@ -117,7 +116,7 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
        timeline_days,
        title,
        assign_mode: 110055,
-        family_uid: familyDetails.uid,
+        family_uid: details?.family_uid || familyDetails?.uid,
      };
    }

@@ -157,37 +156,48 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
  };

  useEffect(() => {
+    let checkFamilyTask = true;
    const reqData = {
      limit: 30,
      offset: 0,
      job_type: "FAMILY",
      action: 13005,
    };
+
    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],
-          }));
+        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;
+    };
  }, []);

-  console.log("Trying to see form data >>", formState);
  return (
    <>
-      <ModalCom action={action} situation={situation} className="assign-task-popup">
+      <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}
+              Assign task to {familyDetails?.firstname || details.firstName}
            </h1>
            <button
              type="button"
@@ -362,55 +372,62 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
              </div>

              {/* BTN */}
-              <div className="p-2 border-t-2 flex justify-end items-center gap-3">
+              <div className="py-2 px-4 border-t-2 flex justify-between items-center">
                {/* error or success display */}
-                {requestStatus.message != "" &&
-                  (!requestStatus.status ? (
-                    <div
-                      className={`relative p-2 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="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>
-                    )
-                  ))}
+                    ) : (
+                      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 */}
-                <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}`}
-                    </button>
-                  )}
+                <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>
+                    )}
+                  </div>
                </div>
              </div>
            </>
@@ -419,6 +436,6 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
      </ModalCom>
    </>
  );
-}
+})

-export default AssignTaskPopout;
+export default AssignTaskPopout;
@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
-import debounce from "../../../../hooks/debounce";

-const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg");
 export default function NewTasks({ formState, setFormState }) {
  let [currency, setCurrency] = useState({
    loading: true,
@@ -11,6 +9,9 @@ export default function NewTasks({ formState, setFormState }) {
    data: null,
  });

+  const selectImage = require(`../../../../assets/images/taskbanners/${
+    formState.banner || "default.jpg"
+  }`);
  const ApiCall = new usersService();

  // FUNCTION TO GET Currency
@@ -47,7 +48,7 @@ export default function NewTasks({ formState, setFormState }) {
  }, []);

  return (
-    <form className="w-full flex justify-between items-center">
+    <form className="w-full flex justify-between items-start">
      <div className="flex flex-col gap-3 max-w-[77%]">
        {/* inputs starts here */}
        <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
@@ -207,7 +208,7 @@ export default function NewTasks({ formState, setFormState }) {
      <div className="max-w-[20%] w-full">
        <div className="h-32 w-full">
          <img
-            src={DEFAULT_IMAGE}
+            src={selectImage}
            alt="task_banner_img"
            className="w-full h-full object-contain"
          />
@@ -1,17 +1,15 @@
 import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import { useNavigate, useLocation, Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";

 import familyImage from '../../assets/images/no-family-side.png'
+import localImgLoad from "../../lib/localImgLoad";

 export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
-  const filterCategories = ["All Categories", "Explore", "Featured"];
-  const [selectedCategory, setCategory] = useState(filterCategories[0]);
  const navigate = useNavigate();
-  // let location = useLocation();

  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
@@ -25,7 +23,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle

  return (
    <div
-      className={`update-table w-full h-full p-8 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] ${
        className || ""
      }`}
    >
@@ -57,6 +55,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                        last_login,
                        task_count,
                        family_uid,
+                        banner
                      } = props;
                      let addedDate = added?.split(" ")[0];
                      let LoginDate = last_login?.split(" ")[0];
@@ -67,9 +66,10 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                        >
                          <td className=" py-4">
                            <div className="flex space-x-2 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]">
+                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
                                <img
-                                  src={dataImage1}
+                                  // src={dataImage1}
+                                  src={localImgLoad(`images/icons/${banner}`)}
                                  alt="data"
                                  className="w-full h-full"
                                />
@@ -1,56 +1,56 @@
-import { forwardRef } from 'react'
-import QRCode from 'react-qr-code';
+import { forwardRef } from "react";
+import QRCode from "react-qr-code";

 const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
-    return (
-      <div
-        className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
-        ref={myRef}
-      >
-        <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
-          <div className="flex items-center justify-around h-[380px]">
-            <div className="flex flex-col">
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Username:{" "}
-                <span className="ml-2 normal-case">
-                  {familyData?.username ? familyData?.username : "please wait..."}
-                </span>
-              </h2>
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Pin:{" "}
-                <span className="ml-2 normal-case">
-                  {familyData?.pin ? familyData?.pin : "please wait..."}
-                </span>
-              </h2>
-            </div>
-  
-            <span className="text-5xl text-gray-400 opacity-20 font-bold">
-              or
-            </span>
-  
-            <div className="max-w-[200px]">
-              <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>
-              <QRCode
-                size={256}
-                style={{ height: "auto", maxWidth: "100%", width: "100%" }}
-                value={`https://www.google.com`}
-                viewBox={`0 0 256 256`}
-              />
-            </div>
+  return (
+    <div
+      className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
+      ref={myRef}
+    >
+      <div className="update-table w-full lg:min-h-[450px] h-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow ">
+        <div className="flex items-center justify-around h-[380px]">
+          <div className="flex flex-col">
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Username:{" "}
+              <span className="ml-2 normal-case">
+                {familyData?.username ? familyData?.username : "please wait..."}
+              </span>
+            </h2>
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              Pin:{" "}
+              <span className="ml-2 normal-case">
+                {familyData?.pin ? familyData?.pin : "please wait..."}
+              </span>
+            </h2>
          </div>
-          <div className="h-[50px] w-full flex justify-center items-center">
-            <button
-              className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
-              onClick={handlePrint}
-            >
-              Print
-            </button>
+
+          <span className="text-5xl text-gray-400 opacity-20 font-bold">
+            or
+          </span>
+
+          <div className="max-w-[200px]">
+            <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>
+            <QRCode
+              size={256}
+              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+              value={`https://www.google.com`}
+              viewBox={`0 0 256 256`}
+            />
          </div>
        </div>
+        <div className="h-[50px] w-full flex justify-center items-center">
+          <button
+            className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+            onClick={handlePrint}
+          >
+            Print
+          </button>
+        </div>
      </div>
-    );
-  });
+    </div>
+  );
+});

-export default FamilyAccount
+export default FamilyAccount;
@@ -1,9 +1,8 @@
-import { useState } from "react";
-import { PaginatedList, handlePagingFunc } from "../../Pagination";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
-import dataImage2 from "../../../assets/images/data-table-user-2.png";
-import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";
+import { useMemo, useState } from "react";
 import localImgLoad from "../../../lib/localImgLoad";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import PendingJobsPopout from "../../jobPopout/PendingJobsPopout";

 export default function FamilyPending({
  familyData,
@@ -13,8 +12,12 @@ export default function FamilyPending({
 }) {
  let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW

-  let filteredFamilyData = familyData?.result_list?.filter(
-    (data) => data?.family_uid === accountDetails?.family_uid
+  let filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [accountDetails?.family_uid, familyData?.result_list]
  );

  const [currentPage, setCurrentPage] = useState(0);
@@ -33,7 +36,7 @@ export default function FamilyPending({

  return (
    <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-3 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] ${
        className || ""
      }`}
    >
@@ -51,7 +54,7 @@ export default function FamilyPending({
                        value?.currency_code,
                        value?.currency
                      );
-                      let image = value.banner ? value.banner : 'default.jpg'
+                      let image = value.banner ? value.banner : "default.jpg";
                      return (
                        <tr
                          key={index}
@@ -61,7 +64,9 @@ 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={localImgLoad(
+                                    `images/taskbanners/${image}`
+                                  )}
                                  alt="data"
                                  className="w-full h-full rounded-full"
                                />
@@ -119,8 +124,10 @@ export default function FamilyPending({
                      );
                    })
                  ) : (
-                    <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">No Pending Task!</td>
+                    <tr>
+                      <td className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap text-center py-4 px-2">
+                        No Pending Task!
+                      </td>
                    </tr>
                  )}
                </>
@@ -1,3 +1,11 @@
-export default function FamilyProfile() {
-    return <>Profile</>;
-}
+export default function FamilyProfile({ className }) {
+  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 || ""
+      }`}
+    >
+      <h1>Profile</h1>
+    </div>
+  );
+}
@@ -1,20 +1,30 @@
-import React, { useState } from "react";
-import dataImage2 from "../../../assets/images/data-table-user-2.png";
-import { useNavigate, useLocation } from "react-router-dom";
+import React, { useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import localImgLoad from "../../../lib/localImgLoad";
+import Icons from "../../Helpers/Icons";
+import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import Icons from "../../Helpers/Icons";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
-import ModalCom from "../../Helpers/ModalCom";
-import Detail from "../../jobPopout/popoutcomponent/Detail";
-import localImgLoad from "../../../lib/localImgLoad";

-
-export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
+export default function FamilyTasks({
+  familyData,
+  className,
+  loader,
+  accountDetails,
+}) {
  let navigate = useNavigate();
  let { pathname } = useLocation();

+  // ...
+  const filteredFamilyData = useMemo(
+    () =>
+      familyData?.result_list?.filter(
+        (data) => data?.family_uid === accountDetails?.family_uid
+      ),
+    [familyData, accountDetails]
+  );
+
  const [currentPage, setCurrentPage] = useState(0);
  const indexOfFirstItem = Number(currentPage);
  const indexOfLastItem =
@@ -26,9 +36,10 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta

  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);

+
  return (
    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] overflow-hidden rounded-2xl section-shadow p-3 ${
        className || ""
      }`}
    >
@@ -45,8 +56,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                  {
                    <>
                      {familyData &&
-                        familyData?.result_list &&
-                        familyData.result_list.length > 0 &&
+                      familyData?.result_list &&
+                      familyData.result_list.length > 0 ? (
                        currentTask.map((value, index) => {
                          // find due date
                          const dueDate = value?.delivery_date.split(" ")[0];
@@ -56,7 +67,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                            value?.currency_code,
                            value?.currency
                          );
-                          let image = value.banner ? value.banner : 'default.jpg'
+                          let image = value.banner
+                            ? value.banner
+                            : "default.jpg";
                          return (
                            <tr
                              key={index}
@@ -66,7 +79,9 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                                <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={localImgLoad(
+                                        `images/taskbanners/${image}`
+                                      )}
                                      alt="data"
                                      className="w-full h-full rounded-full"
                                    />
@@ -109,8 +124,8 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                                      state: {
                                        ...value,
                                        pathname,
-                                        accountDetails
-                                      }
+                                        accountDetails,
+                                      },
                                    });
                                  }}
                                  className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -120,7 +135,14 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
                              </td>
                            </tr>
                          );
-                        })}
+                        })
+                      ) : (
+                        <tr>
+                          <td colSpan="2" className="text-center py-4 font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                            No Family Task
+                          </td>
+                        </tr>
+                      )}
                    </>
                  }
                </tbody>
@@ -1,122 +1,152 @@
-import { useState } from "react";
-import { handlePagingFunc, PaginatedList } from "../../Pagination";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { memo, useMemo, useState } from "react";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";

-const FamilyWaitlist = ({ familyData, className, accountDetails, loader }) => {
-  const [popUp, setPopUp] = useState({ show: false, data: {} });
+const FamilyWaitlist = memo(
+  ({ familyData, className, accountDetails, loader }) => {
+    const [popUp, setPopUp] = useState({ show: false, data: {} });
+    const [continueTaskPopup, setContinueTaskPopup] = useState({
+      show: false,
+      data: {},
+    });
+    const filteredFamilyData = useMemo(
+      () =>
+        familyData?.result_list?.filter(
+          (data) => data?.family_uid === accountDetails?.family_uid
+        ),
+      [familyData, accountDetails]
+    );

-  let filteredFamilyData = familyData?.result_list?.filter(
-    (data) => data?.family_uid === accountDetails?.family_uid
-  );
+    const [currentPage, setCurrentPage] = useState(0);
+    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const indexOfFirstItem = currentPage;
+    const indexOfLastItem = currentPage + itemsPerPage;
+    const currentTask = useMemo(
+      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
+    );

-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const indexOfFirstItem = currentPage;
-  const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = filteredFamilyData?.slice(
-    indexOfFirstItem,
-    indexOfLastItem
-  );
+    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);

-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+    const openPopUp = (value) => {
+      setPopUp({ show: true, data: { ...value } });
+    };

-  return (
-    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
-        </div>
-      ) : (
-        <>
-          {filteredFamilyData && (
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  {currentTask.map((value) => {
-                    const addedDate = value?.added.split(" ")[0];
-                    const selectedImage = require(`../../../assets/images/family/${
-                      value?.banner || "default.jpg"
-                    }`);
-                    return (
-                      <tr
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                        key={value.uid}
-                      >
-                        <td className="py-4">
-                          <div className="w-full flex justify-between items-center">
-                            <div className="account-name flex space-x-4 items-center">
-                              <div className="icon w-14 h-14 flex justify-center items-center">
-                                <img
-                                  src={selectedImage}
-                                  alt="task_img"
-                                  className="w-full object-cover"
-                                />
+    const closePopUp = () => {
+      setPopUp({ show: false, data: {} });
+    };
+
+    const openContinueTaskPopup = (value) => {
+      setContinueTaskPopup({ show: true, data: { ...value } });
+    };
+
+    const closeContinueTaskPopup = () => {
+      setContinueTaskPopup({ show: false, data: {} });
+    };
+
+    return (
+      <div
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[538px] p-3 overflow-hidden rounded-2xl section-shadow ${
+          className || ""
+        }`}
+      >
+        {loader ? (
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+            <LoadingSpinner size={16} color="sky-blue" />
+          </div>
+        ) : (
+          <>
+            {filteredFamilyData && (
+              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                  <tbody>
+                    {currentTask.map((value) => {
+                      const addedDate = value?.added.split(" ")[0];
+                      const selectedImage = require(`../../../assets/images/family/${
+                        value?.banner || "default.jpg"
+                      }`);
+                      return (
+                        <tr
+                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          key={value.uid}
+                        >
+                          <td className="py-4">
+                            <div className="w-full flex justify-between items-center">
+                              <div className="account-name flex space-x-4 items-center">
+                                <div className="icon w-14 h-14 flex justify-center items-center">
+                                  <img
+                                    src={selectedImage}
+                                    alt="task_img"
+                                    className="w-full object-cover"
+                                  />
+                                </div>
+                                <div className="">
+                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                    {value.title}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    {value.description}
+                                  </p>
+                                </div>
                              </div>
-                              <div className="">
-                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                                  {value.title}
+                              <div className="px-2 flex flex-col items-center justify-center">
+                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                  {addedDate}
                                </p>
-                                <p className="text-sm text-thin-light-gray font-medium">
-                                  {value.description}
+                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                  {value.status_text}
                                </p>
                              </div>
                            </div>
-                            <div className="px-2 flex flex-col items-center justify-center">
-                              <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                {addedDate}
-                              </p>
-                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            onClick={() =>
-                              setPopUp({
-                                show: true,
-                                data: { ...value, selectedImage },
-                              })
-                            }
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            View
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div>
-          )}
-        </>
-      )}
-      {popUp.show && (
-        <SuggestTask
-          details={popUp.data}
-          onClose={() => {
-            setPopUp({ show: false, data: {} });
-          }}
-          situation={popUp.show}
-        />
-      )}
-    </div>
-  );
-};
+                          </td>
+                          <td className="text-right py-4 px-2">
+                            <button
+                              onClick={() => openPopUp(value)}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <PaginatedList
+                  onClick={handlePagination}
+                  prev={currentPage === 0}
+                  next={
+                    currentPage + itemsPerPage >= filteredFamilyData?.length
+                  }
+                  data={filteredFamilyData}
+                  start={indexOfFirstItem}
+                  stop={indexOfLastItem}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {popUp.show && (
+          <SuggestTask
+            details={popUp.data}
+            onClose={closePopUp}
+            continuePopupData={openContinueTaskPopup}
+            situation={popUp.show}
+          />
+        )}
+
+        {continueTaskPopup.show && (
+          <AssignTaskPopout
+            details={continueTaskPopup.data}
+            action={closeContinueTaskPopup}
+            situation={continueTaskPopup.show}
+          />
+        )}
+      </div>
+    );
+  }
+);

 export default FamilyWaitlist;
@@ -1,4 +1,6 @@
 import React from "react";
+import localImgLoad from "../../../lib/localImgLoad";
+

 export default function ProfileInfo({
  profileImg,
@@ -8,13 +10,13 @@ export default function ProfileInfo({
  accountDetails,
 }) {
  return (
-    <div className="flex flex-col items-center gap-6">
+    <div className="flex flex-col items-center gap-4">
      <div className="flex justify-center">
        <div className="w-full relative">
          <img
-            src={profileImg}
+            src={localImgLoad(`images/icons/${accountDetails.banner}`)}
            alt=""
-            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+            className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
          />
          <input
            ref={profileImgInput}
@@ -1,9 +1,16 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 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 LoadingSpinner from "../Spinners/LoadingSpinner";

 export default function FamilyAcc() {
  const [selectTab, setValue] = useState("today");
@@ -20,60 +27,50 @@ export default function FamilyAcc() {

  const apiCall = useMemo(() => new SiteService(), []);

-  // This is to make sure it's called once and used everywhere
-  let memberId = localStorage.getItem("member_id");
-  let uid = localStorage.getItem("uid");
-  let sessionId = localStorage.getItem("session_token");
-
  const popUpHandler = () => {
    setPopUp((prev) => !prev);
  };

-  //   tab handler
  const filterHandler = (value) => {
    setValue(value);
  };

-  //   For the age drop down
-  let startAge = 5;
-  let endAge = 16;
-  // creates an array of age values ranging from 16 to 70
-  const ageRange = Array.from(
-    { length: endAge - startAge + 1 },
-    (_, index) => startAge + index
-  );
-  // age handler
+  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));
  };
-  //   Input handler
+
  const handleInputChange = (event) => {
    const { name, value } = event?.target;
-    setFormData({ ...formData, [name]: value });
+    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

-  //   Add member
  const addMember = async () => {
    const { first_name, last_name } = formData;
    setLoader(true);
    try {
      if (first_name !== "" && last_name !== "") {
-        let reqData = {
-          member_id: memberId,
-          uid: uid,
-          session_id: sessionId,
+        const reqData = {
          firstname: first_name,
          lastname: last_name,
          age: selectedAge,
        };

-        let res = await apiCall.addFamily(reqData);
+        const res = await apiCall.addFamily(reqData);
        const { data } = res;

-        if (data?.internal_return > 0 && data?.status == "OK") {
+        if (data?.internal_return > 0 && data?.status === "OK") {
          setLoader(false);
          setListReload((prev) => !prev);
-          popUpHandler()
+          popUpHandler();
        } else {
          setLoader(false);
          setMsgErr("Sorry, something went wrong");
@@ -94,38 +91,42 @@ export default function FamilyAcc() {
        first_name: "",
        last_name: "",
      });
-      setSelectedAge("")
+      setSelectedAge("");
    }
  };

-  // member listing
  const memberList = useCallback(async () => {
    setLoader(true);
    try {
-      let reqData = {
-        member_id: memberId,
-        uid: uid,
-        session_id: sessionId,
+      const reqData = {
        limit: 20,
        offset: 0,
        action: 22010,
      };

-      let res = await apiCall.familyListings(reqData);
+      const res = await apiCall.familyListings(reqData);
      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status == "OK") {
-        let { result_list } = data;
+      if (data?.internal_return >= 0 && data?.status === "OK") {
+        const { result_list } = data;
        setFamilyList(result_list);
        setLoader(false);
-      } else return;
+      } else {
+        return;
+      }
    } catch (error) {
      setLoader(false);
      throw new Error(error);
    }
-  }, [apiCall, memberId, sessionId, uid]);
+  }, [apiCall]);

  useEffect(() => {
-    memberList();
+    let checkMemberList = true;
+    if (checkMemberList) {
+      memberList();
+    }
+    return () => {
+      checkMemberList = false;
+    };
  }, [listReload, memberList]);

  return (
@@ -158,7 +159,13 @@ export default function FamilyAcc() {
              ></div>
            </div>
          </div>
-          <FamilyTable familyList={familyList} loader={loader} popUpHandler={popUpHandler} />
+          <Suspense fallback={<LoadingSpinner color="sky-blue" size="16" />}>
+            <FamilyTable
+              familyList={familyList}
+              loader={loader}
+              popUpHandler={popUpHandler}
+            />
+          </Suspense>
        </div>
      </div>
      {popUp && (
@@ -7,7 +7,7 @@ import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";

 const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
-const SuggestTask = ({ details, onClose, situation }) => {
+const SuggestTask = ({ details, onClose, situation, continuePopupData }) => {
  const { pathname, state } = useLocation();
  const [submitTask, setSubmitTask] = useState({
    loading: false,
@@ -16,7 +16,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
  });
  const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");

-  const switchNextStep = (value) => {
+  const switchNextStep = ({ target: value }) => {
    setSuggestedNextStep(value);
  };

@@ -29,8 +29,9 @@ const SuggestTask = ({ details, onClose, situation }) => {

  const apiCall = new usersService();

-  const handleSubmit = async (values) => {
+  const handleSuggestedTask = async (values) => {
    if (!values.title && !values.description) return;
+
    try {
      setSubmitTask({ loading: true });
      const reqData = { ...values };
@@ -49,7 +50,15 @@ const SuggestTask = ({ details, onClose, situation }) => {
    }
  };

-  // console.log("state >-->>", state);
+  const handleParentSuggestion = (values) => {
+    if (suggestedNextStep == "Send Task") {
+      let firstName = state?.firstname;
+      let family_uid = state?.family_uid;
+      continuePopupData({ ...details, firstName, family_uid });
+    }
+    onClose();
+  };
+
  return (
    <ModalCom action={onClose} situation={situation}>
      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
@@ -87,7 +96,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
        </div>
        <Formik
          initialValues={initialValues}
-          onSubmit={pathname !== "/manage-family" && handleSubmit}
+          onSubmit={
+            pathname !== "/manage-family"
+              ? handleSuggestedTask
+              : handleParentSuggestion
+          }
        >
          {(props) => {
            return (
@@ -164,7 +177,7 @@ const SuggestTask = ({ details, onClose, situation }) => {
                    </div>

                    {/* Radio buttons for family */}
-                    {pathname === "/manage-family" && (
+                    {pathname === "/manage-family" ? (
                      <div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
                        <div id="my-radio-group" className="sr-only">
                          Parent suggested next step
@@ -182,18 +195,22 @@ const SuggestTask = ({ details, onClose, situation }) => {
                            <label
                              role="group"
                              key={idx}
-                              htmlFor="parent-suggested"
+                              htmlFor={`parent-suggested-${idx}`}
+                              className={`transition duration-150 ease-in-out parent-suggest group cursor-pointer`}
+                              onClick={() => setSuggestedNextStep(title)}
                            >
                              <input
                                type="radio"
                                name="parent-suggested"
                                value={title}
-                                checked={title == suggestedNextStep}
+                                checked={suggestedNextStep === title}
                                onChange={switchNextStep}
-                                className={`transition duration-150 ease-in-out parent-suggest`}
+                                className={`transition duration-150 ease-in-out parent-suggest pointer-events-none`}
                              />
                              <span
-                                onClick={switchNextStep}
+                                onClick={() => setSuggestedNextStep(title)}
+                                id={`parent-suggested-${idx}`}
+                                name="parent-suggested"
                                className={`ml-1 ${
                                  title == "Not Now"
                                    ? "text-red-500"
@@ -208,9 +225,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
                          ))}
                        </div>
                      </div>
-                    )}
+                    ) : null}
                  </div>
                </div>
+
                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                  <div className="flex items-center space-x-4 mr-9">
                    <button
@@ -220,31 +238,33 @@ const SuggestTask = ({ details, onClose, situation }) => {
                    >
                      <span className="text-gradient"> Cancel</span>
                    </button>
-                    {pathname !== "/manage-family" ? (
-                      <button
-                        type="submit"
-                        disabled={props.isSubmitting}
-                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
-                      >
-                        {submitTask.loading
-                          ? "Submitting Task"
-                          : submitTask.state == "success"
-                          ? "Task Submitted"
-                          : submitTask.state == "bad"
-                          ? "An Error Occurred"
-                          : "Send to Parents"}
-                      </button>
-                    ) : (
-                      <button className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full flex items-center transition duration-150 ease-in-out">
-                        {suggestedNextStep == "Send Task" ? (
-                          <>
-                            Continue <Icons name="chevron-right" />
-                          </>
-                        ) : (
-                          "Complete"
-                        )}
-                      </button>
-                    )}
+                    <button
+                      type="submit"
+                      disabled={props.isSubmitting}
+                      className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out flex items-center"
+                    >
+                      {pathname !== "/manage-family" ? (
+                        <>
+                          {submitTask.loading
+                            ? "Submitting Task"
+                            : submitTask.state == "success"
+                            ? "Task Submitted"
+                            : submitTask.state == "bad"
+                            ? "An Error Occurred"
+                            : "Send to Parents"}
+                        </>
+                      ) : (
+                        <>
+                          {suggestedNextStep == "Send Task" ? (
+                            <>
+                              Continue <Icons name="chevron-right" />
+                            </>
+                          ) : (
+                            "Complete"
+                          )}
+                        </>
+                      )}
+                    </button>
                  </div>
                </div>
              </Form>
@@ -504,11 +504,11 @@ export default function Icons({ name }) {
          ></path>
        </svg>
      ) : name === "atm-card" ? (
-        <img className="w-[20px]" src={ATMCard} alt="card" />
+        <img className="w-[30px]" src={ATMCard} alt="card" />
      ) : name === "visa-card" ? (
-        <img className="w-[20px]" src={VisaCard} alt="card" />
+        <img className="w-[30px]" src={VisaCard} alt="card" />
      ) : name === "master-card" ? (
-        <img className="w-[20px]" src={MasterCard} alt="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" />
      ) : name === "new-family" ? (
@@ -519,7 +519,11 @@ export default function Icons({ name }) {
        <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" />
-      ) : (
+      ) : name === "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" />
+      ): (
        ""
      )}
    </>
@@ -21,6 +21,9 @@ export default function InputCom({
  blurHandler,
  spanTag,
  inputBg,
+  onInput,
+  maxLength = 45,
+  minLength = 0,
  direction,
  error,
 }) {
@@ -29,13 +32,13 @@ export default function InputCom({
  // for Min Length:
  const minLengthValidation = () => {
    const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
-    return inputConfig || 0;
+    return inputConfig || minLength;
  };

  // for MaxLength
  const maxLengthValidation = () => {
    const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
-    return inputConfig || 30;
+    return inputConfig || maxLength;
  };

  // for Patterns
@@ -63,7 +66,9 @@ export default function InputCom({
              </span>
            )}
            {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500">{error}</span>} 
+            {error && (
+              <span className="text-[12px] text-red-500 italic">{error}</span>
+            )}
          </label>
        )}
        {forgotPassword && (
@@ -76,18 +81,23 @@ export default function InputCom({
        )}
      </div>
      <div
-        className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${inputClass ? inputClass : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"}`}
+        className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${
+          inputClass
+            ? inputClass
+            : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border"
+        }`}
      >
        <input
          placeholder={placeholder}
          value={value}
          onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
-            inputBg ? inputBg : "bg-[#FAFAFA]"
+          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}`}
          type={type}
          id={name}
          name={name}
+          onInput={onInput}
          minLength={minLengthValidation()}
          maxLength={maxLengthValidation()}
          // pattern={inputPatterns()}
@@ -97,17 +107,14 @@ export default function InputCom({
          dir={direction}
        />
        {iconName && (
-          <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
+          <div className="absolute right-6 bottom-3 z-10 flex gap-2">
            {iconName.split(" ").map((item, index) => (
              <Icons key={index} name={item} />
            ))}
          </div>
        )}
        {passIcon && (
-          <div
-            className="absolute right-6 bottom-[10px] z-10"
-            onClick={onClick}
-          >
+          <div className="absolute right-6 bottom-3 z-10" onClick={onClick}>
            <Icons name={passIcon} />
          </div>
        )}
@@ -117,7 +124,7 @@ export default function InputCom({
 }

 const inputConfigs = {
-  email: { minLength: 7, maxLength: 35 },
+  email: { minLength: 7, maxLength: 45 },
  first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
  address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
@@ -128,7 +135,8 @@ const inputConfigs = {
  amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
  description: { minLength: 5, maxLength: 299 },
  title: { minLength: 5, maxLength: 149 },
-  job_detail: { minLength: 4, maxLength: 1440 }
+  job_detail: { minLength: 4, maxLength: 1440 },
+  cardNum: { minLength: 4, maxLength: 19 },
 };

 /* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
@@ -20,7 +20,8 @@ import React from "react";
 export const PriceFormatter = (
  price = "00",
  currency = "",
-  currencyName = ""
+  currencyName = "",
+  priceClass
 ) => {
  // Convert the number to a string
  let numStr = String(price);
@@ -44,7 +45,7 @@ export const PriceFormatter = (
  return (
    <span className="text-sm flex items-center">
      <sup>{currency || currencyName || ""}</sup>
-      <span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
+      <span className={`px-1 font-bold ${priceClass ? priceClass : "text-lg"}`}>{formattedInteger || ""}</span>
      <sup>{formattedDecimal || ""}</sup>
    </span>
  );
@@ -7,6 +7,7 @@ export default function SearchCom({
  placeholder,
  handleSearch,
  value,
+  name,
 }) {
  return (
    <div
@@ -22,6 +23,7 @@ export default function SearchCom({
          className={`w-full h-full focus:outline-0 focus:ring-0 dark:bg-dark-white dark:text-white ${
            inputClasses || ""
          }`}
+          name={name}
          type="text"
          onInput={handleSearch}
          value={value}
@@ -0,0 +1,36 @@
+const TimeDifference = ({ time }) => {
+  const currentTime = new Date();
+  const providedTime = new Date(time);
+
+  const timeDifference = currentTime - providedTime; // Difference in milliseconds
+
+  const minutes = Math.floor(timeDifference / (1000 * 60));
+  const hours = Math.floor(timeDifference / (1000 * 60 * 60));
+  const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
+  const months = Math.floor(timeDifference / (1000 * 60 * 60 * 24 * 30));
+
+  if (minutes < 1) {
+    return "Just now";
+  } else if (minutes < 60) {
+    return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`;
+  } else if (hours < 12) {
+    return `${hours} ${hours === 1 ? "hour" : "hours"} ago`;
+  } else if (hours < 24) {
+    return "Today";
+  } else if (days < 2) {
+    return "Tomorrow";
+  } else if (days < 7) {
+    return `${days} ${days === 1 ? "day" : "days"} ago`;
+  } else if (months < 1) {
+    const weeks = Math.floor(days / 7);
+    return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
+  } else if (months < 6) {
+    return `${months} ${months === 1 ? "month" : "months"} ago`;
+  }else if (months < 8) {
+    return `"More than 6 months ago"`;
+  } else {
+    return time?.split(" ")[0];
+  }
+};
+
+export default TimeDifference;
@@ -217,22 +217,22 @@ export default function History() {
            {/* <TopHxBox className="mb-11" /> */}
            <div className='w-full p-4 md:p-8 bg-white dark:bg-dark-white rounded-2xl shadow bottomMargin'>
                {/* switch button */}
-                <div className="my-1 flex items-center border-b border-slate-300">
+                <div className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3">
                    <button
                    name="purchases"
                    onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "purchases" ? "border-sky-blue" : "border-slate-300"
-                    } tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "purchases" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                    >
                    Purchases
                    </button>
                    <button
                    name="recent"
                    onClick={(e) => setTab(e.target.name)}
-                    className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                        tab == "recent" ? "border-sky-blue" : "border-slate-300"
-                    }  tracking-wide transition duration-200`}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "recent" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
                    >
                    Recent Activity
                    </button>
@@ -11,12 +11,6 @@ import HomeActivities from "./HomeActivities";

 export default function FullAccountDash(props) {
  console.log("PROPS IN HOME->", props);
-
-  const trending = datas.datas;
-  const jobData = datas.datas; // api calls or cache
-
-  const userApi = new usersService();
-
  const { userDetails } = useSelector((state) => state?.userDetails);

  return (
--- a/Show More
+++ b/Show More
				`@@ -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"}`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>`