Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
2ab1c960c7 |
+256
-256
@@ -73,7 +73,8 @@ function AddJob({ popUpHandler, categories }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Formik
|
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
|
||||||
|
<Formik
|
||||||
initialValues={IV}
|
initialValues={IV}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
onSubmit={handleAddJob}
|
onSubmit={handleAddJob}
|
||||||
@@ -81,282 +82,281 @@ function AddJob({ popUpHandler, categories }) {
|
|||||||
{(props) => {
|
{(props) => {
|
||||||
return (
|
return (
|
||||||
<Form>
|
<Form>
|
||||||
<div className="add-job p-5 w-full bg-white dark:bg-dark-white dark:text-white rounded-md flex flex-col justify-between">
|
<div className="flex flex-col-reverse sm:flex-row">
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
<div className="fields w-full">
|
||||||
<div className="fields w-full">
|
{/* inputs starts here */}
|
||||||
{/* inputs starts here */}
|
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
||||||
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
<div className="field w-full mb-6 xl:mb-0">
|
||||||
<div className="field w-full mb-6 xl:mb-0">
|
<label
|
||||||
<label
|
htmlFor="country"
|
||||||
htmlFor="country"
|
className="job-label job-label-flex"
|
||||||
className="job-label job-label-flex"
|
>
|
||||||
>
|
<span>Currency</span>
|
||||||
<span>Currency</span>
|
{props.errors.country && props.touched.country && (
|
||||||
{props.errors.country && props.touched.country && (
|
<span className="text-[12px] text-red-500">
|
||||||
|
{props.errors.country}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="country"
|
||||||
|
name="country"
|
||||||
|
value={props.values.country}
|
||||||
|
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
>
|
||||||
|
{walletDetails?.loading ? (
|
||||||
|
<option className="text-slate-500 text-lg" value="">
|
||||||
|
Loading...
|
||||||
|
</option>
|
||||||
|
) : walletDetails.data.length ? (
|
||||||
|
<>
|
||||||
|
<option className="text-slate-500 text-lg" value="">
|
||||||
|
Select a currency
|
||||||
|
</option>
|
||||||
|
{walletDetails.data?.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={item?.country}
|
||||||
|
>
|
||||||
|
{item?.description}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<option className="text-slate-500 text-lg" value="">
|
||||||
|
No Options Found! Try Again
|
||||||
|
</option>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price */}
|
||||||
|
<div className="field w-full">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6 text-right flex"
|
||||||
|
label="Price"
|
||||||
|
labelClass=""
|
||||||
|
type="number"
|
||||||
|
name="price"
|
||||||
|
placeholder="0"
|
||||||
|
value={props.values.price}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
error={
|
||||||
|
props.errors.price &&
|
||||||
|
props.touched.price &&
|
||||||
|
props.errors.price
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<div className="field w-full mb-[5px]">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Title"
|
||||||
|
labelClass=""
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
value={props.values.title}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
error={
|
||||||
|
props.errors.title &&
|
||||||
|
props.touched.title &&
|
||||||
|
props.errors.title
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div className="field w-full mb-[5px]">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Description"
|
||||||
|
labelClass=""
|
||||||
|
type="text"
|
||||||
|
name="description"
|
||||||
|
value={props.values.description}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
error={
|
||||||
|
props.errors.description &&
|
||||||
|
props.touched.description &&
|
||||||
|
props.errors.description
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||||
|
<div className="sm:w-[60%] w-full">
|
||||||
|
<label
|
||||||
|
htmlFor="Job Delivery Details"
|
||||||
|
className="job-label job-label-flex"
|
||||||
|
>
|
||||||
|
Job Delivery Details
|
||||||
|
{props.errors.job_detail &&
|
||||||
|
props.touched.job_detail && (
|
||||||
<span className="text-[12px] text-red-500">
|
<span className="text-[12px] text-red-500">
|
||||||
{props.errors.country}
|
{props.errors.job_detail}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</label>
|
</label>
|
||||||
<select
|
<textarea
|
||||||
id="country"
|
id="Job Delivery Details"
|
||||||
name="country"
|
rows="5"
|
||||||
value={props.values.country}
|
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
|
||||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border`}
|
style={{ resize: "none" }}
|
||||||
onChange={props.handleChange}
|
name="job_detail"
|
||||||
onBlur={props.handleBlur}
|
value={props.values.job_detail}
|
||||||
>
|
onChange={props.handleChange}
|
||||||
{walletDetails?.loading ? (
|
onBlur={props.handleBlur}
|
||||||
<option className="text-slate-500 text-lg" value="">
|
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : walletDetails.data.length ? (
|
|
||||||
<>
|
|
||||||
<option className="text-slate-500 text-lg" value="">
|
|
||||||
Select a currency
|
|
||||||
</option>
|
|
||||||
{walletDetails.data?.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value={item?.country}
|
|
||||||
>
|
|
||||||
{item?.description}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<option className="text-slate-500 text-lg" value="">
|
|
||||||
No Options Found! Try Again
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Price */}
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 text-right flex"
|
|
||||||
label="Price"
|
|
||||||
labelClass=""
|
|
||||||
type="number"
|
|
||||||
name="price"
|
|
||||||
placeholder="0"
|
|
||||||
value={props.values.price}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
error={
|
|
||||||
props.errors.price &&
|
|
||||||
props.touched.price &&
|
|
||||||
props.errors.price
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Title */}
|
|
||||||
<div className="field w-full mb-[5px]">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Title"
|
|
||||||
labelClass=""
|
|
||||||
type="text"
|
|
||||||
name="title"
|
|
||||||
value={props.values.title}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
error={
|
|
||||||
props.errors.title &&
|
|
||||||
props.touched.title &&
|
|
||||||
props.errors.title
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
<div className="sm:w-[35%] w-full">
|
||||||
<div className="field w-full mb-[5px]">
|
<label
|
||||||
<InputCom
|
htmlFor="Job Categories"
|
||||||
fieldClass="px-6"
|
className='job-label'
|
||||||
label="Description"
|
id="checked-group"
|
||||||
labelClass=""
|
|
||||||
type="text"
|
|
||||||
name="description"
|
|
||||||
value={props.values.description}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
error={
|
|
||||||
props.errors.description &&
|
|
||||||
props.touched.description &&
|
|
||||||
props.errors.description
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Details */}
|
|
||||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
|
||||||
<div className="sm:w-[60%] w-full">
|
|
||||||
<label
|
|
||||||
htmlFor="Job Delivery Details"
|
|
||||||
className="job-label job-label-flex"
|
|
||||||
>
|
|
||||||
Job Delivery Details
|
|
||||||
{props.errors.job_detail &&
|
|
||||||
props.touched.job_detail && (
|
|
||||||
<span className="text-[12px] text-red-500">
|
|
||||||
{props.errors.job_detail}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="Job Delivery Details"
|
|
||||||
rows="5"
|
|
||||||
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] border`}
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
name="job_detail"
|
|
||||||
value={props.values.job_detail}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sm:w-[35%] w-full">
|
|
||||||
<label
|
|
||||||
htmlFor="Job Categories"
|
|
||||||
className='job-label'
|
|
||||||
id="checked-group"
|
|
||||||
>
|
|
||||||
Categories
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
|
||||||
role="group"
|
|
||||||
aria-labelledby="checked-group"
|
|
||||||
>
|
|
||||||
{categories ? (
|
|
||||||
<>
|
|
||||||
{Object?.entries(categories).map(([key, value]) => (
|
|
||||||
<label
|
|
||||||
key={key}
|
|
||||||
className="flex gap-1 w-full items-center"
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
type="checkbox"
|
|
||||||
name="category"
|
|
||||||
value={key}
|
|
||||||
/>
|
|
||||||
<span className="text-[13.975px]">{value}</span>
|
|
||||||
</label>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<label className="flex gap-1 w-full items-center">
|
|
||||||
<Field type="checkbox" name="category" />
|
|
||||||
<span className="text-[13.975px]">null</span>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
|
||||||
{props.errors.category &&
|
|
||||||
props.touched.category &&
|
|
||||||
"please select a category"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full mb-[5px]">
|
|
||||||
<div className={`flex items-center justify-between mb-2.5`}>
|
|
||||||
<label
|
|
||||||
className="job-label"
|
|
||||||
htmlFor="timeline_days"
|
|
||||||
>
|
|
||||||
Timeline
|
|
||||||
<span className="text-green-700 text-sm tracking-wide">
|
|
||||||
- Expected duration of this task
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field
|
|
||||||
component="select"
|
|
||||||
name="timeline_days"
|
|
||||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
|
|
||||||
props.errors.timeline_days &&
|
|
||||||
props.touched.timeline_days
|
|
||||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
|
||||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
|
||||||
}`}
|
|
||||||
value={props.values.timeline_days}
|
|
||||||
>
|
>
|
||||||
<option value="">Select Duration</option>
|
Categories
|
||||||
{publicArray.map(({ name, duration }, idx) => (
|
</label>
|
||||||
<option
|
|
||||||
key={idx}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value={duration}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</Field>
|
|
||||||
</div>
|
|
||||||
{/* inputs ends here */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
|
||||||
<div className="content-footer w-full">
|
|
||||||
{/* error or success display */}
|
|
||||||
{requestStatus.message != "" &&
|
|
||||||
(!requestStatus.status ? (
|
|
||||||
<div
|
<div
|
||||||
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]`}
|
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||||
|
role="group"
|
||||||
|
aria-labelledby="checked-group"
|
||||||
|
>
|
||||||
|
{categories ? (
|
||||||
|
<>
|
||||||
|
{Object?.entries(categories).map(([key, value]) => (
|
||||||
|
<label
|
||||||
|
key={key}
|
||||||
|
className="flex gap-1 w-full items-center"
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
type="checkbox"
|
||||||
|
name="category"
|
||||||
|
value={key}
|
||||||
|
/>
|
||||||
|
<span className="text-[13.975px]">{value}</span>
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<label className="flex gap-1 w-full items-center">
|
||||||
|
<Field type="checkbox" name="category" />
|
||||||
|
<span className="text-[13.975px]">null</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||||
|
{props.errors.category &&
|
||||||
|
props.touched.category &&
|
||||||
|
"please select a category"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full mb-[5px]">
|
||||||
|
<div className={`flex items-center justify-between mb-2.5`}>
|
||||||
|
<label
|
||||||
|
className="job-label"
|
||||||
|
htmlFor="timeline_days"
|
||||||
|
>
|
||||||
|
Timeline
|
||||||
|
<span className="text-green-700 text-sm tracking-wide">
|
||||||
|
- Expected duration of this task
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
component="select"
|
||||||
|
name="timeline_days"
|
||||||
|
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none border ${
|
||||||
|
props.errors.timeline_days &&
|
||||||
|
props.touched.timeline_days
|
||||||
|
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||||
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||||
|
}`}
|
||||||
|
value={props.values.timeline_days}
|
||||||
|
>
|
||||||
|
<option value="">Select Duration</option>
|
||||||
|
{publicArray.map(({ name, duration }, idx) => (
|
||||||
|
<option
|
||||||
|
key={idx}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={duration}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
{/* inputs ends here */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
|
<div className="content-footer w-full">
|
||||||
|
{/* error or success display */}
|
||||||
|
{requestStatus.message != "" &&
|
||||||
|
(!requestStatus.status ? (
|
||||||
|
<div
|
||||||
|
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}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
requestStatus.status && (
|
||||||
|
<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]`}
|
||||||
>
|
>
|
||||||
{requestStatus.message}
|
{requestStatus.message}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
)
|
||||||
requestStatus.status && (
|
))}
|
||||||
<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>
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
{/* End of error or success display */}
|
|
||||||
|
|
||||||
</div>
|
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||||
</div>
|
<div className="flex items-center space-x-4 mr-9">
|
||||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
|
||||||
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="custom-btn border border-light-red text-light-red"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="px-2"
|
|
||||||
onClick={popUpHandler}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
Cancel
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{requestStatus?.loading ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="button"
|
||||||
className="custom-btn btn-gradient text-white"
|
className="text-18 tracking-wide h-11 flex justify-center items-center border border-light-red text-base rounded-full text-light-red cursor-pointer"
|
||||||
>
|
>
|
||||||
Add Job
|
<span
|
||||||
|
className="px-2"
|
||||||
|
onClick={popUpHandler}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
Cancel
|
||||||
|
</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
|
{requestStatus?.loading ? (
|
||||||
|
<LoadingSpinner size="8" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
>
|
||||||
|
Add Job
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -105,7 +105,7 @@ function ConfirmNairaWithdraw({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={action} situation={situation}>
|
<ModalCom action={action} situation={situation}>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h2 className="modal-title">
|
<h2 className="modal-title">
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
|||||||
situation={situation}
|
situation={situation}
|
||||||
className="assign-task-popup"
|
className="assign-task-popup"
|
||||||
>
|
>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
{confirmCredit?.show?.acceptConfirm?.loader
|
{confirmCredit?.show?.acceptConfirm?.loader
|
||||||
|
|||||||
@@ -290,7 +290,7 @@ function NairaWithdraw({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={action} situation={situation}>
|
<ModalCom action={action} situation={situation}>
|
||||||
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="modal-header-con">
|
<div className="modal-header-con">
|
||||||
<h1 className="modal-title">
|
<h1 className="modal-title">
|
||||||
|
|||||||
@@ -125,6 +125,27 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
|||||||
<span className="job-label">Duration: </span>{details.timeline_days} day(s)
|
<span className="job-label">Duration: </span>{details.timeline_days} day(s)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex space-x-2.5">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
type="button"
|
||||||
|
className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||||
|
>
|
||||||
|
<span className="text-gradient">Cancel</span>
|
||||||
|
</button>
|
||||||
|
{requestStatus.laoding ? (
|
||||||
|
<LoadingSpinner size="8" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => deleteJob(details)}
|
||||||
|
type="button"
|
||||||
|
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
|
||||||
|
>
|
||||||
|
Confirm Delete
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{requestStatus.message != "" &&
|
{requestStatus.message != "" &&
|
||||||
(!requestStatus.status ? (
|
(!requestStatus.status ? (
|
||||||
@@ -144,28 +165,6 @@ function DeleteJobPopout({ details, onClose, situation }) {
|
|||||||
))}
|
))}
|
||||||
{/* End of error or success display */}
|
{/* End of error or success display */}
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
|
||||||
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
type="button"
|
|
||||||
className="custom-btn border-gradient"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Cancel</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus.laoding ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={() => deleteJob(details)}
|
|
||||||
type="button"
|
|
||||||
className="custom-btn text-white primary-gradient"
|
|
||||||
>
|
|
||||||
Confirm Delete
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -242,6 +242,7 @@ const EditJobPopOut = ({
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
@@ -249,276 +250,277 @@ const EditJobPopOut = ({
|
|||||||
>
|
>
|
||||||
{(props) => (
|
{(props) => (
|
||||||
<Form className="w-full">
|
<Form className="w-full">
|
||||||
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
|
<div className="flex flex-col-reverse sm:flex-row">
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
<div className="fields w-full">
|
||||||
<div className="fields w-full">
|
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
||||||
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
<div className="field w-full mb-6 xl:mb-0">
|
||||||
<div className="field w-full mb-6 xl:mb-0">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 cursor-default"
|
|
||||||
label="Currency"
|
|
||||||
labelClass="tracking-wide"
|
|
||||||
inputBg="bg-slate-100"
|
|
||||||
inputClass="input-curve lg border border-light-purple"
|
|
||||||
type="text"
|
|
||||||
name="country"
|
|
||||||
value={props.values.country}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Price */}
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6 text-right"
|
|
||||||
label="Price"
|
|
||||||
labelClass="tracking-wide"
|
|
||||||
inputBg="bg-slate-100"
|
|
||||||
inputClass="input-curve lg border border-light-purple"
|
|
||||||
type="number"
|
|
||||||
name="price"
|
|
||||||
value={props.values.price}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={props.handleBlur}
|
|
||||||
errorBorder={
|
|
||||||
props.errors.price && props.touched.price
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Title */}
|
|
||||||
<div className="field w-full mb-[0.5rem]">
|
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6 cursor-default"
|
||||||
label="Title"
|
label="Currency"
|
||||||
labelClass="tracking-wide"
|
labelClass="tracking-wide"
|
||||||
inputBg="bg-slate-100"
|
inputBg="bg-slate-100"
|
||||||
inputClass=" input-curve lg border border-light-purple"
|
inputClass="input-curve lg border border-light-purple"
|
||||||
type="text"
|
type="text"
|
||||||
name="title"
|
name="country"
|
||||||
value={props.values.title}
|
value={props.values.country}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
errorBorder={props.errors.title && props.touched.title}
|
disable={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description */}
|
{/* Price */}
|
||||||
<div className="field w-full mb-[0.5rem]">
|
<div className="field w-full">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6 text-right"
|
||||||
label="Description"
|
label="Price"
|
||||||
labelClass="tracking-wide"
|
labelClass="tracking-wide"
|
||||||
inputBg="bg-slate-100"
|
inputBg="bg-slate-100"
|
||||||
inputClass=" input-curve lg border border-light-purple"
|
inputClass="input-curve lg border border-light-purple"
|
||||||
type="text"
|
type="number"
|
||||||
name="description"
|
name="price"
|
||||||
value={props.values.description}
|
value={props.values.price}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
errorBorder={
|
errorBorder={
|
||||||
props.errors.description && props.touched.description
|
props.errors.price && props.touched.price
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Title */}
|
||||||
|
<div className="field w-full mb-[0.5rem]">
|
||||||
|
<InputCom
|
||||||
|
fieldClass="px-6"
|
||||||
|
label="Title"
|
||||||
|
labelClass="tracking-wide"
|
||||||
|
inputBg="bg-slate-100"
|
||||||
|
inputClass=" input-curve lg border border-light-purple"
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
value={props.values.title}
|
||||||
|
inputHandler={props.handleChange}
|
||||||
|
blurHandler={props.handleBlur}
|
||||||
|
errorBorder={props.errors.title && props.touched.title}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Details */}
|
{/* Description */}
|
||||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
<div className="field w-full mb-[0.5rem]">
|
||||||
<div className="sm:w-[60%] w-full">
|
<InputCom
|
||||||
<label
|
fieldClass="px-6"
|
||||||
htmlFor="job-label"
|
label="Description"
|
||||||
className='job-label'
|
labelClass="tracking-wide"
|
||||||
>
|
inputBg="bg-slate-100"
|
||||||
Job Delivery Details
|
inputClass=" input-curve lg border border-light-purple"
|
||||||
</label>
|
type="text"
|
||||||
<textarea
|
name="description"
|
||||||
id="Job Delivery Details"
|
value={props.values.description}
|
||||||
rows="5"
|
inputHandler={props.handleChange}
|
||||||
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
|
blurHandler={props.handleBlur}
|
||||||
props.errors.job_detail && props.touched.job_detail
|
errorBorder={
|
||||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
props.errors.description && props.touched.description
|
||||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
}
|
||||||
} rounded-[10px]`}
|
/>
|
||||||
style={{ resize: "none" }}
|
</div>
|
||||||
name="job_detail"
|
|
||||||
value={props.values.job_detail}
|
{/* Details */}
|
||||||
onChange={props.handleChange}
|
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||||
onBlur={props.handleBlur}
|
<div className="sm:w-[60%] w-full">
|
||||||
/>
|
<label
|
||||||
|
htmlFor="job-label"
|
||||||
|
className='job-label'
|
||||||
|
>
|
||||||
|
Job Delivery Details
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="Job Delivery Details"
|
||||||
|
rows="5"
|
||||||
|
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
|
||||||
|
props.errors.job_detail && props.touched.job_detail
|
||||||
|
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||||
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||||
|
} rounded-[10px]`}
|
||||||
|
style={{ resize: "none" }}
|
||||||
|
name="job_detail"
|
||||||
|
value={props.values.job_detail}
|
||||||
|
onChange={props.handleChange}
|
||||||
|
onBlur={props.handleBlur}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="sm:w-[35%] w-full">
|
||||||
|
<div
|
||||||
|
htmlFor="Job Categories"
|
||||||
|
className='job-label'
|
||||||
|
id="checked-group"
|
||||||
|
>
|
||||||
|
Categories
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
<div className="sm:w-[35%] w-full">
|
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||||
<div
|
role="group"
|
||||||
htmlFor="Job Categories"
|
aria-labelledby="checked-group"
|
||||||
className='job-label'
|
>
|
||||||
id="checked-group"
|
{categories &&
|
||||||
>
|
Object.entries(categories)?.map(([key, value]) => (
|
||||||
Categories
|
<label
|
||||||
</div>
|
key={key}
|
||||||
<div
|
className="flex gap-1 w-full items-center dark:text-white"
|
||||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
>
|
||||||
role="group"
|
<Field
|
||||||
aria-labelledby="checked-group"
|
type="checkbox"
|
||||||
>
|
name="category"
|
||||||
{categories &&
|
value={key}
|
||||||
Object.entries(categories)?.map(([key, value]) => (
|
/>
|
||||||
<label
|
<span className="text-[13.975px]">{value}</span>
|
||||||
key={key}
|
</label>
|
||||||
className="flex gap-1 w-full items-center dark:text-white"
|
))}
|
||||||
>
|
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||||
<Field
|
{props.errors.category &&
|
||||||
type="checkbox"
|
props.touched.category &&
|
||||||
name="category"
|
"please select a category"}
|
||||||
value={key}
|
</span>
|
||||||
/>
|
</div>
|
||||||
<span className="text-[13.975px]">{value}</span>
|
</div>
|
||||||
</label>
|
</div>
|
||||||
))}
|
<div className="w-full flex items-center gap-2 mb-2">
|
||||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
{/* FOR TASK IMAGE */}
|
||||||
{props.errors.category &&
|
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
||||||
props.touched.category &&
|
<input
|
||||||
"please select a category"}
|
id="task_image"
|
||||||
|
className="hidden"
|
||||||
|
type="file"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={taskImgChangeHandler}
|
||||||
|
/>
|
||||||
|
{taskImage ? (
|
||||||
|
<div className="w-full absolute -top-5">
|
||||||
|
<img
|
||||||
|
src={taskImage}
|
||||||
|
className="max-h-[150px] min-h-[150px] w-full object-cover"
|
||||||
|
alt="uploaded task"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
onClick={() => setTaskImage("")}
|
||||||
|
className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
|
||||||
|
>
|
||||||
|
Remove Image
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
</div>
|
<label
|
||||||
<div className="w-full flex items-center gap-2 mb-2">
|
className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
|
||||||
{/* FOR TASK IMAGE */}
|
htmlFor="task_image"
|
||||||
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
|
||||||
<input
|
|
||||||
id="task_image"
|
|
||||||
className="hidden"
|
|
||||||
type="file"
|
|
||||||
accept="image/*"
|
|
||||||
onChange={taskImgChangeHandler}
|
|
||||||
/>
|
|
||||||
{taskImage ? (
|
|
||||||
<div className="w-full absolute -top-5">
|
|
||||||
<img
|
|
||||||
src={taskImage}
|
|
||||||
className="max-h-[150px] min-h-[150px] w-full object-cover"
|
|
||||||
alt="uploaded task"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
onClick={() => setTaskImage("")}
|
|
||||||
className="p-2 absolute text-sm top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/80 hover:bg-white hover:shadow-md transition-all duration-500 cursor-pointer text-slate-800"
|
|
||||||
>
|
|
||||||
Remove Image
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<label
|
|
||||||
className="absolute -top-5 h-[150px] w-full flex flex-col justify-center items-center bg-slate-100 dark:bg-[#11131F] cursor-pointer input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold"
|
|
||||||
htmlFor="task_image"
|
|
||||||
>
|
|
||||||
Select Task Image
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* END OF TASK IMAGE */}
|
|
||||||
|
|
||||||
<div className="field w-1/2">
|
|
||||||
<div className={`flex items-center justify-between`}>
|
|
||||||
<label
|
|
||||||
className="job-label flex flex-col"
|
|
||||||
htmlFor="timeline_days"
|
|
||||||
>
|
|
||||||
Timeline -
|
|
||||||
<span className="w-full text-center text-green-700 text-sm tracking-wide">
|
|
||||||
Expected duration of this task
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field
|
|
||||||
component="select"
|
|
||||||
name="timeline_days"
|
|
||||||
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
|
|
||||||
props.errors.timeline_days &&
|
|
||||||
props.touched.timeline_days
|
|
||||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
|
||||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
|
||||||
}`}
|
|
||||||
value={props.values.timeline_days}
|
|
||||||
>
|
>
|
||||||
<option value="">Select Duration</option>
|
Select Task Image
|
||||||
{publicArray.map(({ name, duration }, idx) => (
|
</label>
|
||||||
<option
|
)}
|
||||||
key={duration}
|
</div>
|
||||||
className="text-slate-500 text-lg"
|
{/* END OF TASK IMAGE */}
|
||||||
value={duration}
|
|
||||||
>
|
<div className="field w-1/2">
|
||||||
{name}
|
<div className={`flex items-center justify-between`}>
|
||||||
</option>
|
<label
|
||||||
))}
|
className="job-label flex flex-col"
|
||||||
</Field>
|
htmlFor="timeline_days"
|
||||||
</div>
|
>
|
||||||
|
Timeline -
|
||||||
|
<span className="w-full text-center text-green-700 text-sm tracking-wide">
|
||||||
|
Expected duration of this task
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
component="select"
|
||||||
|
name="timeline_days"
|
||||||
|
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
|
||||||
|
props.errors.timeline_days &&
|
||||||
|
props.touched.timeline_days
|
||||||
|
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||||
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||||
|
}`}
|
||||||
|
value={props.values.timeline_days}
|
||||||
|
>
|
||||||
|
<option value="">Select Duration</option>
|
||||||
|
{publicArray.map(({ name, duration }, idx) => (
|
||||||
|
<option
|
||||||
|
key={duration}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={duration}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
{/* inputs ends here */}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* inputs ends here */}
|
||||||
</div>
|
</div>
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
</div>
|
||||||
<div className="content-footer w-full">
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{/* error or success display */}
|
<div className="content-footer w-full">
|
||||||
{requestStatus.message != "" &&
|
{/* error or success display */}
|
||||||
(!requestStatus.status ? (
|
{requestStatus.message != "" &&
|
||||||
|
(!requestStatus.status ? (
|
||||||
|
<div
|
||||||
|
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}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
requestStatus.status && (
|
||||||
<div
|
<div
|
||||||
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]`}
|
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}
|
{requestStatus.message}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
)
|
||||||
requestStatus.status && (
|
))}
|
||||||
<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>
|
|
||||||
)
|
|
||||||
))}
|
|
||||||
{/* End of error or success display */}
|
|
||||||
|
|
||||||
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
{uploadStatus.message && !uploadStatus.loading && (
|
{uploadStatus.message && !uploadStatus.loading && (
|
||||||
<p
|
<p
|
||||||
className={`text-center ${
|
className={`text-center ${
|
||||||
uploadStatus.status
|
uploadStatus.status
|
||||||
? "text-green-500"
|
? "text-green-500"
|
||||||
: "text-red-500"
|
: "text-red-500"
|
||||||
}`}
|
}`}
|
||||||
|
>
|
||||||
|
{uploadStatus.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{uploadStatus.loading && (
|
||||||
|
<p className="text-center">{uploadStatus.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||||
|
<div className="flex items-center space-x-4 mr-2 mt-2">
|
||||||
|
{requestStatus.loading ? (
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" />
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||||
|
disabled={
|
||||||
|
requestStatus.loading || uploadStatus.loading
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{uploadStatus.message}
|
Save
|
||||||
</p>
|
</button>
|
||||||
)}
|
|
||||||
{uploadStatus.loading && (
|
|
||||||
<p className="text-center">{uploadStatus.message}</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="modal-footer-wrapper justify-end">
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="6" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
// className='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
|
||||||
disabled={
|
|
||||||
requestStatus.loading || uploadStatus.loading
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -226,11 +226,19 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
|
|||||||
{requestStatus.loading && requestStatus.trigger == "offer" ? (
|
{requestStatus.loading && requestStatus.trigger == "offer" ? (
|
||||||
<LoadingSpinner size={8} color="sky-blue" />
|
<LoadingSpinner size={8} color="sky-blue" />
|
||||||
) : (
|
) : (
|
||||||
<button
|
// <button
|
||||||
|
// name="accept"
|
||||||
|
// onClick={handleOffer}
|
||||||
|
// disabled={requestStatus.loading}
|
||||||
|
// className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
|
||||||
|
// >
|
||||||
|
// I am ready to start
|
||||||
|
// </button>
|
||||||
|
<button
|
||||||
name="accept"
|
name="accept"
|
||||||
onClick={handleOffer}
|
onClick={handleOffer}
|
||||||
disabled={requestStatus.loading}
|
disabled={requestStatus.loading}
|
||||||
className="px-2 py-2 w-20 flex justify-center items-center border-2 border-green-900 bg-green-500 text-base rounded-2xl text-white"
|
className="btn-gradient text-white px-2 py-2 w-40 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
|
||||||
>
|
>
|
||||||
I am ready to start
|
I am ready to start
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
+1
-1
@@ -174,7 +174,7 @@
|
|||||||
|
|
||||||
/* modal footer */
|
/* modal footer */
|
||||||
.modal-footer-wrapper{
|
.modal-footer-wrapper{
|
||||||
@apply p-4 border-t-2 flex justify-between items-center
|
@apply py-2 px-4 border-t-2 flex justify-between items-center
|
||||||
}
|
}
|
||||||
/* END OF STYLES FOR MODAL BOX */
|
/* END OF STYLES FOR MODAL BOX */
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user