profile bug fixed

# Conflicts:
#	src/components/MyCoupons/MyCoupons.jsx

.env

@@ -9,22 +9,65 @@ REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
 
 # REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
 # REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
-REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
-REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
-#REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-#REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
 
 #"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
 
-REACT_APP_SESSION_EXPIRE_MINUTES=300000
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
 REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
 
+REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
+
 # Had to change the error time to 3sec cause it took too long
 REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
+# Empty Listings
+REACT_APP_ZERO_STATE=0
+
+#REACT_APP_GOOGLE_CLIENT_ID_RET=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+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/
+
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#developenet Account
+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
+
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -0,0 +1,44 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+# REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
+
+REACT_APP_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
+
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
+#apigate.lotus.g1.wrenchboard.com:76.209.103.227
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
+REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
+REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
+
+REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_TOTAL_NUM_FILE=4

.env.production

@@ -0,0 +1,51 @@
+SKIP_PREFLIGHT_CHECK=true 
+
+REACT_APP_FACEBOOK="https://www.facebook.com/profile.php?id=100066498622246"
+REACT_APP_TWITTER="https://twitter.com/fluxtra"
+
+REACT_APP_APPSITE="https://myfitapp.mermsemr.com"
+#REACT_APP_APPSITE="http://localhost:7012"
+
+
+# REACT_APP_AUX_ENDPOINT="http://10.20.30.32:9083/svs/user"
+# REACT_APP_USERS_ENDPOINT="http://10.20.30.32:9083/svs/user"
+#REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+#REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/svs/user"
+
+REACT_APP_AUX_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+REACT_APP_USERS_ENDPOINT="https://apigate.orion.g1.wrenchboard.com/en/wrench/api/v1"
+
+#"https://devapi.mermsemr.com/en/desktop/api/v2/myfituser"
+
+REACT_APP_SESSION_EXPIRE_MINUTES=600000
+REACT_APP_SESSION_EXPIRE_MINUTES_FAMILY=600000
+REACT_APP_SESSION_EXPIRE_CHECKER=60000
+
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
+
+REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X
+
+# Had to change the error time to 3sec cause it took too long
+REACT_APP_RESET_START_ERROR_TIMEOUT=3000
+
+#NUMBER OF ITEMS PER PAGE
+REACT_APP_ITEM_PER_PAGE=5
+
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
+#apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=817021856543-ad9nsjgdpsu2s2jrl63j3ihrv7lbf6ma.apps.googleusercontent.com
+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

.eslintrc

@@ -1,59 +0,0 @@
-{
-  "extends": [
-    "airbnb",
-    "airbnb/hooks",
-    "eslint:recommended",
-    "prettier",
-    "plugin:jsx-a11y/recommended"
-  ],
-  "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaVersion": 8
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "rules": {
-    "no-plusplus": 0,
-    "import/no-dynamic-require": 0,
-    "global-require": 0,
-    "no-nested-ternary": 0,
-    "react/self-closing-comp": 0,
-    "react/no-unescaped-entities": 0,
-    "jsx-a11y/anchor-is-valid": 0,
-    "react/jsx-props-no-spreading": 0,
-    "jsx-eslint/eslint-plugin-jsx-a11y": 0,
-    "jsx-a11y/no-static-element-interactions": 0,
-    "jsx-a11y/label-has-associated-control": 0,
-    "jsx-a11y/no-noninteractive-element-interactions": 0,
-    "react/react-in-jsx-scope": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "no-console": 0,
-    "react/state-in-constructor": 0,
-    "indent": 0,
-    "linebreak-style": 0,
-    "react/prop-types": 0,
-    "jsx-a11y/click-events-have-key-events": 0,
-    "react/jsx-filename-extension": [
-      1,
-      {
-        "extensions": [".js", ".jsx"]
-      }
-    ]
-    // "prettier/prettier": [
-    //     "error",
-    //     {
-    //         "trailingComma": "es5",
-    //         "singleQuote": true,
-    //         "printWidth": 100,
-    //         "tabWidth": 4,
-    //         "semi": true,
-    //         "endOfLine": "auto"
-    //     }
-    // ]
-  },
-  "plugins": ["prettier", "react", "react-hooks"]
-}

.gitattributes

@@ -0,0 +1,15 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.jsx text
+*.js text
+*.css text
+
+# Declare files that will always have CRLF line endings on checkout.
+*.md text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.sh binary
+

Dockerfile

@@ -0,0 +1,36 @@
+# pull the base image
+FROM node:alpine
+
+# Build args
+ARG NODE_ENV
+
+# set the working direction
+#WORKDIR /app
+WORKDIR /usr/src/app
+
+# add `/app/node_modules/.bin` to $PATH
+# ENV PATH /app/node_modules/.bin:$PATH
+ENV PATH /usr/src/app/node_modules/.bin:$PATH
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
+
+# install app dependencies
+COPY package.json ./
+
+COPY package-lock.json ./
+
+COPY nginx.conf ./
+
+COPY run.sh ./
+
+RUN npm install --legacy-peer-deps
+
+# add app
+COPY . ./
+
+# start app
+CMD /bin/sh ./run.sh
+

docker-compose.yml

@@ -4,7 +4,9 @@ services:
     image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
     build:
       context: .
-      dockerfile: docker/Dockerfile
+      dockerfile: Dockerfile
+      args:
+        - NODE_ENV=production
     restart: unless-stopped
     ports:
       - 9082:3000
@@ -13,19 +15,20 @@ services:
     working_dir: /usr/src/app
     volumes:
       - ./:/usr/src/app
-      - /usr/src/app/node_modules
       - ./src/:/usr/src/app/src
-      - ./vendors/:/usr/src/app/vendors
+      - ./run.sh:/usr/src/app/run.sh
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
       - apigate.lotus.g1.wrenchboard.com:10.10.33.15
+      - apigate.orion.g1.wrenchboard.com:10.10.33.15
       # #- backend.wrenchboard.api.live:172.31.4.27
       # #- backend.wrenchboard.api.test:10.20.30.27
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19
       - apigateway.wrenchboard.app.lotus.fluxtra.net:172.31.4.19
     environment:
       - CHOKIDAR_USEPOLLING=true
+      - NODE_ENV=${NODE_ENV:-production}
    # volumes:
    #   - ./:/app
    #   - /app/node_modules

docker/Dockerfile

@@ -3,7 +3,15 @@
 
 FROM alpine:3.15
 
+# Build args
+ARG NODE_ENV
+
 ENV NODE_VERSION 14.19.0
+ENV NODE_ENV=$NODE_ENV
+
+# install nginx
+RUN apk update
+RUN apk add nginx
 
 RUN addgroup -g 1000 node \
     && adduser -u 1000 -G node -s /bin/sh -D node \
@@ -103,6 +111,10 @@ WORKDIR /usr/src/app
 # ENV PATH /app/node_modules/.bin:$PATH
 ENV PATH /usr/src/app/node_modules/.bin:$PATH
 
+COPY nginx.conf ./
+
+COPY run.sh ./
+
 # install app dependencies
 COPY package.json ./
 RUN npm install
@@ -114,7 +126,9 @@ RUN npm install
 COPY . ./
 
 # start app
-CMD ["npm","run", "start"]
+# CMD ["npm","run", "start"]
  
 # CMD ["yarn", "start"]
 
+# start app
+CMD /bin/sh ./run.sh

nginx.conf

@@ -0,0 +1,29 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  access_log /var/log/nginx/access.log;
+  error_log  /var/log/nginx/error.log;
+
+  server {
+    gzip on;
+    listen 3000;
+    server_name localhost;
+    root /usr/src/app/build;
+
+    include /etc/nginx/mime.types;
+
+    location /nginx_status {
+      stub_status on;
+      access_log off;
+    }
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}
+

package.json

@@ -3,6 +3,7 @@
   "version": "0.2.0",
   "private": true,
   "dependencies": {
+    "@react-oauth/google": "^0.11.0",
     "@reduxjs/toolkit": "^1.8.2",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -13,16 +14,19 @@
     "chartjs": "^0.3.24",
     "cors": "^2.8.5",
     "faker": "^6.6.6",
+    "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-dom": "^18.0.0",
-    "react-lottie": "^1.2.3",
-    "react-redux": "^8.0.2",
+    "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.11",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.0.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
+    "react-to-print": "^2.14.12",
     "react-toastify": "^9.0.1",
     "redux": "^4.2.0",
     "slick-carousel": "^1.8.1",
@@ -30,11 +34,10 @@
     "yup": "^1.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts start -e .env.development",
+    "build": "react-scripts build -e .env.production",
     "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "yarn add -D prettier@2.4.1 && yarn add -D eslint@7.11.0 && yarn add -D babel-eslint@10.1.0 && npx install-peerdeps --dev eslint-config-airbnb@18.2.1 && yarn add -D eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0"
+    "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
@@ -53,20 +56,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.5",
-    "babel-eslint": "10.1.0",
-    "eslint": "7.2.0",
-    "eslint-config-airbnb": "18.2.1",
-    "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "1.7.0",
-    "postcss": "^8.4.12",
-    "prettier": "2.4.1",
-    "tailwindcss": "^3.0.24"
   }
 }

run.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env sh
+set -e
+set -x
+
+export NODE_ENV="${NODE_ENV:-development}"
+
+if [ $NODE_ENV == "development" ]; then
+  # this runs webpack-dev-server with hot reloading
+  echo "Development build"
+  npm install --legacy-peer-deps
+  npm start
+else
+  # build the app and serve it via nginx
+  echo "Production build"
+  npm install --legacy-peer-deps
+  npm run build
+  nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
+  nginx -c /usr/src/app/nginx.conf
+fi
+

src/Routers.jsx

@@ -22,7 +22,7 @@ import UpdatePasswordPages from "./views/UpdatePasswordPages";
 import UploadProductPage from "./views/UploadProductPage";
 import UserProfilePage from "./views/UserProfilePage";
 import VerifyYouPages from "./views/VerifyYouPages";
-
+import VerifyPasswordPages from "./views/VerifyPasswordPages";
 import RemindersPage from './views/RemindersPage';
 import TrackingPage from "./views/TrackingPage";
 import CalendarPage from "./views/CalendarPage";
@@ -30,6 +30,25 @@ import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
 import ReferralPage from "./views/ReferralPage";
+import VerifyLinkPages from "./views/VerifyLinkPages";
+import MyActiveJobsPage from "./views/MyActiveJobsPage";
+import FamilyAccPage from "./views/FamilyAccPage";
+import StartJob from "./components/MyJobs/StartJob";
+import AddJobPage from "./views/AddJobPage";
+import MyPendingJobsPage from "./views/MyPendingJobsPage";
+import ManageActiveJobs from "./views/ManageActiveJobs";
+import FamilyManagePage from "./views/FamilyManagePage";
+import MyCouponPage from "./views/MyCouponPage";
+import AuthRedirect from "./views/AuthRedirect";
+import MyPastDueJobsPage from "./views/MyPastDueJobsPage";
+import BlogPage from "./views/BlogPage";
+import MyReviewDueJobsPage from "./views/MyReviewDueJobsPage";
+import OffersInterestPage from "./views/OffersInterestPage";
+import ManageInterestOfferPage from './views/ManageInterestOfferPage'
+import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
+import FamilyMarketPage from "./views/FamilyMarketPage";
+import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";
 
 export default function Routers() {
   return (
@@ -38,6 +57,9 @@ export default function Routers() {
         {/* guest routes */}
         <Route exact path="/login" 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"
@@ -48,7 +70,9 @@ export default function Routers() {
           path="/update-password"
           element={<UpdatePasswordPages />}
         />
-        <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route path="/vemail" element={<VerifyLinkPages />} />
+        <Route path="/complereset" element={<VerifyPasswordPages />} />
+        <Route exact path="/outmessage" element={<VerifyYouPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
@@ -64,12 +88,29 @@ export default function Routers() {
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />
           <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
+          <Route exact path="/my-coupon" element={<MyCouponPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
+          <Route exact path="/familymarket" element={<FamilyMarketPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
+          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
+          <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
+          <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
+          <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
+          <Route exact path="/pend-interest"  element={<MyWaitingJobsPage />} />
+          <Route exact path="/my-review-jobs"  element={<MyReviewDueJobsPage />} />
+          <Route exact path="/acc-family"  element={<FamilyAccPage />} />
+          <Route exact path="/manage-family"  element={<FamilyManagePage />} />
+          <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
+          <Route exact path="/blog-page"  element={<BlogPage />} />
+          <Route exact path="/offer-interest"  element={<OffersInterestPage />} />
+          <Route exact path="/manage-offer"  element={<ManageInterestOfferPage />} />
+
+
           <Route
             exact
             path="/my-collection/collection-item"

src/assets/images/card.svg

@@ -0,0 +1,9 @@
+<svg width="905" height="575" viewBox="0 0 905 575" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="905" height="575" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_201_3" transform="matrix(0.00849979 0 0 0.0131639 -0.0662984 -0.354783)"/>
+</pattern>
+<image id="image0_201_3" width="130" height="130" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAACCCAMAAAC93eDPAAAApVBMVEX///82OzgAAAAuMi81OjdVXVfqpQCzs7NCSUSwsbAaIBslKyjk5OQuNDAhJiLZ2tpJT0opNTkvNzloVy31rAC1hRtPV1HNzc34+PgaLztBQUHLkg9UVFTw8PDGxsaioqKampp/f39sbGyIiIgaGho9Qj5MTExeXl5fUi+9vb03Nzd2dnYjIyORkZFjZWMNFQ9CQTWYcyLAjBSsfx12XytSSjEQEBBeBsYmAAAEiklEQVR4nO3a7XaqOBQG4BjoQXRraKc1GUoSPgQaETszZ473f2kTqm0VsKLLYs80b3+UhQgPOwlBESETExMTExMTExMTExMTk/9HQDk9xHUdcgiwmk7HPWQ0Gj0HrQiaWvagh9iWztSiTQH3rD4AW4I19nmDUI77EWwJ1ihpENJeWuGdYE0afXHSN2EMdUI/fXGHMK0Piv6rcJhg39VyadpRwt3g6Y+9PNl3/RLsvx7va3kcXLYOxwh/Ptz/qOX+79t+CY91wY8fD4ZgCIbwvQn/NAT3P/sl3P3bENz/uuwkcXSaun162M/PX5ctQofJ+u62lgtPlL/HLYshGIIhfDGC3chZ65ur7c6EYSN2+/r0wPYvn4/ttH19B4Lt3TRSGexZc316YP3LgZrrZ9sqTK5PsK7fEMcJn90d7eOEz84XIEyuT7CuTrCvT5hcn2BdnWBfnbAj+CaEtyvizrXROpfQOu0fAwyGnucN9X89XeiltPrebnIuwU5nO+n2dbmdbqfH1B6+Le02w4mEvYnX60J4PW61/fukb51PGO4SulWheRehMecTTu8LbTc+NzMvPZ9wctrupW505+yR0NYOelR41yVUgq5VaLnjOvmy0GyIStC5L6RH0okwbBN4g06ExpubFe00JPbKMNsIOl4XWofT6YTB4HU/3mDWLjjpc8RevE4APSF4VSFmQ31VTl8AqdWZcInuuEFUHWczLdgDuw7o637BnjSP/AHh8o9KPwR8fhXslsrXCfUHxpd8bH7k9LdpPDZHyajL+y6XUdQggD/uUzAeNNoBIWpN+xNMJy0/JNF1mD2Pespz0FKDDcJxe4k6BDAxMTExMTH5kunjZ8cfB+Gr53sTluE7YQ0gBSGrBEgEROIcCA0oVnEEkFfbCp44ZUYDAhLjiGAKCiugmASlXAGMa/teEBCLHCCSYZmEofBlqUIcACQ44r4PoJbVZnOk3ghzFPlMujyEbIViH8es4C6LSAKuAP16gaqlAlwomY9DVrCElSjhCVfSAYe6NYLPSq6oCFmohFIhl64kLqYkZEuFogzlqMSZEPo2nr4TijVLQk1YBihYa0IGigMNeZRF+vUcFTiGkiqxTpa45BIWUjIfQs4dh8KiXmGfBZQSqc9EACExsBcCuDHyKXd8hLmu9GY8wvKVADHnKJZIBIis8AoByTnoc4k2Z6hPeYlUKIRUfkXgcxxpQskBqTlhywYh3xB8DkRvByysCE6McghptiGwjYG+EgLMSigkwQHS5xTzAGdQIk2QVUP4q5BlnOVC5PqVqgq+cF+qkCCV64odICCMqEBLvadwW4UYCcj3quC/E1BElS5wjlaLqiFwwHUPAf2ho1jhGCUso2jh8IgFVV9ACSpRxBO2Ig4oShuEgju6ZJrgKraEgEmilrovaHKk/wKUbPsCmb+OCJphEReioDTRG+JAl9tXa7mKiZLSxWtJEpyo+ZwKx8eFwEoPG71XLLKo9Cmtd4aFomrp616gB1Xhrp0sSiQlmSBx4uLqKHK+GRHibUR8mCQ4tsW5mUrcjfD5+QKE/wC0yMO17JCUyAAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>

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/grid-view.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M14,16H2a2,2,0,0,1-2-2V2A2,2,0,0,1,2,0H14a2,2,0,0,1,2,2V14A2,2,0,0,1,14,16ZM4,12h8V4H4Z"/><path d="M14,34H2a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H14a2,2,0,0,1,2,2V32A2,2,0,0,1,14,34ZM4,30h8V22H4Z"/><path d="M14,52H2a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H14a2,2,0,0,1,2,2V50A2,2,0,0,1,14,52ZM4,48h8V40H4Z"/><path d="M32,16H20a2,2,0,0,1-2-2V2a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V14A2,2,0,0,1,32,16ZM22,12h8V4H22Z"/><path d="M32,34H20a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V32A2,2,0,0,1,32,34ZM22,30h8V22H22Z"/><path d="M32,52H20a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H32a2,2,0,0,1,2,2V50A2,2,0,0,1,32,52ZM22,48h8V40H22Z"/><path d="M50,16H38a2,2,0,0,1-2-2V2a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V14A2,2,0,0,1,50,16ZM40,12h8V4H40Z"/><path d="M50,34H38a2,2,0,0,1-2-2V20a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V32A2,2,0,0,1,50,34ZM40,30h8V22H40Z"/><path d="M50,52H38a2,2,0,0,1-2-2V38a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2V50A2,2,0,0,1,50,52ZM40,48h8V40H40Z"/></svg>

src/assets/images/icon-delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" id="delete"><g color="#000"><path fill="#ee4c45" style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;white-space:normal;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M12 1028.362c-6.626 0-12 5.374-12 12s5.374 12 12 12 12-5.374 12-12-5.374-12-12-12z" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -1028.362)"></path><path fill="#fff" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1" d="M10.5 1034.362v1h-3v1h9v-1h-3v-1h-3zm-2 3v9h7v-9h-7zm1 1h1v7h-1v-7zm2 0h1v7h-1v-7zm2 0h1v7h-1v-7z" overflow="visible" transform="translate(0 -1028.362)"></path></g></svg>

src/assets/images/icon-edit.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 60 60" viewBox="0 0 60 60" id="edit"><path fill="#3B4652" d="M52.9687347,19.3099976l-2.7999878-2.7999878c-0.9099731-0.9100342-2.3899536-0.9100342-3.2999878,0
+		l-1.4129639,1.4129639c0.0185547,0.017395,0.0423584,0.0234985,0.0601196,0.0422974l5.7765503,6.1199341
+		c0.0361328,0.038269,0.0506592,0.0881348,0.0813599,0.1296997l1.5949097-1.5949097
+		C53.8787689,21.7099609,53.8787689,20.2199707,52.9687347,19.3099976z"></path><path fill="#2B79C2" d="M10.8887787,25.5499878H34.998764l7.5900269-7.5900269l1.7599487-1.75V9c0-1.6500244-1.3499756-3-3-3h-32
+		c-1.6599731,0-3,1.3499756-3,3v42c0,1.6499634,1.3400269,3,3,3h32c1.6500244,0,3-1.3500366,3-3V34.0700073l-5.8899536,5.8800049
+		c-0.3099976,0.3199463-0.7000122,0.5599976-1.1199951,0.7099609l-7.2200317,2.5200195
+		c-0.3099976,0.1099854-0.6500244,0.1699829-0.9899902,0.1699829c-0.7800293,0-1.5200195-0.2999878-2.0900269-0.8399658
+		c-0.3399658-0.3400269-0.5799561-0.7400513-0.7299805-1.1600342H10.8887787c-0.5599976,0-1-0.4500122-1-1s0.4400024-1,1-1
+		h15.4199829v-0.0100098l1.7000122-4.8899536H10.8887787c-0.5599976,0-1-0.4500122-1-1c0-0.5500488,0.4400024-1,1-1H28.708786
+		l0.0999756-0.3000488c0.1699829-0.4699707,0.4400024-0.8800049,0.789978-1.1900024l3.4000244-3.4099731H10.8887787
+		c-0.5599976,0-1-0.4500122-1-1S10.3287811,25.5499878,10.8887787,25.5499878z M10.8887787,46.25h24.9099731
+		c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1S10.3287811,46.25,10.8887787,46.25z
+		 M10.8887787,11.75h24.9099731c0.5599976,0,1,0.4500122,1,1s-0.4400024,1-1,1H10.8887787c-0.5599976,0-1-0.4500122-1-1
+		S10.3287811,11.75,10.8887787,11.75z M10.8887787,18.6499634h24.9099731c0.5599976,0,1,0.4500122,1,1c0,0.5500488-0.4400024,1-1,1
+		H10.8887787c-0.5599976,0-1-0.4499512-1-1C9.8887787,19.0999756,10.3287811,18.6499634,10.8887787,18.6499634z"></path><path fill="#3B4652" d="M30.9387665,32.4400024c-0.1099854,0.0999756-0.1900024,0.2299805-0.2399902,0.3699951
+		l-2.5100098,7.2099609c-0.1300049,0.3600464-0.039978,0.7700195,0.2299805,1.0400391
+		c0.2000122,0.1900024,0.4500122,0.289978,0.710022,0.289978c0.1099854,0,0.2199707-0.0200195,0.3300171-0.0599976
+		l7.2099609-2.5100098c0.1400146-0.0499878,0.2700195-0.1300049,0.3800049-0.2399902l12.5599976-12.5599976l-5.9299927-6.2799683
+		L30.9387665,32.4400024z"></path></svg>

src/assets/images/icons/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66" id="Account"><path fill="#4687ba" d="M19 36.5c-5.8 0-10.6 4.7-10.6 10.6S13.1 57.6 19 57.6 29.5 52.9 29.5 47 24.8 36.5 19 36.5zm0 19.6c-5 0-9.1-4.1-9.1-9.1s4.1-9 9.1-9 9 4 9 9-4 9.1-9 9.1z" class="color000100 svgShape"></path><path fill="#4687ba" d="M65.7 49.6l-.9-5.4c-1.2-8-7.4-14.3-15.1-15.9 1.3-1.6 2.7-3.9 3.3-7.1.5-.8 2.1-3.5 1.5-5.3-.1-.3-.3-.6-.6-.9.7-2 2.3-9-4.8-12.6C38-3.9 28.7 4.7 30.8 14.6c-.2.3-.5.6-.6 1.1-.3 1.3.1 3 1.3 4.9.2.8 1.5 5 3.9 7.9-3.2.8-6 2.4-8.4 4.6-1.2-.7-2.5-1.2-3.8-1.6l-.8-3.3h-6.8l-.8 3.3c-1.3.4-2.6.9-3.8 1.6l-2.8-1.8-4.8 4.8L5.1 39c-.7 1.2-1.2 2.5-1.6 3.8l-3.3.8v6.8l3.3.8c.4 1.3.9 2.6 1.6 3.8l-1.8 2.9 4.8 4.8 2.8-1.8c1.2.7 2.5 1.2 3.8 1.6l.8 3.3h6.8l.8-3.3c1.3-.4 2.6-.9 3.8-1.6l2.8 1.8 4.8-4.8-.3-.5H59c2 0 3.8-.9 5.1-2.4 1.3-1.4 1.9-3.4 1.6-5.4zM32.9 20.1l-.1-.2c-1.7-2.8-1.3-4.2-.8-4.5l.5-.3c-1.8-6 1.4-11.4 5.6-12.9C43.4.5 57 4.1 52 15.9c.3.1 1 .3 1 .6.3 1-.9 3.3-1.5 4.3-1.1 5.3-4.3 9.7-9.2 9.8-5.1 0-8.1-5.5-9.4-10.5zm-3.3 40.7L27 59.2c-1.1.7-2.4 1.5-5.1 2.1l-.7 3h-4.4l-.7-3c-2.3-.5-3.4-1.1-5.1-2.1l-2.6 1.6-3.1-3.1 1.6-2.6C5.7 53.2 5.2 52 4.7 50l-3-.7v-4.4l3-.7c.3-1.4.7-2.9 2.1-5.2l-1.6-2.6 3.1-3.1 2.6 1.6c1.1-.7 2.4-1.5 5.1-2.1l.7-3h4.4l.7 3c2.3.5 3.4 1.1 5.1 2.1l2.6-1.6 3.1 3.1-1.5 2.6c1.2 1.9 1.6 3.1 2.1 5.1l3 .7v4.4l-3 .7c-.3 1.2-.6 2.8-2.1 5.1l1.6 2.6-3.1 3.2zM63 54.1c-1 1.2-2.4 1.8-4 1.8H33.4l-.5-.9c.7-1.2 1.2-2.5 1.6-3.8l3.3-.8v-6.8l-3.3-.8c-.4-1.3-.9-2.6-1.6-3.8l1.8-2.8-4-4c1.8-1.1 3.8-1.9 6-2.4 1.7 1.5 3.8 2.4 6.2 2.2 2.7-.2 4.4-1.2 5.7-2.4 7.6 1.1 13.7 7.1 14.9 14.8l.8 5.4c.2 1.6-.3 3.1-1.3 4.3z" class="color000100 svgShape"></path></svg>

src/assets/images/icons/dashboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="dashboard"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M4 13h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zm0 8h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm10 0h6c.55 0 1-.45 1-1v-8c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1zM13 4v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1z" 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/icons/family.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 32 32" id="Family"><path d="M26.305 22.723a4.972 4.972 0 0 0-3.176-8.71 9.917 9.917 0 0 0-3.438-2.292 6 6 0 1 0-7.382 0 9.917 9.917 0 0 0-3.438 2.292 4.972 4.972 0 0 0-3.171 8.71A8.005 8.005 0 0 0 1 30a1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 6 6 0 0 1 12 0 1 1 0 0 0 2 0 8.005 8.005 0 0 0-4.695-7.277ZM26 19a3 3 0 1 1-3-3 3 3 0 0 1 3 3ZM12 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4ZM6 19a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm10 7.136a8.04 8.04 0 0 0-3.695-3.413 4.949 4.949 0 0 0-1.05-8.16 7.984 7.984 0 0 1 9.49 0 4.949 4.949 0 0 0-1.05 8.16A8.04 8.04 0 0 0 16 26.136Z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/logout.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Logout"><path d="M4,12a1,1,0,0,0,1,1h7.59l-2.3,2.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l4-4a1,1,0,0,0,.21-.33,1,1,0,0,0,0-.76,1,1,0,0,0-.21-.33l-4-4a1,1,0,1,0-1.42,1.42L12.59,11H5A1,1,0,0,0,4,12ZM17,2H7A3,3,0,0,0,4,5V8A1,1,0,0,0,6,8V5A1,1,0,0,1,7,4H17a1,1,0,0,1,1,1V19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V16a1,1,0,0,0-2,0v3a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V5A3,3,0,0,0,17,2Z" fill="#e07c8a" class="color000000 svgShape"></path></svg>

src/assets/images/icons/market.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="FindJobs"><path d="M499.22 437.51 433.68 372a23.19 23.19 0 0 0-26.63-4.41l-22.18-22.18A214.71 214.71 0 0 0 62.78 62.78a214.72 214.72 0 0 0 282.6 322.09l22.18 22.18a23.19 23.19 0 0 0 4.44 26.63l65.54 65.54a43.64 43.64 0 0 0 61.71-61.71ZM341.29 369l-.2.18A199.71 199.71 0 0 1 73.39 73.39a199.71 199.71 0 0 1 295.76 267.67l-.22.26q-6.18 7.5-13.14 14.47T341.29 369Zm15.71 6.26c3.21-2.86 6.36-5.8 9.42-8.86s6-6.21 8.86-9.42l20.29 20.3-18.27 18.27Zm131.61 113.35a28.65 28.65 0 0 1-40.49 0l-65.54-65.54a8.22 8.22 0 0 1 0-11.61l28.88-28.88a8.22 8.22 0 0 1 11.61 0l65.54 65.54a28.65 28.65 0 0 1 0 40.49ZM296.08 161h-31v-11.53A21.13 21.13 0 0 0 244 128.36h-58.8a21.13 21.13 0 0 0-21.11 21.11V161h-31a19.82 19.82 0 0 0-19.81 19.81V281a19.83 19.83 0 0 0 19.81 19.82h163A19.84 19.84 0 0 0 315.9 281V180.81A19.83 19.83 0 0 0 296.08 161Zm-117-11.53a6.12 6.12 0 0 1 6.11-6.11H244a6.12 6.12 0 0 1 6.11 6.11V161h-71ZM300.9 281a4.82 4.82 0 0 1-4.82 4.82h-163a4.82 4.82 0 0 1-4.81-4.82v-63.6l63.8 27.77v4.88a14.52 14.52 0 0 0 14.5 14.5h16a14.52 14.52 0 0 0 14.5-14.5v-4.88l63.83-27.77Zm-93.81-31.45v-15h15v15ZM300.9 201l-64.67 28.14a14.5 14.5 0 0 0-13.64-9.63h-16a14.52 14.52 0 0 0-13.59 9.67L128.29 201v-20.19a4.82 4.82 0 0 1 4.81-4.81h163a4.82 4.82 0 0 1 4.82 4.81Zm36.89-109.61c-67.93-67.93-178.47-67.93-246.4 0a174.23 174.23 0 0 0 246.4 246.4 174.23 174.23 0 0 0 0-246.4Zm-10.6 235.8a159.25 159.25 0 1 1 46.63-112.6 158.76 158.76 0 0 1-46.63 112.6Z" fill="#4687ba" class="color000000 svgShape"></path></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 9362 9362" id="jobsact"><path d="M8967 8103l-423 0 0 -856 423 0c181,0 329,193 329,428l0 0c0,235 -148,428 -329,428zm-4636 0l4066 0 0 -856 -4066 0 0 856zm-139 0l-738 -327 -268 0c-43,0 -138,-45 -138,-101 0,-56 95,-101 138,-101l268 0 738 -327 0 428 0 428zm-3982 -8103l6388 0 210 0 0 210 0 809 -420 0 0 -600 -5969 0 0 8523 5969 0 0 -551 420 0 0 761 0 210 -210 0 -6388 0 -210 0 0 -210 0 -8942 0 -210 210 0zm6598 6523l0 436 -420 0 0 -436 420 0zm2554 -3158l0 2557c0,175 -143,317 -317,317l-5224 0c-174,0 -317,-142 -317,-317l0 -2557 2486 0 0 491c0,244 199,443 443,443 244,0 443,-199 443,-443l0 -491 2486 0zm-3843 -2062l1827 0c121,0 219,98 219,219l0 626 -340 0 0 -506 -1585 0 0 506 -340 0 0 -626c0,-121 99,-219 219,-219zm-1698 1011l5224 0c174,0 317,143 317,317l0 568 -2650 0 0 657c0,154 -126,279 -279,279l0 0c-154,0 -280,-125 -280,-279l0 -657 -2649 0 0 -568c0,-174 143,-317 317,-317zm2612 1387c74,0 134,60 134,134 0,74 -60,134 -134,134 -74,0 -134,-60 -134,-134 0,-74 60,-134 134,-134zm-4430 -2741l2801 0 0 420 -2801 0 0 -420zm-806 4786l2023 0 0 176c0,87 19,170 52,244l-2075 0 0 -420zm0 -3657l2366 0c-167,80 -292,235 -330,421l-2036 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 914l2023 0 0 421 -2023 0 0 -421zm0 915l2023 0 0 420 -2023 0 0 -420zm0 1828l1371 0 0 421 -1371 0 0 -421z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/icons/profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" id="Profile"><path fill="#ffffff" d="M108 124H20c-8.8 0-16-7.2-16-16V20c0-8.8 7.2-16 16-16h88c8.8 0 16 7.2 16 16v88c0 8.8-7.2 16-16 16z" class="colorffffff svgShape"></path><path fill="#d2d4d6" d="M4 18.1v21.2h120V18.1c0-7.8-6.3-14.1-14.1-14.1H18.1C10.3 4 4 10.3 4 18.1z" class="colord2d5d6 svgShape"></path><circle cx="20.5" cy="21.1" r="7.1" fill="#7bbaec" class="colorec7bb0 svgShape"></circle><circle cx="59.5" cy="21.1" r="7.1" fill="#4687ba" class="color82cfcd svgShape"></circle><path fill="#57636d" d="M59.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1z" class="color6a576d svgShape"></path><circle cx="40" cy="21.1" r="7.1" fill="#7bbdf1" class="colorf1ed7b svgShape"></circle><path fill="#57636d" d="M20.5 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.7-6.1-6.1-6.1zm39 14.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1 4.4 0 8.1 3.6 8.1 8.1-.1 4.5-3.7 8.1-8.1 8.1zm0-14.1c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1-2.8-6.1-6.1-6.1zM40 29.1c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1s8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zM40 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1 6.1-2.7 6.1-6.1S43.3 15 40 15zM4 38.3h120v2H4zM108 104.3H20c-.6 0-1-.4-1-1s.4-1 1-1h88c.6 0 1 .4 1 1s-.4 1-1 1zm-48-48H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H20c-.6 0-1-.4-1-1s.4-1 1-1h40c.6 0 1 .4 1 1s-.4 1-1 1z" class="color6a576d svgShape"></path><path fill="#57636d" d="M108 125H20c-9.4 0-17-7.6-17-17V20c0-9.4 7.6-17 17-17h88c9.4 0 17 7.6 17 17v88c0 9.4-7.6 17-17 17zM20 5C11.7 5 5 11.7 5 20v88c0 8.3 6.7 15 15 15h88c8.3 0 15-6.7 15-15V20c0-8.3-6.7-15-15-15H20z" class="color6a576d svgShape"></path><path fill="#ffffff" d="M108.9 28.1H79.6c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1h29.3c3.9 0 7.1 3.2 7.1 7.1 0 4-3.2 7.1-7.1 7.1z" class="colorffffff svgShape"></path><path fill="#57636d" d="M108.9 29.1H79.6c-4.4 0-8.1-3.6-8.1-8.1 0-4.4 3.6-8.1 8.1-8.1h29.3c4.4 0 8.1 3.6 8.1 8.1s-3.6 8.1-8.1 8.1zM79.6 15c-3.3 0-6.1 2.7-6.1 6.1s2.7 6.1 6.1 6.1h29.3c3.3 0 6.1-2.7 6.1-6.1s-2.7-6.1-6.1-6.1H79.6z" class="color6a576d svgShape"></path><path fill="#5587af" d="M76 55.3h32v32H76z" class="coloraf5655 svgShape"></path><path fill="#57636d" d="M104.8 88.3H79.2c-2.3 0-4.2-1.9-4.2-4.2V58.5c0-2.3 1.9-4.2 4.2-4.2h25.6c2.3 0 4.2 1.9 4.2 4.2v25.6c0 2.3-1.9 4.2-4.2 4.2zm-25.6-32c-1.2 0-2.2 1-2.2 2.2v25.6c0 1.2 1 2.2 2.2 2.2h25.6c1.2 0 2.2-1 2.2-2.2V58.5c0-1.2-1-2.2-2.2-2.2H79.2z" class="color6a576d 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/ActiveBids/AllBidsSection.jsx

@@ -12,7 +12,7 @@ export default function AllBidsSection({ className, allBids = [] }) {
         </div>
         <div className="w-full">
           <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
-            <DataIteration datas={allBids} startLength={0} endLength={8}>
+            <DataIteration datas={allBids} startLength={process.env.REACT_APP_ZERO_STATE} endLength={8}>
               {({ datas }) => (
                 <div key={datas.id} className="item">
                   <ProductCardStyleOne datas={datas} />

src/components/AddJob/AddJob.jsx

@@ -0,0 +1,421 @@
+import { Field, Form, Formik } from "formik";
+import React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import * as Yup from "yup";
+import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const validationSchema = Yup.object().shape({
+  country: Yup.string()
+    .min(1, "Minimum 3 characters")
+    .max(25, "Maximum 25 characters")
+    .required("Country is required"),
+  price: Yup.string()
+    .typeError("Invalid number")
+    .min(1, "Price must be greater than 0")
+    .test("no-e", "Invalid number", (value) => {
+      if (value && /\d+e/.test(value)) {
+        return false;
+      }
+      return true;
+    })
+    .required("Price is required"),
+  title: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(149, "Maximum 149 characters")
+    .required("Title is required"),
+  description: Yup.string()
+    .min(5, "Minimum 5 characters")
+    .max(299, "Maximum 299 characters")
+    .required("Description is required"),
+  job_detail: Yup.string()
+    .min(3, "Minimum 3 characters")
+    .max(1440, "Maximum 1440 characters")
+    .required("Details is required"),
+  timeline_days: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Price must be greater than 0")
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});
+
+function AddJob({ popUpHandler, categories }) {
+  const ApiCall = new usersService();
+
+  let dispatch = useDispatch();
+
+  let [currency, setCurrency] = useState({
+    loading: true,
+    status: false,
+    data: null,
+  }); // To Hold the array of currency getUserCurrency returns
+
+  let initialValues = {
+    // initial values for formik
+    country: "",
+    price: "",
+    title: "",
+    description: "",
+    job_detail: "",
+    timeline_days: "",
+    category: [],
+  };
+
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // Holds state when submit button is pressed
+
+  // FUNCTION TO GET Currency
+  const getUserCurrency = () => {
+    setCurrency((prev) => ({ ...prev, loading: true }));
+    ApiCall.getUserWallets()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setCurrency({ loading: false, status: true, data: [] });
+          return;
+        }
+
+        setCurrency({
+          loading: false,
+          status: true,
+          data: res.data.result_list,
+        });
+      })
+      .catch((err) => {
+        setCurrency({ loading: false, status: false, data: [] });
+      });
+  };
+
+  // FUNCTION TO HANDLE ADD JOB FORM
+  const handleAddJob = (values, helpers) => {
+    let reqData = {
+      country: values?.country,
+      price: Number(values.price) * 100,
+      title: values?.title,
+      description: values?.description,
+      job_detail: values?.job_detail,
+      timeline_days: values?.timeline_days,
+      category: values.category?.join("@"),
+    };
+
+    setRequestStatus({ loading: true, status: false, message: "" });
+    ApiCall.jobManagerCreateJob(reqData)
+      .then((res) => {
+        if (res.data.internal_return < 1) {
+          setRequestStatus({
+            loading: false,
+            status: false,
+            message: "Could not complete your request at the moment",
+          });
+          setTimeout(() => {
+            popUpHandler();
+          }, 1500);
+          return;
+        }
+        setRequestStatus({
+          loading: false,
+          status: true,
+          message: "Job Added Successfully",
+        });
+        setTimeout(() => {
+          dispatch(tableReload({ type: "JOBTABLE" }));
+          popUpHandler();
+        }, 1000);
+      })
+      .catch((err) => {
+        setRequestStatus({
+          loading: false,
+          status: false,
+          message: "Opps! something went wrong. Try Again",
+        });
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setRequestStatus({ loading: false, status: false, message: "" });
+        }, 5000);
+      });
+  };
+
+  useEffect(() => {
+    getUserCurrency();
+  }, []);
+
+  return (
+    <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleAddJob}
+      >
+        {(props) => {
+          return (
+            <Form>
+              <div className="flex flex-col-reverse sm:flex-row">
+                <div className="fields w-full">
+                  {/* inputs starts here */}
+                  <div className="xl:flex xl:space-x-7 mb-[5px]">
+                    <div className="field w-full mb-6 xl:mb-0">
+                      <label
+                        htmlFor="country"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
+                      >
+                        Currency
+                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
+                      </label>
+                      <select
+                        id="country"
+                        name="country"
+                        value={props.values.country}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                      >
+                        {currency.loading ? (
+                          <option className="text-slate-500 text-lg" value="">
+                            Loading...
+                          </option>
+                        ) : currency.data.length ? (
+                          <>
+                            <option className="text-slate-500 text-lg" value="">
+                              Select a currency
+                            </option>
+                            {currency.data?.map((item, index) => (
+                              <option
+                                key={index}
+                                className="text-slate-500 text-lg"
+                                value={item?.country}
+                              >
+                                {item?.description}
+                              </option>
+                            ))}
+                          </>
+                        ) : (
+                          <option className="text-slate-500 text-lg" value="">
+                            No Options Found! Try Again
+                          </option>
+                        )}
+                      </select>
+                    </div>
+
+                    {/* Price */}
+                    <div className="field w-full">
+                      <InputCom
+                        fieldClass="px-6 text-right"
+                        label="Price"
+                        labelClass="tracking-wide"
+                        inputBg="bg-slate-100"
+                        type="number"
+                        name="price"
+                        placeholder="0"
+                        value={props.values.price}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                        error={props.errors.price && props.touched.price && props.errors.price}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Title  */}
+                  <div className="field w-full mb-[5px]">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Title"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      type="text"
+                      name="title"
+                      value={props.values.title}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                      error={props.errors.title && props.touched.title && props.errors.title}
+                    />
+                  </div>
+
+                  {/* Description  */}
+                  <div className="field w-full mb-[5px]">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Description"
+                      labelClass="tracking-wide"
+                      inputBg="bg-slate-100"
+                      type="text"
+                      name="description"
+                      value={props.values.description}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                      error={props.errors.description && props.touched.description && props.errors.description}
+                    />
+                  </div>
+
+                  {/* Details */}
+                  <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
+                    <div className="sm:w-[60%] w-full">
+                      <label
+                        htmlFor="Job Delivery Details"
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
+                      >
+                        Job Delivery Details
+                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
+                      </label>
+                      <textarea
+                        id="Job Delivery Details"
+                        rows="5"
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
+                        style={{ resize: "none" }}
+                        name="job_detail"
+                        value={props.values.job_detail}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                      />
+                    </div>
+
+                    <div className="sm:w-[35%] w-full">
+                      <div
+                        htmlFor="Job Categories"
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        id="checked-group"
+                      >
+                        Categories
+                      </div>
+                      <div
+                        className="sm:flex-col flex flex-wrap px-3 mt-3"
+                        role="group"
+                        aria-labelledby="checked-group"
+                      >
+                        {Object?.entries(categories).map(([key, value]) => (
+                          <label
+                            key={key}
+                            className="flex gap-1 w-full items-center"
+                          >
+                            <Field
+                              type="checkbox"
+                              name="category"
+                              value={key}
+                            />
+                            <span className="text-[13.975px]">{value}</span>
+                          </label>
+                        ))}
+                        <span className="h-5 text-sm italic text-[#cf3917]">
+                          {props.errors.category &&
+                            props.touched.category &&
+                            "please select a category"}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="field w-full mb-[5px]">
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
+                      name="timeline_days"
+                      className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
+                        props.errors.timeline_days &&
+                        props.touched.timeline_days
+                          ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
+                          : "border border-[#f5f8fa] dark:border-[#5e6278]"
+                      }`}
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
+                  </div>
+                  {/* inputs ends here */}
+                </div>
+              </div>
+
+              {/* ERROR DISPLAY AND SUBMIT BUTTON */}
+              <div className="content-footer w-full">
+                {/* error or success display */}
+                {requestStatus.message != "" &&
+                  (!requestStatus.status ? (
+                    <div
+                      className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                    >
+                      {requestStatus.message}
+                    </div>
+                  ) : (
+                    requestStatus.status && (
+                      <div
+                        className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                      >
+                        {requestStatus.message}
+                      </div>
+                    )
+                  ))}
+                {/* End of error or success display */}
+
+                <div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                  <div className="flex items-center space-x-4 mr-9">
+                    <button
+                      type="button"
+                      className="text-18 text-light-red tracking-wide "
+                    >
+                      <span
+                        className="border-b dark:border-[#5356fb29]  border-light-red"
+                        onClick={popUpHandler}
+                      >
+                        {" "}
+                        Cancel
+                      </span>
+                    </button>
+
+                    {requestStatus.loading ? (
+                      <LoadingSpinner size="8" color="sky-blue" />
+                    ) : (
+                      <button
+                        type="submit"
+                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                        // className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
+                      >
+                        Add Job
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}
+
+export default AddJob;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/AuthPages/AuthLayout.jsx

@@ -1,24 +1,50 @@
 import React from "react";
-import loginThumb from "../../assets/images/auth-thumb.svg";
-import logo from "../../assets/images/wrenchboard.png"; //logo-1.svg";
+import { Link } from "react-router-dom";
 
 export default function LoginLayout({ slogan, children }) {
-  const checkScreenHeight = window.screen.height;
-  let screen = "";
-  if (checkScreenHeight <= 950) {
-    screen = "h-screen";
-    // screen = "h-[950px]";
-  } else {
-    screen = "h-screen";
-  }
   return (
-    <div className="layout-wrapper login">
-      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
-        <div className="flex w-full h-full">
-
+    <div className={`layout-wrapper login`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:px-20 sm:py-5`}>
+        <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}
           </div>
+          <div className="flex-1 flex justify-center items-center px-10 pt-10">
+            <div className="flex items-center">
+            <a
+                  href="https://www.wrenchboard.com/about-us"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  About
+                </a>
+                <a
+                  href="https://www.wrenchboard.com/service"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Services
+                </a>
+                <a
+                  href="https://www.wrenchboard.com/contact"
+                  className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  Contact Us
+                </a>
+            </div>
+          </div>
+          <div className="flex-1 flex justify-center items-center px-10 py-1">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
+              <span className="">&copy; {new Date().getFullYear()} -</span>
+              <Link to="/" className="text-[#009ef7] ml-1">
+                WrenchBoard
+              </Link>{" "}
+            </p>
+          </div>
         </div>
       </div>
     </div>

src/components/AuthPages/AuthProfile/CollectionTab.jsx

@@ -42,8 +42,8 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <CollectionCard key={datas.uniqKey} collectionData={datas} />

src/components/AuthPages/AuthProfile/CreateSaleSlider.jsx

@@ -42,7 +42,9 @@ export default function CreateSaleSlider({
       {/* heading */}
       <div className="flex justify-between items-center mb-6">
         <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Sell</h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+            Create for Sell
+          </h1>
         </div>
         <div className="slider-btns flex space-x-4">
           <button onClick={nextHandler} type="button">
@@ -89,7 +91,7 @@ export default function CreateSaleSlider({
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
           {products &&
-            products.length > 0 &&
+            products?.length > 0 &&
             products.map((item) => (
               <ProductCardStyleTwo
                 key={item.id}

src/components/AuthPages/AuthProfile/CreatedBidsSlider.jsx

@@ -49,7 +49,9 @@ export default function CreatedBidsSlider({
       {/* heading */}
       <div className="flex justify-between items-center mb-6">
         <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Bits</h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+            Create for Bits
+          </h1>
         </div>
         <div className="slider-btns flex space-x-4">
           <button onClick={nextHandler} type="button">
@@ -96,7 +98,7 @@ export default function CreatedBidsSlider({
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
           {products &&
-            products.length > 0 &&
+            products?.length > 0 &&
             products.map((item) => (
               <ProductCardStyleOne
                 key={item.id}

src/components/AuthPages/AuthProfile/OnSaleTab.jsx

@@ -42,8 +42,8 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleTwo key={datas.id} datas={datas} />

src/components/AuthPages/AuthProfile/OwnTab.jsx

@@ -42,8 +42,8 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleOne key={datas.id} datas={datas} />

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

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function Redirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {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
+          }
+          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 Redirect

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from 'react-router-dom';
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-import usersService from "../../../services/UsersService";
 
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false)
+  const [resetLoading, setResetLoading] = useState(false);
   // email
   const [email, setMail] = useState("");
-  const [msgError, setMsgError] = useState('');
+  const [msgError, setMsgError] = useState("");
+  const [msgSuccess, setMsgSuccess] = useState(false);
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -24,71 +25,66 @@ export default function ForgotPassword() {
   };
 
   const resetHandler = async () => {
-    if (email == '') {
-      setMsgError('An email is required')
+    if (email == "") {
+      setMsgError("An email is required");
     } else if (!checked) {
-      setMsgError('Check if you are human')
+      setMsgError("Check if you are human");
     }
 
-    if (email != '' && checked) {
-      const reqData = { email }
-      setResetLoading(true)
+    if (email !== "" && checked) {
+      const reqData = { email };
+      setResetLoading(true);
       try {
-        const res = await userApi.StartResetPassword(reqData)
+        const res = await userApi.StartResetPassword(reqData);
         if (res.status === 200) {
-          const { data } = res
-          if (data.status == -1) {
-            setMsgError('This is an incorrect or duplicate email')
-            setResetLoading(false)
-          } else if (data.status > 0) {
-            setResetLoading(false)
-            navigate("/verify-you", { replace: true })
-          } else{
-            setMsgError("reset was not successful")
-            setResetLoading(false)
-          }
-          setMail("")
+          setMsgSuccess(true);
+          setMail("");
+          setValue(false);
+          setResetLoading(false);
         }
       } catch (error) {
-        setResetLoading(false)
-        setMail("")
-        setMsgError('An error occurred')
-        throw new Error(error)
+        setResetLoading(false);
+        setMail("");
+        setMsgError("An error occurred");
+        throw new Error(error);
       } finally {
         setTimeout(() => {
-          setMsgError(null)
-        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
+          setMsgError(null);
+        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
       }
     }
     setTimeout(() => {
-      setMsgError(null)
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
-  }
+      setMsgError(null);
+    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+  };
 
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
+      <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className='mb-12'>
-            <Link to='#'>
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
             </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="flex flex-col justify-center w-full h-full px-5">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Forget Password
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Enter your email to reset your password.
+                </span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-10">
                   <InputCom
+                    fieldClass="px-6"
                     placeholder="Your Username/Email"
                     label="Email"
                     name="email"
@@ -98,7 +94,6 @@ export default function ForgotPassword() {
                     iconName="message"
                   />
                 </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]">{msgError}</div>}
                 {/* hCaptha clone for the time being */}
                 <div className="mb-10">
                   <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -108,7 +103,14 @@ export default function ForgotPassword() {
                         <div className="relative table top-0 h-full">
                           <div className="table-cell align-middle">
                             <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
+                              <input
+                                type="checkbox"
+                                name="human-checkbox"
+                                id="human-checkbox"
+                                className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white"
+                                checked={checked}
+                                onChange={humanChecker}
+                              />
                             </div>
                           </div>
                         </div>
@@ -116,7 +118,10 @@ export default function ForgotPassword() {
                       <div className="h-full relative inline-block w-[170px]">
                         <label className="relative table top-0 h-full">
                           <label className="table-cell align-middle">
-                            <label className="text-800 text-sm" htmlFor="human-checkbox">
+                            <label
+                              className="text-800 text-sm"
+                              htmlFor="human-checkbox"
+                            >
                               I am human
                             </label>
                           </label>
@@ -126,12 +131,31 @@ export default function ForgotPassword() {
                     </div>
                   </div>
                 </div>
+                {msgError && (
+                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                    {msgError}
+                  </div>
+                )}
+                {msgSuccess && (
+                  <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                    If we find your email, you will receive a link to reset your
+                    password. Please use or{" "}
+                    <Link
+                      to="/contact"
+                      className="text-[#4687ba] hover:text-[#009ef7]"
+                    >
+                      contact form
+                    </Link>{" "}
+                    if you did not get our message after few minutes.
+                  </div>
+                )}
+
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center items-center gap-2">
                     <button
                       type="button"
                       onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                     >
                       {resetLoading ? (
                         <div className="signup btn-loader"></div>
@@ -142,7 +166,7 @@ export default function ForgotPassword() {
                     <button
                       type="button"
                       onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                     >
                       Cancel
                     </button>

src/components/AuthPages/Login/index.jsx

@@ -1,27 +1,54 @@
-import React, { useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import googleLogo from "../../../assets/images/google-logo.svg";
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import { Link, useNavigate, useLocation } 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 WrenchBoard from "../../../assets/images/wrenchboard.png"
+import googleLogo from "../../../assets/images/google-logo.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard.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 { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function Login() {
+  const dispatch = useDispatch();
+  const {state} = useLocation()
+
+  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 [msgError, setMsgError] = useState("");
 
   const rememberMe = () => {
     setValue(!checked);
   };
 
+   // To Show and Hide Password
+   const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    setLoginType(name);
+    let currentDate = new Date();
+    let expirationDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
+    // Convert the expiration date to the appropriate format
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
+  };
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -35,165 +62,370 @@ export default function Login() {
   const navigate = useNavigate();
   const userApi = new usersService();
 
-
-  const doLogin = async () => {
-    if (email == '' && password == '') {
-      setMsgError('Please fill in fields')
+  // FUNCTION TO HANDLE USER LOGIN
+  const doLogin = ({ target: { name } }) => {
+    setMsgError("");
+    setLoginError(false);
+    setLoginLoading(true);
+    let postData; // Post Data for API
+    if (!email || !password) {
+      setLoginLoading(false);
+      setMsgError("Please fill all the fields");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
     }
-    try {
-      if (email !== "" && password !== "") {
-        var postData = {
-          username: email,
-          password: password,
-          sessionid: 'STARTING'
-        };
-        const loginResult = await userApi.logInUser(postData);  // just for a test
-        //debugger;
-        // if (email === "support@mermsemr.com") {
-        if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
-          localStorage.setItem("email", `${loginResult.data.email}`);
-          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
-          localStorage.setItem("uid", `${loginResult.data.uid}`);
-          localStorage.setItem("session_token", `${loginResult.data.session}`);
-          localStorage.setItem("added", `${loginResult.data.added}`);
-          localStorage.setItem("city", `${loginResult.data.city}`);
-          localStorage.setItem("country", `${loginResult.data.country}`);
-          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
-          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
-          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
-          localStorage.setItem("state", `${loginResult.data.state}`);
-          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
-          localStorage.setItem("session", `${loginResult.data.session}`);
-          setLoginLoading(true);
-          // userApi.getUserReminders(); //testing
-          setTimeout(() => {
-            toast.success("Login Successfully");
-            navigate("/", { replace: true });
-            setLoginLoading(false);
-          }, 2000);
-        } else {
-          // toast.error("Invalid Credential");
-          setLoginError(true)
+
+    if (name == "full") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (regEx.test(email) == false) {
+        setLoginLoading(false);
+        setMsgError("Invalid Email");
+        return setTimeout(()=>{setMsgError("");},3000)
+      }
+      // Post Data Info for normal Login
+      postData = {
+        username: email,
+        password: password,
+        sessionid: "STARTING",
+        login_mode: 1100,
+        action: 11025,
+      };
+    } else if (name == "family") {
+      // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105,
+        action: 11025,
+      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    userApi
+      .logInUser(postData)
+      .then((res) => {
+        if (res.status != 200 || res.data.internal_return < 0 || !res.data.member_id || !res.data.uid || !res.data.session) {
+          // setMsgError("Wrong, email/password");
+          setLoginError(true);
+          setLoginLoading(false);
+          return;
+        }
+        localStorage.setItem("member_id", `${res.data.member_id}`);
+        localStorage.setItem("uid", `${res.data.uid}`);
+        localStorage.setItem("session_token", `${res.data.session}`);
+        // localStorage.setItem("session", `${res.data.session}`);
+        dispatch(updateUserDetails({...res.data}));
+        setTimeout(() => {
+          navigate("/", { replace: true });
+          setLoginLoading(false);
+        }, 2000);
+      })
+      .catch((error) => {
+        setMsgError("Unable to login, try again");
+        setLoginLoading(false);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setLoginError(false);
+          setMsgError("");
+          setLoginLoading(false);
+        }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      });
+  };
+
+  const googleLogin = useGoogleLogin({
+    flow: "auth-code",
+    ux_mode: "redirect",
+    redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+    onSuccess: async (codeResponse) => {
+      console.log("GOOGLE LOGIN GOOD --- ", codeResponse);
+    },
+    onError: (errorResponse) => console.log(errorResponse),
+  });
+
+  // In order to update the selected login type whenever the component renders
+  // useEffect(() => {
+      // Clear the loginType cookie if the user switches to loginfull
+      // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+  // }, []);
+
+  useLayoutEffect(()=>{ // checks the cookie in order to set the login type before components mounts
+    // if(document.cookie.includes("loginType=family")){
+    //   setLoginType('family')
+    // }else if(document.cookie.includes("loginType=full")){
+    //   setLoginType('full')
+    // }else{
+    //   setLoginType('full')
+    // }
+    function readCookie(cname) { // checks the cookie in order to set the login type before components mounts
+      let name = cname + "=";
+      let decoded_cookie = decodeURIComponent(document.cookie);
+      let carr = decoded_cookie.split(';');
+      for(let i=0; i<carr.length;i++){
+        let c = carr[i];
+        while(c.charAt(0)==' '){
+            c=c.substring(1);
+        }
+        if(c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
         }
       }
-    } catch (error) {
-      setMsgError('An error occurred')
-    } finally {
-      setTimeout(() => {
-        setLoginError(false)
-        setMsgError(null)
-      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
+      return 'full'
     }
-  };
+    let loginValue = readCookie('loginType')
+    setLoginType(loginValue)
+
+    if(state?.error){ //check if the login path has an error state indicating any social handle login with error
+      setMsgError("Unexpected Error, Please try again soon.");
+      setTimeout(()=>{
+        setMsgError("");
+        navigate('/login', {replace: true})
+      },4000)
+    }
+  },[])
+  
+
+  useEffect(() => {
+    setMail("");
+    setPassword("");
+  }, [loginType]);
 
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
+      <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className='mb-12'>
-            <Link to='#'>
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-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" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
-                </h1>
-                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
+                </h1> */}
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  New Here?{" "}
+                  <Link
+                    to="/signup"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Create an Account
+                  </Link>
+                </span>
               </div>
-              <div className="input-area">
-                <div className="input-item mb-5">
-                  <InputCom
-                    value={email}
-                    inputHandler={handleEmail}
-                    placeholder="support@mermsemr.com"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    iconName="message"
-                  />
-                </div>
-                <div className="input-item mb-5">
-                  <InputCom
-                    value={password}
-                    inputHandler={handlePassword}
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    name="password"
-                    type="password"
-                    iconName="password"
-                    forgotPassword
-                  />
-                </div>
-                {/* <div className="forgot-password-area flex justify-between items-center mb-7">
-                <div className="remember-checkbox flex items-center space-x-2.5">
-                  <button
-                    onClick={rememberMe}
-                    type="button"
-                    className="w-5 h-5 text-dark-gray dark:text-white flex justify-center items-center border border-light-gray"
-                  >
-                    {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>
+
+              {/* switch login component */}
+              <div className="ml-7 flex justify-start items-center gap-3">
+                <button
+                  name="full"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType=='full' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType=='family' ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family Account
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType == 'full' ? (
+                  //user login component
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Your Email"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Password"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
+                        forgotPassword
+                      />
+                    </div>
+                    {loginError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                        Invalid username or password- Please{" "}
+                        <Link to="/#" className="text-[#009ef7]">
+                          reset your password
+                        </Link>{" "}
+                        or{" "}
+                        <Link to="/signup" className="text-[#009ef7]">
+                          create a new account
+                        </Link>
+                      </div>
                     )}
-                  </button>
-                  <span
-                    onClick={rememberMe}
-                    className="text-base text-dark-gray dark:text-white"
-                  >
-                    Remember Me
-                  </span>
-                </div>
-                <a href="/forgot-password" className="text-base text-purple">
-                  Forgot Password
-                </a>
-              </div> */}
-                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
-                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center">
-                    <button
-                      onClick={doLogin}
-                      type="button"
-                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
-                        }`}
-                    >
-                      {loginLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Continue</span>
-                      )}
-                    </button>
+                    {msgError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                        {msgError}
+                      </div>
+                    )}
+                    <div className="signin-area mb-3.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="full"
+                          onClick={doLogin}
+                          type="button"
+                          disabled={loginLoading}
+                          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                        >
+                          {loginLoading ? (
+                            <div className="signup btn-loader"></div>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                      <BrandBtn
+                        link="#"
+                        imgSrc={googleLogo}
+                        brand="Google"
+                        onClick={googleLogin}
+                      />
+                      <BrandBtn 
+                        // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`} 
+                        link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`} 
+                        imgSrc={appleLogo} 
+                        brand="Apple" 
+                        isAnchor={true}
+                      />
+                      </div>
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                      <BrandBtn
+                        link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
+                        imgSrc={facebookLogo}
+                        brand="Facebook"
+                        isAnchor={true}
+                      />
+                      <BrandBtn
+                        // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
+                        imgSrc={linkedInLogo}
+                        brand="LinkedIn"
+                        isAnchor={true}
+                      />
+                      </div>
+                    </div>
                   </div>
-                  <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
-                  <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
-                  <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
-                </div>
-                {/* <div className="signup-area flex justify-center">
-                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
-                  Don't have an account ?
-                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
-                    Sign up free
-                  </a>
-                </p>
-              </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                ) : (
+                  // END of user login compoenent
+                  // family login compoenent
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Account ID"
+                        label="Username"
+                        name="email"
+                        type="email"
+                        iconName="family-id"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="px-6"
+                        value={password}
+                        inputHandler={handlePassword}
+                        placeholder="● ● ● ● ● ●"
+                        label="Pin"
+                        name="password"
+                        type={showPassword ? "text" : "password"}
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
+                      />
+                    </div>
+                    {loginError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                        Invalid username or password{" "}
+                        {/* <Link to="/#" className="text-[#009ef7]">
+                        reset your password
+                      </Link>{" "}
+                      or{" "}
+                      <Link to="/signup" className="text-[#009ef7]">
+                        create a new account
+                      </Link> */}
+                      </div>
+                    )}
+                    {msgError && (
+                      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                        {msgError}
+                      </div>
+                    )}
+                    <div className="signin-area mb-1.5">
+                      <div className="flex justify-center">
+                        <button
+                          name="family"
+                          onClick={doLogin}
+                          disabled={loginLoading}
+                          type="button"
+                          className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                        >
+                          {loginLoading ? (
+                            <div className="signup btn-loader"></div>
+                          ) : (
+                            <>Continue</>
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                )
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
+              <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>
@@ -203,22 +435,54 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({
-  link,
-  imgSrc,
-  brand
-}) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
+
+  //  onSuccess: (codeResponse) => setUser(codeResponse),
+
+  // const doGoogle = useGoogleLogin({
+  //   onSuccess: (codeResponse) =>  console.log('Login onSuccess:', codeResponse),
+  //   onError: (error) => console.log('Login Failed:', error)
+  // });
+
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
+
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
   return (
-    <div className="flex justify-center bottomMargin">
-      <a
+    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
+      {isAnchor ?
+      (
+        <a
         href={link}
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal">
-          Sign In with {brand}
+        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          Continue with {brand}
         </span>
       </a>
+      )
+      :
+      (
+        <button
+        onClick={onClick}
+        // href="#dd"
+        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+      >
+        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          Continue with {brand}
+        </span>
+      </button>
+      )
+    }
     </div>
   )
-}
+};
+

src/components/AuthPages/SignUp/index.jsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
-  const [signUpLoading, setSignUpLoading] = useState(false)
+  const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
-  const [msgError, setMsgError] = useState('');
+  const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [countries, setCountries] = useState([]);
 
@@ -18,7 +19,7 @@ export default function SignUp() {
     first_name: "",
     last_name: "",
     email: "",
-    password: ""
+    password: "",
   });
 
   const handleInputChange = (event) => {
@@ -37,32 +38,47 @@ export default function SignUp() {
 
   const navigate = useNavigate();
   const userApi = new usersService();
-  
+
   // Get Country Api
-  const getCountryList = async () => {
-    const res = await userApi.getSignupCountryData()
+  const getCountryList = useCallback(async () => {
+    const res = await userApi.getSignupCountryData();
 
     try {
       if (res.status === 200) {
-        const { signup_country } = await res.data
-        setCountries(signup_country)
-      } else if (res.data.result != 100) {
-        setCountries('Nothing see here!')
+        const { signup_country } = await res.data;
+        setCountries(signup_country);
+      } else if (res.data.result !== 100) {
+        setCountries("Nothing see here!");
       }
     } catch (error) {
-      throw new Error(error)
+      throw new Error(error);
     }
-  }
+  }, []);
 
   const handleSignUp = async () => {
-    let { country, first_name, last_name, email, password } = formData
-
-    if (email == '' && password == '' && first_name == '') {
-      setMsgError('Please fill in fields')
-    }
-
+    let { country, first_name, last_name, email, password } = formData;
     try {
-      if (email !== '' && password !== '' && first_name !== '' && last_name !== '') {
+      if (
+        email !== "" &&
+        password !== "" &&
+        first_name !== "" &&
+        last_name !== "" &&
+        country !== ""
+      ) {
+        //checks if email is a valid email address
+        let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+        if (regEx.test(email) == false) {
+          setMsgError("Invalid Email");
+          return setTimeout(()=>{setMsgError("");},3000)
+        }
+
+        //checks if terms and condition is checked
+        if (!checked) {
+          setMsgError("Terms and condition required");
+          return setTimeout(()=>{setMsgError("");},3000)
+        }
+
+        setSignUpLoading(true);
         const reqData = {
           country: country,
           firstname: first_name,
@@ -71,198 +87,198 @@ export default function SignUp() {
           username: email,
           password: password,
           terms: 1,
-          news: 1
-        }
+          news: 1,
+        };
 
-        const res = await userApi.CreateUser(reqData)
-        setSignUpLoading(true)
+        const res = await userApi.CreateUser(reqData);
 
         if (res.status === 200) {
-          const { data } = res
-          if (data.status == -1 && data.acc == 'DULPICATE') {
-            setMsgError('This account has been already created')
-            setSignUpLoading(false)
+          const { data } = res;
+          if (data && data.acc === "DULPICATE") {
+            setMsgError("Unable to use this username. Please try another username.");
+            setSignUpLoading(false);
           }
-          if (data.status > 0 && data.internal_return == 100 && data.session != '') {
-            localStorage.setItem("email", `${data.email}`);
-            localStorage.setItem("country", `${data.country}`);
-            localStorage.setItem("firstname", `${data.firstname}`);
-            localStorage.setItem("lastname", `${data.lastname}`);
-
+          if (data && data.status === "1") {
             setTimeout(() => {
-              navigate("/", { replace: true });
-              setSignUpLoading(false)
-            }, 2000)
-          } else {
-            setMsgError(data.status)
-            setSignUpLoading(false)
+              navigate("/outmessage", { replace: true });
+              setSignUpLoading(false);
+            }, 2000);
           }
+        } else {
+          setSignUpLoading(false);
+          setMsgError("An error occurred");
         }
       } else {
-        setMsgError('This account does not exist')
-        setSignUpLoading(false)
+        setMsgError("Please fill in fields");
       }
     } catch (error) {
-      throw new Error(error)
-      setMsgError('An error occurred')
+      throw new Error(error);
     } finally {
       setTimeout(() => {
-        setMsgError(null)
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
     }
-  }
+  };
 
   useEffect(() => {
-    getCountryList()
-  }, [])
+    getCountryList();
+  }, []);
 
   return (
     <>
-      <div className="layout-wrapper login">
-        <div className="main-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
-          <div className=" h-full">
-            <div className="flex-1 flex justify-center items-center">
-              <div className="w-full">
-                <div className='mb-12'>
-                  <Link to='#'>
-                    <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-5">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="content-wrapper login 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]">
+                  Create Account
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Already have an account?{" "}
+                  <Link
+                    to="/login"
+                    className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                  >
+                    Sign in here
                   </Link>
+                </span>
+              </div>
+              <div className="w-full flex items-center gap-2">
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+                <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">
+                  OR
+                </span>
+                <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
+              </div>
+              <div className="input-area">
+                <SelectOption
+                  label="Country"
+                  data={countries}
+                  name="country"
+                  value={formData.country}
+                  inputHandler={handleInputChange}
+                />
+                <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
+                  <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Firstname"
+                      label="First Name"
+                      name="first_name"
+                      type="text"
+                      value={formData.first_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
+                  <div className="input-item flex-1">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Lastname"
+                      label="Last Name"
+                      name="last_name"
+                      type="text"
+                      value={formData.last_name}
+                      inputHandler={handleInputChange}
+                    />
+                  </div>
                 </div>
-                <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] 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-7">
-                  <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" style={{
-                        fontSize: 'calc(1rem + .6vw)'
-                      }}>
-                        Create Account
-                      </h1>
-                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
-                    </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="support@mermsemr.com"
+                    label="Email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    fieldClass="px-6"
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    onClick={togglePasswordVisibility}
+                    passIcon={
+                      showPassword ? "show-password" : "hide-password"
+                    }
+                    value={formData.password}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                {msgError && (
+                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                    {msgError}
+                  </div>
+                )}
+                <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+                <div className="signin-area mb-1">
+                  <div className="flex justify-center">
                     <button
                       type="button"
-                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
+                      onClick={handleSignUp}
+                      className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                     >
-                      <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
-                      Sign in with Facebook
+                      {signUpLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Sign Up</span>
+                      )}
                     </button>
-                    <div className="w-full flex items-center gap-2">
-                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                      <span className="text-[#b5b5c3] font-medium text-[0.7rem] w-[2%]">OR</span>
-                      <div className="border-b border-[#eff2f5] max-w-[50%] w-full"></div>
-                    </div>
-                    <div className="input-area">
-                      <SelectOption
-                        label='Country'
-                        data={countries}
-                        name="country"
-                        value={formData.country}
-                        inputHandler={handleInputChange}
-                      />
-                      <div className="input-fl-name mb-5 sm:flex w-full sm:space-x-6 ">
-                        <div className="input-item sm:w-1/2 w-full mb-5 sm:mb-0">
-                          <InputCom
-                            placeholder="Firstname"
-                            label="First Name"
-                            name="first_name"
-                            type="text"
-                            value={formData.first_name}
-                            inputHandler={handleInputChange}
-                          />
-                        </div>
-                        <div className="input-item flex-1">
-                          <InputCom
-                            placeholder="Lastname"
-                            label="Last Name"
-                            name="last_name"
-                            type="text"
-                            value={formData.last_name}
-                            inputHandler={handleInputChange}
-                          />
-                        </div>
-                      </div>
-                      <div className="input-item mb-5">
-                        <InputCom
-                          placeholder="support@mermsemr.com"
-                          label="Email"
-                          name="email"
-                          type="email"
-                          value={formData.email}
-                          inputHandler={handleInputChange}
-                        />
-                      </div>
-                      <div className="input-item mb-5">
-                        <InputCom
-                          placeholder="● ● ● ● ● ●"
-                          label="Password"
-                          name="password"
-                          type={showPassword ? 'text' : 'password'}
-                          onClick={togglePasswordVisibility}
-                          passIcon={showPassword ? "show-password" : "hide-password"}
-                          value={formData.password}
-                          inputHandler={handleInputChange}
-                        />
-                      </div>
-                      {msgError && <div className="relative 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">
-                          <button
-                            onClick={rememberMe}
-                            type="button"
-                            className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
-                          >
-                            {checked && (
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="h-5 w-5"
-                                viewBox="0 0 20 20"
-                                fill="currentColor"
-                              >
-                                <path
-                                  fillRule="evenodd"
-                                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                                  clipRule="evenodd"
-                                />
-                              </svg>
-                            )}
-                          </button>
-                          <span
-                            onClick={rememberMe}
-                            className="text-base cursor-default text-dark-gray dark:text-white"
-                          >
-                            I agree with all
-                            <a
-                              href="#"
-                              className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
-                            >
-                              terms and condition
-                            </a>
-                          </span>
-                        </div>
-                      </div>
-                      <div className="signin-area mb-1">
-                        <div className="flex justify-center">
-                          <button
-                            type="button"
-                            onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
-                              }`}
-                          >
-                            {signUpLoading ? (
-                              <div className="signup btn-loader"></div>
-                            ) : (
-                              <span>Sign Up</span>
-                            )}
-                          </button>
-                        </div>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </AuthLayout>
     </>
   );
 }
@@ -272,26 +288,35 @@ const SelectOption = ({
   name,
   inputHandler,
   value,
-  data // passing the data from parent 
+  data, // passing the data from parent
 }) => {
   return (
     <div className="input-com mb-7">
       <div className="flex items-center justify-between">
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       </div>
       <div>
-        <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 " onChange={inputHandler} value={value}>
+        <select
+          name={name}
+          id={name}
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          onChange={inputHandler}
+          value={value}
+        >
           <option value={""}>Select your Country</option>
-          {data?.length > 0 && data?.map((item, idx) => (
-            <option value={item[0]} key={idx}>{item[1]}</option>
-          ))}
+          {data?.length > 0 &&
+            data?.map((item, idx) => (
+              <option value={item[0]} key={idx}>
+                {item[1]}
+              </option>
+            ))}
         </select>
       </div>
     </div>
-  )
-}
+  );
+};

src/components/AuthPages/UpdatePassword/index.jsx

@@ -16,9 +16,7 @@ export default function UpdatePassword() {
 
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to  myFit"
-      >
+      <AuthLayout slogan="Welcome to  myFit">
         {updated === false ? (
           <div className="content-wrapper update-password-section xl:bg-white dark:bg-dark-white   w-full 2xl:h-[818px] xl:h-[600px] sm:w-auto sm:px-[70px] px-5 2xl:px-[100px] rounded-xl flex flex-col justify-center">
             <div>
@@ -34,6 +32,7 @@ export default function UpdatePassword() {
               <div className="input-area">
                 <div className="input-item mb-5">
                   <InputCom
+                    fieldClass="px-6"
                     placeholder="*********"
                     label="Old Password"
                     name="password"
@@ -43,6 +42,7 @@ export default function UpdatePassword() {
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
+                    fieldClass="px-6"
                     placeholder="*********"
                     label="New Password"
                     name="password"
@@ -52,6 +52,7 @@ export default function UpdatePassword() {
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
+                    fieldClass="px-6"
                     placeholder="*********"
                     label="Re-enter Password"
                     name="password"

src/components/AuthPages/UserProfile/CollectionTab.jsx

@@ -42,8 +42,8 @@ export default function CollectionTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <CollectionCard key={datas.uniqKey} collectionData={datas} />

src/components/AuthPages/UserProfile/CreateSaleSlider.jsx

@@ -42,7 +42,9 @@ export default function CreateSaleSlider({
       {/* heading */}
       <div className="flex justify-between items-center mb-6">
         <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Sell</h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+            Create for Sell
+          </h1>
         </div>
         <div className="slider-btns flex space-x-4">
           <button onClick={nextHandler} type="button">
@@ -89,7 +91,7 @@ export default function CreateSaleSlider({
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
           {products &&
-            products.length > 0 &&
+            products?.length > 0 &&
             products.map((item) => (
               <ProductCardStyleTwo
                 key={item.id}

src/components/AuthPages/UserProfile/CreatedBidsSlider.jsx

@@ -49,7 +49,9 @@ export default function CreatedBidsSlider({
       {/* heading */}
       <div className="flex justify-between items-center mb-6">
         <div>
-          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Create for Bits</h1>
+          <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+            Create for Bits
+          </h1>
         </div>
         <div className="slider-btns flex space-x-4">
           <button onClick={nextHandler} type="button">
@@ -96,7 +98,7 @@ export default function CreatedBidsSlider({
       <div className="trending-products relative w-full">
         <SliderCom selector={trendingSlider} settings={settings}>
           {products &&
-            products.length > 0 &&
+            products?.length > 0 &&
             products.map((item) => (
               <ProductCardStyleOne
                 key={item.id}

src/components/AuthPages/UserProfile/OnSaleTab.jsx

@@ -42,8 +42,8 @@ export default function OnSaleTab({ className, products }) {
             <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleTwo key={datas.id} datas={datas} />

src/components/AuthPages/UserProfile/OwnTab.jsx

@@ -42,8 +42,8 @@ export default function OwnTab({ className, products }) {
             <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 2xl:gap-8 xl:gap-5 gap-5 mb-10">
               <DataIteration
                 datas={products}
-                startLength={0}
-                endLength={products.length}
+                startLength={process.env.REACT_APP_ZERO_STATE}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleOne key={datas.id} datas={datas} />

src/components/AuthPages/VerifyLink/index.jsx

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

src/components/AuthPages/VerifyPassword/index.jsx

@@ -0,0 +1,233 @@
+import { useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import usersService from "../../../services/UsersService";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout";
+
+const VerifyPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [msgError, setMsgError] = useState("");
+  const [linkLoader, setLinkLoader] = useState(false);
+  const [linkSuccess, setLinkSuccess] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location?.search);
+  const token = queryParams.get("passlink");
+  const userApi = new usersService();
+
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  // little checker for the validity of the token
+  if (token?.length != 64) {
+    setLinkSuccess(false);
+  }
+
+  // Password
+  const handlePassword = (e) => {
+    let { name, value } = e?.target;
+    if (name == "password") setPassword(value);
+    if (name == "confirm_password") setConfirmPassword(value);
+  };
+
+  const completeReset = async () => {
+    try {
+      if (password !== "" && confirmPassword !== "") {
+        if (password === confirmPassword) {
+          setLinkLoader(true);
+          var reqData = {
+            sessionid: "DUMMY-CANNOT_BE_EMPTY",
+            reset_link: token,
+            newpass: password,
+            step: 300,
+            action: 730,
+          };
+
+          const res = await userApi?.CompleteResetPassword(reqData);
+
+          if (res.status === 200) {
+            const { data } = res;
+
+            if (data?.status > 0 && data?.email) {
+              setTimeout(() => {
+                navigate("/login", { replace: true });
+                setLinkLoader(false);
+              }, 2000);
+            } else if (data && data?.status == "Invalid Request") {
+              setLinkLoader(false);
+              setLinkSuccess(false);
+            } else {
+              setLinkLoader(false);
+              setMsgError("An error occurred");
+            }
+          } else {
+            setLinkLoader(false);
+            setLinkSuccess(false);
+          }
+        } else {
+          setLinkLoader(false);
+          setMsgError("Passwords does not match");
+        }
+      } else {
+        setMsgError("Please fill in fields");
+      }
+    } catch (error) {
+      setLinkLoader(false);
+      setLinkSuccess(false);
+      throw new Error(error);
+    } finally {
+      setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
+    }
+  };
+
+  return (
+    <>
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            <div className="w-full">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
+                </h1>
+                {linkSuccess && (
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter a new password to reset
+                  </span>
+                )}
+                {linkSuccess && (
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    We'll send an email to confirm reset
+                  </span>
+                )}
+              </div>
+              {/* If the verification was a success */}
+              {linkSuccess ? (
+                <SuccessfulComponent
+                  password={password}
+                  confirmPassword={confirmPassword}
+                  handlePassword={handlePassword}
+                  onSubmit={completeReset}
+                  msgErr={msgError}
+                  loader={linkLoader}
+                  showPassword={showPassword}
+                  onClick={togglePasswordVisibility}
+                  navigateHandler={() => navigate("/login")}
+                />
+              ) : (
+                <ErrorComponent onClick={() => navigate("/login")} />
+              )}
+            </div>
+          </div>
+        </div>
+      </AuthLayout>
+    </>
+  );
+};
+
+export default VerifyPassword;
+
+const SuccessfulComponent = ({
+  onSubmit,
+  navigateHandler,
+  showPassword,
+  onClick,
+  password,
+  confirmPassword,
+  handlePassword,
+  msgErr,
+  loader,
+}) => (
+  <div className="input-area">
+    {/* INPUT */}
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={password}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Password"
+        name="password"
+        type={showPassword ? "text" : "password"}
+        onClick={onClick}
+        passIcon={showPassword ? "show-password" : "hide-password"}
+      />
+    </div>
+    <div className="mb-5">
+      <InputCom
+        fieldClass="px-6"
+        value={confirmPassword}
+        inputHandler={handlePassword}
+        placeholder="● ● ● ● ● ●"
+        label="Confirm Password"
+        name="confirm_password"
+        type="password"
+      />
+    </div>
+    {msgErr && (
+      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+        {msgErr}
+      </div>
+    )}
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={onSubmit}
+        type="button"
+        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+      >
+        {loader ? (
+          <div className="signup btn-loader"></div>
+        ) : (
+          <span>Continue</span>
+        )}
+      </button>
+    </div>
+    <div className="signin-area mb-3.5">
+      <button
+        onClick={navigateHandler}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);
+
+const ErrorComponent = ({ onClick }) => (
+  <div className="input-area">
+    <div className="my-5">
+      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+        This error occurs because you have already used this link or the link
+        has broken/expired. Start with the reset process again. If it doesn't
+        work, try to create the account from the start.
+      </p>
+    </div>
+
+    <div className="signin-area flex justify-center mb-3.5">
+      <button
+        onClick={onClick}
+        type="button"
+        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+      >
+        <span>Return Home</span>
+      </button>
+    </div>
+  </div>
+);

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,41 +1,59 @@
-import React from "react";
-import titleShape from "../../../assets/images/shape/text-shape-three.svg";
+import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import Otp from "./Otp";
+import WrenchBoard from "../../../assets/images/wrenchboard.png";
 
 export default function VerifyYou() {
+  const navigate = useNavigate();
   return (
     <>
-      <AuthLayout
-        slogan="Welcome to WrenchBoard"
-      >
-        <div className="content-wrapper xl:bg-white dark:bg-dark-white   w-full sm:w-auto px-5 xl:px-[70px] 2xl:px-[100px] h-[818px] rounded-xl flex flex-col justify-center">
-          <div>
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-8">
-              <h1 className="sm:text-5xl text-4xl font-bold leading-[74px]   text-dark-gray dark:text-white">
-                Verification Code
-              </h1>
-              <div className="shape sm:w-[377px] w-[270px] -mt-5 ml-5">
-                <img src={titleShape} alt="shape" />
+      <AuthLayout slogan="Welcome to WrenchBoard">
+        <div className="w-full">
+          <div className="mb-12">
+            <Link to="#">
+              <img
+                src={WrenchBoard}
+                alt="wrenchboard"
+                className="h-10 mx-auto"
+              />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            <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]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                  Check your email.
+                </span>
               </div>
-            </div>
-            <div className="input-area">
-              <Otp />
-              <div className="signin-area mb-3.5">
-                <a
-                  href="/update-password"
-                  className="w-full rounded-[50px] h-[58px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center"
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account
+                    by verifying your email registration address. Verification
+                    will let you access all of WrenchBoard's features.
+                  </p>
+                </div>
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    If you do not receive the confirmation message within a few
+                    minutes of signing up, please check your Junk E-mail folder
+                    just in case the confirmation email got delivered there
+                    instead of your inbox. If so, select the confirmation
+                    message and click Not Junk, which will allow future messages
+                    to get through.
+                  </p>
+                </div>
+              </div>
+              <div className="signin-area flex justify-center mb-3.5">
+                <button
+                  onClick={() => navigate("/")}
+                  type="button"
+                  className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                 >
-                  Continue
-                </a>
-              </div>
-              <div className="resend-code flex justify-center">
-                <p className="text-lg text-thin-light-gray font-normal">
-                  Dont’t have an aceount ?
-                  <a href="#" className="ml-2 text-dark-gray dark:text-white font-bold">
-                    Please resend
-                  </a>
-                </p>
+                  <span>Return Home</span>
+                </button>
               </div>
             </div>
           </div>