Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
3876e1440d | ||
 ameye
|
df1a006f13 | ||
|
victorAnumudu
|
77ab969f61 | ||
|
ameye
|
6da9b9158d |
@@ -32,6 +32,7 @@ export default function RelativeTable({relativeList, familyList}) {
|
||||
<tr>
|
||||
<th className='py-4 px-2'></th>
|
||||
<th className='py-4 px-2'></th>
|
||||
<th className='py-4 px-2 text-center'>Status</th>
|
||||
<th className='py-4 px-2 text-center'>Kids</th>
|
||||
<th className='py-4 px-2'></th>
|
||||
</tr>
|
||||
@@ -58,6 +59,9 @@ export default function RelativeTable({relativeList, familyList}) {
|
||||
<td className='py-4 px-2 text-center'>
|
||||
{value.status && value.status}
|
||||
</td>
|
||||
<td className='py-4 px-2 text-center'>
|
||||
{value.kid_count && value.kid_count}
|
||||
</td>
|
||||
<td className='py-4 px-2 flex items-center justify-end'>
|
||||
<button
|
||||
onClick={() => setRelativePopout({show:true, data:{relativeSelected:value}})}
|
||||
|
||||
@@ -143,8 +143,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||
</div>
|
||||
|
||||
<div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
|
||||
<div className="p-4 w-full md:col-span-3 md:border-r-1">
|
||||
<div className="min-h-[240px]">
|
||||
<div className="px-4 py-1 w-full md:col-span-3 md:border-r-1">
|
||||
<div className="min-h-[300px]">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-white tracking-wide">
|
||||
{details?.title}
|
||||
</h2>
|
||||
@@ -168,15 +168,15 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||
danger: true,
|
||||
},
|
||||
].map(({ name, content, danger }, idx) => (
|
||||
<div className={`my-3 md:flex items-center`} key={idx}>
|
||||
<label className="job-label w-full md:w-[19%]">
|
||||
<div className={`my-3 md:flex items-start`} key={idx}>
|
||||
<label className="py-2 job-label w-full md:w-[19%]">
|
||||
{name}
|
||||
</label>
|
||||
<div
|
||||
className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop ${
|
||||
className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
|
||||
name == "Description"
|
||||
? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words"
|
||||
: name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[100px] max-h-[100px]"
|
||||
? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
|
||||
: name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
|
||||
: "h-full flex items-center"
|
||||
}`}
|
||||
>
|
||||
@@ -215,43 +215,63 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||
))}
|
||||
</div>
|
||||
<hr className='my-1' />
|
||||
<div className="w-full flex flex-col gap-3">
|
||||
<div className="w-full">
|
||||
<label className="job-label w-full">
|
||||
If you have any questions about this task:
|
||||
</label>
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
|
||||
marketMsg.loading && "italic text-[#9CA3AF]"
|
||||
} bg-transparent outline-none border-2 border-slate-300 rounded-md`}
|
||||
rows="3"
|
||||
style={{ resize: "none" }}
|
||||
placeholder="Enter message here ..."
|
||||
value={marketMsg.loading ? "Sending..." : textValue}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex w-full justify-end ">
|
||||
<span className="text-sm text-[#57cd89] absolute left-[8rem] top-4">
|
||||
<div className='w-full'>
|
||||
<label className="job-label w-full flex gap-2 items-center">
|
||||
If you have any questions about this task:
|
||||
<span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
|
||||
{marketMsg.state && "Message Sent!"}
|
||||
{errMsg.market && "Something went wrong"}
|
||||
{errMsg.market && "Failed to send"}
|
||||
</span>
|
||||
<button
|
||||
className="custom-btn self-end bg-yellow-500 text-white"
|
||||
name="market-message"
|
||||
onClick={MarketDetail}
|
||||
>
|
||||
{marketMsg.loading ? (
|
||||
<LoadingSpinner size={5} color="white" />
|
||||
) : (
|
||||
"Send Message"
|
||||
)}
|
||||
</button>
|
||||
</label>
|
||||
<div className="w-full flex items-center gap-3">
|
||||
<div className="w-full">
|
||||
<textarea
|
||||
className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
|
||||
marketMsg.loading && "italic text-[#9CA3AF]"
|
||||
} bg-transparent outline-none border-2 border-slate-300 rounded-md`}
|
||||
rows="3"
|
||||
style={{ resize: "none" }}
|
||||
placeholder="Enter message here ..."
|
||||
value={marketMsg.loading ? "Sending..." : textValue}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex flex-col">
|
||||
<button
|
||||
className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
|
||||
name="market-message"
|
||||
onClick={MarketDetail}
|
||||
disabled={marketMsg.loading}
|
||||
>
|
||||
{marketMsg.loading ? (
|
||||
<LoadingSpinner size={5} color="white" />
|
||||
) : (
|
||||
// "Send Message"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 11 20"
|
||||
id="Arrow"
|
||||
className="w-[0.7rem]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
|
||||
// fill=""
|
||||
className="color000000 svgShape fill-[#fff]"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
{/* <span className="text-sm text-[#57cd89]">
|
||||
{marketMsg.state && "Sent!"}
|
||||
{errMsg.market && "Failed"}
|
||||
</span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-2 w-full md:col-span-1 h-full flex flex-col">
|
||||
<div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
|
||||
<div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
|
||||
<div className="w-full flex flex-col justify-center pb-4 gap-2">
|
||||
<p className="job-label w-full">
|
||||
|
||||
@@ -107,11 +107,22 @@ export default function MyPendingJobTable({ MyJobList, className }) {
|
||||
onClick={() => {
|
||||
setJobPopout({ show: true, data: value });
|
||||
}}
|
||||
className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
{value.owner_status == "OWNER"
|
||||
? "Manage"
|
||||
: "View"}
|
||||
{/* {value.owner_status == "OWNER" ? "Manage": "View"} */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 11 20"
|
||||
id="Arrow"
|
||||
className="w-[0.7rem]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
|
||||
// fill=""
|
||||
className="color000000 svgShape fill-[#fff]"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -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' />
|
||||
:
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user