Add fund page

This commit is contained in:
CHIEFSOFT\ameye
2023-06-17 08:55:12 -04:00
parent fcca050ff6
commit 134be6a1f0
+47 -36
View File
@@ -36,49 +36,60 @@ function AddFund({payment}) {
setInput('') setInput('')
} }
return ( return (
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin"> <div>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0"> {/* heading */}
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow"> <div className="sm:flex justify-between items-center mb-6">
<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> <div className="mb-5 sm:mb-0">
<hr /> <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
<form className='md:p-8 p-4 add-fund-info'> Add Credit
<div className='md:flex items-center'> </h1>
<label className='w-full md:w-2/4 text-slate-600 text-lg'>Amount(Naira) <span className='text-red-500'>*</span></label> </div>
<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' <div className="slider-btns flex space-x-4">
value={input} <div
name='amount' onClick={() => filterHandler("today")}
type="text" className="relative"
placeholder='Amount' ></div>
required </div>
onChange={handleChange} </div>
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="lg:w-2/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={input}
name='amount'
type="text"
placeholder='Amount'
required
onChange={handleChange}
/> />
</div> </div>
{inputError && <p className='text-base text-red-500'>{inputError}</p>} {inputError && <p className='text-base text-red-500'>{inputError}</p>}
</form> </form>
<hr /> <hr />
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'> <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> <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> </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> </div>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0"> <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow"> <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2> <div className="wallet w-full md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
{/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */} <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
{payment.loading ? {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
<LoadingSpinner size='16' color='sky-blue' /> {payment.loading ?
: <LoadingSpinner size='16' color='sky-blue' />
<RecentActivityTable payment={payment}/> :
} <RecentActivityTable payment={payment}/>
}
</div>
</div> </div>
</div> </div>
</div> </div>