request message changed

# Conflicts:
#	src/middleware/AuthRoute.jsx

.env

@@ -42,13 +42,34 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
+#Real Account
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SCOPE="email, public_profile"
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#development Account Social
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
+
+REACT_APP_APPLE_CLIENT_ID='com.wrenchboard.users.client'
+REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
+
+
+# /* 'client_id' => */ 'com.wrenchboard.users.client',
+# /* 'client_secret' => */ 'eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6Ilc1V1RXQzlEVEoifQ.eyJpc3MiOiJKUjM2M0ZFWThSIiwiaWF0IjoxNjU0MDgzODQxLCJleHAiOjE2NTkyNjc4NDEsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ud3JlbmNoYm9hcmQudXNlcnMuY2xpZW50In0.TIPMwjS2MgSysqEuw3yu1nrOcrH-6omzerDhx0CadjWn2yCO8wZhQiAlhIFs7F-WPektIJ6h-2BT62yGrILiTA',
+# /* 'redirect_uri' => */ site_url('login/auth/apple')
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -41,4 +41,6 @@ REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https:
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -40,7 +40,14 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
 
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000
-REACT_APP_TOTAL_NUM_FILE=4
+REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

package.json

@@ -17,6 +17,7 @@
     "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",

public/assets/images/site.webmanifest

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

src/Routers.jsx

@@ -47,6 +47,8 @@ import OffersInterestPage from "./views/OffersInterestPage";
 import ManageInterestOfferPage from './views/ManageInterestOfferPage'
 import MyWaitingJobsPage from "./views/MyWaitingJobsPage";
 import FamilyMarketPage from "./views/FamilyMarketPage";
+import FacebookRedirect from "./views/FacebookRedirect";
+import AppleRedirectPage from "./views/AppleRedirectPage";
 
 export default function Routers() {
   return (
@@ -54,8 +56,12 @@ export default function Routers() {
       <Routes>
         {/* guest routes */}
         <Route exact path="/login" element={<LoginPage />} />
+        <Route exact path="/eoffer" element={<LoginPage />} />
+
         <Route exact path="/signup" element={<SignupPage />} />
         <Route exact path="/login/auth" element={<AuthRedirect />} />
+        <Route exact path="/login/auth/flogin" element={<FacebookRedirect />} />
+        <Route exact path="/login/auth/apple" element={<AppleRedirectPage />} />
         <Route
           exact
           path="/forgot-password"

src/assets/images/currency/naira.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="naira"><path fill="#fff" d="M24,5A19,19,0,1,0,43,24,19,19,0,0,0,24,5Zm7,20a1,1,0,0,1,0,2H29v3A1.94,1.94,0,0,1,27.45,32a2,2,0,0,1-2.26-1.08L20,17.05l0,14a1,1,0,0,1-2,0V27H16a1,1,0,0,1,0-2h2V22H16a1,1,0,0,1,0-2h2V17a1.94,1.94,0,0,1,1.55-1.92,2,2,0,0,1,2.26,1.08L27,30,27,16a1,1,0,0,1,2,0v4h2a1,1,0,0,1,0,2H29v3Z" class="color3b3c3d svgShape"></path><path fill="#e3e3e3" d="M24,48A24,24,0,1,1,48,24,24,24,0,0,1,24,48ZM24,2A22,22,0,1,0,46,24,22,22,0,0,0,24,2Z" class="color3b3c3d svgShape"></path></svg>

src/assets/images/currency/usd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" id="Coin"><path d="M8.452 281.052a7.487 7.487 0 0 0-7.483 7.482 7.485 7.485 0 0 0 7.483 7.48 7.484 7.484 0 0 0 7.48-7.48 7.486 7.486 0 0 0-7.48-7.482zm0 1.232a6.253 6.253 0 0 1 6.248 6.25 6.25 6.25 0 0 1-6.248 6.248c-3.449 0-6.25-2.8-6.25-6.248a6.254 6.254 0 0 1 6.25-6.25zm0 .53a5.717 5.717 0 0 0-5.721 5.72 5.715 5.715 0 0 0 5.72 5.719 5.713 5.713 0 0 0 5.72-5.719 5.715 5.715 0 0 0-5.72-5.72zm-.004 2.011a.265.265 0 0 1 .267.268v.596H9.74a.265.265 0 1 1 0 .529H8.715v2.05h.17c.856 0 1.551.697 1.551 1.555s-.696 1.555-1.549 1.555h-.172v.596a.265.265 0 1 1-.529 0v-.596H7.161a.265.265 0 1 1 0-.53h1.025v-2.05h-.172a1.552 1.552 0 0 1-1.547-1.555c0-.858.694-1.554 1.547-1.554h.172v-.596a.265.265 0 0 1 .262-.268zm-.434 1.393a1.01 1.01 0 0 0-1.018 1.025 1.01 1.01 0 0 0 1.018 1.026h.172v-2.051zm.701 2.58v2.05h.172c.57 0 1.02-.448 1.02-1.025s-.449-1.025-1.022-1.025z" color="#e3e3e3" font-family="sans-serif" font-weight="400" overflow="visible" transform="translate(0 -280.067)" style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal" fill="#fff" class="color000000 svgShape"></path></svg>

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

@@ -23,16 +23,16 @@ const validationSchema = Yup.object().shape({
     })
     .required("Price is required"),
   title: Yup.string()
-    .min(25, "Minimum 25 characters")
+    .min(5, "Minimum 5 characters")
-    .max(45, "Maximum 45 characters")
+    .max(149, "Maximum 149 characters")
     .required("Title is required"),
   description: Yup.string()
-    .min(25, "Minimum 25 characters")
+    .min(5, "Minimum 5 characters")
-    .max(250, "Maximum 250 characters")
+    .max(299, "Maximum 299 characters")
     .required("Description is required"),
   job_detail: Yup.string()
-    .min(25, "Minimum 25 characters")
+    .min(3, "Minimum 3 characters")
-    .max(250, "Maximum 250 characters")
+    .max(1440, "Maximum 1440 characters")
     .required("Details is required"),
   timeline_days: Yup.number()
     .typeError("you must specify a number")
@@ -78,7 +78,6 @@ function AddJob({ popUpHandler, categories }) {
           setCurrency({ loading: false, status: true, data: [] });
           return;
         }
-        console.log("Res for currency >> ", res);
 
         setCurrency({
           loading: false,
@@ -221,7 +220,6 @@ function AddJob({ popUpHandler, categories }) {
                   </div>
 
                   {/* Title  */}
-
                   <div className="field w-full mb-[5px]">
                     <InputCom
                       fieldClass="px-6"
@@ -421,10 +419,3 @@ const publicArray = [
   { duration: 21, name: "3 weeks" },
   { duration: 28, name: "4 weeks" },
 ];
-
-// .test("no-e", "Invalid number", (value) => {
-//   if (value && /\d+e/.test(value)) {
-//     return false;
-//   }
-//   return true;
-// })

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 p-2 sm:p-20`}>
+      <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">
+          <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">
+            <p className="text-black text-[15px] px-2 font-medium flex items-center gap-1">
-             <span className="text-3xl mt-2 mr-1">©</span>  2023 - {" "}
+              <span className="">&copy; {new Date().getFullYear()} -</span>
               <Link to="/" className="text-[#009ef7] ml-1">
                 WrenchBoard
               </Link>{" "}

src/components/AuthPages/AuthRedirect/AppleRedirect.jsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function AppleRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+
+      setTimeout(()=>{ // remove LATER
+        navigate('/login', {state: {error: true}})
+      },2000)
+      
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "APPLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+    //   userApi
+    //     .authStart(reqData)
+    //     .then((res) => {
+    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+    //         localStorage.setItem("member_id", `${res.data.member_id}`);
+    //         localStorage.setItem("uid", `${res.data.uid}`);
+    //         localStorage.setItem("session_token", `${res.data.session}`);
+    //         dispatch(updateUserDetails({...res.data}));
+    //         navigate('/', {replace: true})
+    //         return
+    //       }
+    //       navigate('/login', {state: {error: true}})
+    //     })
+    //     .catch((error) => {
+    //       navigate('/login', {state: {error: true}})
+    //       console.log(error);
+    //     });
+    },[])
+  return (
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
+  )
+}
+
+export default AppleRedirect

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
+
+function FbookRedirect() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
+
+    const queryParams = new URLSearchParams(location?.search);
+    const codeResponse = queryParams.get("code");
+
+    useEffect(()=>{
+      if(!codeResponse){
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+      
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "FACEBOOK",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+    //   userApi
+    //     .authStart(reqData)
+    //     .then((res) => {
+    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+    //         localStorage.setItem("member_id", `${res.data.member_id}`);
+    //         localStorage.setItem("uid", `${res.data.uid}`);
+    //         localStorage.setItem("session_token", `${res.data.session}`);
+    //         dispatch(updateUserDetails({...res.data}));
+    //         navigate('/', {replace: true})
+    //         return
+    //       }
+    //       navigate('/login', {state: {error: true}})
+    //     })
+    //     .catch((error) => {
+    //       navigate('/login', {state: {error: true}})
+    //       console.log(error);
+    //     });
+    },[])
+  return (
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
+  )
+}
+
+export default FbookRedirect

src/components/AuthPages/AuthRedirect/Redirect.jsx

@@ -1,23 +1,64 @@
-import React, {useState, useEffect} from 'react'
+import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom';
+import usersService from '../../../services/UsersService';
+import {updateUserDetails} from "../../../store/UserDetails";
+import { useDispatch } from "react-redux";
+import AuthLayout from "../AuthLayout";
 
 function Redirect() {
     const location = useLocation();
     const navigate = useNavigate();
+    const userApi = new usersService();
+    const dispatch = useDispatch()
 
     const queryParams = new URLSearchParams(location?.search);
     const codeResponse = queryParams.get("code");
 
     useEffect(()=>{
-        if(!codeResponse){
+      if(!codeResponse){
-            navigate('/login', {replace: true})
+        navigate('/login', {state: {error: true}})
+        return
+      }
+      console.log(codeResponse);
+      /*
+      POST /token HTTP/1.1
+      Host: oauth2.googleapis.com
+      Content-Type: application/x-www-form-urlencoded
+
+      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
+      client_id=your_client_id&
+      client_secret=your_client_secret&
+      redirect_uri=https%3A//oauth2.example.com/code&
+      grant_type=authorization_code
+      */
+      var reqData = {
+        auth_type: "GOOGLE",
+        code: codeResponse,
+        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+      };
+      userApi
+        .authStart(reqData)
+        .then((res) => {
+          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+            localStorage.setItem("member_id", `${res.data.member_id}`);
+            localStorage.setItem("uid", `${res.data.uid}`);
+            localStorage.setItem("session_token", `${res.data.session}`);
+            dispatch(updateUserDetails({...res.data}));
+            navigate('/', {replace: true})
             return
-        }
+          }
-        console.log(codeResponse)
+          navigate('/login', {state: {error: true}})
+        })
+        .catch((error) => {
+          navigate('/login', {state: {error: true}})
+          console.log(error);
+        });
     },[])
   return (
-    <div>Redirecting ... </div>
+    <AuthLayout>
+    <div className='min-h-[70vh]'>Redirecting ... </div>
+  </AuthLayout>
   )
 }
 
-export default Redirect
+export default Redirect

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";

src/components/AuthPages/Login/index.jsx

@@ -1,46 +1,47 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useLayoutEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
 // import { GoogleOAuthProvider } from '@react-oauth/google';
-import { googleLogout, useGoogleLogin } from "@react-oauth/google";
+import { useGoogleLogin } from "@react-oauth/google";
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function Login() {
   const dispatch = useDispatch();
+  const { state } = useLocation();
 
-  let [loginType, setLoginType] = useState({ full: true, family: false });
+  let [loginType, setLoginType] = useState("");
-  const [selectedLoginType, setSelectedLoginType] = useState(
-    document.cookie.includes("loginType=family") ? "loginfamily" : "loginfull"
-  );
 
-  const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
+  const [showPassword, setShowPassword] = useState(false);
+
   //login error state
   const [loginError, setLoginError] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
 
-  const rememberMe = () => {
+  // To Show and Hide Password
-    setValue(!checked);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
   };
 
   //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
   const handleLoginType = ({ target: { name } }) => {
-    if (name == "full") {
+    setLoginType(name);
-      setLoginType({ [name]: true, family: false });
+    let currentDate = new Date();
-    } else if ((name = "family")) {
+    let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000);
-      setLoginType({ [name]: false, family: true });
+    // Convert the expiration date to the appropriate format
-    }
+    let expirationDateString = expirationDate.toUTCString();
+    document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`;
   };
 
   // email
@@ -71,7 +72,16 @@ export default function Login() {
       return;
     }
 
-    if (name == "loginfull") {
+    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,
@@ -80,11 +90,7 @@ export default function Login() {
         login_mode: 1100,
         action: 11025,
       };
-
+    } else if (name == "family") {
-      // Clear the loginType cookie if the user switches to loginfull
-      document.cookie =
-        "loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
-    } else if (name == "loginfamily") {
       // Post Data Info for family Login
       postData = {
         username: email,
@@ -93,8 +99,6 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
-      // Set the loginType cookie to remember the user's selection
-      document.cookie = "loginType=family; expires=Session; path=/;";
     } else {
       setLoginLoading(false);
       setMsgError("Invalid Login Type. Consider refreshing the page");
@@ -106,7 +110,13 @@ export default function Login() {
     userApi
       .logInUser(postData)
       .then((res) => {
-        if (res.status != 200 || res.data.internal_return < 0) {
+        if (
+          res.status != 200 ||
+          res.data.internal_return < 0 ||
+          !res.data.member_id ||
+          !res.data.uid ||
+          !res.data.session
+        ) {
           // setMsgError("Wrong, email/password");
           setLoginError(true);
           setLoginLoading(false);
@@ -116,7 +126,7 @@ export default function Login() {
         localStorage.setItem("uid", `${res.data.uid}`);
         localStorage.setItem("session_token", `${res.data.session}`);
         // localStorage.setItem("session", `${res.data.session}`);
-        dispatch(updateUserDetails(res.data));
+        dispatch(updateUserDetails({ ...res.data }));
         setTimeout(() => {
           navigate("/", { replace: true });
           setLoginLoading(false);
@@ -146,22 +156,59 @@ export default function Login() {
   });
 
   // In order to update the selected login type whenever the component renders
-  useEffect(() => {
+  // useEffect(() => {
-    setSelectedLoginType(
+  // Clear the loginType cookie if the user switches to loginfull
-      document.cookie.includes("loginType=family") ? "loginfamily" : "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.full, loginType.family]);
+  }, [loginType]);
 
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
         <div className="w-full">
-          <div className="mb-12">
+          <div className="mb-5">
             <Link to="#">
               <img
                 src={WrenchBoard}
@@ -170,7 +217,7 @@ export default function Login() {
               />
             </Link>
           </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[530px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                 {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
@@ -188,11 +235,13 @@ export default function Login() {
               </div>
 
               {/* switch login component */}
-              <div className="flex justify-start items-end">
+              <div className="ml-7 flex justify-start items-center gap-3">
                 <button
                   name="full"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType.full && "border-r-2 h-[45px]"
+                    loginType == "full"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
@@ -200,12 +249,14 @@ export default function Login() {
                 </button>
                 <button
                   name="family"
-                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${
+                  className={`login-type-btn px-4 py-1 rounded-t-2xl ${
-                    loginType.family && "border-l-2 h-[45px]"
+                    loginType == "family"
+                      ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
+                      : "bg-white text-[#000] border-t-[2px]"
                   }`}
                   onClick={handleLoginType}
                 >
-                  Family
+                  Family Account
                 </button>
               </div>
 
@@ -213,16 +264,16 @@ export default function Login() {
 
               {/* for login component */}
               {
-                loginType.full ? (
+                loginType == "full" ? (
                   //user login component
-                  <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <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="support@mermsemr.com"
+                        placeholder="Your Email"
                         label="Email"
                         name="email"
                         type="email"
@@ -233,14 +284,15 @@ export default function Login() {
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
                         value={password}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
                         label="Password"
                         name="password"
-                        type="password"
+                        type={showPassword ? "text" : "password"}
-                        iconName="password"
+                        onClick={togglePasswordVisibility}
+                        passIcon={showPassword ? "password" : "password"}
                         forgotPassword
                       />
                     </div>
@@ -264,7 +316,7 @@ export default function Login() {
                     <div className="signin-area mb-3.5">
                       <div className="flex justify-center">
                         <button
-                          name="loginfull"
+                          name="full"
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
@@ -284,18 +336,26 @@ export default function Login() {
                           brand="Google"
                           onClick={googleLogin}
                         />
-                        <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                        <BrandBtn
+                          // link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=https%3A%2F%2Fwork.wrenchboard.com%2Flogin%2Fauth%2Fapple&state=4b2c4456b7&scope=name+email`}
+                          link={`https://appleid.apple.com/auth/authorize?response_type=code&response_mode=form_post&client_id=${process.env.REACT_APP_APPLE_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_APPLE_REDIRECT_URL}&state=4b2c4456b7&scope=name+email`}
+                          imgSrc={appleLogo}
+                          brand="Apple"
+                          isAnchor={true}
+                        />
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
                         <BrandBtn
-                          link="#"
+                          link={`https://www.facebook.com/v14.0/dialog/oauth?client_id=${process.env.REACT_APP_FACEBOOK_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_FACEBOOK_REDIRECT_URL}&scope=${process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE}`}
                           imgSrc={facebookLogo}
                           brand="Facebook"
+                          isAnchor={true}
                         />
                         <BrandBtn
-                          link="#"
+                          // link="https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&scope=comma-separated-list-of-scopes&state=YOUR_STATE_VALUE"
                           imgSrc={linkedInLogo}
                           brand="LinkedIn"
+                          isAnchor={true}
                         />
                       </div>
                     </div>
@@ -303,18 +363,18 @@ export default function Login() {
                 ) : (
                   // END of user login compoenent
                   // family login compoenent
-                  <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <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="support@mermsemr.com"
+                        placeholder="Account ID"
                         label="Username"
                         name="email"
                         type="email"
-                        iconName="message"
+                        iconName="family-id"
                       />
                     </div>
 
@@ -327,9 +387,9 @@ export default function Login() {
                         placeholder="● ● ● ● ● ●"
                         label="Pin"
                         name="password"
-                        type="password"
+                        type={showPassword ? "text" : "password"}
-                        iconName="password"
+                        onClick={togglePasswordVisibility}
-                        // forgotPassword
+                        passIcon={showPassword ? "family-pin" : "family-pin"}
                       />
                     </div>
                     {loginError && (
@@ -352,7 +412,7 @@ export default function Login() {
                     <div className="signin-area mb-1.5">
                       <div className="flex justify-center">
                         <button
-                          name="loginfamily"
+                          name="family"
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
@@ -372,10 +432,12 @@ export default function Login() {
               }
               {/* END of login component */}
 
+              {loginType == "full" &&
               <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                 This site is protected by hCaptcha and the our Privacy Policy
                 and Terms of Service apply.
               </div>
+              }
             </div>
           </div>
         </div>
@@ -384,7 +446,7 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => {
   // const doGoogle = async () => {
   //   alert("start google");
   // };
@@ -403,19 +465,30 @@ const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
   // const doFacebook = async () => {
   //   alert("start facebook");
   // };
-
   return (
     <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <button
+      {isAnchor ? (
-        onClick={onClick}
+        <a
-        // href="#dd"
+          href={link}
-        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
-      >
+        >
-        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
-          Continue with {brand}
+            Continue with {brand}
-        </span>
+          </span>
-      </button>
+        </a>
+      ) : (
+        <button
+          onClick={onClick}
+          // href="#dd"
+          className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+        >
+          <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+          <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+            Continue with {brand}
+          </span>
+        </button>
+      )}
     </div>
   );
 };

src/components/AuthPages/SignUp/index.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import AuthLayout from "../AuthLayout";
 
 export default function SignUp() {
   const [signUpLoading, setSignUpLoading] = useState(false);
@@ -64,6 +64,23 @@ 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,
@@ -81,7 +98,9 @@ export default function SignUp() {
         if (res.status === 200) {
           const { data } = res;
           if (data && data.acc === "DULPICATE") {
-            setMsgError("This account has been already created");
+            setMsgError(
+              "Unable to use this username. Please try another username."
+            );
             setSignUpLoading(false);
           }
           if (data && data.status === "1") {
@@ -112,212 +131,198 @@ export default function SignUp() {
 
   return (
     <>
-      <div className="layout-wrapper login">
+      <AuthLayout slogan="Welcome to WrenchBoard">
-        <div className="main-wrapper login-wrapper w-full xl:h-screen h-full xl:py-10 py-12 overflow-y-auto">
+        <div className="w-full">
-          <div className=" h-full">
+          <div className="mb-5">
-            <div className="flex-1 flex justify-center items-center">
+            <Link to="#">
-              <div className="w-full">
+              <img
-                <div className="mb-12">
+                src={WrenchBoard}
-                  <Link to="#">
+                alt="wrenchboard"
-                    <img
+                className="h-10 mx-auto"
-                      src={WrenchBoard}
+              />
-                      alt="wrenchboard"
+            </Link>
-                      className="h-10 mx-auto"
+          </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 className="input-item mb-5">
-                  <div>
+                  <InputCom
-                    <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+                    fieldClass="px-6"
-                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                    placeholder="support@mermsemr.com"
-                        Create Account
+                    label="Email"
-                      </h1>
+                    name="email"
-                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    type="email"
-                        Already have an account?{" "}
+                    value={formData.email}
-                        <Link
+                    inputHandler={handleInputChange}
-                          to="/login"
+                  />
-                          className="font-semibold text-[#4687ba] hover:text-[#009ef7] transition"
+                </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}
+                    inputHandler={handleInputChange}
+                  />
+                </div>
+                {msgError && (
+                  <div className="p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">
+                    {msgError}
+                  </div>
+                )}
+
+                <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5 group cursor-pointer">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className={`w-6 h-6 border-[#4687ba] text-white flex justify-center items-center border rounded-[.45em] group-checked:text-white transition-all duration-200 group-checked:cursor-default ${
+                        checked && "text-white bg-[#4687ba]"
+                      }`}
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
                         >
-                          Sign in here
+                          <path
-                        </Link>
+                            fillRule="evenodd"
-                      </span>
+                            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"
-                    </div>
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px] group-checked:text-white transition-all duration-200 group-checked:cursor-default"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div>
+
+                {/* Forgot Password */}
+                {/* <div className="forgot-password-area flex justify-between items-center mb-6">
+                  <div className="remember-checkbox flex items-center space-x-2.5">
+                    <button
+                      onClick={rememberMe}
+                      type="button"
+                      className="w-6 h-6 bg-[#4687ba] text-white flex justify-center items-center border border-light-gray rounded-[.45em]"
+                    >
+                      {checked && (
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="h-5 w-5"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </button>
+                    <span
+                      onClick={rememberMe}
+                      className="cursor-default text-dark-gray dark:text-white text-[15px]"
+                    >
+                      I agree with all
+                      <Link
+                        href="#"
+                        className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
+                      >
+                        terms and condition
+                      </Link>
+                    </span>
+                  </div>
+                </div> */}
+                <div className="signin-area mb-1">
+                  <div className="flex justify-center">
                     <button
                       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
+                      {signUpLoading ? (
-                        className="mr-3 h-6"
+                        <div className="signup btn-loader"></div>
-                        src={facebookLogo}
+                      ) : (
-                        alt="logo-icon(s)"
+                        <span>Sign Up</span>
-                      />
-                      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>
                       )}
-                      <div className="forgot-password-area flex justify-between items-center mb-6">
+                    </button>
-                        <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>
                   </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 +348,7 @@ const SelectOption = ({
         <select
           name={name}
           id={name}
-          className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
+          className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >

src/components/AuthPages/VerifyLink/index.jsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -86,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.internal_return >= 0 && 
-          data.status_text === "Link Verfied"
+          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

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -158,8 +158,8 @@ const SuccessfulComponent = ({
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password}
+        value={password?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -171,8 +171,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword}
+        value={confirmPassword?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"

src/components/AuthPages/VerifyYou/index.jsx

@@ -1,6 +1,6 @@
 import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
-import WrenchBoard from "../../../assets/images/wrenchboard.png";
+import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 
 export default function VerifyYou() {
   const navigate = useNavigate();

src/components/Blogs/index.jsx

@@ -1,38 +1,76 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 export default function BlogItem(props) {
+
+    const apiCall = new usersService()
+    const navigate = useNavigate()
+
+    const [blogdata, setBlogdata] = useState({loading: true, data:{}})
+
     const [selectTab, setValue] = useState("today");
     const filterHandler = (value) => {
         setValue(value);
     };
+    const queryParams = new URLSearchParams(location?.search);
+    const blog_id = queryParams.get("blog_id");
+    
+    useEffect(()=>{
+        if(!blog_id){
+            navigate('/',{replace:true})
+        }
+        apiCall.getSingleBlogData({blog_id}).then(res => {
+            setBlogdata({loading: false, data:res.data})
+        }).catch(error => {
+            setBlogdata({loading: false, data:{}})
+            console.log('ERROR', error)
+        })
+    },[blog_id])
     return (
         <Layout>
             <CommonHead
                 commonHeadData={props.commonHeadData}
             />
             <div className="notification-page w-full mb-10">
-                <div className="notification-wrapper w-full">
+                <div className="mb-5">
-                    {/* heading */}
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
-                    <div className="sm:flex justify-between items-center mb-6">
+                        <span
-                        <div className="mb-5 sm:mb-0">
+                            className={`${selectTab === "today" ? "block" : "hidden"}`}
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                        >
-                <span
+                        {blogdata.data?.blogdata?.[0]?.post_title}
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
+                        </span>
-                >
+                    </h1>
-                  Title of this Blog Items
+                </div>
-                </span>
+                <div className="notification-wrapper w-full bg-white p-8 rounded-2xl">
-                            </h1>
+                    {blogdata.loading ? 
-                        </div>
+                        <LoadingSpinner size='8' color='sky-blue' height='h-[100px]' />
-                        <div className="slider-btns flex space-x-4">
+                    :
-
+                        blogdata?.data?.blogdata && blogdata.data?.blogdata.length ?
-                        </div>
+                        <div className="w-full">
+                            {/* heading */}
+                            <div className="sm:flex justify-between items-center mb-6">
+                                {/* <div className="mb-5">
+                                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">
+                                        <span
+                                            className={`${selectTab === "today" ? "block" : "hidden"}`}
+                                        >
+                                        {blogdata.data?.blogdata?.[0]?.post_title}
+                                        </span>
+                                    </h1>
+                                </div> */}
+                                {/* <div className="slider-btns flex space-x-4">
+                                </div> */}
+                            </div>
+                            <div dangerouslySetInnerHTML={{__html: blogdata.data?.blogdata?.[0]?.post_content}}>
+                            </div>
                     </div>
-                   <div>
+                    :
-                       Blog Items Details
+                    <h1 className="text-26 font-bold text-dark-gray dark:text-white">No Blog Found!</h1>
-                   </div>
+                    }  
                 </div>
             </div>
         </Layout>

src/components/Cards/AvailableJobsCard.jsx

@@ -9,13 +9,13 @@ export default function AvailableJobsCard({
   className,
   datas,
   hidden = false,
-  contentDisplay
+  contentDisplay,
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
   const [imageUrl, setImageUrl] = useState("");
 
-  let thePrice = PriceFormatter(  
+  let thePrice = PriceFormatter(
     datas?.price * 0.01,
     datas?.currency_code,
     datas?.currency
@@ -27,121 +27,136 @@ export default function AvailableJobsCard({
   }, []);
   return (
     <>
-    {contentDisplay == 'grid' ?
+      {contentDisplay == "grid" ? (
-      <div
+        <div
-        className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
-          className || ""
+            className || ""
-        }`}
+          }`}
-      >
+        >
-        <div className="flex flex-col justify-between w-full h-full">
+          <div
-          <Link to="/shop-details" className="mb-2.5">
+            onClick={() => {
+              setMarketPopUp({ show: true, data: datas });
+            }}
+            className="flex flex-col justify-between w-full h-full"
+          >
             <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="card-two-info flex justify-between items-center">
-            <div className="owned-by flex space-x-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="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">
+                  <p className="text-thin-light-gray text-sm leading-3">
-                    {/* {thePrice} | {datas.timeline_days} day(s) */}
+                    Added
-                    {thePrice}
                   </p>
-                  <p className="text-sm text-lighter-gray">
+                  <p className="text-base   text-dark-gray dark:text-white">
-                    ( {datas.offer_code}) |
+                    {datas.offer_added}
-                    <span className="italic ml-1">
-                      {datas.timeline_days} day(s)
-                    </span>
                   </p>
                 </div>
               </div>
-              <div>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
-                <button
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
-                  type="button"
+                <div>
-                  className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
-                  onClick={() => {
+                    Expires
-                    setMarketPopUp({ show: true, data: datas });
+                  </p>
-                  }}
+                  <p className="text-base text-dark-gray dark:text-white text-right">
-                >
+                    {datas.expire}
-                  View
+                  </p>
-                </button>
+                </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>
+      ) : (
-    :
+        <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="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="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]">
-          <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+              <img src={dataImage2} alt="data" className="w-full h-full" />
-            <img src={dataImage2} alt="data" className="w-full h-full" />
+            </div>
-          </div>
+            <div className="flex flex-col flex-[0.9]">
-          <div className="flex flex-col flex-[0.9]">
+              <h1
-            <Link to="/shop-details" className="">
+                onClick={() => {
-              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                  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>
-            </Link>
 
-            <div className="my-2">
+              <div
-              <p className="text-dark-gray dark:text-white">{datas?.description}</p>
+                onClick={() => {
-            </div>
+                  setMarketPopUp({ show: true, data: datas });
+                }}
+                className="my-2"
+              >
+                <p className="text-dark-gray dark:text-white">
+                  {datas?.description}
+                </p>
+              </div>
 
-            {/* <div className="card-two-info flex gap-2 items-center">
+              {/* <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>
@@ -162,40 +177,37 @@ export default function AvailableJobsCard({
                 </div>
               </div>
             </div> */}
-            <div className="block sm:flex flex-wrap gap-4">
+              <div className="block sm:flex flex-wrap gap-4">
-              <p className="text-sm text-thin-light-gray flex flext-start gap-1">
+                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
-                Price: <span className="text-purple">{thePrice}</span>
+                  Price: <span className="text-purple">{thePrice}</span>
-              </p>
+                </p>
-              <p className="text-sm text-thin-light-gray">
+                <p className="text-sm text-thin-light-gray">
-                Duration:{" "}
+                  Duration:{" "}
-                <span className="text-purple italic">
+                  <span className="text-purple italic">
-                  {" "}
+                    {" "}
-                  {datas?.timeline_days} day(s)
+                    {datas?.timeline_days} day(s)
-                </span>
+                  </span>
-              </p>
+                </p>
-              <p className="text-sm text-thin-light-gray">
+                <p className="text-sm text-thin-light-gray">
-                Code:{" "}
+                  Code:{" "}
-                <span className="text-purple">
+                  <span className="text-purple"> {datas?.offer_code}</span>
-                  {" "}
+                </p>
-                  {datas?.offer_code}
+              </div>
-                </span>
-              </p>
             </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 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>
-    }
       {marketPopUp.show && (
         <MarketPopUp
           details={datas}

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>
+    );
+}