added google login interface

.env

@@ -34,5 +34,7 @@ REACT_APP_ITEM_PER_PAGE=5
 # Empty Listings
 REACT_APP_ZERO_STATE=0
 
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -33,3 +33,5 @@ REACT_APP_ITEM_PER_PAGE=5
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com

.env.production

@@ -33,3 +33,5 @@ REACT_APP_ITEM_PER_PAGE=5
 
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227
+
+REACT_APP_GOOGLE_CLIENT_ID=234407841224-k5g7f67p908hqtegiokmjqt8qqf3hi2i.apps.googleusercontent.com

src/components/AuthPages/AuthLayout.jsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 export default function LoginLayout({ slogan, children }) {
   return (
     <div className={`layout-wrapper login`}>
-      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
+      <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:p-20`}>
         <div className="w-full h-full">
           <div className="flex-1 flex justify-center items-center">
             {children && children}

src/components/AuthPages/Login/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
@@ -8,8 +8,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-//import { GoogleOAuthProvider } from '@react-oauth/google';
-// import { googleLogout, useGoogleLogin } from '@react-oauth/google';
+// import { GoogleOAuthProvider } from '@react-oauth/google';
+import { googleLogout, useGoogleLogin } from '@react-oauth/google';
 
 import { useDispatch } from "react-redux";
 import { updateUserDetails } from "../../../store/UserDetails";
@@ -17,7 +17,7 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
-  let [loginCom, setLoginCom] = useState({ user: true, family: false });
+  let [loginType, setLoginType] = useState({ full: true, family: false });
 
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
@@ -32,11 +32,11 @@ export default function Login() {
   };
 
   //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
-  const handleLoginCom = ({ target: { name } }) => {
-    if (name == "user") {
-      setLoginCom({ [name]: true, family: false });
-    } else {
-      setLoginCom({ [name]: false, family: true });
+  const handleLoginType = ({ target: { name } }) => {
+    if (name == "full") {
+      setLoginType({ [name]: true, family: false });
+    } else if(name='family') {
+      setLoginType({ [name]: false, family: true });
     }
   };
 
@@ -56,8 +56,9 @@ export default function Login() {
   // FUNCTION TO HANDLE USER LOGIN
   const doLogin = ({ target: { name } }) => {
     setMsgError("");
+    setLoginError(false)
     setLoginLoading(true);
-    let postData = {}; // Post Data for API
+    let postData; // Post Data for API
     if (!email || !password) {
       setLoginLoading(false);
       setMsgError("Please fill all the fields");
@@ -67,14 +68,15 @@ export default function Login() {
       return;
     }
 
-    if (name == "userlogin") { // Post Data Info for normal Login
+    if (name == "loginfull") { // Post Data Info for normal Login
       postData = {
         username: email,
         password: password,
         sessionid: "STARTING",
+        login_mode: 1100,
         action: 11025,
       };
-    } else if (name == "familylogin") { // Post Data Info for family Login
+    } else if (name == "loginfamily") { // Post Data Info for family Login
       postData = {
         username: email,
         pin: password,
@@ -82,8 +84,14 @@ export default function Login() {
         login_mode: 1105,
         action: 11025,
       };
+    }else{
+      setLoginLoading(false);
+      setMsgError("Invalid Login Type. Consider refreshing the page");
+      setTimeout(() => {
+        setMsgError("");
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT));
+      return;
     }
-
     userApi.logInUser(postData).then((res) => {
         if (res.status != 200 || res.data.internal_return < 0) {
           // setMsgError("Wrong, email/password");
@@ -112,6 +120,23 @@ export default function Login() {
       });
   };
 
+  const googleLogin = useGoogleLogin({
+    onSuccess: async (tokenResponse) => {
+      console.log(tokenResponse);
+      // const userInfo = await axios.get(
+      //   'https://www.googleapis.com/oauth2/v3/userinfo',
+      //   { headers: { Authorization: `Bearer ${tokenResponse.access_token}` } },
+      // );
+      // console.log(userInfo);
+    },
+    onError: errorResponse => console.log(errorResponse),
+  });
+
+  useEffect(()=>{
+    setMail('')
+    setPassword('')
+  },[loginType.full, loginType.family])
+
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -145,20 +170,20 @@ export default function Login() {
               {/* switch login component */}
               <div className="flex justify-start items-end">
                 <button
-                  name="user"
+                  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] ${
-                    loginCom.user && "border-r-2 h-[45px]"
+                    loginType.full && "border-r-2 h-[45px]"
                   }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                 >
                   Sign in
                 </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] ${
-                    loginCom.family && "border-l-2 h-[45px]"
+                    loginType.family && "border-l-2 h-[45px]"
                   }`}
-                  onClick={handleLoginCom}
+                  onClick={handleLoginType}
                 >
                   Family
                 </button>
@@ -168,13 +193,13 @@ export default function Login() {
 
               {/* for login component */}
               {
-                loginCom.user ? (
+                loginType.full ? (
                   //user login compoenent
                   <div className="p-2 input-area border-2 border-[#4687ba]">
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="px-6"
+                        fieldClass="sm:px-6 px-2"
                         value={email}
                         inputHandler={handleEmail}
                         placeholder="support@mermsemr.com"
@@ -188,7 +213,7 @@ export default function Login() {
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="px-6"
+                        fieldClass="sm:px-6 px-2"
                         value={password}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
@@ -219,7 +244,7 @@ export default function Login() {
                     <div className="signin-area mb-3.5">
                       <div className="flex justify-center">
                         <button
-                          name="userlogin"
+                          name="loginfull"
                           onClick={doLogin}
                           type="button"
                           disabled={loginLoading}
@@ -228,12 +253,12 @@ export default function Login() {
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
                           ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                           )}
                         </button>
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
-                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
+                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" onClick={googleLogin} />
                         <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
                       </div>
                       <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
@@ -302,7 +327,7 @@ export default function Login() {
                     <div className="signin-area mb-1.5">
                       <div className="flex justify-center">
                         <button
-                          name="familylogin"
+                          name="loginfamily"
                           onClick={doLogin}
                           disabled={loginLoading}
                           type="button"
@@ -311,7 +336,7 @@ export default function Login() {
                           {loginLoading ? (
                             <div className="signup btn-loader"></div>
                           ) : (
-                            <span>Continue</span>
+                            <>Continue</>
                           )}
                         </button>
                       </div>
@@ -334,10 +359,10 @@ export default function Login() {
   );
 }
 
-const BrandBtn = ({ link, imgSrc, brand }) => {
-  const doGoogle = async () => {
-    alert("start google");
-  };
+const BrandBtn = ({ link, imgSrc, brand, onClick }) => {
+  // const doGoogle = async () => {
+  //   alert("start google");
+  // };
 
   //  onSuccess: (codeResponse) => setUser(codeResponse),
 
@@ -346,26 +371,26 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
   //   onError: (error) => console.log('Login Failed:', error)
   // });
 
-  const doApple = async () => {
-    alert("start apple");
-  };
+  // const doApple = async () => {
+  //   alert("start apple");
+  // };
 
-  const doFacebook = async () => {
-    alert("start facebook");
-  };
+  // const doFacebook = async () => {
+  //   alert("start facebook");
+  // };
 
   return (
     <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
-      <a
-        // onClick={doGoogle}
-        href="#dd"
+      <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>
-      </a>
+      </button>
     </div>
   );
 };

src/components/FamilyAcc/FamilyManage.jsx

@@ -1,76 +1,18 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import InputCom from "../Helpers/Inputs/InputCom";
+import React, { useState } from "react";
 import Layout from "../Partials/Layout";
-import FamilyTable from "./FamilyTable";
-import SiteService from "../../services/SiteService";
-import ModalCom from "../Helpers/ModalCom";
 import FamilyManageTabs from "./FamilyManageTabs";
 import { useLocation } from "react-router-dom";
 
 export default function FamilyManage() {
   const [selectTab, setValue] = useState("today");
-  const [selectedAge, setSelectedAge] = useState(undefined);
-  const [familyList, setFamilyList] = useState([]);
-  const [loader, setLoader] = useState(false);
-  const [popUp, setPopUp] = useState(false);
-  const [listReload, setListReload] = useState(false);
-  const [msgErr, setMsgErr] = useState("");
-  const [formData, setFormData] = useState({
-    first_name: "",
-    last_name: "",
-  });
 
   let location = useLocation();
   let accountDetails = location?.state
-
-  const apiCall = useMemo(() => new SiteService(), []);
-
-  // This is to make sure it's called once and used everywhere
-  let memberId = localStorage.getItem("member_id");
-  let uid = localStorage.getItem("uid");
-  let sessionId = localStorage.getItem("session_token");
-
-  const popUpHandler = () => {
-    setPopUp((prev) => !prev);
-  };
-
   //   tab handler
   const filterHandler = (value) => {
     setValue(value);
   };
 
-  // member listing
-  const memberList = useCallback(async () => {
-    setLoader(true);
-    try {
-      let reqData = {
-        member_id: memberId,
-        uid: uid,
-        session_id: sessionId,
-        limit: 20,
-        offset: 0,
-        action: 22010,
-      };
-
-      let res = await apiCall.familyListings(reqData);
-      const { data } = res;
-      if (data?.internal_return >= 0 && data?.status == "OK") {
-        let { result_list } = data;
-        setFamilyList(result_list);
-        setLoader(false);
-      } else return;
-    } catch (error) {
-      setLoader(false);
-      throw new Error(error);
-    }
-  }, [apiCall, memberId, sessionId, uid]);
-
-  useEffect(() => {
-    memberList();
-  }, [listReload, memberList]);
-
-  console.log('Ebueb', familyList)
-
   return (
     <Layout>
       {/*<CommonHead />*/}
@@ -94,7 +36,7 @@ export default function FamilyManage() {
               ></div>
             </div>
           </div>
-          <FamilyManageTabs accountDetails={accountDetails} loader={loader} />
+          <FamilyManageTabs accountDetails={accountDetails} />
         </div>
       </div>
     </Layout>

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
 import usersService from "../../services/UsersService";
 import FamilyTasks from "./FamilyTasks";
@@ -14,6 +13,7 @@ import FamilyTasks from "./FamilyTasks";
 export default function FamilyManageTabs({
   className,
   accountDetails,
+  listReload,
   loader,
 }) {
   const [familyDetails, setFamilyDetails] = useState(null);
@@ -75,9 +75,8 @@ export default function FamilyManageTabs({
 
   useEffect(() => {
     familyManageHandler();
-  }, []);
+  }, [tab]);
 
-  console.log(familyDetails);
   return (
     <div
       className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
@@ -212,10 +211,6 @@ function ProfileInfo({
   );
 }
 
-function Tasks() {
-  return <>Tasks</>;
-}
-
 function Account({ familyDetails }) {
   return (
     <div className="w-full lg:min-h-[400px] h-full flex items-center justify-center">

src/components/FamilyAcc/FamilyTable.jsx

@@ -2,19 +2,32 @@ import React, { useState } from "react";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate, useLocation, Link } from "react-router-dom";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
 
 export default function FamilyTable({ className, familyList, loader }) {
   const filterCategories = ["All Categories", "Explore", "Featured"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   const navigate = useNavigate();
   // let location = useLocation();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentFamilyList = familyList?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full h-full p-8 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow ${
         className || ""
       }`}
     >
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full h-full overflow-x-auto sm:rounded-lg">
         {loader ? (
           <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
             <LoadingSpinner size="16" color="sky-blue" />
@@ -30,10 +43,10 @@ export default function FamilyTable({ className, familyList, loader }) {
                   <th className="py-4 text-right"></th>
                 </tr>
               </thead>
-              <tbody className="overflow-y-scroll h-auto">
+              <tbody className="h-full">
                 <>
                   {familyList?.length > 0 ? (
-                    familyList?.map((props, idx) => {
+                    currentFamilyList?.map((props, idx) => {
                       let {
                         firstname,
                         lastname,
@@ -115,6 +128,21 @@ export default function FamilyTable({ className, familyList, loader }) {
           </table>
         )}
       </div>
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          familyList?.length
+            ? true
+            : false
+        }
+        data={familyList}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
     </div>
   );
 }

src/components/FamilyAcc/index.jsx

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

src/components/Helpers/DataIteration.jsx

@@ -5,9 +5,8 @@ function DataIteration(props) {
   return (
     <>
       {datas &&
-        datas.length >= endLength &&
-        datas
-          .slice(startLength, endLength)
+        datas?.length >= endLength &&
+        datas?.slice(startLength, endLength)
           .map((value) => children({ datas: value }))}
     </>
   );

src/components/Home/FamilyActiveLSlde.jsx

@@ -47,7 +47,7 @@ export default function FamilyActiveLSlde({ className, trending }) {
                 <div>
                     <h1 className="text-26 font-bold   text-dark-gray dark:text-white">Current Tasks</h1>
                 </div>
-                <div className="slider-btns flex space-x-4">
+                <div className="slider-btns flex space-x-3">
                     <button onClick={nextHandler} type="button">
                         <div className="trending-slider-left-btn relative text-white w-10 h-10 flex justify-center items-center rounded-full overflow-hidden">
                             <svg

src/components/Home/index.jsx

@@ -1,14 +1,6 @@
 import React from "react";
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
-import CreateNft from "./CreateNft";
-import Hero from "./Hero";
-import SellHistoryMarketVisitorAnalytic from "./SellHistoryMarketVisitorAnalytic";
-import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
-import TrendingSection from "./TrendingSection";
-import UpdateTable from "./UpdateTable";
-import HomeTaskDisplay from "./HomeTaskDisplay";
-import UsersService from "../../services/UsersService";
 import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 import FamilyDash from "./FamilyDash";
@@ -19,12 +11,10 @@ export default function Home(props) {
 
     console.log("PROPS IN HOME->",props);
 
-    const trending = datas.datas;
-    const jobData =  datas.datas; // api calls or cache
-    //getHomeDate
+//    const trending = datas.datas;
+//    const jobData =  datas.datas; // api calls or cache
     const userApi = new usersService();
-    const homeData = userApi.getHomeDate();
-
+//    const homeData = userApi.getHomeDate();
     const {userDetails} = useSelector((state) => state?.userDetails)
 
     const commonHeadData =()=>{

src/components/MarketPlace/MainSection.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
 import DataIteration from "../Helpers/DataIteration";
-// import SearchCom from "../Helpers/SearchCom";
-// import ActiveJobsCard from "../Cards/ActiveJobsCard";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
 export default function MainSection({ className, marketPlaceProduct }) {
@@ -13,13 +10,13 @@ export default function MainSection({ className, marketPlaceProduct }) {
   };
   useEffect(() => {
     if (tab === "artist") {
-      setProducts(marketPlaceProduct.slice(0, 3));
+      setProducts(marketPlaceProduct?.slice(0, 3));
     } else if (tab === "market") {
-      setProducts(marketPlaceProduct.slice(0, 6));
+      setProducts(marketPlaceProduct?.slice(0, 6));
     } else if (tab === "shop") {
-      setProducts(marketPlaceProduct.slice(6, 9));
+      setProducts(marketPlaceProduct?.slice(6, 9));
     } else if (tab === "assets") {
-      setProducts(marketPlaceProduct.slice(3, 6));
+      setProducts(marketPlaceProduct?.slice(3, 6));
     } else {
       setProducts(marketPlaceProduct);
     }

src/components/MyJobs/StartJob.jsx

@@ -15,10 +15,6 @@ export default function StartJob(props) {
     const navigate = useNavigate()
 
     let [request, setRequest] = useState({loading: false, status: false, message: ''})
-    const [selectTab, setValue] = useState("today");
-    const filterHandler = (value) => {
-        setValue(value);
-    };
 
     const handleOnclick = () => {
         setRequest({loading: true, status: false, message: ''})
@@ -42,25 +38,6 @@ export default function StartJob(props) {
             {/*<CommonHead />*/}
             <div className="notification-page w-full mb-10">
                 <div className="notification-wrapper w-full">
-                    {/* heading */}
-                    {/* <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                <span
-                    className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  Additional Terms for Jobs Posting.
-                </span>
-
-                            </h1>
-                        </div>
-                        <div className="slider-btns flex space-x-4">
-                            <div onClick={() => filterHandler("today")} className="relative">
-
-                            </div>
-                        </div>
-                    </div> */}
-
                     <div
                         className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px]`}
                     >

src/components/MyWallet/Balance.jsx

@@ -10,7 +10,7 @@ function Balance({wallet, coupon}) {
         <div className="content-wrapper">
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* WALLET SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
                         <div className='flex items-baseline justify-between'>
                             <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Wallet</h2>
@@ -42,9 +42,11 @@ function Balance({wallet, coupon}) {
                             <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
                                 {
                                     item.action_type != 'AC_AD_FD_ONLY' ?
-                                        <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>Transfer</Link>:''
+                                        <Link to='transfer-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>Transfer</Link>:''
                                 }
-                                <Link to='add-fund' className='text-base text-white px-3 py-1 bg-[orange] rounded-md hover:opacity-80'>Top Up</Link>
+                                <Link to='add-fund' className='lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]
+                                                                   items-center rounded-full relative  bg-purple pr-1.5 pl-4'>+Add Credit</Link>
                             </div>
                         </div>
                         ))
@@ -68,19 +70,25 @@ function Balance({wallet, coupon}) {
                 {/* END OF WALLET SECTION */}
 
 
+
+            </div>
+
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+
                 {/* COUPON SECTION */}
-                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="lg:w-3/4 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
-                        {coupon.loading ? 
-                        <LoadingSpinner size='16' color='sky-blue' />
-                        :
-                        <CouponTable coupon={coupon} />
+                        {coupon.loading ?
+                            <LoadingSpinner size='16' color='sky-blue' />
+                            :
+                            <CouponTable coupon={coupon} />
                         }
                     </div>
                 </div>
                 {/* END OF COUPON SECTION */}
-            </div>            
+
+            </div>
         </div>
       )
 }

src/components/Partials/Sidebar.jsx

@@ -12,7 +12,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  console.log(userDetails);
+  console.log('user-details for job',userDetails);
   //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
@@ -29,7 +29,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
         elm.classList.remove("active");
       });
     }
-  });
+  }, [jobLists]);
   return (
     <div className="w-full h-full">
       {/* logo-area */}
@@ -167,15 +167,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "mb-14" : "rounded-none p-0"
                   }`}
                 >
-                  {/* <div className="setting-item">
-                <div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
-                  <NavLink to="/start-job">
-                    <span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
-                      Enable Job Post
-                    </span>
-                  </NavLink>
-                </div>
-              </div> */}
                   <div className="items">
                     <div className="heading mb-5">
                       <h1 className="title text-xl font-bold text-purple">

src/index.js

@@ -6,11 +6,15 @@ import App from "./App";
 import "./index.css";
 import store from "./store/store";
 
+import { GoogleOAuthProvider } from '@react-oauth/google';
+
 const root = document.getElementById("root");
 ReactDOM.createRoot(root).render(
   <BrowserRouter>
     <Provider store={store}>
-      <App />
+      <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}>
+        <App />
+      </GoogleOAuthProvider>
     </Provider>
   </BrowserRouter>
 );

src/middleware/AuthRoute.jsx

@@ -77,7 +77,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     // Getting market data
     const getMarketActiveJobList = async () => {
       try {
-        const res = await apiCall.getActiveJobList();
+        const res = await apiCall.getMyJobList();
         dispatch(updateJobs(res.data));
       } catch (error) {
         console.log("Error getting mode");

src/services/UsersService.js

@@ -97,7 +97,7 @@ class usersService {
      */
   getActiveJobList() {
     var postData = {
-      uuid: localStorage.getItem("uid"),
+      uid: localStorage.getItem("uid"),
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       page: 0,

src/store/UserDetails.js

@@ -8,8 +8,8 @@ export const userSlice = createSlice({
   name: "userDetails",
   initialState,
   reducers: {
-    updateUserDetails: (state,payload) => {
-      state.userDetails = {...payload.payload}
+    updateUserDetails: (state,action) => {
+      state.userDetails = {...action.payload}
     },
   },
 });

src/store/jobLists.js

@@ -8,8 +8,8 @@ export const jobSlice = createSlice({
   name: "jobLists",
   initialState,
   reducers: {
-    updateJobs: (state, payload) => {
-      state.jobLists = { ...payload.payload };
+    updateJobs: (state, action) => {
+      state.jobLists = { ...action.payload };
     },
   },
 });