request message changed

# Conflicts:
#	src/middleware/AuthRoute.jsx

.env

@@ -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
+#Real Account
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+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

.env.development

@@ -42,3 +42,5 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -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_LOGOUT_TEXT="Sign Out"

package.json

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

public/assets/images/site.webmanifest

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

src/Routers.jsx

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

src/assets/images/currency/naira.svg

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

src/assets/images/currency/usd.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>

src/assets/images/icons/bank.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>

src/assets/images/icons/family-id.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>

src/assets/images/icons/family-pin.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>

src/assets/images/notifications/alert.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>

src/assets/images/notifications/message.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>

src/assets/images/notifications/phone.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>

src/assets/images/notifications/sms.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>

src/assets/images/payment-cards/visa-card.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>

src/components/AuthPages/AuthRedirect/AppleRedirect.jsx

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

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -0,0 +1,65 @@
+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 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);
+      
+      /*
+      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: "FACEBOOK",
+        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 FbookRedirect

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -1,22 +1,63 @@
-import React, {useState, useEffect} from 'react'
+import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom'
+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){
+      if(!codeResponse){
-            navigate('/login', {replace: true})
+        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>
   )
 }
 

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,6 +1,6 @@
 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";

src/components/AuthPages/Login/index.jsx

@@ -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 = () => {
+  // To Show and Hide Password
-    setValue(!checked);
+  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
+  // Clear the loginType cookie if the user switches to loginfull
-      // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // 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(';');
+      let carr = decoded_cookie.split(";");
-      for(let i=0; i<carr.length;i++){
+      for (let i = 0; i < carr.length; i++) {
         let c = carr[i];
-        while(c.charAt(0)==' '){
+        while (c.charAt(0) == " ") {
-            c=c.substring(1);
+          c = c.substring(1);
         }
-        if(c.indexOf(name) == 0) {
+        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
+          return c.substring(name.length, c.length);
         }
       }
-      return 'full'
+      return "full";
     }
-    let loginValue = readCookie('loginType')
+    let loginValue = readCookie("loginType");
-    setLoginType(loginValue)
+    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"
+                        type={showPassword ? "text" : "password"}
-                        iconName="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"
+                        type={showPassword ? "text" : "password"}
-                        iconName="password"
+                        onClick={togglePasswordVisibility}
-                        // forgotPassword
+                        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
+      {isAnchor ? (
-        onClick={onClick}
+        <a
-        // href="#dd"
+          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"
+          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)" />
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
+            Continue with {brand}
-        </span>
+          </span>
-      </button>
+        </a>
+      ) : (
+        <button
+          onClick={onClick}
+          // href="#dd"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
     </div>
   );
 };

src/components/AuthPages/SignUp/index.jsx

@@ -1,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-logo-text.png";
-import WrenchBoard from "../../../assets/images/wrenchboard.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={
+                    passIcon={showPassword ? "show-password" : "hide-password"}
-                      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}
         >

src/components/AuthPages/VerifyLink/index.jsx

@@ -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.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
           data.status_text === "Link Verified"
         ) {
           setPageLoader(false);

src/components/AuthPages/VerifyPassword/index.jsx

@@ -1,6 +1,6 @@
 import { 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";
@@ -158,8 +158,8 @@ const SuccessfulComponent = ({
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password}
+        value={password?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -171,8 +171,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword}
+        value={confirmPassword?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"

src/components/AuthPages/VerifyYou/index.jsx

@@ -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();

src/components/Blogs/index.jsx

@@ -1,38 +1,76 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 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);
     };
+    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">
+                <div className="mb-5">
-                    {/* heading */}
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
-                    <div className="sm:flex justify-between items-center mb-6">
+                        <span
-                        <div className="mb-5 sm:mb-0">
+                            className={`${selectTab === "today" ? "block" : "hidden"}`}
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                        >
-                <span
+                        {blogdata.data?.blogdata?.[0]?.post_title}
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                        </span>
-                >
+                    </h1>
-                  Title of this Blog Items
+                </div>
-                </span>
+                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                            </h1>
+                    {blogdata.loading ? 
-                        </div>
+                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
-                        <div className="slider-btns flex space-x-4">
+                    :
-
+                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
-                        </div>
+                        <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
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
-                   </div>
+                    }  
                 </div>
             </div>
         </Layout>

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -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`,
                         }}
                     >

src/components/Cards/HomeBannerOffersCard.jsx

@@ -16,22 +16,23 @@ export default function HomeBannerOffersCard(props) {
 
   return (
     <Link
-      to={link_result}
+      // to={link_result}
-      className="item w-full block group banner-630-340 bg-cover bg-center"
+      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">
+          <div className="mb-2">
-            <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
+            <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">

src/components/Cards/OfferCard.jsx

@@ -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`,
             }}
           >

src/components/Cards/ResourceBlogCard.jsx

@@ -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
+              <Link
-                href={datas.guid}
+                // href={datas.guid}
-                target="_blank"
+                // 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>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -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,
+// Lazy Imports for components
-  FamilyAccount,
+const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
-  FamilyProfile,
+const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
-  FamilyTasks,
+const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
-  ProfileInfo,
+const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
-  FamilyPending,
+const ProfileInfo = lazy(() => import("./Tabs/ProfileInfo"));
-} from "./Tabs";
+const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));
-import localImgLoad from "../../lib/localImgLoad";
 
 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({
+      startTransition(() => {
-        familyDetails: { loading: false, data: familyData },
+        setDetails({
-        familyTasks: { loading: false, data: tasksData },
+          familyDetails: { loading: false, data: familyData },
-        familyWaitList: { loading: false, data: familyWaitData },
+          familyTasks: { loading: false, data: tasksData },
-        familyPending: { loading: false, data: familyPendingData },
+          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')} 
+                  onClick={() => tabHandler("Account")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  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="w-[70px] h-[70px]" alt='Settings-Icon' />
+                >
-                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                  <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')} 
+                  onClick={() => tabHandler("Profile")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center">
+                  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="w-[70px] h-[70px]" alt='Settings-Icon' />
+                >
-                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                  <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">
+                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
-                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                  <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">
+                <div className="flex-[0.9] h-full">
-                    {selectedTabComponent}
+                  <div className="h-full relative overflow-y-auto">
+                    <Suspense
+                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                    >
+                      {selectedTabComponent}
+                    </Suspense>
                   </div>
                 </div>
               </div>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -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",
+    banner: details?.banner || "default.jpg",
-    country: "" || "",
+    country: details?.country || "",
-    price: "" || "",
+    price: details?.price || "",
-    title: "" || "",
+    title: details?.title || "",
-    description: "" || "",
+    description: details?.description || "",
-    job_detail: "" || "",
+    job_detail: details?.job_detail || "",
-    timeline_days: "" || "",
+    timeline_days: details?.timeline_days || "",
-    category: [] || "",
+    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)) {
+      for (let field in requiredFields) {
-        const emptyField = requiredFields.find((field) => !field);
+        if (requiredFields[field] == "") {
-        setRequestStatus({
+          // let currencyErrMsg = field == "country" && "currency"
-          loading: false,
+          setRequestStatus({
-          status: false,
+            loading: false,
-          message: `${emptyField} Empty`,
+            status: false,
-        });
+            message: `${field} is empty`,
-
+          });
-        setTimeout(() => {
+          return setTimeout(() => {
-          setRequestStatus({ loading: false, status: false, message: "" });
+            setRequestStatus({ loading: false, status: false, message: "" });
-        }, 3000);
+          }, 3000);
-
+        }
-        return;
       }
 
       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 (checkFamilyTask) {
-        if (res?.data?.result_list?.length) {
+          setFamilyTask({ loading: false, data: res?.data?.result_list });
-          setActiveTask((prev) => ({
+          if (res?.data?.result_list?.length) {
-            ...prev,
+            setActiveTask((prev) => ({
-            data: res?.data?.result_list[0],
+              ...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 != "" &&
+                <div className="w-auto h-auto flex items-center">
-                  (!requestStatus.status ? (
+                  {requestStatus.message != "" &&
-                    <div
+                    (!requestStatus.status ? (
-                      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={`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
+                <div className="w-auto h-auto flex items-center gap-3">
-                  disabled={requestStatus.loading}
+                  <button
-                  onClick={action}
+                    disabled={requestStatus.loading}
-                  type="button"
+                    onClick={action}
-                  className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white cursor-pointer"
+                    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>
+                    <span className="text-gradient">Close</span>
-                <div className="">
+                  </button>
-                  {requestStatus.loading ? (
+                  <div className="">
-                    <LoadingSpinner color="sky-blue" size="8" />
+                    {requestStatus.loading ? (
-                  ) : taskType == "select" ? (
+                      <LoadingSpinner color="sky-blue" size="8" />
-                    <button
+                    ) : taskType == "select" ? (
-                      type="button"
+                      <button
-                      disabled={requestStatus.loading}
+                        type="button"
-                      onClick={assignFamilyTask}
+                        disabled={requestStatus.loading}
-                      className="px-1 w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        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>
+                        Assign
-                  ) : (
+                      </button>
-                    <button
+                    ) : (
-                      type="button"
+                      <button
-                      disabled={requestStatus.loading}
+                        type="button"
-                      onClick={assignFamilyTask}
+                        disabled={requestStatus.loading}
-                      className="px-1 w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white cursor-pointer"
+                        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>
+                        {`Assign to ${
-                  )}
+                          familyDetails?.firstname || details?.firstName
+                        }`}
+                      </button>
+                    )}
+                  </div>
                 </div>
               </div>
             </>
@@ -419,6 +436,6 @@ function AssignTaskPopout({ action, situation, familyDetails }) {
       </ModalCom>
     </>
   );
-}
+})
 
 export default AssignTaskPopout;

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

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

src/components/FamilyAcc/FamilyTable.jsx

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

src/components/FamilyAcc/Tabs/FamilyAccount.jsx

@@ -1,56 +1,56 @@
-import { forwardRef } from 'react'
+import { forwardRef } from "react";
-import QRCode from 'react-qr-code';
+import QRCode from "react-qr-code";
 
 const FamilyAccount = forwardRef(({ familyData, myRef, handlePrint }, ref) => {
-    return (
+  return (
-      <div
+    <div
-        className="w-full lg:min-h-[500px] h-full flex flex-col items-center justify-center"
+      className="w-full lg:min-h-[538px] p-3 h-full flex flex-col items-center justify-center"
-        ref={myRef}
+      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="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 items-center justify-around h-[380px]">
-            <div className="flex flex-col">
+          <div className="flex flex-col">
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Username:{" "}
+              Username:{" "}
-                <span className="ml-2 normal-case">
+              <span className="ml-2 normal-case">
-                  {familyData?.username ? familyData?.username : "please wait..."}
+                {familyData?.username ? familyData?.username : "please wait..."}
-                </span>
+              </span>
-              </h2>
+            </h2>
-              <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+            <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-                Pin:{" "}
+              Pin:{" "}
-                <span className="ml-2 normal-case">
+              <span className="ml-2 normal-case">
-                  {familyData?.pin ? familyData?.pin : "please wait..."}
+                {familyData?.pin ? familyData?.pin : "please wait..."}
-                </span>
+              </span>
-              </h2>
+            </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>
           </div>
-          <div className="h-[50px] w-full flex justify-center items-center">
+
-            <button
+          <span className="text-5xl text-gray-400 opacity-20 font-bold">
-              className="btn-shine w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
+            or
-              onClick={handlePrint}
+          </span>
-            >
+
-              Print
+          <div className="max-w-[200px]">
-            </button>
+            <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;

src/components/FamilyAcc/Tabs/FamilyPending.jsx

@@ -1,9 +1,8 @@
-import { useState } from "react";
+import { useMemo, 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 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(
+  let filteredFamilyData = useMemo(
-    (data) => data?.family_uid === accountDetails?.family_uid
+    () =>
+      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">
+                    <tr>
-                      <td className="p-2">No Pending Task!</td>
+                      <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>
                   )}
                 </>

src/components/FamilyAcc/Tabs/FamilyProfile.jsx

@@ -1,3 +1,11 @@
-export default function FamilyProfile() {
+export default function FamilyProfile({ className }) {
-    return <>Profile</>;
+  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>
+  );
 }

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -1,20 +1,30 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
-import dataImage2 from "../../../assets/images/data-table-user-2.png";
+import { useLocation, useNavigate } from "react-router-dom";
-import { useNavigate, useLocation } 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({
-export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
+  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 &&
-                        familyData.result_list.length > 0 &&
+                      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>

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

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

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

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

src/components/FamilyAcc/index.jsx

@@ -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
+  const ageRange = useMemo(() => {
-  let startAge = 5;
+    const startAge = 5;
-  let endAge = 16;
+    const endAge = 16;
-  // creates an array of age values ranging from 16 to 70
+    return Array.from(
-  const ageRange = Array.from(
+      { length: endAge - startAge + 1 },
-    { length: endAge - startAge + 1 },
+      (_, index) => startAge + index
-    (_, index) => startAge + index
+    );
-  );
+  }, []);
-  // age handler
+
   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 = {
+        const reqData = {
-          member_id: memberId,
-          uid: uid,
-          session_id: sessionId,
           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 = {
+      const reqData = {
-        member_id: memberId,
-        uid: uid,
-        session_id: sessionId,
         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") {
+      if (data?.internal_return >= 0 && data?.status === "OK") {
-        let { result_list } = data;
+        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 && (

src/components/FamilyPopup/SuggestTask.jsx

@@ -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
-                      <button
+                      type="submit"
-                        type="submit"
+                      disabled={props.isSubmitting}
-                        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"
-                        className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
+                    >
-                      >
+                      {pathname !== "/manage-family" ? (
-                        {submitTask.loading
+                        <>
-                          ? "Submitting Task"
+                          {submitTask.loading
-                          : submitTask.state == "success"
+                            ? "Submitting Task"
-                          ? "Task Submitted"
+                            : submitTask.state == "success"
-                          : submitTask.state == "bad"
+                            ? "Task Submitted"
-                          ? "An Error Occurred"
+                            : submitTask.state == "bad"
-                          : "Send to Parents"}
+                            ? "An Error Occurred"
-                      </button>
+                            : "Send to Parents"}
-                    ) : (
+                        </>
-                      <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" ? (
+                        <>
-                          <>
+                          {suggestedNextStep == "Send Task" ? (
-                            Continue <Icons name="chevron-right" />
+                            <>
-                          </>
+                              Continue <Icons name="chevron-right" />
-                        ) : (
+                            </>
-                          "Complete"
+                          ) : (
-                        )}
+                            "Complete"
-                      </button>
+                          )}
-                    )}
+                        </>
+                      )}
+                    </button>
                   </div>
                 </div>
               </Form>

src/components/Helpers/Icons.jsx

@@ -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" />
+      ): (
         ""
       )}
     </>

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

@@ -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 ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
-            inputBg ? inputBg : "bg-[#FAFAFA]"
+            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
+          <div className="absolute right-6 bottom-3 z-10" onClick={onClick}>
-            className="absolute right-6 bottom-[10px] 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

src/components/Helpers/PriceFormatter.jsx

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

src/components/Helpers/SearchCom.jsx

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

src/components/Helpers/TimeDifference.jsx

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

src/components/History/index.jsx

@@ -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 ${
+                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "purchases" ? "border-sky-blue" : "border-slate-300"
+                        tab == "purchases" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                    } tracking-wide transition duration-200`}
+                      }`}
                     >
                     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 ${
+                    className={`px-4 py-1 rounded-t-2xl ${
-                        tab == "recent" ? "border-sky-blue" : "border-slate-300"
+                        tab == "recent" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
-                    }  tracking-wide transition duration-200`}
+                      }`}
                     >
                     Recent Activity
                     </button>

src/components/Home/FullAccountDash.jsx

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

src/components/Home/Hero.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
-import heroBg from "../../assets/images/hero-bg.svg";
+import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
 import heroUser from "../../assets/images/hero-user.png";
 import CountDown from "../Helpers/CountDown";
 import HomeSliders from "./HomeSliders";
@@ -24,7 +24,7 @@ export default function Hero({ className, bannerList, nextDueTask }) {
 
   return (
     <div
-      className={`w-full lg:h-[444px] h-full lg:flex lg:p-8 p-4 justify-between items-center lg:space-x-28 rounded-2xl overflow-hidden ${
+      className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
         className || ""
       }`}
       style={{
@@ -33,7 +33,7 @@ export default function Hero({ className, bannerList, nextDueTask }) {
         backgroundSize: "cover",
       }}
     >
-      <div className="flex-1 h-[330px] lg:h-full flex flex-col justify-between mb-5 lg:mb-0">
+      <div className="h-full flex flex-col justify-between mb-5 lg:mb-0">
         {/* heading */}
         <div>
           <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
@@ -57,7 +57,7 @@ export default function Hero({ className, bannerList, nextDueTask }) {
         </div>
         {/* countdown */}
         {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
-          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
+          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
             <div className="flex flex-col justify-between">
               <p className="text-base text-white tracking-wide">Current Task</p>
               <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
@@ -84,7 +84,7 @@ export default function Hero({ className, bannerList, nextDueTask }) {
         )}
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link to="/mytask" className="text-white text-base sm:block hidden">
+          <Link to="/mytask" className="text-white text-base">
             <span className=" border-b dark:border-[#5356fb29]  border-white">
               {" "}
               View All Task(s)

src/components/Home/HomeSliders.jsx

@@ -6,7 +6,7 @@ export default function HomeSliders(props) {
   // debugger;
   return (
     <>
-      <div className="hero-slider relative 2xl:w-[600px] xl:w-[400px] lg:w-[420px] w-full mb-2 lg:mb-0 ">
+      <div className="hero-slider relative h-full w-full mb-2 lg:mb-0">
         <div className="w-full">
           <SliderCom settings={props.settings}>
             {props.bannerList?.length <= 0 && (

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
   const MarketCalls = (details) => {
     const [marketMsg, setMarketMsg] = useState({
       loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
     const MarketDetail = async () => {
       try {
-        setMarketMsg({ loading: true });
         if (!textValue) return;
+        setMarketMsg({ loading: true });
 
         reqData.yourmessage = textValue;
 
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       }
     };
 
-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
     return { MarketDetail, ManageInterest, manageInt, marketMsg };
   };
 
-  const [textValue, setTextValue] = useState("");
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
-
+    MarketCalls(details);
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">
+                <p className="my-1">Expire: {details.expire}</p>
-                  Expire: {details.expire}
-                </p>
               </div>
             </div>
             <button

src/components/MyActiveJobs/ActiveJobMessage.jsx

@@ -9,59 +9,61 @@ import PaginatedList from "../Pagination/PaginatedList";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 
 export default function ActiveJobMessage({ activeJobMesList }) {
-    const [currentPage, setCurrentPage] = useState(0);
+    // const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
+    // const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    // const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    // const currentActiveJobMesList = activeJobMesList?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
-    const handlePagination = (e) => {
+    // const handlePagination = (e) => {
-      handlePagingFunc(e,setCurrentPage)
+    //   handlePagingFunc(e,setCurrentPage)
-    }
+    // }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
+    <div className='flex flex-col justify-between'>
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
+    <div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
-        <thead className='border-b-2'>
+        <table className="wallet-activity w-full table-auto border-collapse text-left">
-            <tr className='text-slate-600'>
+            <thead className='border-b-2'>
-            <th className="p-2"></th>
+                <tr className='text-slate-600'>
-            </tr>
+                <th className="p-2"></th>
-        </thead>
+                </tr>
-        {activeJobMesList.data.length ?
+            </thead>
-        (
+            {activeJobMesList?.data?.length ?
-        <tbody>
+            (
-            {currentActiveJobMesList.map((item, index) => (
+            <tbody>
-            <tr key={index} className='text-slate-500'>
+                {activeJobMesList.data.map((item, index) => (
-                <td>
+                <tr key={index} className='text-slate-500'>
-                    <div className="msg_box">
+                    <td>
-                        <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
+                        <div className={`msg_box ${item.who}`}>
-                        <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                            <div className="msg_header">{item.msg_date} {item.msg_firstname}</div>
-                    </div>
+                            <span className="p-2" dangerouslySetInnerHTML={{__html: item.message}}></span>
+                        </div>
 
-                </td>
+                    </td>
-            </tr>
+                </tr>
-            ))}
+                ))}
-        </tbody>
+            </tbody>
-        )
+            )
-        :
+            :
-        activeJobMesList.error ? 
+            activeJobMesList.error ? 
-        (
+            (
-        <tbody>
+            <tbody>
-            <tr className='text-slate-500'>
+                <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+                    <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
-            </tr>
+                </tr>
-        </tbody>
+            </tbody>
-        )
+            )
-        :
+            :
-        <tbody>
+            <tbody>
-            <tr className='text-slate-500'>
+                <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Message Found!</td>
+                    <td className="p-2" colSpan={4}>No Message Found!</td>
-            </tr>
+                </tr>
-        </tbody>
+            </tbody>
-        }
+            }
-    </table>
+        </table>
+    </div>
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= activeJobMesList?.data?.length ? true : false} data={activeJobMesList?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> */}
     {/* END OF PAGINATION BUTTON */}
     </div>
   )