Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
67358a5109 | ||
|
DESKTOP-GBA0BK8\Admin
|
b3bbc15113 | ||
 ameye
|
9088b026c3 |
@@ -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
|
||||
|
||||
@@ -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 (
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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-gray-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-gray-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
|
||||
@@ -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