Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
aec5cc68a2 | ||
 ameye
|
39135654da | ||
|
ameye
|
20a957be07 | ||
|
victorAnumudu
|
85676cdb58 | ||
|
Ebube
|
0b619e9de5 | ||
|
ameye
|
ae83c7e533 | ||
|
ameye
|
78abd4f8a2 | ||
|
victorAnumudu
|
67358a5109 |
@@ -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
|
||||
|
||||
+3
-1
@@ -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>
|
||||
|
||||
@@ -17,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) => {
|
||||
@@ -34,41 +38,56 @@ export default function Login() {
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
const userApi = new usersService();
|
||||
|
||||
|
||||
const doLogin = async () => {
|
||||
if (email !== "" && password !== "") {
|
||||
var postData = {
|
||||
username: email,
|
||||
password: password,
|
||||
sessionid: 'STARTING'
|
||||
};
|
||||
const loginResult = await userApi.logInUser(postData); // just for a test
|
||||
//debugger;
|
||||
// if (email === "support@mermsemr.com") {
|
||||
if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
|
||||
localStorage.setItem("email", `${loginResult.data.email}`);
|
||||
localStorage.setItem("member_id", `${loginResult.data.member_id}`);
|
||||
localStorage.setItem("uid", `${loginResult.data.uid}`);
|
||||
localStorage.setItem("session_token", `${loginResult.data.session}`);
|
||||
localStorage.setItem("added", `${loginResult.data.added}`);
|
||||
localStorage.setItem("city", `${loginResult.data.city}`);
|
||||
localStorage.setItem("country", `${loginResult.data.country}`);
|
||||
localStorage.setItem("firstname", `${loginResult.data.firstname}`);
|
||||
localStorage.setItem("last_login", `${loginResult.data.last_login}`);
|
||||
localStorage.setItem("lastname", `${loginResult.data.lastname}`);
|
||||
localStorage.setItem("state", `${loginResult.data.state}`);
|
||||
localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
|
||||
localStorage.setItem("session", `${loginResult.data.session}`);
|
||||
setLoginLoading(true);
|
||||
// userApi.getUserReminders(); //testing
|
||||
setTimeout(() => {
|
||||
toast.success("Login Successfully");
|
||||
navigate("/", { replace: true });
|
||||
setLoginLoading(false);
|
||||
}, 2000);
|
||||
} else {
|
||||
// toast.error("Invalid Credential");
|
||||
setLoginError(true)
|
||||
if (email == '' && password == '') {
|
||||
setMsgError('Please fill in fields')
|
||||
}
|
||||
try {
|
||||
if (email !== "" && password !== "") {
|
||||
var postData = {
|
||||
username: email,
|
||||
password: password,
|
||||
sessionid: 'STARTING'
|
||||
};
|
||||
const loginResult = await userApi.logInUser(postData); // just for a test
|
||||
//debugger;
|
||||
// if (email === "support@mermsemr.com") {
|
||||
if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
|
||||
localStorage.setItem("email", `${loginResult.data.email}`);
|
||||
localStorage.setItem("member_id", `${loginResult.data.member_id}`);
|
||||
localStorage.setItem("uid", `${loginResult.data.uid}`);
|
||||
localStorage.setItem("session_token", `${loginResult.data.session}`);
|
||||
localStorage.setItem("added", `${loginResult.data.added}`);
|
||||
localStorage.setItem("city", `${loginResult.data.city}`);
|
||||
localStorage.setItem("country", `${loginResult.data.country}`);
|
||||
localStorage.setItem("firstname", `${loginResult.data.firstname}`);
|
||||
localStorage.setItem("last_login", `${loginResult.data.last_login}`);
|
||||
localStorage.setItem("lastname", `${loginResult.data.lastname}`);
|
||||
localStorage.setItem("state", `${loginResult.data.state}`);
|
||||
localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
|
||||
localStorage.setItem("session", `${loginResult.data.session}`);
|
||||
setLoginLoading(true);
|
||||
// userApi.getUserReminders(); //testing
|
||||
setTimeout(() => {
|
||||
toast.success("Login Successfully");
|
||||
navigate("/", { replace: true });
|
||||
setLoginLoading(false);
|
||||
}, 2000);
|
||||
} else {
|
||||
// toast.error("Invalid Credential");
|
||||
setLoginError(true)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
setMsgError('An error occurred')
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
setLoginError(false)
|
||||
setMsgError(null)
|
||||
}, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
|
||||
}
|
||||
};
|
||||
|
||||
@@ -78,11 +97,11 @@ export default function Login() {
|
||||
slogan="Welcome to WrenchBoard"
|
||||
>
|
||||
<div className="w-full">
|
||||
<div className='mb-12'>
|
||||
<Link to='#'>
|
||||
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className='mb-12'>
|
||||
<Link to='#'>
|
||||
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
|
||||
<div className="w-full">
|
||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||
@@ -150,6 +169,8 @@ export default function Login() {
|
||||
Forgot Password
|
||||
</a>
|
||||
</div> */}
|
||||
{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>}
|
||||
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
|
||||
<div className="signin-area mb-3.5">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
@@ -165,7 +186,6 @@ export default function Login() {
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
|
||||
<BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
|
||||
<BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
|
||||
<BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
|
||||
@@ -178,7 +198,7 @@ export default function Login() {
|
||||
</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 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>
|
||||
|
||||
@@ -33,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">
|
||||
|
||||
@@ -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
|
||||
@@ -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'>₦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'>₦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
|
||||
@@ -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 : ₦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
|
||||
@@ -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
|
||||
@@ -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*/}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
+4
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react'
|
||||
import Referral from '../components/Referral/Index'
|
||||
|
||||
function ReferralPage() {
|
||||
return (
|
||||
<>
|
||||
<Referral />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReferralPage
|
||||
Reference in New Issue
Block a user