logged information removed

# Conflicts:
#	src/middleware/AuthRoute.jsx

.env

@@ -9,15 +9,16 @@ 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
@@ -34,5 +35,41 @@ 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
+
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -9,15 +9,16 @@ 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
@@ -33,3 +34,13 @@ 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
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -9,15 +9,16 @@ 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.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/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"
+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=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
@@ -33,3 +34,20 @@ 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
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

package-lock.json

@@ -8,6 +8,7 @@
       "name": "WrenchBoard-Users",
       "version": "0.2.0",
       "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",
@@ -18,15 +19,15 @@
         "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-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-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-toastify": "^9.0.1",
         "redux": "^4.2.0",
@@ -3509,6 +3510,15 @@
         }
       }
     },
+    "node_modules/@react-oauth/google": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.11.0.tgz",
+      "integrity": "sha512-yeypwdQCcFIAo43OqVOLBfUXuxmxt3xiybfP9h3smtBW4UeFXFVQDsq+d+GlbZFo0TpONPR2+KCk/KT1/pQnvQ==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.1.tgz",
@@ -5476,20 +5486,6 @@
         "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
       }
     },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
-      "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
-    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6173,13 +6169,6 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
-    "node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true
-    },
     "node_modules/core-js-compat": {
       "version": "3.27.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.27.1.tgz",
@@ -8307,6 +8296,26 @@
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
+    "node_modules/flutterwave-react-v3": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/flutterwave-react-v3/-/flutterwave-react-v3-1.3.0.tgz",
+      "integrity": "sha512-y0dGSgxh9H/KMSDFurnoPYO3D6DSeOCZHPdLt8DnbtCkjgYgzNdqeXKvxerEaOJyitzXITsmlbzYdrEO/Lju3g==",
+      "dependencies": {
+        "axios": "^0.21.1"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/flutterwave-react-v3/node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -12506,11 +12515,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lottie-web": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.10.1.tgz",
-      "integrity": "sha512-u17bVNf/vA3oK9Wkyb1Vpo83WUIEQwaT0GeEN0qcvaExizyJ/RjmcbjSDj0CnwQCtpGqTgYhqprCC7cTWuXMNw=="
-    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -15045,21 +15049,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lottie": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/react-lottie/-/react-lottie-1.2.3.tgz",
-      "integrity": "sha512-qLCERxUr8M+4mm1LU0Ruxw5Y5Fn/OmYkGfnA+JDM/dZb3oKwVAJCjwnjkj9TMHtzR2U6sMEUD3ZZ1RaHagM7kA==",
-      "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "lottie-web": "^5.1.3"
-      },
-      "engines": {
-        "npm": "^3.0.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.7 || ^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/react-redux": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
@@ -15142,9 +15131,9 @@
       }
     },
     "node_modules/react-scripts": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
-      "integrity": "sha512-3i0L2CyIlROz7mxETEdfif6Sfhh9Lfpzi10CtcGs1emDQStmZfWjJbAIMtRD0opVUjQuFWqHZyRZ9PPzKCFxWg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
+      "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -15162,7 +15151,7 @@
         "dotenv": "^10.0.0",
         "dotenv-expand": "^5.1.0",
         "eslint": "^8.3.0",
-        "eslint-config-react-app": "^7.0.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
@@ -15179,7 +15168,7 @@
         "postcss-preset-env": "^7.0.1",
         "prompts": "^2.4.2",
         "react-app-polyfill": "^3.0.0",
-        "react-dev-utils": "^12.0.0",
+        "react-dev-utils": "^12.0.1",
         "react-refresh": "^0.11.0",
         "resolve": "^1.20.0",
         "resolve-url-loader": "^4.0.0",

package.json

@@ -14,17 +14,20 @@
     "chartjs": "^0.3.24",
     "cors": "^2.8.5",
     "faker": "^6.6.6",
+    "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
+    "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
-    "react-router-dom": "^6.0.2",
-    "react-slick": "^0.29.0",
-    "react-toastify": "^9.0.1",
-    "flutterwave-react-v3": "^1.3.0",
-    "react": "^18.2.0",
     "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.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",
     "web-vitals": "^1.0.1",
@@ -54,4 +57,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/Routers.jsx

@@ -36,6 +36,19 @@ 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 (
@@ -44,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"
@@ -72,17 +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="/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/bank.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" id="Bank"><path d="m896 78.526 896 358.4v119.466h-119.467q0 24.267-19.133 42-19.133 17.734-45.267 17.734H183.867q-26.134 0-45.267-17.734-19.133-17.733-19.133-42H0V436.926ZM238.933 675.859h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h119.466v-716.8h238.934v716.8h55.066q26.134 0 45.267 17.733 19.133 17.734 19.133 42v59.734H119.467v-59.734q0-24.266 19.133-42 19.133-17.733 45.267-17.733h55.066v-716.8zm1488.667 896q26.133 0 45.267 17.733 19.133 17.734 19.133 42v119.467H0v-119.467q0-24.266 19.133-42 19.134-17.733 45.267-17.733h1663.2z" fill="#4687ba" class="color000000 svgShape"></path></svg>

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="Alert"><path fill="#f34093" d="M122.9,100.2L74.3,15.9c-4.6-7.9-16-7.9-20.6,0L5.1,100.2C0.5,108.1,6.2,118,15.4,118h97.3
+		C121.8,118,127.5,108.1,122.9,100.2z M63.9,101c-3.5-0.1-6.7-3.3-6.6-6.8c0.1-3.5,3.3-6.7,6.8-6.6c3.5,0.1,6.7,3.3,6.6,6.8
+		C70.6,98,67.4,101.1,63.9,101z M71.3,51.8c-0.7,7.8-1.5,15.6-2.3,23.4c-0.5,4.4-3.2,6.1-7.3,4.5c-1-0.4-2-2-2.2-3.2
+		C58.6,70,58,63.4,57.3,56.8c-0.3-2.8-0.5-5.6-0.8-8.5c-0.4-3.3,0.6-4.5,4-4.5c1.1,0,2.3,0,3.4,0C72,43.8,72,43.8,71.3,51.8z" class="color343433 svgShape"></path></svg>

src/assets/images/notifications/message.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="Messages"><path fill="#4687ba" d="m447.372 413.112-17.544-52.629c-1-3.002-.674-6.23.775-9.043 13.184-25.615 18.629-55.858 12.925-87.736-8.746-48.868-44.53-89.475-90.943-105.048 11.976 28.924 15.628 61.084 9.645 92.984-12.155 64.837-64.074 116.246-129.191 127.924-8.429 1.512-16.945 2.248-25.396 2.463 19.776 21.336 46.173 36.503 75.619 41.784 31.682 5.682 61.784.393 87.322-12.594 2.802-1.425 6.007-1.742 8.99-.748l52.83 17.61c9.251 3.084 18.052-5.716 14.968-14.967z" class="color173042 svgShape"></path><path fill="#4687ba" d="M177.161 85.744C122.283 95.941 78.306 140.526 68.472 195.47c-5.704 31.878-.259 62.121 12.925 87.736 1.449 2.813 1.775 6.041.776 9.043l-17.545 52.629c-3.083 9.251 5.717 18.051 14.968 14.968l52.83-17.61c2.984-.994 6.19-.677 8.991.748 25.537 12.987 55.638 18.276 87.321 12.594 54.809-9.829 99.281-53.698 109.541-108.428 18.078-96.414-64.733-179.316-161.118-161.406zm34.938 177.536h-68.234c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h68.234c6.731 0 12.185 5.455 12.185 12.185 0 6.731-5.454 12.185-12.185 12.185zm48.739-48.739H143.864c-6.73 0-12.185-5.454-12.185-12.185 0-6.73 5.455-12.185 12.185-12.185h116.973c6.731 0 12.185 5.455 12.185 12.185.001 6.731-5.453 12.185-12.184 12.185z" class="color173042 svgShape"></path></svg>

src/assets/images/notifications/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="phone" x="0" y="0" version="1.1" viewBox="0 0 29 29" xml:space="preserve"><path d="M5.661 23.339c4.882 4.882 12.796 4.882 17.678 0 4.882-4.882 4.882-12.796 0-17.678s-12.796-4.882-17.678 0C.78 10.543.78 18.457 5.661 23.339zm5.545-16.613l1.86 1.86c.372.372.451.947.193 1.406l-.699 1.241a.781.781 0 0 0 .129.937l4.141 4.141a.781.781 0 0 0 .937.128l1.241-.699a1.173 1.173 0 0 1 1.406.193l1.861 1.861a1.175 1.175 0 0 1 0 1.66l-.881.881a3.135 3.135 0 0 1-3.786.493l-.084-.048a24.54 24.54 0 0 1-8.868-8.681l-.423-.706a3.128 3.128 0 0 1 .469-3.823l.844-.844a1.173 1.173 0 0 1 1.66 0z" fill="#4687ba" class="color000000 svgShape"></path></svg>

src/assets/images/notifications/sms.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 512 512" id="Sms"><circle cx="256" cy="256" r="256" fill="#4687ba" class="color00aebb svgShape"></circle><path fill="#ffffff" d="M256 129.3c-88.4 0-160 52-160 116.2 0 26.6 12.3 51.1 33 70.7-11.6 26.2-22.6 66.2-22.6 66.2 6.1 3.1 60.9-23.9 78.4-32.8 21.4 7.7 45.6 12.1 71.2 12.1 88.4 0 160-52 160-116.2s-71.6-116.2-160-116.2zm-59.2 148.9c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-6-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.6-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.7 11.9-7.8 15.7zm99.3 4.7h-15.5v-52.6l-.3-.1-19.1 52.7h-10.5l-19.1-52.8-.3.1v52.7h-15.5v-77.1h20.3l19.6 56.8h.3l19.8-56.8H296v77.1zm62.1-4.7c-5.2 3.8-12 5.7-20.4 5.7-8.3 0-15.4-2.1-21.4-6.2-5.9-4.1-8.8-10.3-8.7-18.5l.1-.3h15c0 4.6 1.3 7.9 4 10.1 2.7 2.2 6.3 3.2 10.9 3.2 4.1 0 7.3-.9 9.5-2.6 2.2-1.7 3.3-4 3.3-6.9 0-3-1-5.3-3.1-7.1-2.1-1.8-5.7-3.5-10.9-5.1-8.9-2.7-15.7-5.8-20.3-9.5-4.6-3.6-6.9-8.6-6.9-14.9 0-6.3 2.6-11.5 7.8-15.5 5.2-4 11.8-6 19.9-6 8.5 0 15.4 2.2 20.6 6.5 5.2 4.3 7.7 10 7.5 16.9l-.1.3h-15c0-3.8-1.2-6.8-3.5-8.9-2.3-2.1-5.6-3.1-9.8-3.1-3.8 0-6.8.9-8.8 2.8-2.1 1.8-3.1 4.2-3.1 7 0 2.6 1.1 4.8 3.4 6.4 2.3 1.7 6.2 3.5 11.7 5.3 8.5 2.4 14.9 5.5 19.4 9.4 4.4 3.9 6.7 9 6.7 15.3-.1 6.7-2.6 11.9-7.8 15.7z" class="colorffffff svgShape"></path></svg>

src/assets/images/payment-cards/visa-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>

src/components/AddJob/AddJob.jsx

@@ -1,351 +1,421 @@
-import React, {useState, useEffect} from 'react'
-import { Link, useNavigate } from 'react-router-dom';
-import InputCom from '../Helpers/Inputs/InputCom';
-import LoadingSpinner from '../Spinners/LoadingSpinner';
-import usersService from '../../services/UsersService';
-
-import { Form, Formik } from "formik";
+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.number()
-    .typeError("you must specify a number")
-      .min(1, "Price must be greater than 0")
-      .required("Price is required"),
-    title: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(100, "Maximum 25 characters")
-      .required("Title is required"),
-    description: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(250, "Maximum 250 characters")
-      .required("Description is required"),
-    job_detail: Yup.string()
-      .min(3, "Minimum 3 characters")
-      .max(250, "Maximum 250 characters")
-      .required("Details is required"),
-    timeline_days: Yup.number()
+  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("Price is required"),
-  });
+    .required("Timeline is required"),
+  category: Yup.array().min(1, "Select at least one checkbox"),
+});
 
-  let initialValues = { // initial values for formik
-    country: '',
-    price: 0,
-    title: '',
-    description: '',
-    job_detail: '',
-    timeline_days: ''
-}
+function AddJob({ popUpHandler, categories }) {
+  const ApiCall = new usersService();
 
-function AddJob() {
-    const ApiCall = new usersService()
-    const navigate = useNavigate()
+  let dispatch = useDispatch();
 
-    let [pageLoading, setPageLoading] = useState(true) // State used for knowing when the page is mounting
+  let [currency, setCurrency] = useState({
+    loading: true,
+    status: false,
+    data: null,
+  }); // To Hold the array of currency getUserCurrency returns
 
-    let [country, setCountry] = useState({loading: false, status: false, data:[]}) // To Hold the array of country getUserCountry 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
+  let [requestStatus, setRequestStatus] = useState({
+    loading: false,
+    status: false,
+    message: "",
+  }); // Holds state when submit button is pressed
 
-    // FUNCTION TO GET COUNTRY
-    const getUserCountry = () =>{
-        setCountry(prev => ({...prev, loading:true}))
-        ApiCall.getSignupCountryData().then(res => {
-            if(res.data.internal_return < 1){
-                setCountry({loading: false, status: true, data:[]})
-                return
-            }
-            setCountry({loading: false, status: true, data:res.data.signup_country})
-        }).catch(err => {
-            setCountry({loading: false, status: false, data:[]})
-        })
-    }
+  // 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;
+        }
 
-    // FUNCTION TO HANDLE ADD JOB FORM
-    const handleAddJob = (values, helpers) => {
-        setRequestStatus({loading: true, status: false, message:''})
-        ApiCall.jobManagerCreateJob(values).then(res => {
-            if(res.data.internal_return < 1){
-                setRequestStatus({loading: false, status: false, message:'Could not complete your request at the moment'})
-                return
-            }
-            setRequestStatus({loading: false, status: true, message:'Job Added Successfully'})
-            setTimeout(()=>{
-                navigate('/myjobs', {replace: true})
-            },1000)
+        setCurrency({
+          loading: false,
+          status: true,
+          data: res.data.result_list,
+        });
+      })
+      .catch((err) => {
+        setCurrency({ loading: false, status: false, data: [] });
+      });
+  };
 
-        }).catch(err => {
-            setRequestStatus({loading: false, status: false, message:'Opps! soemthing went wrong. Try Again'})
-        }).finally(()=>{
-            setTimeout(()=>{
-                setRequestStatus({loading: false, status: false, message:''})
-            }, 5000)
-        })
-    }
+  // 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("@"),
+    };
 
-    useEffect(()=>{
-        setPageLoading(false)
-        getUserCountry()
-    },[])
+    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);
+      });
+  };
 
-    return pageLoading.loading ? (
-        <div className="personal-info-tab w-full flex flex-col justify-between">
-          <div className="p-3">
-            <LoadingSpinner size="32" color="sky-blue" />
-          </div>
-        </div>
-      ) : (
-        <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>
-                    <h1 className='py-2 my-4 text-lg md:text-xl font-bold tracking-wide'>Create New Job</h1>
-                    <div className="flex flex-col-reverse sm:flex-row">
-                        <div className="fields w-full">
-                            
-                            {/* inputs starts here */}
-                            {/* country */}
-                            <div className="xl:flex xl:space-x-7 mb-6">
-                                <div className="field w-full mb-6 xl:mb-0">
-                                {/* <InputCom
-                                    fieldClass="px-6"
-                                    label="Country"
-                                    labelClass='tracking-wide'
-                                    inputBg = 'bg-slate-100'
-                                    type="text"
-                                    name="country"
-                                    // placeholder="Select Country"
-                                    value={props.values.country}
-                                    inputHandler={props.handleChange}
-                                /> */}
-                                <label 
-                                htmlFor='country'
-                                className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block">
-                                    Country
-                                </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}
-                                >
-                                    {country.loading ? (
-                                        <option className="text-slate-500 text-lg" value="">
-                                        Loading...
-                                        </option>
-                                    ) : country.data.length ? (
-                                        <>
-                                        <option className="text-slate-500 text-lg" value="">
-                                            Select...
-                                        </option>
-                                        {country.data.map((item, index) => (
-                                            <option
-                                            key={index}
-                                            className="text-slate-500 text-lg"
-                                            value={item[0]}
-                                            >
-                                            {item[1]}
-                                            </option>
-                                        ))}
-                                        </>
-                                    ) : (
-                                        <option className="text-slate-500 text-lg" value="">
-                                        No Options Found! Try Again
-                                        </option>
-                                    )}
-                                </select>
-                                {props.errors.country && props.touched.country && (
-                                    <p className="text-sm text-red-500">
-                                    {props.errors.country}
-                                    </p>
-                                )}
-                                </div>
-            
-                                {/* Price */}
-                                <div className="field w-full">
-                                <InputCom
-                                    fieldClass="px-6"
-                                    label="Price"
-                                    labelClass='tracking-wide'
-                                    inputBg = 'bg-slate-100'
-                                    type="number"
-                                    name="price"
-                                    fieldClass='text-right'
-                                    // placeholder="Please Enter Amount"
-                                    value={props.values.price}
-                                    inputHandler={props.handleChange}
-                                    blurHandler={props.handleBlur}
-                                />
-                                {props.errors.price && props.touched.price && (
-                                    <p className="text-sm text-red-500">
-                                    {props.errors.price}
-                                    </p>
-                                )}
-                                </div>
-                            </div>
+  useEffect(() => {
+    getUserCurrency();
+  }, []);
 
-                            {/* Title  */}
-
-                            <div className="field w-full mb-6">
-                                <InputCom
-                                fieldClass="px-6"
-                                label="Title"
-                                labelClass='tracking-wide'
-                                inputBg = 'bg-slate-100'
-                                type="text"
-                                name="title"
-                                // placeholder="Enter Job Title"
-                                value={props.values.title}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                                />
-                                {props.errors.title && props.touched.title && (
-                                <p className="text-sm text-red-500">
-                                    {props.errors.title}
-                                </p>
-                                )}
-                            </div>
-
-                            {/* Description  */}
-                            <div className="field w-full mb-6">
-                                <InputCom
-                                fieldClass="px-6"
-                                label="Description"
-                                labelClass='tracking-wide'
-                                inputBg = 'bg-slate-100'
-                                type="text"
-                                name="description"
-                                // placeholder="Enter a description"
-                                value={props.values.description}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                                />
-                                {props.errors.description && props.touched.description && (
-                                <p className="text-sm text-red-500">
-                                    {props.errors.description}
-                                </p>
-                                )}
-                            </div>
-
-                             {/* Details */}
-                             <div className="field w-full mb-6">
-                            {/* <InputCom
-                                fieldClass="px-6"
-                                label="Job Delivery Details"
-                                labelClass='tracking-wide'
-                                inputBg = 'bg-slate-100'
-                                type="text"
-                                name="details"
-                                // placeholder="Please Enter Detail Description of Job"
-                                value={props.values.details}
-                                inputHandler={props.handleChange}
-                            /> */}
-                            <label 
-                            htmlFor="Job Delivery Details" 
-                            className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'>
-                                Job Delivery Details
-                            </label>
-                            <textarea name="details" id="Job Delivery Details" rows="7"
-                                className={`input-field p-6 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
-                                style={{resize:'none'}}
-                                name='job_detail'
-                                value={props.values.job_detail}
-                                onChange={props.handleChange}
-                                onBlur={props.handleBlur}
-                            />
-                            {props.errors.job_detail && props.touched.job_detail && (
-                                <p className="text-sm text-red-500">
-                                {props.errors.job_detail}
-                                </p>
-                            )}
-                            </div>
-
-                            <div className="field w-full mb-6">
-                            <InputCom
-                                fieldClass="px-6"
-                                label="Timeline"
-                                labelClass='tracking-wide'
-                                inputBg = 'bg-slate-100'
-                                type="text"
-                                name="timeline_days"
-                                spanTag = ' - Expected duration of this task'
-                                // placeholder="Please Enter Detail Description of Job"
-                                value={props.values.timeline_days}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                            />
-                            {props.errors.timeline_days && props.touched.timeline_days && (
-                                <p className="text-sm text-red-500">
-                                {props.errors.timeline_days}
-                                </p>
-                            )}
-                            </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>
-                            )
+  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>
                         )}
-                        {/* End of error or success display */}
-
-                        <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                            <div className="flex items-center space-x-4 mr-9">
-                                <Link
-                                to="/myjobs"
-                                className="text-18 text-light-red tracking-wide "
-                                >
-                                <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                    {" "}
-                                    Cancel
-                                </span>
-                                </Link>
-            
-                                {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>
+                      </select>
                     </div>
-                </Form>
-              );
-            }}
-          </Formik>
-        </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
+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

@@ -4,12 +4,12 @@ import { Link } from "react-router-dom";
 export default function LoginLayout({ slogan, children }) {
   return (
     <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+      <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 p-10">
+          <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"
@@ -37,9 +37,9 @@ export default function LoginLayout({ slogan, children }) {
                 </a>
             </div>
           </div>
-          <div className="flex-1 flex justify-center items-center p-10">
-            <p className="text-black text-[15px] px-2 font-medium flex items-center">
-             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+          <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>{" "}

src/components/AuthPages/AuthProfile/CollectionTab.jsx

@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                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

@@ -43,7 +43,7 @@ export default function OnSaleTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleTwo key={datas.id} datas={datas} />

src/components/AuthPages/AuthProfile/OwnTab.jsx

@@ -43,7 +43,7 @@ export default function OwnTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                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/Login/index.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useEffect, useLayoutEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
@@ -7,25 +8,40 @@ 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 { GoogleOAuthProvider } from '@react-oauth/google';
+import { useGoogleLogin } from "@react-oauth/google";
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function Login() {
   const dispatch = useDispatch();
+  const { state } = useLocation();
+
+  let [loginType, setLoginType] = useState("");
 
-  const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+
   //login error state
   const [loginError, setLoginError] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
 
-  const rememberMe = () => {
-    setValue(!checked);
+  // To Show and Hide Password
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginType = ({ target: { name } }) => {
+    setLoginType(name);
+    let currentDate = new Date();
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
+    // Convert the expiration date to the appropriate format
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
   };
 
   // email
@@ -41,56 +57,158 @@ export default function Login() {
   const navigate = useNavigate();
   const userApi = new usersService();
 
-  const doLogin = async () => {
-    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("member_id", `${loginResult.data.member_id}`);
-          localStorage.setItem("uid", `${loginResult.data.uid}`);
-          localStorage.setItem("session_token", `${loginResult.data.session}`);
-          localStorage.setItem("session", `${loginResult.data.session}`);
-          setLoginLoading(true);
-          // userApi.getUserReminders(); //testing
-          dispatch(updateUserDetails(loginResult.data));
-          setTimeout(() => {
-            navigate("/", { replace: true });
-            setLoginLoading(false);
-          }, 2000);
-        } else {
-          // toast.error("Invalid Credential");
-          setLoginError(true);
-        }
-      } else {
-        setMsgError("Please fill in the fields");
-      }
-    } catch (error) {
-      setMsgError("An error occurred");
-    } finally {
+  // 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(() => {
-        setLoginError(false);
-        setMsgError(null);
+        setMsgError("");
       }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
     }
+
+    if (name == "full") {
+      //checks if email is a valid email address
+      let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+      if (regEx.test(email) == false) {
+        setLoginLoading(false);
+        setMsgError("Invalid Email");
+        return setTimeout(() => {
+          setMsgError("");
+        }, 3000);
+      }
+      // Post Data Info for normal Login
+      postData = {
+        username: email,
+        password: password,
+        sessionid: "STARTING",
+        login_mode: 1100,
+        action: 11025,
+      };
+    } else if (name == "family") {
+      // Post Data Info for family Login
+      postData = {
+        username: email,
+        pin: password,
+        sessionid: "20067A92714",
+        login_mode: 1105,
+        action: 11025,
+      };
+    } else {
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
+    }
+    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);
+        }
+      }
+      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">
         <div className="w-full">
-          <div className="mb-12">
+          <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -99,12 +217,12 @@ export default function Login() {
               />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
-                </h1>
+                </h1> */}
                 <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                   New Here?{" "}
                   <Link
@@ -115,80 +233,208 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              <div className="input-area">
-                <div className="input-item 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="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    value={password}
-                    inputHandler={handlePassword}
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    name="password"
-                    type="password"
-                    iconName="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>
+              {/* switch login component */}
+              <div className="ml-7 flex justify-start items-center gap-3">
+                <button
+                  name="full"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Sign in
+                </button>
+                <button
+                  name="family"
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
+                  }`}
+                  onClick={handleLoginType}
+                >
+                  Family Account
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {
+                loginType == "full" ? (
+                  //user login component
+                  <div className="p-6 input-area login-area border-2 border-[#4687ba] rounded-2xl">
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2"
+                        value={email}
+                        inputHandler={handleEmail}
+                        placeholder="Your Email"
+                        label="Email"
+                        name="email"
+                        type="email"
+                        iconName="message"
+                      />
+                    </div>
+
+                    <div className="input-item mb-5">
+                      <InputCom
+                        labelClass="tracking-wider"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                        value={password.replace(/./g, "●")}
+                        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>
+                    )}
+                    {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>
-                )}
-                {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}
+                ) : (
+                  // 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>
-                )}
-                <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 text-[15px]`}
-                    >
-                      {loginLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Continue</span>
-                      )}
-                    </button>
-                  </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-[13.975px] leading-[20.9625px]">
-                  This site is protected by hCaptcha and the our Privacy Policy
-                  and Terms of Service apply.
-                </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>
@@ -198,11 +444,10 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand }) => {
-
-  const doGoogle = async ()=>{
-    alert('start google');
-  }
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
 
   //  onSuccess: (codeResponse) => setUser(codeResponse),
 
@@ -211,26 +456,37 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
   //   onError: (error) => console.log('Login Failed:', error)
   // });
 
-  const doApple = async ()=>{
-    alert('start apple');
-  }
-
-  const doFacebook = async ()=>{
-    alert('start facebook');
-  }
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
 
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
   return (
-    <div className="flex justify-center bottomMargin">
-      <a
-          // onClick={doGoogle}
-          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>
-      </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 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

@@ -4,6 +4,7 @@ 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);
@@ -64,6 +65,19 @@ export default function SignUp() {
         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,
@@ -80,8 +94,8 @@ export default function SignUp() {
 
         if (res.status === 200) {
           const { data } = res;
-          if (data.status === -1 && data.acc === "DULPICATE") {
-            setMsgError("This account has been already created");
+          if (data && data.acc === "DULPICATE") {
+            setMsgError("Unable to use this username. Please try another username.");
             setSignUpLoading(false);
           }
           if (data && data.status === "1") {
@@ -108,216 +122,163 @@ export default function SignUp() {
 
   useEffect(() => {
     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 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"
+                <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="sm:px-6 px-2 tracking-[0.25em] text-2xl"
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type={showPassword ? "text" : "password"}
+                    onClick={togglePasswordVisibility}
+                    passIcon={
+                      showPassword ? "show-password" : "hide-password"
+                    }
+                    value={formData.password.replace(/./g, "●")}
+                    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"
                         >
-                          Sign in here
-                        </Link>
-                      </span>
-                    </div>
+                          <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-[15px] 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
-                    </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
-                            fieldClass="px-6"
-                            placeholder="Firstname"
-                            label="First Name"
-                            name="first_name"
-                            type="text"
-                            value={formData.first_name}
-                            inputHandler={handleInputChange}
-                          />
-                        </div>
-                        <div className="input-item flex-1">
-                          <InputCom
-                            fieldClass="px-6"
-                            placeholder="Lastname"
-                            label="Last Name"
-                            name="last_name"
-                            type="text"
-                            value={formData.last_name}
-                            inputHandler={handleInputChange}
-                          />
-                        </div>
-                      </div>
-                      <div className="input-item mb-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="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
-                          {msgError}
-                        </div>
+                      {signUpLoading ? (
+                        <div className="signup btn-loader"></div>
+                      ) : (
+                        <span>Sign Up</span>
                       )}
-                      <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"
-                            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`}
-                          >
-                            {signUpLoading ? (
-                              <div className="signup btn-loader"></div>
-                            ) : (
-                              <span>Sign Up</span>
-                            )}
-                          </button>
-                        </div>
-                      </div>
-                    </div>
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
-            <div className="flex-1 flex justify-center items-center p-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 p-10">
-              <p className="text-black text-[15px] px-2 font-medium flex items-center">
-                <span className="text-3xl mt-2 mr-1">©</span> 2023 -{" "}
-                <Link to="/" className="text-[#009ef7] ml-1">
-                  WrenchBoard
-                </Link>{" "}
-              </p>
-            </div>
           </div>
         </div>
-      </div>
+      </AuthLayout>
     </>
   );
 }
@@ -343,7 +304,7 @@ const SelectOption = ({
         <select
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >

src/components/AuthPages/UserProfile/CollectionTab.jsx

@@ -43,7 +43,7 @@ export default function CollectionTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                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

@@ -43,7 +43,7 @@ export default function OnSaleTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleTwo key={datas.id} datas={datas} />

src/components/AuthPages/UserProfile/OwnTab.jsx

@@ -43,7 +43,7 @@ export default function OwnTab({ className, products }) {
               <DataIteration
                 datas={products}
                 startLength={process.env.REACT_APP_ZERO_STATE}
-                endLength={products.length}
+                endLength={products?.length}
               >
                 {({ datas }) => (
                   <ProductCardStyleOne key={datas.id} datas={datas} />

src/components/AuthPages/VerifyLink/index.jsx

@@ -86,11 +86,15 @@ export default function VerifyLink() {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-
+        console.log('TESTING VERIFY',data)
         if (
           data &&
-          data.internal_return >= 0 &&
-          data.status_text === "Link Verfied"
+          data.internal_return >= 0 && 
+          data.status == 0 && 
+          data.pending_id != '' && 
+          data.pending_uid != '' && 
+          data.username != '' &&
+          data.status_text === "Link Verified"
         ) {
           setPageLoader(false);
         } else {

src/components/AuthPages/VerifyPassword/index.jsx

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

src/components/Blogs/index.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import Layout from "../Partials/Layout";
+import CommonHead from "../UserHeader/CommonHead";
+
+export default function BlogItem(props) {
+    const [selectTab, setValue] = useState("today");
+    const filterHandler = (value) => {
+        setValue(value);
+    };
+    return (
+        <Layout>
+            <CommonHead
+                commonHeadData={props.commonHeadData}
+            />
+            <div className="notification-page w-full mb-10">
+                <div className="notification-wrapper w-full">
+                    {/* heading */}
+                    <div className="sm:flex justify-between items-center mb-6">
+                        <div className="mb-5 sm:mb-0">
+                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                <span
+                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                >
+                  Title of this Blog Items
+                </span>
+                            </h1>
+                        </div>
+                        <div className="slider-btns flex space-x-4">
+
+                        </div>
+                    </div>
+                   <div>
+                       Blog Items Details need implenet
+                   </div>
+                </div>
+            </div>
+        </Layout>
+    );
+}

src/components/Cards/AvailableJobsCard.jsx

@@ -1,118 +1,222 @@
-import React, { useState } from "react";
-import { Link } from "react-router-dom";
-import { toast } from "react-toastify";
-import localImgLoad from "../../lib/localImgLoad";
-import Icons from "../Helpers/Icons";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import usersService from "../../services/UsersService";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
 
 export default function AvailableJobsCard({
   className,
   datas,
   hidden = false,
+  contentDisplay,
 }) {
   //debugger;
-  const [addFavorite, setValue] = useState(datas.whishlisted);
-  const [options, setOption] = useState(false);
-  const favoriteHandler = () => {
-    if (!addFavorite) {
-      setValue(true);
-      toast.success("Added to Favorite List");
-    } else {
-      setValue(false);
-      toast.warn("Remove to Favorite List");
-    }
-  };
+  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
+  const [imageUrl, setImageUrl] = useState("");
+
+  let thePrice = PriceFormatter(
+    datas?.price * 0.01,
+    datas?.currency_code,
+    datas?.currency
+  );
+
+  useEffect(() => {
+    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+    setImageUrl(imagePath);
+  }, []);
   return (
-    <div
-      className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      <div className="flex flex-col justify-between w-full h-full">
-        <Link to="/shop-details" className="mb-2.5">
-          <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
-            {datas.title}
-          </h1>
-        </Link>
-
-        <div className="card-two-info flex justify-between items-center">
-          <div className="owned-by flex space-x-2 items-center">
-            <div>
-              <p className="text-thin-light-gray text-sm leading-3">Added</p>
-              <p className="text-base   text-dark-gray dark:text-white">
-                {datas.offer_added}
-              </p>
-            </div>
-          </div>
-          <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-          <div className="created-by flex space-x-2 items-center flex-row-reverse">
-            <div>
-              <p className="text-thin-light-gray text-sm leading-3 text-right">
-                Expires
-              </p>
-              <p className="text-base text-dark-gray dark:text-white text-right">
-                {datas.expire}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="thumbnail-area w-full">
+    <>
+      {contentDisplay == "grid" ? (
+        <div
+          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+            className || ""
+          }`}
+        >
           <div
-            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
-            style={{
-              background: `url(${localImgLoad(
-                `images/${datas.thumbnil}`
-              )}) 0% 0% / cover no-repeat`,
+            onClick={() => {
+              setMarketPopUp({ show: true, data: datas });
             }}
+            className="flex flex-col justify-between w-full h-full"
           >
-            <div className="flex justify-center">{datas.description}</div>
+            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+              {datas.title}
+            </h1>
+
+            <div className="card-two-info flex justify-between items-center">
+              <div className="owned-by flex space-x-2 items-center">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3">
+                    Added
+                  </p>
+                  <p className="text-base   text-dark-gray dark:text-white">
+                    {datas.offer_added}
+                  </p>
+                </div>
+              </div>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
+                    Expires
+                  </p>
+                  <p className="text-base text-dark-gray dark:text-white text-right">
+                    {datas.expire}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="thumbnail-area w-full">
+              <div
+                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
+                style={{
+                  backgroundImage: `url('${imageUrl}')`,
+                }}
+              >
+                <div className="flex justify-center">{datas.description}</div>
+              </div>
+            </div>
+            <div className="details-area">
+              <div className="product-two-options flex justify-between mb-5 relative">
+                {/*      <div className="status">*/}
+                {/*          {datas.isActive && (*/}
+                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
+                {/*  Active*/}
+                {/*</span>*/}
+                {/*          )}*/}
+                {/*      </div>*/}
+
+                {/*<div className=" review flex space-x-2">*/}
+                {/*    <button*/}
+                {/*        onClick={favoriteHandler}*/}
+                {/*        type="button"*/}
+                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
+                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
+                {/*        }`}*/}
+                {/*    >*/}
+                {/*        <Icons name="star" />*/}
+                {/*    </button>*/}
+                {/*</div>*/}
+              </div>
+
+              <div className="flex justify-between">
+                <div className="flex items-center space-x-2">
+                  <div>
+                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                      {/* {thePrice} | {datas.timeline_days} day(s) */}
+                      {thePrice}
+                    </p>
+                    <p className="text-sm text-lighter-gray">
+                      ( {datas.offer_code}) |
+                      <span className="italic ml-1">
+                        {datas.timeline_days} day(s)
+                      </span>
+                    </p>
+                  </div>
+                </div>
+                <div>
+                  <button
+                    type="button"
+                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                    onClick={() => {
+                      setMarketPopUp({ show: true, data: datas });
+                    }}
+                  >
+                    View
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-        <div className="details-area">
-          <div className="product-two-options flex justify-between mb-5 relative">
-            {/*      <div className="status">*/}
-            {/*          {datas.isActive && (*/}
-            {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-            {/*  Active*/}
-            {/*</span>*/}
-            {/*          )}*/}
-            {/*      </div>*/}
+      ) : (
+        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+          <div className="flex gap-5 items-center w-full">
+            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+              <img src={dataImage2} alt="data" className="w-full h-full" />
+            </div>
+            <div className="flex flex-col flex-[0.9]">
+              <h1
+                onClick={() => {
+                  setMarketPopUp({ show: true, data: datas });
+                }}
+                className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
+              >
+                {datas?.title}
+              </h1>
 
-            {/*<div className=" review flex space-x-2">*/}
-            {/*    <button*/}
-            {/*        onClick={favoriteHandler}*/}
-            {/*        type="button"*/}
-            {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-            {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-            {/*        }`}*/}
-            {/*    >*/}
-            {/*        <Icons name="star" />*/}
-            {/*    </button>*/}
-            {/*</div>*/}
-          </div>
-
-          <div className="flex justify-between">
-            <div className="flex items-center space-x-2">
-              <div>
-                <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                  {datas.price * 0.01}
-                  {datas.currency} | {datas.timeline_days} day(s)
+              <div
+                onClick={() => {
+                  setMarketPopUp({ show: true, data: datas });
+                }}
+                className="my-2"
+              >
+                <p className="text-dark-gray dark:text-white">
+                  {datas?.description}
                 </p>
-                <p className="text-sm text-lighter-gray">
-                  ( {datas.offer_code})
+              </div>
+
+              {/* <div className="card-two-info flex gap-2 items-center">
+              <div className="owned-by flex space-x-2 items-center">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
+                  <p className="text-base   text-dark-gray dark:text-white">
+                    {datas.offer_added}
+                  </p>
+                </div>
+              </div>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
+                    Expires
+                  </p>
+                  <p className="text-base text-dark-gray dark:text-white text-right">
+                    {datas.expire}
+                  </p>
+                </div>
+              </div>
+            </div> */}
+              <div className="block sm:flex flex-wrap gap-4">
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
+                  Price: <span className="text-purple">{thePrice}</span>
+                </p>
+                <p className="text-sm text-thin-light-gray">
+                  Duration:{" "}
+                  <span className="text-purple italic">
+                    {" "}
+                    {datas?.timeline_days} day(s)
+                  </span>
+                </p>
+                <p className="text-sm text-thin-light-gray">
+                  Code:{" "}
+                  <span className="text-purple"> {datas?.offer_code}</span>
                 </p>
               </div>
             </div>
-            <div>
-              <button
-                type="button"
-                className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
-              >
-                View
-              </button>
-            </div>
+          </div>
+          <div className="">
+            <button
+              type="button"
+              className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+              onClick={() => {
+                setMarketPopUp({ show: true, data: datas });
+              }}
+            >
+              View
+            </button>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+      {marketPopUp.show && (
+        <MarketPopUp
+          details={datas}
+          onClose={() => {
+            setMarketPopUp({ show: false, data: {} });
+          }}
+          situation={marketPopUp.show}
+        />
+      )}
+    </>
   );
 }

src/components/Cards/FamilyActiveJobsCard.jsx

@@ -0,0 +1,120 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import CountDown from "../Helpers/CountDown";
+import Icons from "../Helpers/Icons";
+
+export default function FamilyActiveJobsCard({ datas, hidden = false }) {
+
+    let { pathname } = useLocation();
+
+    const [imageUrl, setImageUrl] = useState("");
+    const [addFavorite, setValue] = useState(false);
+    const [options, setOption] = useState(false);
+    const favoriteHandler = () => {
+        if (!addFavorite) {
+            setValue(true);
+            toast.success("Added to Favorite List");
+        } else {
+            setValue(false);
+            toast.warn("Remove to Favorite List");
+        }
+    };
+//debugger;
+    const bannerName  =  datas.banner == null ?'default.jpg':datas.banner;
+    return (
+        <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+            <div className="content">
+                {/* thumbnail */}
+                <div className="w-full h-40">
+                    {/* thumbnail image */}
+                    <div
+                        className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+                        style={{
+                            background: `url(${localImgLoad(
+                                `images/taskbanners/${bannerName}`
+                            )}) center / contain no-repeat`,
+                        }}
+                    >
+              {/*          <div className="product-options flex justify-between relative">*/}
+              {/*<span*/}
+              {/*    onClick={favoriteHandler}*/}
+              {/*    className={`w-7 h-7 bg-white   rounded-full flex justify-center items-center  cursor-pointer ${*/}
+              {/*        addFavorite ? "text-pink" : "  text-dark-gray"*/}
+              {/*    }`}*/}
+              {/*>*/}
+              {/*  <Icons name="love" />*/}
+              {/*</span>*/}
+              {/*              <span*/}
+              {/*                  onClick={() => setOption(!options)}*/}
+              {/*                  className="w-7 h-7 flex justify-center items-center bg-white  rounded-full cursor-pointer"*/}
+              {/*              >*/}
+              {/*  <Icons name="dots" />*/}
+              {/*</span>*/}
+              {/*              {options && (*/}
+              {/*                  <div*/}
+              {/*                      onClick={() => setOption(!options)}*/}
+              {/*                      className="w-full h-screen fixed top-0 left-0 z-10"*/}
+              {/*                  ></div>*/}
+              {/*              )}*/}
+              {/*              <div*/}
+              {/*                  style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}*/}
+              {/*                  className={`drop-down-content w-[80px] bg-white dark:bg-dark-white   rounded-[4px] p-2.5 absolute right-0 top-[100%] z-20 ${*/}
+              {/*                      options ? "active" : ""*/}
+              {/*                  }`}*/}
+              {/*              >*/}
+
+              {/*              </div>*/}
+              {/*          </div>*/}
+                        {hidden && (
+                            <div className="flex justify-center">
+
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {/* details */}
+                <div className="details">
+                    {/* product title */}
+                    <Link
+                        to="/manage-active-job"
+                        state={{ ...datas, pathname }}
+                        className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
+                    >
+                        {datas.title}
+                    </Link>
+                    {/* countdown */}
+                    <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Task Code
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                {datas.contract}
+                            </p>
+                        </div>
+                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Remaining Time
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                <CountDown lastDate={datas.delivery_date} />
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="card-buttons flex justify-end items-center space-x-2">
+                <Link
+                    to="/manage-active-job"
+                    state={{ ...datas, pathname }}
+                    className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+                >
+                    View
+                </Link>
+            </div>
+        </div>
+    );
+}

src/components/Cards/FamilyMarketCard.jsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import SuggestTask from "../FamilyPopup/SuggestTask";
+
+export default function FamilyMarketCard({ className, datas, hidden = false }) {
+  // debugger;
+  const [popUp, setPopUp] = useState(false);
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
+  };
+  //   Image
+  let selectedImage = require(`../../assets/images/family/${
+    datas.banner || "default.jpg"
+  }`);
+
+  return (
+    <>
+      <div
+        className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+          className || ""
+        }`}
+        key={datas?.uid}
+      >
+        <div className="flex flex-col justify-between w-full h-full">
+          <div className="thumbnail-area w-full">
+            <div
+              className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+              onClick={popUpHandler}
+              style={{
+                // background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
+                background: `url(${selectedImage}) center / contain no-repeat`,
+              }}
+            >
+              <div className="product-two-options flex justify-between mb-5 relative">
+                <div className="status">
+                  {/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
+                    Active
+                  </span> */}
+                </div>
+              </div>
+              {hidden && <div className="flex justify-center"></div>}
+            </div>
+          </div>
+          <div className="details-area mt-12 flex justify-between items-center gap-2">
+            {/* title */}
+            <button onClick={popUpHandler}>
+              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                {datas?.title}
+              </h1>
+            </button>
+            <div className="flex justify-between">
+              {/* <div className="flex items-center space-x-2">
+                <p className="italic text-gray-400">
+                  {getTimeAgo(datas?.added)}
+                </p>
+              </div> */}
+              <div>
+                <button
+                  type="button"
+                  onClick={popUpHandler}
+                  className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                >
+                  View
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {popUp && (
+        <SuggestTask
+          onClose={popUpHandler}
+          situation={popUp}
+          details={{ ...datas, selectedImage }}
+        />
+      )}
+    </>
+  );
+}

src/components/Cards/HomeBannerOffersCard.jsx

@@ -1,26 +1,44 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import localImgLoad from "../../lib/localImgLoad";
 
 export default function HomeBannerOffersCard(props) {
-    return (
-        <Link
-            to="/my-collection/collection-item"
-            className="item w-full block group banner-630-340"
-        >
-            <div className="flex flex-col justify-between h-full">
-                <div className="content flex justify-between items-center mb-5">
-                    <div>
-                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                            <>Ab hshsh jsjsj hshdhhdjjd</>
-                        </h1>
-                    </div>
-                    {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
-                </div>
-                <div className="h-[233px]">
-                    BEST IMAGE IN THE WORLLD
-                </div>
-            </div>
-        </Link>
-    );
+  const [imageUrl, setImageUrl] = useState("");
+  const link_result = "/" + props.itemData.link_path;
+
+  useEffect(() => {
+    let { banner, banner_location } = props?.itemData;
+    if (banner_location === "LOCAL") {
+      const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
+      setImageUrl(imagePath);
+    } else if (banner_location === "URL") setImageUrl(banner);
+    else return null;
+  }, []);
+
+  return (
+    <Link
+      to={link_result}
+      className="item p-2 w-full flex items-center min-h-[340px] bg-alice-blue bg-cover bg-center"
+      style={{
+        backgroundImage: `url('${imageUrl}')`,
+      }}
+    >
+      <div className="w-[80%] h-full mx-auto flex flex-col justify-between">
+        <div className="content flex justify-between items-center">
+          <div className="mb-2">
+            <h1 className="text-2xl lg:text-4xl font-bold text-dark-gray dark:text-white tracking-wide">
+              <span className="heroSilderTitle">{props.itemData.title}</span>
+            </h1>
+          </div>
+        </div>
+        <div className="flex flex-col justify-around items-center flex-1">
+          <div className="siderCardDescription mb-2">
+            {props.itemData.description}
+          </div>
+          <button className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
+             {props.itemData.button_text}
+          </button>
+        </div>
+      </div>
+    </Link>
+  );
 }

src/components/Cards/OfferCard.jsx

@@ -0,0 +1,108 @@
+import localImgLoad from "../../lib/localImgLoad";
+import CountDown from "../Helpers/CountDown";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+
+export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
+  let thePrice = PriceFormatter(
+    datas?.price * 0.01,
+    datas?.currency_code,
+    datas?.currency
+  );
+
+  return (
+    <div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white   p-3 pb rounded-2xl">
+      <div className="content">
+        {/* thumbnail */}
+        <div className="w-full h-40">
+          {/* thumbnail image */}
+          <div
+            className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+            style={{
+              background: `url(${localImgLoad(
+                `images/taskbanners/${datas.banner}`
+              )}) center / contain no-repeat`,
+            }}
+          >
+            {hidden && <div className="flex justify-center"></div>}
+          </div>
+        </div>
+        {/* details */}
+        <div className="details">
+          <h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+            {datas.title}
+          </h1>
+          {/* countdown */}
+          {/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Task Code
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                {datas.contract}
+                            </p>
+                        </div>
+                        <div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
+                        <div className="flex flex-col justify-between">
+                            <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                                Remaining Time
+                            </p>
+                            <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                                <CountDown lastDate={datas.expire} />
+                            </p>
+                        </div>
+                    </div> */}
+          <div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="flex flex-col justify-between items-center border-r-2">
+                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                  Task Code
+                </p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  {datas.contract}
+                </p>
+              </div>
+              <div className="flex flex-col justify-between items-center">
+                <p className="text-sm text-red-500 tracking-wide">Expires</p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  <CountDown lastDate={datas.expire} />
+                </p>
+              </div>
+            </div>
+
+            <hr className="my-2" />
+
+            <div className="grid grid-cols-2 gap-2">
+              <div className="flex flex-col justify-between items-center border-r-2">
+                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                  Reward
+                </p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  {thePrice}
+                </p>
+              </div>
+              <div className="flex flex-col justify-between items-center">
+                <p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
+                  Timeline
+                </p>
+                <p className="text-base font-bold tracking-wide   text-dark-gray dark:text-white">
+                  {`${datas.timeline_days} day(s)`}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="card-buttons flex justify-end items-center space-x-2">
+        <button
+          type="button"
+          onClick={() =>
+            setOfferPopout({ show: true, data: { ...datas, thePrice } })
+          }
+          className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+        >
+          Start Task
+        </button>
+      </div>
+    </div>
+  );
+}