edit profile link implemented

.env

@@ -19,5 +19,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=5
 
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

docker-compose.yml

@@ -19,6 +19,7 @@ services:
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15
+      - apigate.lotus.g1.wrenchboard.com:10.10.33.15
       # #- backend.wrenchboard.api.live:172.31.4.27
       # #- backend.wrenchboard.api.test:10.20.30.27
       - apigateway.wrenchboard.app.dev.fluxtra.net:10.20.30.19

src/Routers.jsx

@@ -29,6 +29,7 @@ import CalendarPage from "./views/CalendarPage";
 import ResourcePage from "./views/ResourcePage";
 import MyTaskPage from "./views/MyTaskPage";
 import MyJobsPage from "./views/MyJobsPage";
+import ReferralPage from "./views/ReferralPage";
 
 export default function Routers() {
   return (
@@ -62,7 +63,7 @@ export default function Routers() {
           <Route exact path="/tracking" element={<TrackingPage />} />
           <Route exact path="/calendar" element={<CalendarPage />} />
           <Route exact path="/resources" element={<ResourcePage />} />
-          <Route exact path="/my-wallet" element={<MyWalletPage />} />
+          <Route exact path="/my-wallet/*" element={<MyWalletPage />} />
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/market-place" element={<MarketPlacePage />} />
           <Route exact path="/market" element={<MarketPlacePage />} />
@@ -81,6 +82,7 @@ export default function Routers() {
           <Route exact path="/profile" element={<AuthProfilePage />} />
           <Route exact path="/user-profile" element={<UserProfilePage />} />
           <Route exact path="/settings" element={<SettingsPage />} />
+          <Route exact path="/referral" element={<ReferralPage />} />
         </Route>
         <Route path="*" element={<FourZeroFour />} />
       </Routes>

src/assets/images/apple-black.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2036" height="2500" viewBox="0 0 456.008 560.035"><path d="M380.844 297.529c.787 84.752 74.349 112.955 75.164 113.314-.622 1.988-11.754 40.191-38.756 79.652-23.343 34.117-47.568 68.107-85.731 68.811-37.499.691-49.557-22.236-92.429-22.236-42.859 0-56.256 21.533-91.753 22.928-36.837 1.395-64.889-36.891-88.424-70.883-48.093-69.53-84.846-196.475-35.496-282.165 24.516-42.554 68.328-69.501 115.882-70.192 36.173-.69 70.315 24.336 92.429 24.336 22.1 0 63.59-30.096 107.208-25.676 18.26.76 69.517 7.376 102.429 55.552-2.652 1.644-61.159 35.704-60.523 106.559M310.369 89.418C329.926 65.745 343.089 32.79 339.498 0 311.308 1.133 277.22 18.785 257 42.445c-18.121 20.952-33.991 54.487-29.709 86.628 31.421 2.431 63.52-15.967 83.078-39.655"/></svg>

src/assets/images/facebook-4.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
+<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
+</svg>

src/components/AuthPages/AuthLayout.jsx

@@ -12,8 +12,8 @@ export default function LoginLayout({ slogan, children }) {
     screen = "h-screen";
   }
   return (
-    <div className="layout-wrapper">
+    <div className="layout-wrapper login">
-      <div className={`main-wrapper w-full ${screen}`}>
+      <div className={`main-wrapper login-wrapper w-full ${screen}`}>
         <div className="flex w-full h-full">
 
           <div className="flex-1 flex justify-center items-center">

src/components/AuthPages/Login/index.jsx

@@ -1,9 +1,12 @@
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import googleLogo from "../../../assets/images/google-logo.svg";
+import appleLogo from "../../../assets/images/apple-black.svg";
+import facebookLogo from "../../../assets/images/facebook-4.svg";
 // import titleShape from "../../../assets/images/shape/title-shape.svg";
 import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
@@ -14,11 +17,15 @@ export default function Login() {
 
   //login error state
   const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState('');
 
   const rememberMe = () => {
     setValue(!checked);
   };
 
+  console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -31,41 +38,56 @@ export default function Login() {
   };
   const navigate = useNavigate();
   const userApi = new usersService();
+
+
   const doLogin = async () => {
-    if (email !== "" && password !== "") {
+    if (email == '' && password == '') {
-      var postData = {
+      setMsgError('Please fill in fields')
-        username: email,
+    }
-        password: password,
+    try {
-        sessionid: 'STARTING'
+      if (email !== "" && password !== "") {
-      };
+        var postData = {
-      const loginResult = await userApi.logInUser(postData);  // just for a test
+          username: email,
-      //debugger;
+          password: password,
-      // if (email === "support@mermsemr.com") {
+          sessionid: 'STARTING'
-      if (loginResult.data.status > 0 && loginResult.data.internal_return ==100 && loginResult.data.session !='') { // just for a start
+        };
-        localStorage.setItem("email", `${loginResult.data.email}`);
+        const loginResult = await userApi.logInUser(postData);  // just for a test
-        localStorage.setItem("member_id", `${loginResult.data.member_id}`);
+        //debugger;
-        localStorage.setItem("uid", `${loginResult.data.uid}`);
+        // if (email === "support@mermsemr.com") {
-        localStorage.setItem("session_token", `${loginResult.data.session}`);
+        if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
-        localStorage.setItem("added", `${loginResult.data.added}`);
+          localStorage.setItem("email", `${loginResult.data.email}`);
-        localStorage.setItem("city", `${loginResult.data.city}`);
+          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
-        localStorage.setItem("country", `${loginResult.data.country}`);
+          localStorage.setItem("uid", `${loginResult.data.uid}`);
-        localStorage.setItem("firstname", `${loginResult.data.firstname}`);
+          localStorage.setItem("session_token", `${loginResult.data.session}`);
-        localStorage.setItem("last_login", `${loginResult.data.last_login}`);
+          localStorage.setItem("added", `${loginResult.data.added}`);
-        localStorage.setItem("lastname", `${loginResult.data.lastname}`);
+          localStorage.setItem("city", `${loginResult.data.city}`);
-        localStorage.setItem("state", `${loginResult.data.state}`);
+          localStorage.setItem("country", `${loginResult.data.country}`);
-        localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
+          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
-        localStorage.setItem("session", `${loginResult.data.session}`);
+          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
-        setLoginLoading(true);
+          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
-         // userApi.getUserReminders(); //testing
+          localStorage.setItem("state", `${loginResult.data.state}`);
-        setTimeout(() => {
+          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
-          toast.success("Login Successfully");
+          localStorage.setItem("session", `${loginResult.data.session}`);
-          navigate("/", { replace: true });
+          setLoginLoading(true);
-          setLoginLoading(false);
+          // userApi.getUserReminders(); //testing
-        }, 2000);
+          setTimeout(() => {
-      } else {
+            toast.success("Login Successfully");
-        // toast.error("Invalid Credential");
+            navigate("/", { replace: true });
-        setLoginError(true)
+            setLoginLoading(false);
+          }, 2000);
+        } else {
+          // toast.error("Invalid Credential");
+          setLoginError(true)
+        }
       }
+    } catch (error) {
+      console.log(error)
+      setMsgError('An error occurred')
+    } finally {
+      setTimeout(() => {
+        setLoginError(false)
+        setMsgError(null)
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
     }
   };
 
@@ -74,37 +96,47 @@ export default function Login() {
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper w-full  flex justify-center items-center xl:bg-white dark:bg-dark-white   2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
+        <div className="w-full">
-          <div className="w-full">
+          <div className='mb-12'>
-            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <Link to='#'>
-              <h1 className="text-5xl font-bold leading-[74px]   text-dark-gray dark:text-white">
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-                Log In
+            </Link>
-              </h1>
+          </div>
-            </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="input-area">
+            <div className="w-full">
-              <div className="input-item mb-5">
+              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <InputCom
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                  value={email}
+                  fontSize: 'calc(1rem + .6vw)'
-                  inputHandler={handleEmail}
+                }}>
-                  placeholder="support@mermsemr.com"
+                  Sign In to WrenchBoard
-                  label="Email Address"
+                </h1>
-                  name="email"
+                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
-                  type="email"
-                  iconName="message"
-                />
               </div>
-              <div className="input-item mb-5">
+              <div className="input-area">
-                <InputCom
+                <div className="input-item mb-5">
-                  value={password}
+                  <InputCom
-                  inputHandler={handlePassword}
+                    value={email}
-                  placeholder="● ● ● ● ● ●"
+                    inputHandler={handleEmail}
-                  label="Password"
+                    placeholder="support@mermsemr.com"
-                  name="password"
+                    label="Email"
-                  type="password"
+                    name="email"
-                  iconName="password"
+                    type="email"
-                />
+                    iconName="message"
-              </div>
+                  />
-              <div className="forgot-password-area flex justify-between items-center mb-7">
+                </div>
+                <div className="input-item mb-5">
+                  <InputCom
+                    value={password}
+                    inputHandler={handlePassword}
+                    placeholder="● ● ● ● ● ●"
+                    label="Password"
+                    name="password"
+                    type="password"
+                    iconName="password"
+                    forgotPassword
+                  />
+                </div>
+                {/* <div className="forgot-password-area flex justify-between items-center mb-7">
                 <div className="remember-checkbox flex items-center space-x-2.5">
                   <button
                     onClick={rememberMe}
@@ -136,64 +168,37 @@ export default function Login() {
                 <a href="/forgot-password" className="text-base text-purple">
                   Forgot Password
                 </a>
-              </div>
+              </div> */}
-              <div className="signin-area mb-3.5">
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
-                <div className="flex justify-center">
+                {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>}
-                  <button
+                <div className="signin-area mb-3.5">
-                    onClick={doLogin}
+                  <div className="flex justify-center">
-                    type="button"
+                    <button
-                    className={`btn-login  rounded-[50px] mb-6 text-xl text-white font-bold flex justify-center bg-purple items-center ${loginLoading ? "active" : ""
+                      onClick={doLogin}
-                      }`}
+                      type="button"
-                  >
+                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center ${loginLoading ? "active" : ""
-                    {loginLoading ? (
+                        }`}
-                      <div className="signup btn-loader"></div>
+                    >
-                    ) : (
+                      {loginLoading ? (
-                      <span>Sign In</span>
+                        <div className="signup btn-loader"></div>
-                    )}
+                      ) : (
-                  </button>
+                        <span>Continue</span>
+                      )}
+                    </button>
+                  </div>
+                  <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
+                  <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
+                  <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
                 </div>
-                {loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
+                {/* <div className="signup-area flex justify-center">
-                <div className="flex justify-center bottomMargin">
-                <a
-                  href="#"
-                  className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with Google
-                  </span>
-                </a>
-                </div>
-                <div className="flex justify-center bottomMargin">
-                <a
-                    href="#"
-                    className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with faceBook
-                  </span>
-                </a>
-                </div>
-                <div className="flex justify-center bottomMargin">
-                <a
-                    href="#"
-                    className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[50px] h-[58px] flex justify-center bg-[#FAFAFA] dark:bg-[#11131F]  items-center"
-                >
-                  <img className="mr-3" src={googleLogo} alt="google logo" />
-                  <span className="text-lg text-thin-light-gray font-normal">
-                    Sign In with Apple
-                  </span>
-                </a>
-                </div>
-              </div>
-              <div className="signup-area flex justify-center">
                 <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
                   Don't have an account ?
                   <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
                     Sign up free
                   </a>
                 </p>
+              </div> */}
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>
@@ -201,4 +206,24 @@ export default function Login() {
       </AuthLayout>
     </>
   );
+}
+
+const BrandBtn = ({
+  link,
+  imgSrc,
+  brand
+}) => {
+  return (
+    <div className="flex justify-center bottomMargin">
+      <a
+        href={link}
+        className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
+      >
+        <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
+        <span className="text-lg text-thin-light-gray font-normal">
+          Sign In with {brand}
+        </span>
+      </a>
+    </div>
+  )
 }

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

@@ -1,5 +1,6 @@
 import React from "react";
 import Icons from "../../Icons";
+import { Link } from "react-router-dom";
 
 export default function InputCom({
   label,
@@ -9,18 +10,22 @@ export default function InputCom({
   iconName,
   inputHandler,
   value,
+  forgotPassword
 }) {
   return (
     <div className="input-com">
+      <div className="flex items-center justify-between">
       {label && (
         <label
-          className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       )}
-      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
+      {forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      </div>
+      <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[58px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input
           placeholder={placeholder}
           value={value}
@@ -28,6 +33,7 @@ export default function InputCom({
           className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
+          required
         />
         {iconName && (
           <div className="absolute right-6 bottom-[19px] z-10">

src/components/MyWallet/AddFund.jsx

@@ -0,0 +1,83 @@
+import React, {useState} from 'react'
+
+function AddFund() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState('0')
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(value)
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+     
+        setInputs('')
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                    <h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
+                    <hr />
+                   <form className='md:p-8 p-4 add-fund-info'>
+                        <div className='md:flex items-center'>
+                            <label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-2/4 p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs} 
+                                name='amount' 
+                                type="text" 
+                                placeholder='Amount' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+                   </form>
+                        <hr />
+                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                        </div>
+                </div>
+                <div className="add-fund py-4 my-2 w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                    <h2 className='md:px-8 px-4 py-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>
+                    <hr />
+                    <p className='md:px-8 px-4 py-2 text-slate-600 dark:text-white text-base lg:text-xl font-medium'>Transfer fund to WrenchBoard GTB Account 0250869867</p>
+                    <p className='md:px-8 px-4 py-2 text-slate-500 dark:text-white text-sm lg:text-base font-medium'>
+                    Make sure you add your account username in the notes part of the transfer for prompt processing. When the transfer is complete notify here <a className='text-sky-blue' href='#'>Contact us</a>
+                    </p>
+                </div>
+            </div>
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full  md:p-8 p-4 h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
+                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                        <thead className='border-b-2'>
+                            <tr className='text-slate-600'>
+                            <th className="py-3">Date</th>
+                            <th className="py-3">Recipient</th>
+                            <th className="py-3">Amount/Fee</th>
+                            <th className="py-3">Conf/Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default AddFund

src/components/MyWallet/Balance.jsx

@@ -0,0 +1,120 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+
+function Balance() {
+    return (
+        <div className="content-wrapper">
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+                <div className="lg:w-1/2 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>
+                            <p className='text-base text-slate-500 dark:text-white'>Add New Wallet</p>
+                        </div>
+                        {/* wallet balance */}
+                        <div className="md:flex items-center flex-wrap mt-3">
+                            <div className='text-slate-900 w-full md:w-1/2 flex space-x-3 items-start justify-start'>
+                                <div className='balance-info'>
+                                    <p className='py-2'>Currency</p>
+                                    <span className='text-base'>Naira</span>
+                                    <p className='text-base text-slate-500'>Naira</p>
+                                </div>
+                                <div className='balance-info'>
+                                    <p className='py-2'>balance</p>
+                                    <span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>&#8358;0.00</span>
+                                </div>
+                                <div className='balance-info'>
+                                    <p className='py-2'>Escrow</p>
+                                    <span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>&#8358;0.00</span>
+                                </div>
+                            </div>
+
+                            <div className='w-full my-2 md:my-0 md:w-1/2 flex space-x-2 items-center justify-start md:justify-end'>
+                                <Link to='transfer-fund' className='text-base text-white px-3 py-1 bg-purple rounded-md hover:opacity-80'>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>
+                            </div>
+                        </div>
+                        {/* end of wallet balance */}
+                    </div>
+                </div>
+        
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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'>Recent Activity</h2>
+                        <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Recipient</th>
+                                <th className="py-3">Amount/Fee</th>
+                                <th className="py-3">Conf/Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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'>Purchases</h2>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Description</th>
+                                <th className="py-3">Amount</th>
+                                <th className="py-3">Fee</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+        
+                <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                    <div className="wallet w-full  md:p-8 p-4 h-[200px] 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>
+                        <table className="wallet-activity w-full table-auto border-collapse text-left">
+                            <thead className='border-b-2'>
+                                <tr className='text-slate-600'>
+                                <th className="py-3">Date</th>
+                                <th className="py-3">Description</th>
+                                <th className="py-3">Amount</th>
+                                <th className="py-3">Active</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr className='text-slate-500'>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                    <td className="py-3">Item</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default Balance

src/components/MyWallet/TransferFund.jsx

@@ -0,0 +1,141 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+
+function TransferFund() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        amount: '0',
+        fee: '0',
+        recipient: '',
+        total: '0',
+        comment: ''
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+    
+        setInputs({
+            amount: '0',
+            fee: '0',
+            recipient: '',
+            total: '0',
+            comment: ''
+        })
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                   <form className='transfer-fund-info'>
+                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : &#8358;0.00</h2>
+                        <div className='my-3 md:flex items-center justify-between space-x-2'>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.amount} 
+                                    name='amount' 
+                                    type="text" 
+                                    placeholder='Amount' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.fee} 
+                                    name='fee' 
+                                    type="text" 
+                                    placeholder='Fee' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='my-3 md:flex items-center justify-end space-x-2'>
+                            <div className='transfer-input w-full md:w-1/2'>
+                                <label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.total} 
+                                    name='total' 
+                                    type="text" 
+                                    placeholder='Total' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='relative my-3 md:flex items-center'>
+                            <div className='transfer-input w-full'>
+                                <div className='flex items-center justify-start'>
+                                    <label className='text-slate-600 text-lg'>Recipient 
+                                        <span className='text-red-500 mx-2'>*</span> 
+                                        <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
+                                    </label>
+                                    <Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                </div>
+                                <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
+                                    <option className='text-slate-500 text-lg' value="">Select...</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div className='my-3 md:flex items-center'>
+                            <div className='transfer-input w-full'>
+                                <label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
+                                <input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                    value={inputs.comment} 
+                                    name='comment' 
+                                    type="text" 
+                                    placeholder='Comment' 
+                                    required
+                                    onChange={handleChange}
+                                    />
+                            </div>
+                        </div>
+
+                        <div className='transfer-fund-btn flex justify-end items-center py-4'>
+                            <button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
+                        </div>
+                   </form>
+                </div>
+            </div>
+    
+            <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+                <div className="wallet w-full  md:p-8 p-4 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'>Recent Activity</h2>
+                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                    <table className="wallet-activity w-full table-auto border-collapse text-left">
+                        <thead className='border-b-2'>
+                            <tr className='text-slate-600'>
+                            <th className="py-3">Date</th>
+                            <th className="py-3">Recipient</th>
+                            <th className="py-3">Amount/FeeConf/Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr className='text-slate-500'>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                                <td className="py-3">Item</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+      )
+}
+
+export default TransferFund

src/components/MyWallet/Wallet.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {Routes, Route, Outlet, Navigate} from 'react-router-dom'
+
+import Layout from '../Partials/Layout'
+
+import Balance from './Balance'
+import TransferFund from './TransferFund'
+import AddFund from './AddFund'
+
+function Wallet() {
+  return (
+    <Layout>
+        <Outlet />
+    </Layout>
+  )
+}
+
+
+
+
+
+const WalletRoutes = () => {
+    return (
+        <Routes>
+            <Route element={<Wallet />}>
+                <Route path='add-fund' element={<AddFund />} />
+                <Route path='transfer-fund' element={<TransferFund />} />
+                <Route index element={<Balance />} />
+                <Route path='*' element={<Navigate to='/' />} />
+            </Route>
+        </Routes>
+    )
+}
+
+export default WalletRoutes

src/components/MyWallet/index.jsx

@@ -243,7 +243,6 @@ export default function MyWallet() {
                 </div>
               </div>
             </div>
-            <CurrencyStaticsSection />
             {/* flex space-x-11 */}
             <div className="recent-and-investment grid lg:grid-cols-2 grid-cols-1 2xl:gap-[40px] xl:gap-7 gap-4 lg:h-[416px] w-full  justify-between">
               <div className=" h-full">

src/components/Partials/Header.jsx

@@ -641,7 +641,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                       <Link
-                        to="/profile"
+                        to="/settings"
                         className="notifications"
                       >
                         <div className="name">
@@ -679,7 +679,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         <ul className="p-3">
                           <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
                             <Link
-                              to="#"
+                              to="/referral"
                               className="notifications"
                             >
                               <div className="name">
@@ -794,13 +794,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                                 <p className="text-sm">English </p>
                               </div>
                               </div>
-                              {/* <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                <img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
-                                <p className="text-sm">English </p>
-                              </div> */}
                             </Link>
                           </li>
-                         
                         </ul>
                       </div>
                     {/* end Language list items*/}

src/components/Partials/MobileSideBar.jsx

@@ -168,6 +168,19 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+              <li className="item group">
+                <NavLink
+                  to="/referral"
+                  className="nav-item flex items-center justify-start space-x-3.5"
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
+                    <Icons name="history" />
+                  </span>
+                  <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
+                  Refer a Friend
+                  </span>
+                </NavLink>
+              </li>
             </ul>
           </div>
         </div>

src/components/Partials/Sidebar.jsx

@@ -237,6 +237,27 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   </span>
                 </NavLink>
               </li>
+
+              <li className="item group">
+                <NavLink
+                  to="/referral"
+                  className={`nav-item flex items-center ${
+                    ((navData) => (navData.isActive ? "active" : ""),
+                    sidebar ? "justify-start space-x-3.5" : "justify-center")
+                  }`}
+                >
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                    <Icons name="history" />
+                  </span>
+                  <span
+                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                      sidebar ? "active flex-1" : "w-0"
+                    }`}
+                  >
+                    Refer a Friend
+                  </span>
+                </NavLink>
+              </li>
             </ul>
           </div>
         </div>

src/components/Referral/Index.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from '../Partials/Layout'
+import ReferralDisplay from './ReferralDisplay'
+
+function Referral() {
+  return (
+    <Layout>
+        <ReferralDisplay />
+    </Layout>
+  )
+}
+
+export default Referral

src/components/Referral/ReferralDisplay.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react'
+
+function ReferralDisplay() {
+    let [referralList, setReferralList] = useState([]) // dummy remove later and call from API
+
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        firstname: '',
+        lastname: '',
+        email: '',
+        status: 'pending'
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+        setReferralList(prev => [...prev, inputs])
+        setInputs({
+            firstname: '',
+            lastname: '',
+            email: '',
+            status: 'pending'
+        })
+    }
+
+  return (
+    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+            <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
+                <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Send Referral</h2>
+               <form className='referral-info' onSubmit={handleSubmit}>
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Firstname <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.firstname} 
+                            name='firstname' 
+                            type="text" 
+                            placeholder='Firstname' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Lastname <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.lastname} 
+                            name='lastname' 
+                            type="text" 
+                            placeholder='Lastname' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+
+                    <div className='md:flex items-center my-4'>
+                        <label className='w-full md:w-1/4 text-slate-900 text-lg'>Email <span className='text-red-500'>*</span></label>
+                        <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                            value={inputs.email} 
+                            name='email' 
+                            type="email" 
+                            placeholder='Email' 
+                            required
+                            onChange={handleChange}
+                            />
+                    </div>
+                    <hr />
+                    <div className='referral-btn flex justify-end items-center py-4 border-b-4'>
+                        <button type='submit' className='text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md'>Send Message</button>
+                    </div>
+               </form>
+            </div>
+        </div>
+
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
+            <div className="referral w-full  md:p-8 p-4 h-[400px] 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'>Referral List</h2>
+                <table className="referral-list w-full table-auto border-collapse text-left">
+                    <thead className='border-b-2'>
+                        <tr className='text-slate-600'>
+                        <th className="py-3">Added/Name</th>
+                        <th className="py-3">Email</th>
+                        <th className="py-3">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {referralList.length ? 
+                        referralList.map(item => (
+                            <tr className='text-slate-500'>
+                                <td className="py-3">{item.firstname} {item.lastname}</td>
+                                <td className="py-3">{item.email}</td>
+                                <td className="py-3">{item.status}</td>
+                            </tr>
+                        ))
+                        :
+                        (<tr className='text-slate-500'>
+                            <td colSpan={3}>No Item Found on referral List</td>
+                        </tr>
+                        )
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default ReferralDisplay

src/components/Settings/index.jsx

@@ -113,7 +113,7 @@ export default function Settings() {
                         <Icons name="people-hover" />
                       </div>
                       <div>
-                        <p className="text-18 tracking-wide">Personal Info</p>
+                        <p className="text-18 tracking-wide">Edit Profile</p>
                       </div>
                     </li>
                     <li

src/index.css

@@ -458,6 +458,9 @@ input[type="number"] {
   background-size: cover;
 }
 
+.content{
+  overflow: hidden;
+}
 
 .content-item .inner-list-items {
   top: 0;
@@ -468,7 +471,7 @@ input[type="number"] {
 }
 
 .content-item:hover .inner-list-items {
-  right: -30%;
+  right: 0%;
   opacity: 1;
   z-index: 2;
 }
@@ -533,14 +536,14 @@ input[type="number"] {
 /* TODO: =================================login ================================= */
 .btn-login {
   width: 100%;
-  height: 58px;
+  height: 48px;
-  @apply bg-purple;
+  /* @apply bg-purple; */
 }
 .btn-login.active {
   transition: all 0.5s ease-in-out;
   width: 58px;
-  height: 58px;
+  height: 48px;
-  @apply bg-pink;
+  /* @apply bg-pink; */
 }
 
 /* TODO: =================================login end================================= */
@@ -690,3 +693,23 @@ TODO: Responsive ===========================
     @apply mb-2;
   }
 }
+
+
+/* LoginPage */
+.main-wrapper{
+  background-image: url('./assets/images/login-dots.jpg');
+  background-attachment: fixed;
+  background-size: contain;
+  background-position-y: bottom;
+  background-repeat: no-repeat;
+}
+
+.layout-wrapper.login{
+  background: rgb(236,237,241);
+  background: linear-gradient(90deg, rgba(236,237,241,1) 0%, rgba(252,252,252,1) 31%, rgba(255,255,255,0.9416141456582633) 41%, rgba(255,255,255,0.9752275910364145) 61%, rgba(252,252,252,1) 71%, rgba(236,237,241,1) 100%);
+}
+
+.content-wrapper.login{
+  --bg-color: 255,255,255;
+  background: linear-gradient(90deg, rgba(236,237,240,1) 0%, rgba(255,255,255,1) 50%, rgba(236,237,240,1) 100%);
+}

src/views/MyWalletPage.jsx

@@ -1,10 +1,11 @@
 import React from "react";
-import MyWallet from "../components/MyWallet";
+// import MyWallet from "../components/MyWallet";
+import WalletRoutes from "../components/MyWallet/Wallet";
 
 export default function MyWalletPage() {
   return (
     <>
-      <MyWallet />
+      <WalletRoutes />
     </>
   );
 }

src/views/ReferralPage.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Referral from '../components/Referral/Index'
+
+function ReferralPage() {
+  return (
+    <>
+    <Referral />
+    </>
+  )
+}
+
+export default ReferralPage