WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

offer list btn changed, and manage offer interest page updated

Browse Source
This commit was merged in pull request #762.
This commit is contained in:
victorAnumudu
2024-07-22 19:52:46 +01:00
parent df1a006f13
commit 3876e1440d
4 changed files with 103 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OffersInterest/ManageInterestOffer.jsx
+28 -24
View File
@@ -165,7 +165,7 @@ export default function ManageInterestOffer(props) {
{/* manage offer section */}
<div className="w-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
<div className="my-2 w-full sm:grid gap-5 grid-cols-4">
<div className="my-2 w-full md:grid gap-5 grid-cols-4">
{/* Detail section */}
<div className="w-full mb-5 lg:mb-0 col-span-3">
<div className="w-full flex justify-start space-x-3 items-center">
@@ -232,14 +232,18 @@ export default function ManageInterestOffer(props) {
<div className="info-details w-full border-t">
<div className="my-0 md:my-3 block md:flex items-center gap-10">
<div className="my-3 md:my-0 flex items-center gap-1">
<p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Name</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</p>
<p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
Name : {' '}
<span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
</p>
</div>
<div className="my-3 md:my-0 flex items-center gap-1">
<p className="w-[200px] text-lg font-bold text-black dark:text-white tracking-wide">Member Since</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">
{clientAdded.getFullYear()}{" - "}
{clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
<p className="text-xl font-extrabold text-black dark:text-white tracking-wide">
Member Since : {' '}
<span className="text-lg font-normal text-dark-gray dark:text-white tracking-wide">
{clientAdded.getFullYear()}{" - "}
{clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
</span>
</p>
</div>
</div>
@@ -248,35 +252,35 @@ export default function ManageInterestOffer(props) {
<LoadingSpinner color='sky-blue' size='10' height='min-h-[40px]' />
:
<>
<div className='w-full'>
<div className='w-full my-3 md:my-0'>
<h1 className="text-xl font-extrabold text-black dark:text-white tracking-wide">Previous Job Statistics</h1>
</div>
<div className='p-2 flex flex-col md:flex-row gap-4 justify-center items-center max-w-xl rounded-2xl bg-sky-100'>
<div className='p-2 w-full md:max-w-xl flex flex-col md:flex-row gap-4 justify-center items-center rounded-2xl bg-sky-100'>
<div className='contents md:flex flex-col gap-3'>
<div className='flex items-center gap-4'>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed:</p>
<div className='flex items-center gap-1'>
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Completed :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_completed && interestStats.data?.job_completed}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active:</p>
<div className="flex items-center gap-1">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Active :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_active && interestStats.data?.job_active}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion:</p>
<div className="flex items-center gap-1">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">% Completion :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_percent_complete && interestStats.data?.job_percent_complete}</p>
</div>
</div>
<div className='contents md:flex flex-col gap-3'>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed:</p>
<p className="min-w-[150px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
<div className="flex items-center gap-1">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Last Completed :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_last_date && interestStats.data?.job_last_date}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted:</p>
<div className="flex items-center gap-1">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Uncompleted :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_uncompleted && interestStats.data?.job_uncompleted}</p>
</div>
<div className="flex items-center gap-4">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers:</p>
<div className="flex items-center gap-1">
<p className="min-w-[150px] text-lg font-bold text-black dark:text-white tracking-wide text-right">Pending Offers :</p>
<p className="min-w-[100px] text-lg font-normal text-dark-gray dark:text-white tracking-wide">{interestStats.data?.job_pending && interestStats.data?.job_pending}</p>
</div>
</div>
@@ -392,7 +396,7 @@ export default function ManageInterestOffer(props) {
<div className="p-4 w-full min-h-full bg-sky-100 rounded-2xl dark:bg-dark-gray col-span-1">
{/* Wallet balance and reward */}
<div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
<div className='mb-4 border-b-2 flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-4'>
<div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
<span className="font-medium text-dark-gray dark:text-white">{ walletDetails?.loading ? 'loading...' : PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
@@ -404,7 +408,7 @@ export default function ManageInterestOffer(props) {
</div>
{/* BUTTON section */}
<div className="w-full">
<div className="h-full flex sm:flex-col justify-center items-center gap-10">
<div className="h-full flex flex-col xxs:flex-row md:flex-col justify-center items-center gap-10">
{requestStatus.loading && requestStatus.processType == 'accept' ?
<LoadingSpinner color='sky-blue' size='10' />
:
src/components/OffersInterest/OthersInterestedTable.jsx
+2 -2
View File
@@ -65,11 +65,11 @@ export default function OthersInterestTable({othersInterestedList, className}) {
<tr key={index} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="min-w-[60px] min-h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<div className="w-[60px] h-[60px] p-2 bg-alice-blue rounded-full overflow-hidden flex justify-center items-center">
<img
src={image}
alt="data"
className="w-full h-full"
className="w-full h-full rounded-full"
/>
</div>
<div className="flex flex-col">