Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
1d50790cc1 | ||
|
CHIEFSOFT\ameye
|
3ea0737341 | ||
 ameye
|
bb0c8c9f34 | ||
|
ameye
|
93f26fcfba |
@@ -5,10 +5,18 @@ import localImgLoad from "../../lib/localImgLoad";
|
|||||||
export default function HomeBannerOffersCard(props) {
|
export default function HomeBannerOffersCard(props) {
|
||||||
console.log("HomeBannerOffersCard-> ##->",props)
|
console.log("HomeBannerOffersCard-> ##->",props)
|
||||||
const link_result = "/" + props.itemData.link_path;
|
const link_result = "/" + props.itemData.link_path;
|
||||||
|
var imgUrl = props.itemData.banner; // ? this.state.nextImgSrc : this.state.song.imgSrc;
|
||||||
|
console.log("IMAGE FOR BANNER->",imgUrl);
|
||||||
|
var divStyle = {
|
||||||
|
backgroundImage: 'url(' + imgUrl + ')'
|
||||||
|
}
|
||||||
|
var linkDivStyle = "item w-full block group banner-630-340 " + divStyle;
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
to={link_result}
|
to={link_result}
|
||||||
className="item w-full block group banner-630-340"
|
className={linkDivStyle}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col justify-between h-full">
|
<div className="flex flex-col justify-between h-full">
|
||||||
<div className="content flex justify-between items-center mb-5">
|
<div className="content flex justify-between items-center mb-5">
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
|
|||||||
:
|
:
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr className='text-slate-500'>
|
<tr className='text-slate-500'>
|
||||||
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
|
<td className="p-2" colSpan={4}>No Message Found!</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -52,11 +52,10 @@ function ActiveJobs(props) {
|
|||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
|
|
||||||
<div className="p-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0 rounded-lg shadow-lg bg-slate-100">
|
<div className="py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||||
<div className="w-full lg:w-1/2">
|
{/* job title */}
|
||||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
<div className="w-full lg:w-1/2">
|
||||||
{/* back btn and title */}
|
<div className="w-full flex justify-start space-x-3 items-start">
|
||||||
<div className="w-full flex justify-start space-x-3 items-center">
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||||
@@ -72,143 +71,147 @@ function ActiveJobs(props) {
|
|||||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
{props.details?.title && props.details.title}
|
{props.details?.title && props.details.title}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
{/* END of back btn and title */}
|
|
||||||
|
|
||||||
<div className="mt-2 w-full flex flex-col-reverse lg:flex-row lg:justify-between lg:items-start lg:space-x-2">
|
<div className="w-full my-4">
|
||||||
<div className="w-full lg:w-2/3 my-2 lg:my-0">
|
<div className="pb-2 w-full flex items-center">
|
||||||
<p className="text-base text-slate-700 dark:text-black">
|
<p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
|
||||||
{props.details?.contract && props.details.contract}
|
{props.details?.contract && props.details.contract}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-base text-slate-700 dark:text-black">
|
<p className="w-full lg:w-1/3 text-base text-sky-blue">
|
||||||
<span className="font-semibold">Description: </span>
|
|
||||||
{props.details?.description && props.details.description}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-sky-blue">Delivery Detail</p>
|
|
||||||
<div className="">
|
|
||||||
<p className="text-base text-slate-700 dark:text-black">
|
|
||||||
<span className="font-semibold">Due: </span>
|
|
||||||
{props.details?.delivery_date &&
|
|
||||||
props.details.delivery_date.split(" ")[0]}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-slate-700 dark:text-black">
|
|
||||||
{props.details?.delivery_date &&
|
|
||||||
props.details.delivery_date.split(" ")[1]}
|
|
||||||
</p>
|
|
||||||
<p className="text-base text-slate-700 dark:text-black">
|
|
||||||
{props.details?.timeline_days && props.details.timeline_days} day(s)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full lg:w-1/3 lg:text-center">
|
|
||||||
<p className="text-base text-sky-blue">
|
|
||||||
{userDetails.firstname && userDetails.firstname}
|
{userDetails.firstname && userDetails.firstname}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p className="text-base text-slate-700 dark:text-black">
|
||||||
|
<span className="font-semibold">Description: </span>
|
||||||
|
{props.details?.description && props.details.description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/* end of job title */}
|
||||||
|
|
||||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
{/* job details */}
|
||||||
|
<div className="w-full lg:w-1/2">
|
||||||
|
<p className="text-base text-sky-blue">Delivery Detail</p>
|
||||||
|
<div className="mt-2">
|
||||||
|
<p className="text-base text-slate-700 dark:text-black">
|
||||||
|
<span className="font-semibold">Due: </span>
|
||||||
|
{props.details?.delivery_date &&
|
||||||
|
props.details.delivery_date.split(" ")[0]}
|
||||||
|
</p>
|
||||||
|
<p className="py-2 text-base text-slate-700 dark:text-black">
|
||||||
|
{props.details?.delivery_date &&
|
||||||
|
props.details.delivery_date.split(" ")[1]}
|
||||||
|
</p>
|
||||||
|
<p className="text-base text-slate-700 dark:text-black">
|
||||||
|
{props.details?.timeline_days && props.details.timeline_days} day(s)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* end of job details */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-4 py-[20px] bg-white px-4 rounded-md shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||||
|
<div className="w-full lg:w-1/2">
|
||||||
<div className="">
|
<div className="">
|
||||||
<p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
|
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
|
||||||
<textarea
|
<p className="my-3 py-1 text-base">
|
||||||
className="p-4 w-full text-base text-slate-600 border-y border-slate-300 outline-none"
|
Waiting for the completion message from the client before you can approve.
|
||||||
rows="10"
|
</p>
|
||||||
style={{ resize: "none" }}
|
|
||||||
name='message'
|
|
||||||
onChange={handleMessageChange}
|
|
||||||
value={messageToSend}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* TEXTAREA SECTION */}
|
||||||
<div className="w-full">
|
<div className="mt-3">
|
||||||
{/* error or success display */}
|
<div className="">
|
||||||
{requestStatus.message != "" &&
|
<p className="relative py-2 my-2 text-lg font-bold text-slate-600 dark:text-black border-b-2 border-slate-300 tracking-wide after:absolute after:-bottom-0.5 after:content-[''] after:w-[100px] after:h-[2px] after:bg-sky-blue after:left-0">Message(s)</p>
|
||||||
(!requestStatus.status ? (
|
<textarea
|
||||||
<div
|
className="p-4 w-full text-base text-slate-600 border border-slate-300 outline-none"
|
||||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
rows="10"
|
||||||
>
|
style={{ resize: "none" }}
|
||||||
{requestStatus.message}
|
name='message'
|
||||||
</div>
|
onChange={handleMessageChange}
|
||||||
) : (
|
value={messageToSend}
|
||||||
requestStatus.status && (
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
|
<div className="w-full">
|
||||||
|
{/* error or success display */}
|
||||||
|
{requestStatus.message != "" &&
|
||||||
|
(!requestStatus.status ? (
|
||||||
<div
|
<div
|
||||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
>
|
>
|
||||||
{requestStatus.message}
|
{requestStatus.message}
|
||||||
</div>
|
</div>
|
||||||
)
|
) : (
|
||||||
))}
|
requestStatus.status && (
|
||||||
</div>
|
<div
|
||||||
{/* End of error or success display */}
|
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
|
>
|
||||||
|
{requestStatus.message}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* End of error or success display */}
|
||||||
|
|
||||||
{/* Buttons Sections */}
|
{/* Buttons Sections */}
|
||||||
<div className="py-2 mb-8 sm:flex sm:justify-center sm:items-center">
|
<div className="py-2 sm:flex sm:justify-center sm:items-center">
|
||||||
<div className="w-full sm:w-2/4 mb-5 sm:mb-0">
|
<div className="w-full mb-3 sm:mb-0 sm:w-2/4">
|
||||||
<button
|
<button
|
||||||
onClick={()=>{console.log('working')}}
|
onClick={()=>{console.log('working')}}
|
||||||
type="button"
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
|
||||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<span className="text-white">Upload Files</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
type="button"
|
||||||
className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
|
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
|
||||||
>
|
>
|
||||||
<span className="text-white">Clear</span>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
|
||||||
</button>
|
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
|
||||||
<button
|
</svg>
|
||||||
onClick={sendTaskMessage}
|
|
||||||
type="button"
|
<span className="text-white">Upload Files</span>
|
||||||
className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
|
</button>
|
||||||
>
|
</div>
|
||||||
{requestStatus.loading ?
|
|
||||||
<LoadingSpinner size='6' color='sky-blue' />
|
<div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
|
||||||
:
|
<button
|
||||||
<span className="text-white">Send</span>
|
type="button"
|
||||||
}
|
className="bg-red-600 text-base text-white tracking-wide px-4 py-2 rounded-md hover:opacity-90"
|
||||||
</button>
|
>
|
||||||
|
<span className="text-white">Clear</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={sendTaskMessage}
|
||||||
|
type="button"
|
||||||
|
className="btn-gradient text-base text-white tracking-wide px-4 py-2 rounded-md"
|
||||||
|
>
|
||||||
|
{requestStatus.loading ?
|
||||||
|
<LoadingSpinner size='6' color='sky-blue' />
|
||||||
|
:
|
||||||
|
<span className="text-white">Send</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* end of Buttons Sections */}
|
||||||
</div>
|
</div>
|
||||||
{/* end of Buttons Sections */}
|
{/* END OF TEXTAREA */}
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ACTION SECTION */}
|
|
||||||
<div className="w-full lg:w-1/2 h-full">
|
|
||||||
<div className="py-[20px] bg-white px-4 rounded-md shadow-md">
|
|
||||||
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Actions</h1>
|
|
||||||
|
|
||||||
<p className="my-3 py-1 text-base">
|
|
||||||
Waiting for the completion message from the client before you can approve.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-5 bg-white p-4 rounded-md shadow-md">
|
{/* MESSAGE SECTION */}
|
||||||
<div className="">
|
<div className="w-full lg:w-1/2">
|
||||||
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
|
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">Message</p>
|
||||||
{props.activeJobMesList.loading ?
|
{props.activeJobMesList.loading ?
|
||||||
<LoadingSpinner size='16' color='sky-blue' />
|
<LoadingSpinner size='16' color='sky-blue' />
|
||||||
:
|
:
|
||||||
<ActiveJobMessage activeJobMesList={props.activeJobMesList} />
|
<ActiveJobMessage activeJobMesList={props.activeJobMesList} />
|
||||||
}
|
}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* END OF MESSAGE */}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
+4
-2
@@ -11,10 +11,12 @@
|
|||||||
}
|
}
|
||||||
.siderCardHeader{
|
.siderCardHeader{
|
||||||
margin: 40px 40px 10px 40px;
|
margin: 40px 40px 10px 40px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
.siderCardDescription{
|
.siderCardDescription{
|
||||||
margin: 30px;
|
margin: 20px 45px 10px 45px;
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
.siderCardButton{
|
.siderCardButton{
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user