Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
81707c7bd8 | ||
|
victorAnumudu
|
e5b36e3f45 | ||
 ameye
|
6f2fc17090 | ||
|
victorAnumudu
|
e6392bc433 | ||
|
victorAnumudu
|
f8e14fe6a0 | ||
|
ameye
|
91a42cfe9d | ||
|
victorAnumudu
|
3128a77b46 | ||
|
ameye
|
d7d67e4763 | ||
|
victorAnumudu
|
388e49467e | ||
|
ameye
|
043718837d | ||
|
ameye
|
d0e2ba0aa3 | ||
|
victorAnumudu
|
a1dc72e5b0 |
@@ -122,3 +122,6 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
|||||||
|
|
||||||
# FOR FAMILY GAME LINK
|
# FOR FAMILY GAME LINK
|
||||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||||
|
|
||||||
|
# REACT APP CUSTOMTIMER
|
||||||
|
REACT_APP_CUSTOMTIMER=90
|
||||||
@@ -90,3 +90,6 @@ REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
|
|||||||
|
|
||||||
# FOR FAMILY GAME LINK
|
# FOR FAMILY GAME LINK
|
||||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||||
|
|
||||||
|
# REACT APP CUSTOMTIMER
|
||||||
|
REACT_APP_CUSTOMTIMER=90
|
||||||
@@ -96,3 +96,6 @@ REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
|
|||||||
|
|
||||||
# FOR FAMILY GAME LINK
|
# FOR FAMILY GAME LINK
|
||||||
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
REACT_APP_FAM_GAME_LINK='https://games.wrenchboard.com'
|
||||||
|
|
||||||
|
# REACT APP CUSTOMTIMER
|
||||||
|
REACT_APP_CUSTOMTIMER=90
|
||||||
+243
-243
@@ -73,8 +73,7 @@ function AddJob({ popUpHandler, categories }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<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
|
||||||
<Formik
|
|
||||||
initialValues={IV}
|
initialValues={IV}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
onSubmit={handleAddJob}
|
onSubmit={handleAddJob}
|
||||||
@@ -82,281 +81,282 @@ function AddJob({ popUpHandler, categories }) {
|
|||||||
{(props) => {
|
{(props) => {
|
||||||
return (
|
return (
|
||||||
<Form>
|
<Form>
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
<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="fields w-full">
|
<div className="flex flex-col-reverse sm:flex-row">
|
||||||
{/* inputs starts here */}
|
<div className="fields w-full">
|
||||||
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
{/* inputs starts here */}
|
||||||
<div className="field w-full mb-6 xl:mb-0">
|
<div className="xl:flex xl:space-x-7 mb-[5px]">
|
||||||
<label
|
<div className="field w-full mb-6 xl:mb-0">
|
||||||
htmlFor="country"
|
<label
|
||||||
className="job-label job-label-flex"
|
htmlFor="country"
|
||||||
>
|
className="job-label job-label-flex"
|
||||||
<span>Currency</span>
|
>
|
||||||
{props.errors.country && props.touched.country && (
|
<span>Currency</span>
|
||||||
<span className="text-[12px] text-red-500">
|
{props.errors.country && props.touched.country && (
|
||||||
{props.errors.country}
|
<span className="text-[12px] text-red-500">
|
||||||
</span>
|
{props.errors.country}
|
||||||
)}
|
</span>
|
||||||
</label>
|
)}
|
||||||
<select
|
</label>
|
||||||
id="country"
|
<select
|
||||||
name="country"
|
id="country"
|
||||||
value={props.values.country}
|
name="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`}
|
value={props.values.country}
|
||||||
onChange={props.handleChange}
|
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`}
|
||||||
onBlur={props.handleBlur}
|
onChange={props.handleChange}
|
||||||
>
|
onBlur={props.handleBlur}
|
||||||
{walletDetails?.loading ? (
|
>
|
||||||
<option className="text-slate-500 text-lg" value="">
|
{walletDetails?.loading ? (
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : walletDetails.data.length ? (
|
|
||||||
<>
|
|
||||||
<option className="text-slate-500 text-lg" value="">
|
<option className="text-slate-500 text-lg" value="">
|
||||||
Select a currency
|
Loading...
|
||||||
</option>
|
</option>
|
||||||
{walletDetails.data?.map((item, index) => (
|
) : walletDetails.data.length ? (
|
||||||
<option
|
<>
|
||||||
key={index}
|
<option className="text-slate-500 text-lg" value="">
|
||||||
className="text-slate-500 text-lg"
|
Select a currency
|
||||||
value={item?.country}
|
|
||||||
>
|
|
||||||
{item?.description}
|
|
||||||
</option>
|
</option>
|
||||||
))}
|
{walletDetails.data?.map((item, index) => (
|
||||||
</>
|
<option
|
||||||
) : (
|
key={index}
|
||||||
<option className="text-slate-500 text-lg" value="">
|
className="text-slate-500 text-lg"
|
||||||
No Options Found! Try Again
|
value={item?.country}
|
||||||
</option>
|
>
|
||||||
)}
|
{item?.description}
|
||||||
</select>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Price */}
|
{/* Title */}
|
||||||
<div className="field w-full">
|
<div className="field w-full mb-[5px]">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6 text-right flex"
|
fieldClass="px-6"
|
||||||
label="Price"
|
label="Title"
|
||||||
labelClass=""
|
labelClass=""
|
||||||
type="number"
|
type="text"
|
||||||
name="price"
|
name="title"
|
||||||
placeholder="0"
|
value={props.values.title}
|
||||||
value={props.values.price}
|
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
error={
|
error={
|
||||||
props.errors.price &&
|
props.errors.title &&
|
||||||
props.touched.price &&
|
props.touched.title &&
|
||||||
props.errors.price
|
props.errors.title
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Title */}
|
{/* Description */}
|
||||||
<div className="field w-full mb-[5px]">
|
<div className="field w-full mb-[5px]">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6"
|
fieldClass="px-6"
|
||||||
label="Title"
|
label="Description"
|
||||||
labelClass=""
|
labelClass=""
|
||||||
type="text"
|
type="text"
|
||||||
name="title"
|
name="description"
|
||||||
value={props.values.title}
|
value={props.values.description}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
error={
|
error={
|
||||||
props.errors.title &&
|
props.errors.description &&
|
||||||
props.touched.title &&
|
props.touched.description &&
|
||||||
props.errors.title
|
props.errors.description
|
||||||
}
|
}
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
{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>
|
||||||
|
|
||||||
<div className="sm:w-[35%] w-full">
|
{/* Details */}
|
||||||
<label
|
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||||
htmlFor="Job Categories"
|
<div className="sm:w-[60%] w-full">
|
||||||
className='job-label'
|
<label
|
||||||
id="checked-group"
|
htmlFor="Job Delivery Details"
|
||||||
>
|
className="job-label job-label-flex"
|
||||||
Categories
|
>
|
||||||
</label>
|
Job Delivery Details
|
||||||
<div
|
{props.errors.job_detail &&
|
||||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
props.touched.job_detail && (
|
||||||
role="group"
|
<span className="text-[12px] text-red-500">
|
||||||
aria-labelledby="checked-group"
|
{props.errors.job_detail}
|
||||||
>
|
</span>
|
||||||
{categories ? (
|
)}
|
||||||
<>
|
</label>
|
||||||
{Object?.entries(categories).map(([key, value]) => (
|
<textarea
|
||||||
<label
|
id="Job Delivery Details"
|
||||||
key={key}
|
rows="5"
|
||||||
className="flex gap-1 w-full items-center"
|
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" }}
|
||||||
<Field
|
name="job_detail"
|
||||||
type="checkbox"
|
value={props.values.job_detail}
|
||||||
name="category"
|
onChange={props.handleChange}
|
||||||
value={key}
|
onBlur={props.handleBlur}
|
||||||
/>
|
/>
|
||||||
<span className="text-[13.975px]">{value}</span>
|
</div>
|
||||||
</label>
|
|
||||||
))}
|
<div className="sm:w-[35%] w-full">
|
||||||
</>
|
<label
|
||||||
) : (
|
htmlFor="Job Categories"
|
||||||
<label className="flex gap-1 w-full items-center">
|
className='job-label'
|
||||||
<Field type="checkbox" name="category" />
|
id="checked-group"
|
||||||
<span className="text-[13.975px]">null</span>
|
>
|
||||||
</label>
|
Categories
|
||||||
)}
|
</label>
|
||||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
<div
|
||||||
{props.errors.category &&
|
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||||
props.touched.category &&
|
role="group"
|
||||||
"please select a category"}
|
aria-labelledby="checked-group"
|
||||||
</span>
|
>
|
||||||
|
{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>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full mb-[5px]">
|
<div className="field w-full mb-[5px]">
|
||||||
<div className={`flex items-center justify-between mb-2.5`}>
|
<div className={`flex items-center justify-between mb-2.5`}>
|
||||||
<label
|
<label
|
||||||
className="job-label"
|
className="job-label"
|
||||||
htmlFor="timeline_days"
|
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}
|
Timeline
|
||||||
</option>
|
<span className="text-green-700 text-sm tracking-wide">
|
||||||
))}
|
- Expected duration of this task
|
||||||
</Field>
|
</span>
|
||||||
</div>
|
</label>
|
||||||
{/* inputs ends here */}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
<Field
|
||||||
<div className="content-footer w-full">
|
component="select"
|
||||||
{/* error or success display */}
|
name="timeline_days"
|
||||||
{requestStatus.message != "" &&
|
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 ${
|
||||||
(!requestStatus.status ? (
|
props.errors.timeline_days &&
|
||||||
<div
|
props.touched.timeline_days
|
||||||
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]`}
|
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||||
>
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||||
{requestStatus.message}
|
}`}
|
||||||
|
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>
|
</div>
|
||||||
) : (
|
{/* inputs ends here */}
|
||||||
requestStatus.status && (
|
</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-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>
|
||||||
)
|
|
||||||
))}
|
|
||||||
{/* End of error or success display */}
|
|
||||||
|
|
||||||
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
|
||||||
<div className="flex items-center space-x-4 mr-9">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className="px-2"
|
|
||||||
onClick={popUpHandler}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
Cancel
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{requestStatus?.loading ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
) : (
|
||||||
<button
|
requestStatus.status && (
|
||||||
type="submit"
|
<div
|
||||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
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]`}
|
||||||
>
|
>
|
||||||
Add Job
|
{requestStatus.message}
|
||||||
</button>
|
</div>
|
||||||
)}
|
)
|
||||||
</div>
|
))}
|
||||||
|
{/* 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
|
||||||
|
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
|
||||||
|
type="submit"
|
||||||
|
className="custom-btn btn-gradient text-white"
|
||||||
|
>
|
||||||
|
Add Job
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Formik>
|
</Formik>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -46,15 +46,15 @@ export default function OfferCard({
|
|||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
<div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||||
<div className="grid grid-cols-2 gap-2">
|
<div className="grid grid-cols-1 gap-2">
|
||||||
<div className="flex flex-col justify-between items-center border-r-2">
|
{/* <div className="flex flex-col justify-between items-center border-r-2">
|
||||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||||
Task Code
|
Task Code
|
||||||
</p>
|
</p>
|
||||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||||
{datas.contract}
|
{datas.contract}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div> */}
|
||||||
<div className="flex flex-col justify-between items-center">
|
<div className="flex flex-col justify-between items-center">
|
||||||
<p className="text-sm text-red-500 tracking-wide">Expires</p>
|
<p className="text-sm text-red-500 tracking-wide">Expires</p>
|
||||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||||
|
|||||||
@@ -256,14 +256,16 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
|||||||
</p>
|
</p>
|
||||||
<hr />
|
<hr />
|
||||||
<button
|
<button
|
||||||
className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
|
className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
|
||||||
name="market-interest"
|
name="market-interest"
|
||||||
onClick={ManageInterest}
|
onClick={ManageInterest}
|
||||||
>
|
>
|
||||||
{" "}
|
{" "}
|
||||||
<span>Send</span>
|
<div className="w-full flex flex-col justify-between gap-2">
|
||||||
<span>Interest</span>
|
<span>Send</span>
|
||||||
<span>Request</span>
|
<span>Interest</span>
|
||||||
|
<span>Request</span>
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
<>
|
<>
|
||||||
{manageInt.loading ? (
|
{manageInt.loading ? (
|
||||||
|
|||||||
@@ -350,7 +350,7 @@ function ActiveJobsMedia(props) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* job details */}
|
{/* job details */}
|
||||||
<div className="w-full md:w-[200px]">
|
<div className="w-full md:w-[200px] flex flex-col justify-center gap-4">
|
||||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||||
{passDue ? (
|
{passDue ? (
|
||||||
<div className="my-1">
|
<div className="my-1">
|
||||||
|
|||||||
@@ -121,7 +121,7 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={popUpHandler}
|
onClick={popUpHandler}
|
||||||
className="px-4 h-[48px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className="custom-btn btn-gradient text-base text-white"
|
||||||
>
|
>
|
||||||
Cancel or Extend Timeline
|
Cancel or Extend Timeline
|
||||||
</button>
|
</button>
|
||||||
@@ -133,14 +133,14 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
|
|
||||||
{popUp && (
|
{popUp && (
|
||||||
<ModalCom action={popUpHandler} situation={popUp}>
|
<ModalCom action={popUpHandler} situation={popUp}>
|
||||||
<div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
|
<div className="logout-modal-wrapper lg:w-[460px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
<div className="modal-header-con">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="modal-title">
|
||||||
Past Due Task
|
Past Due Task
|
||||||
</h1>
|
</h1>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="modal-close-btn"
|
||||||
onClick={popUpHandler}
|
onClick={popUpHandler}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
@@ -164,7 +164,7 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="job-action-modal-body w-full px-10 py-8 gap-4">
|
<div className="relative job-action-modal-body w-full px-10 py-8 gap-4">
|
||||||
<div className="w-full flex flex-col items-center">
|
<div className="w-full flex flex-col items-center">
|
||||||
<div className="mb-5 flex justify-center items-center gap-2">
|
<div className="mb-5 flex justify-center items-center gap-2">
|
||||||
<input
|
<input
|
||||||
@@ -173,26 +173,26 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
onChange={()=>{setChecked(prev => !prev)}}
|
onChange={()=>{setChecked(prev => !prev)}}
|
||||||
className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue'
|
className='w-6 h-6 text-sky-blue bg-gray-100 focus:ring-sky-blue'
|
||||||
/>
|
/>
|
||||||
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>I am ready to cancel this task</p>
|
<p className='job-label'>I am ready to cancel this task</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mb-5 flex justify-center items-center">
|
<div className="mb-5 w-full flex justify-end items-center">
|
||||||
{reqStatus.loading && action=='cancel'?
|
{reqStatus.loading && action=='cancel'?
|
||||||
<LoadingSpinner color='sky-blue' size='10' />
|
<LoadingSpinner color='sky-blue' size='10' />
|
||||||
:
|
:
|
||||||
<button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white">
|
<button disabled={reqStatus.loading} onClick={cancelTask} type="button" className="custom-btn border-gradient text-base text-white">
|
||||||
<span className='text-gradient'>Cancel this task</span>
|
<span className='text-gradient'>Cancel this task</span>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* EXTEND TIMELINE SECTION */}
|
{/* EXTEND TIMELINE SECTION */}
|
||||||
<div className='w-full my-3 py-3 border-y flex flex-col items-center'>
|
<div className='w-full my-3 py-3 border-t flex flex-col items-center'>
|
||||||
<div className='mb-5 flex items-center gap-2'>
|
<div className='mb-5 flex items-center gap-2'>
|
||||||
<p className='font-bold text-base tracking-wide text-dark-gray dark:text-white'>Extend the timeline by:</p>
|
<p className='job-label'>Extend the timeline by:</p>
|
||||||
<select
|
<select
|
||||||
onChange={({target})=>{setExtendedTime(target.value)}}
|
onChange={({target})=>{setExtendedTime(target.value)}}
|
||||||
className='text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0'
|
className='text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 rounded-full'
|
||||||
>
|
>
|
||||||
<option className='text-slate-500 text-lg' value=''>select</option>
|
<option className='text-slate-500 text-lg' value=''>select</option>
|
||||||
<option className='text-slate-500 text-lg' value='2'>1 days</option>
|
<option className='text-slate-500 text-lg' value='2'>1 days</option>
|
||||||
@@ -204,25 +204,27 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
{reqStatus.loading && action=='extend' ?
|
{reqStatus.loading && action=='extend' ?
|
||||||
<LoadingSpinner color='sky-blue' size='10' />
|
<LoadingSpinner color='sky-blue' size='10' />
|
||||||
:
|
:
|
||||||
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
|
<div className='w-full flex justify-end items-center'>
|
||||||
Extend Timeline
|
<button disabled={reqStatus.loading} type="button" onClick={extendTime} className="custom-btn btn-gradient text-base text-white">
|
||||||
</button>
|
Extend Timeline
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
{/* FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
||||||
<div className="w-full">
|
<div className="w-full absolute left-0 bottom-0 text-center">
|
||||||
{reqStatus.message != "" &&
|
{reqStatus.message != "" &&
|
||||||
(!reqStatus.status ? (
|
(!reqStatus.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-2 mx-2 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
>
|
>
|
||||||
{reqStatus.message}
|
{reqStatus.message}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
reqStatus.status && (
|
reqStatus.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-2 mx-2 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||||
>
|
>
|
||||||
{reqStatus.message}
|
{reqStatus.message}
|
||||||
</div>
|
</div>
|
||||||
@@ -232,16 +234,16 @@ function PastDueJobAction({jobDetails}) {
|
|||||||
{/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
{/* END OF FOR SUCCESS/ERROR DISPLAY SECTION*/}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* cancel btn */}
|
</div>
|
||||||
<div className='flex justify-end items-center'>
|
{/* cancel btn */}
|
||||||
<button onClick={popUpHandler} type="button"
|
<div className='modal-footer-wrapper flex justify-center items-center'>
|
||||||
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
<button onClick={popUpHandler} type="button"
|
||||||
className='w-[150px] mt-2 h-[48px] rounded-full text-base bg-transparent border border-red-500 text-red-500'
|
// className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
|
||||||
>
|
className='custom-btn text-base bg-transparent border border-red-500 text-red-500'
|
||||||
Cancel
|
>
|
||||||
{/* <span className='text-gradient'>Cancel</span> */}
|
Cancel
|
||||||
</button>
|
{/* <span className='text-gradient'>Cancel</span> */}
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCom>
|
</ModalCom>
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ export default function MyOffersFamilyTable({ className, familyOffers, image_ser
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* trending products */}
|
{/* trending products */}
|
||||||
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue">
|
<div className="trending-products slider-left relative w-full rounded-2xl p-[10px] bg-alice-blue dark:bg-dark-white/50 transition-all duration-300">
|
||||||
<SliderCom selector={trendingSlider} settings={settings}>
|
<SliderCom selector={trendingSlider} settings={settings}>
|
||||||
{familyOffers &&
|
{familyOffers &&
|
||||||
familyOffers.length > 0 &&
|
familyOffers.length > 0 &&
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center">
|
<div className="w-full flex justify-center items-center">
|
||||||
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
{isSuccess
|
{isSuccess
|
||||||
? "Credit was Successful!"
|
? "Credit was Successful!"
|
||||||
@@ -59,41 +59,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
|
|||||||
|
|
||||||
{data?.internal_return >= 0 &&
|
{data?.internal_return >= 0 &&
|
||||||
data?.result !== "Charge failed" && (
|
data?.result !== "Charge failed" && (
|
||||||
<>
|
<div className="w-full md:w-[60%] mx-auto">
|
||||||
<div className="flex items-center gap-8">
|
<div className="grid grid-cols-2 gap-8 my-2">
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="job-label">
|
||||||
Amount({data?.currency || ""})
|
Amount({data?.currency || ""})
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||||
{`${data?.symbol || ""} ${
|
{`${data?.symbol || ""} ${
|
||||||
Number(data?.amount * 0.01).toLocaleString() || ""
|
Number(data?.amount * 0.01).toFixed(2) || ""
|
||||||
}`}
|
}`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{data?.curr_balance &&
|
{data?.curr_balance &&
|
||||||
<div className="flex items-center gap-8">
|
<div className="grid grid-cols-2 gap-8 my-2">
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="job-label">
|
||||||
Wallet Balance
|
Wallet Balance
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||||
{data?.curr_balance * 0.01}
|
{(data?.curr_balance * 0.01).toFixed(2)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
{isSuccess && (
|
{isSuccess && (
|
||||||
<div className="flex items-center gap-8">
|
<div className="grid grid-cols-2 gap-8 my-2">
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="job-label">
|
||||||
Confirmation Number
|
Confirmation Number
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
|
||||||
{data?.confirmation}
|
{data?.confirmation}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</div>
|
||||||
)}
|
)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -46,14 +46,13 @@ function ThePaymentText({ value, type }) {
|
|||||||
*/
|
*/
|
||||||
function AmountSection({ currency, amount, country }) {
|
function AmountSection({ currency, amount, country }) {
|
||||||
const formattedAmount = (+amount * 0.01)?.toFixed(2);
|
const formattedAmount = (+amount * 0.01)?.toFixed(2);
|
||||||
const gapClassName = country === "US" ? "gap-14" : "gap-4";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center ${gapClassName}`}>
|
<div className={`flex items-center gap-8`}>
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
Amount({currency})
|
Amount({currency})
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
{formattedAmount}
|
{formattedAmount}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -66,14 +65,13 @@ function AmountSection({ currency, amount, country }) {
|
|||||||
*/
|
*/
|
||||||
function TransactionFeeSection({ currency, fee, country }) {
|
function TransactionFeeSection({ currency, fee, country }) {
|
||||||
const formattedFee = (+fee).toFixed(2);
|
const formattedFee = (+fee).toFixed(2);
|
||||||
const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
|
<div className={`flex items-center gap-8 border-b border-gray-600`}>
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
Transaction Fee
|
Transaction Fee
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
{formattedFee}
|
{formattedFee}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,14 +87,12 @@ function TotalSection({ currency, amount, fee, country }) {
|
|||||||
const total = Number(amount) + Number(fee);
|
const total = Number(amount) + Number(fee);
|
||||||
const formattedTotal = (total * 0.01)?.toFixed(2);
|
const formattedTotal = (total * 0.01)?.toFixed(2);
|
||||||
|
|
||||||
const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`flex items-center ${gap}`}>
|
<div className={`flex items-center gap-8`}>
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
Total
|
Total
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
{formattedTotal}
|
{formattedTotal}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -384,7 +380,7 @@ function ConfirmAddFund({
|
|||||||
<div className="flex items-center gap-8">
|
<div className="flex items-center gap-8">
|
||||||
<label
|
<label
|
||||||
htmlFor="payment"
|
htmlFor="payment"
|
||||||
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
|
||||||
>
|
>
|
||||||
Payment Method
|
Payment Method
|
||||||
</label>
|
</label>
|
||||||
@@ -397,13 +393,9 @@ function ConfirmAddFund({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`gap-8 flex items-center`}
|
||||||
__confirmCountry === "US"
|
|
||||||
? "gap-[3.7rem]"
|
|
||||||
: "gap-[1.81rem]"
|
|
||||||
} flex items-center`}
|
|
||||||
>
|
>
|
||||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
<h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
Reference No
|
Reference No
|
||||||
</h1>
|
</h1>
|
||||||
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
<span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||||
|
|||||||
@@ -58,13 +58,12 @@ function ConfirmNairaWithdraw({
|
|||||||
.sendMoney(reqData)
|
.sendMoney(reqData)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.data.internal_return < 0) {
|
if (res.data.internal_return < 0) {
|
||||||
// if (res.data?.status_message?.toLowerCase().includes("limit")) {
|
setRequestStatus({
|
||||||
// setRequestStatus({
|
message: 'Unable to complete, try again',
|
||||||
// message: ,
|
loading: false,
|
||||||
// loading: false,
|
status: false,
|
||||||
// status: false,
|
});
|
||||||
// });
|
|
||||||
// }
|
|
||||||
return setTimeout(() => {
|
return setTimeout(() => {
|
||||||
setRequestStatus({
|
setRequestStatus({
|
||||||
message: "",
|
message: "",
|
||||||
@@ -79,19 +78,19 @@ function ConfirmNairaWithdraw({
|
|||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setRequestStatus({
|
||||||
|
message: "Withdrawal sucessful",
|
||||||
|
loading: false,
|
||||||
|
status: true,
|
||||||
|
});
|
||||||
|
setShowCompleteNairaWithdraw({
|
||||||
|
show: true,
|
||||||
|
load: false,
|
||||||
|
state: res.data,
|
||||||
|
});
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setRequestStatus({
|
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||||
message: "",
|
|
||||||
loading: false,
|
|
||||||
status: false,
|
|
||||||
});
|
|
||||||
setShowCompleteNairaWithdraw({
|
|
||||||
show: true,
|
|
||||||
load: false,
|
|
||||||
state: res.data,
|
|
||||||
});
|
|
||||||
}, 5000);
|
}, 5000);
|
||||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
|
||||||
return;
|
return;
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@@ -381,23 +380,23 @@ function ConfirmNairaWithdraw({
|
|||||||
{!completeNairaWithdraw.load && (
|
{!completeNairaWithdraw.load && (
|
||||||
<>
|
<>
|
||||||
<p
|
<p
|
||||||
className={`text-base ${
|
className={`text-lg text-center font-bold ${
|
||||||
requestStatus.status ? "text-green-500" : "text-red-500"
|
requestStatus.status ? "text-emerald-600" : "text-red-500"
|
||||||
} px-4 md:px-8 py-4 h-5`}
|
} px-4 md:px-8 py-4`}
|
||||||
>
|
>
|
||||||
{requestStatus.message && requestStatus.message}
|
{requestStatus.message && requestStatus.message}
|
||||||
</p>
|
</p>
|
||||||
<div className="modal-footer-wrapper grid grid-cols-1 xxs:grid-cols-3">
|
<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">
|
<div className="w-full col-span-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center">
|
||||||
{!completeNairaWithdraw.show && (
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={action}
|
onClick={action}
|
||||||
className="custom-btn bg-[#f5a430] text-black text-base"
|
className="custom-btn bg-[#f5a430] text-black text-base"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={
|
onClick={
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|||||||
import AddFundPop from "./AddFundPop";
|
import AddFundPop from "./AddFundPop";
|
||||||
import CompleteConfirmCredit from "./CompleteConfirmCredit";
|
import CompleteConfirmCredit from "./CompleteConfirmCredit";
|
||||||
import ConfirmAddFund from "./ConfirmAddFund";
|
import ConfirmAddFund from "./ConfirmAddFund";
|
||||||
|
import CustomTimer from "../../countdown/CustomTimer";
|
||||||
|
|
||||||
const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
||||||
const [input, setInput] = useState("");
|
const [input, setInput] = useState("");
|
||||||
@@ -71,7 +72,13 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
|
|||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
{confirmCredit?.show?.acceptConfirm?.loader ? (
|
||||||
<div className="h-[32rem] flex items-center justify-center">
|
<div className="h-[32rem] flex items-center justify-center">
|
||||||
<LoadingSpinner size="12" color="sky-blue" />
|
<div className="h-[32rem] flex flex-col items-center justify-center gap-4">
|
||||||
|
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Processing payment</p>
|
||||||
|
<p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Please do not refresh</p>
|
||||||
|
<LoadingSpinner size="6" color="sky-blue" height='h-20' />
|
||||||
|
{/* <p className="text-lg md:text-2xl text-emerald-600 tracking-wide font-bold">Timer countdown</p> */}
|
||||||
|
<CustomTimer className="text-lg text-center md:text-2xl text-emerald-600 tracking-wide font-bold" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -330,13 +330,13 @@ function NairaWithdraw({
|
|||||||
<Form className="transfer-fund-info">
|
<Form className="transfer-fund-info">
|
||||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
|
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white h-full rounded-2xl">
|
||||||
{/* Amount Form */}
|
{/* Amount Form */}
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col gap-2">
|
||||||
<div className="field w-full">
|
<div className="field w-full">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-4 text-end"
|
fieldClass="px-4 text-end"
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
parentClass="flex items-center gap-1"
|
||||||
labelClass="flex-[0.4] mb-0"
|
labelClass="flex-[0.2] mb-0"
|
||||||
inputClass="flex-[0.6] max-w-[12rem]"
|
inputClass="flex-[0.8] max-w-[12rem]"
|
||||||
label="Amount:"
|
label="Amount:"
|
||||||
type="number"
|
type="number"
|
||||||
name="amount"
|
name="amount"
|
||||||
@@ -352,10 +352,10 @@ function NairaWithdraw({
|
|||||||
|
|
||||||
<div className="field w-full">
|
<div className="field w-full">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-4 transfer-field"
|
fieldClass="px-4"
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
parentClass="flex items-center gap-1"
|
||||||
labelClass="flex-[0.2] mb-0"
|
labelClass="flex-[0.2] mb-0"
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
inputClass="flex-[0.8] max-w-[12rem]"
|
||||||
label="Fee:"
|
label="Fee:"
|
||||||
type="text"
|
type="text"
|
||||||
name="fee"
|
name="fee"
|
||||||
@@ -371,10 +371,10 @@ function NairaWithdraw({
|
|||||||
|
|
||||||
<div className="field w-full">
|
<div className="field w-full">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-4 transfer-field"
|
fieldClass="px-4"
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
parentClass="flex items-center gap-1"
|
||||||
labelClass="flex-[0.2] mb-0"
|
labelClass="flex-[0.2] mb-0"
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
inputClass="flex-[0.8] max-w-[12rem]"
|
||||||
label="Total:"
|
label="Total:"
|
||||||
type="text"
|
type="text"
|
||||||
name="total"
|
name="total"
|
||||||
@@ -414,7 +414,7 @@ function NairaWithdraw({
|
|||||||
<label
|
<label
|
||||||
onClick={() => setTab("previous")}
|
onClick={() => setTab("previous")}
|
||||||
htmlFor="previous"
|
htmlFor="previous"
|
||||||
className="cursor-pointer flex items-center gap-1"
|
className="cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
@@ -431,7 +431,7 @@ function NairaWithdraw({
|
|||||||
<label
|
<label
|
||||||
onClick={() => setTab("new")}
|
onClick={() => setTab("new")}
|
||||||
htmlFor="new"
|
htmlFor="new"
|
||||||
className={`cursor-pointer flex items-center gap-1 ${
|
className={`cursor-pointer flex items-center gap-1 text-dark-gray dark:text-white ${
|
||||||
recipients.data.length >= MaxNoOfBanks
|
recipients.data.length >= MaxNoOfBanks
|
||||||
? "pointer-events-none"
|
? "pointer-events-none"
|
||||||
: ""
|
: ""
|
||||||
@@ -545,7 +545,7 @@ function NairaWithdraw({
|
|||||||
<LoadingSpinner size="10" color="sky-blue" />
|
<LoadingSpinner size="10" color="sky-blue" />
|
||||||
</div>
|
</div>
|
||||||
) : recipients.data.length < MaxNoOfBanks ? (
|
) : recipients.data.length < MaxNoOfBanks ? (
|
||||||
<div className="w-full mt-3 rounded-md bg-slate-100">
|
<div className="w-full mt-3 rounded-md bg-slate-100 dark:bg-dark-white">
|
||||||
<div className="relative fields w-full flex flex-col p-4">
|
<div className="relative fields w-full flex flex-col p-4">
|
||||||
<div className="flex flex-[2] min-h-[52px]">
|
<div className="flex flex-[2] min-h-[52px]">
|
||||||
{/* country */}
|
{/* country */}
|
||||||
@@ -557,7 +557,7 @@ function NairaWithdraw({
|
|||||||
Country{" "}
|
Country{" "}
|
||||||
<span className="text-red-500">*</span>
|
<span className="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<div className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
|
<div className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding tracking-[1.5px] flex items-center pointer-events-none">
|
||||||
<span className="text-slate-500 text-lg italic">
|
<span className="text-slate-500 text-lg italic">
|
||||||
{wallet.walletCountry[0]?.country}
|
{wallet.walletCountry[0]?.country}
|
||||||
</span>
|
</span>
|
||||||
@@ -619,7 +619,7 @@ function NairaWithdraw({
|
|||||||
<span className="text-red-500">*</span>
|
<span className="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
|
className="w-full text-base p-2 bg-white dark:bg-[#11131F] text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding "
|
||||||
name="newAccount.bank"
|
name="newAccount.bank"
|
||||||
value={props.values.newAccount?.bank}
|
value={props.values.newAccount?.bank}
|
||||||
onChange={props.handleChange}
|
onChange={props.handleChange}
|
||||||
@@ -698,7 +698,7 @@ function NairaWithdraw({
|
|||||||
Type <span className="text-red-500">*</span>
|
Type <span className="text-red-500">*</span>
|
||||||
</label>
|
</label>
|
||||||
<select
|
<select
|
||||||
className="w-full text-base p-2 text-dark-gray dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
|
className="w-full text-base p-2 text-dark-gray bg-white dark:bg-[#11131F] dark:text-white border border-slate-300 outline-0 flex-[0.6] rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding flex-grow tracking-[1.5px]"
|
||||||
name="newAccount.accountType"
|
name="newAccount.accountType"
|
||||||
value={props.values.newAccount?.accountType}
|
value={props.values.newAccount?.accountType}
|
||||||
onChange={props.handleChange}
|
onChange={props.handleChange}
|
||||||
|
|||||||
@@ -23,14 +23,14 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
|||||||
}}
|
}}
|
||||||
className={`${
|
className={`${
|
||||||
walletItem.code != "NAIRA" && "invisible"
|
walletItem.code != "NAIRA" && "invisible"
|
||||||
} custom-btn btn-gradient text-white`}
|
} logout-btn btn-gradient text-white`}
|
||||||
>
|
>
|
||||||
Spend
|
Spend
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/2 flex justify-center items-center">
|
<div className="w-1/2 flex justify-center items-center">
|
||||||
<button
|
<button
|
||||||
className="custom-btn btn-gradient text-white"
|
className="logout-btn btn-gradient text-white"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
openPopUp({
|
openPopUp({
|
||||||
payment: payment,
|
payment: payment,
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
|||||||
walletItem.escrow * 0.01,
|
walletItem.escrow * 0.01,
|
||||||
walletItem.code,
|
walletItem.code,
|
||||||
undefined,
|
undefined,
|
||||||
"text-[2rem]"
|
"text-[1.5rem]"
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@@ -54,8 +54,8 @@ export default function Layout({ children }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="nft-main-wrapper-layout w-full mx-auto">
|
<div className="nft-main-wrapper-layout container mx-auto">
|
||||||
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
<div className={`relative nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
||||||
{/* sidebar */}
|
{/* sidebar */}
|
||||||
<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
|
<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>
|
||||||
<Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
|
<Sidebar logoutModalHandler={logoutModalHandler} sidebar={drawer} action={() => dispatch(drawerToggle())} myJobList={userJobList} />
|
||||||
@@ -73,7 +73,7 @@ export default function Layout({ children }) {
|
|||||||
<Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
<Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
||||||
</div>
|
</div>
|
||||||
{/* container */}
|
{/* container */}
|
||||||
<div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
|
<div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
|
||||||
<div className="flex-[80%] w-full">
|
<div className="flex-[80%] w-full">
|
||||||
{children && children}
|
{children && children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export default function MediaLayout({backpath, title, children }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="nft-main-wrapper-layout media">
|
<div className="nft-main-wrapper-layout media container mx-auto">
|
||||||
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
<div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>
|
||||||
{/* sidebar */}
|
{/* sidebar */}
|
||||||
{/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
|
{/*<div className={`nft-sidebar xl:block hidden section-shadow ${drawer ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 " : "w-[70px]"} bg-white dark:bg-dark-white h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}>*/}
|
||||||
@@ -72,7 +72,7 @@ export default function MediaLayout({backpath, title, children }) {
|
|||||||
<MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
<MediaHeader backpath={backpath} title={title} sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
|
||||||
</div>
|
</div>
|
||||||
{/* container */}
|
{/* container */}
|
||||||
<div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
|
<div className="nft-container container mx-auto 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
|
||||||
<div className="nft-main-container_media flex-[100%] w-full">
|
<div className="nft-main-container_media flex-[100%] w-full">
|
||||||
{children && children}
|
{children && children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
export default function CustomTimer({className='text-emerald-500'}) {
|
||||||
|
|
||||||
|
const [time, setTime] = useState(Number(process.env.REACT_APP_CUSTOMTIMER))
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const timer = setInterval(()=>{
|
||||||
|
setTime(prev => prev - 1)
|
||||||
|
},1000)
|
||||||
|
return ()=>{
|
||||||
|
clearInterval(timer)
|
||||||
|
}
|
||||||
|
},[])
|
||||||
|
|
||||||
|
let minutes = time == 0 ? 0 : Math.floor(time/60)
|
||||||
|
let seconds = time == 0 ? 0 :time - (minutes * 60)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p className={`w-full text-base text-emerald-500 ${className}`}>
|
||||||
|
{`${minutes > 9 ? minutes : '0'+minutes} : ${seconds > 9 ? seconds : '0'+seconds}`}
|
||||||
|
</p>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -247,101 +247,101 @@ export default function FamGames() {
|
|||||||
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
<div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
|
||||||
<div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
|
<div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
|
||||||
|
|
||||||
<div className="mb-4 w-full h-screen max-h-[600px]">
|
<div className="mb-4 w-full h-screen max-h-[650px]">
|
||||||
<Suspense fallback={<Fallback />}>
|
<Suspense fallback={<Fallback />}>
|
||||||
<Iframe
|
<Iframe
|
||||||
src={process.env.REACT_APP_FAM_GAME_LINK}
|
src={process.env.REACT_APP_FAM_GAME_LINK}
|
||||||
title='Games'
|
title='Games'
|
||||||
/>
|
/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
|
||||||
|
<div className="w-full flex flex-col justify-between">
|
||||||
|
<div className="w-full h-30">
|
||||||
|
<div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
|
||||||
|
{/* <p className="w-full text-base text-right text-sky-blue">
|
||||||
|
{props?.details && props.details.job_to}
|
||||||
|
</p>
|
||||||
|
<div className="text-base tracking-wide">
|
||||||
|
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||||
|
Description:{" "}
|
||||||
|
</p>
|
||||||
|
<p className="p-2 ml-8 border-b border-sky-blue">
|
||||||
|
{props?.details && props.details.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 w-full lg:flex gap-8">
|
||||||
|
<div className="w-full text-base tracking-wide">
|
||||||
|
<p className="font-semibold text-black dark:text-white tracking-wider">
|
||||||
|
Delivery Detail:{" "}
|
||||||
|
</p>
|
||||||
|
<p className="p-2 ml-8">
|
||||||
|
{props?.details && props.details.job_description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="my-2 lg:my-0">
|
||||||
|
<IndexJobActions details={props.details} />
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* job details */}
|
||||||
|
<div className="w-full md:w-[200px] h-20">
|
||||||
|
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
||||||
|
{/* {passDue ? (
|
||||||
|
<div className="my-1">
|
||||||
|
<p className="text-base text-slate-700">
|
||||||
|
<span className="font-semibold">Due: </span>
|
||||||
|
{props?.details && props.details.delivery_date.split(" ")[0]}
|
||||||
|
</p>
|
||||||
|
{props?.delivery_date && (
|
||||||
|
<p className="py-2 text-base text-slate-700">
|
||||||
|
{props.details.delivery_date.split(" ")[1]}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="my-1 flex items-start gap-3">
|
||||||
|
<p className="font-semibold">Due: </p>
|
||||||
|
<div className="flex flex-col justify-between">
|
||||||
|
<p className="text-base text-slate-700 tracking-wide">
|
||||||
|
<CountDown
|
||||||
|
lastDate={props?.details && props.details.delivery_date}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
||||||
|
<span>Hrs</span>
|
||||||
|
<span>Min</span>
|
||||||
|
<span>Sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)} */}
|
||||||
|
|
||||||
|
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
||||||
|
<span className="font-semibold text-black dark:text-white">
|
||||||
|
Reward:{" "}
|
||||||
|
</span>
|
||||||
|
<span className="">{thePrice}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
||||||
|
<span className="font-semibold text-black dark:text-white">
|
||||||
|
Duration:{" "}
|
||||||
|
</span>
|
||||||
|
<span className="">
|
||||||
|
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
||||||
|
day(s)
|
||||||
|
</span>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
{/* end of job details */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-8">
|
<div className="w-full lg:w-1/6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
||||||
<div className="w-full flex flex-col justify-between">
|
|
||||||
<div className="w-full h-30">
|
|
||||||
<div className='w-full h-full flex justify-center items-center text-5xl'>COMING SOON</div>
|
|
||||||
{/* <p className="w-full text-base text-right text-sky-blue">
|
|
||||||
{props?.details && props.details.job_to}
|
|
||||||
</p>
|
|
||||||
<div className="text-base tracking-wide">
|
|
||||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
|
||||||
Description:{" "}
|
|
||||||
</p>
|
|
||||||
<p className="p-2 ml-8 border-b border-sky-blue">
|
|
||||||
{props?.details && props.details.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-6 w-full lg:flex gap-8">
|
|
||||||
<div className="w-full text-base tracking-wide">
|
|
||||||
<p className="font-semibold text-black dark:text-white tracking-wider">
|
|
||||||
Delivery Detail:{" "}
|
|
||||||
</p>
|
|
||||||
<p className="p-2 ml-8">
|
|
||||||
{props?.details && props.details.job_description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="my-2 lg:my-0">
|
|
||||||
<IndexJobActions details={props.details} />
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* job details */}
|
|
||||||
<div className="w-full md:w-[200px] h-20">
|
|
||||||
{/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
|
|
||||||
{/* {passDue ? (
|
|
||||||
<div className="my-1">
|
|
||||||
<p className="text-base text-slate-700">
|
|
||||||
<span className="font-semibold">Due: </span>
|
|
||||||
{props?.details && props.details.delivery_date.split(" ")[0]}
|
|
||||||
</p>
|
|
||||||
{props?.delivery_date && (
|
|
||||||
<p className="py-2 text-base text-slate-700">
|
|
||||||
{props.details.delivery_date.split(" ")[1]}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="my-1 flex items-start gap-3">
|
|
||||||
<p className="font-semibold">Due: </p>
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<p className="text-base text-slate-700 tracking-wide">
|
|
||||||
<CountDown
|
|
||||||
lastDate={props?.details && props.details.delivery_date}
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
|
|
||||||
<span>Hrs</span>
|
|
||||||
<span>Min</span>
|
|
||||||
<span>Sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
{/* <div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
|
||||||
<span className="font-semibold text-black dark:text-white">
|
|
||||||
Reward:{" "}
|
|
||||||
</span>
|
|
||||||
<span className="">{thePrice}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
|
|
||||||
<span className="font-semibold text-black dark:text-white">
|
|
||||||
Duration:{" "}
|
|
||||||
</span>
|
|
||||||
<span className="">
|
|
||||||
{props.details?.timeline_days && props.details.timeline_days}{" "}
|
|
||||||
day(s)
|
|
||||||
</span>
|
|
||||||
</div> */}
|
|
||||||
</div>
|
|
||||||
{/* end of job details */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
|
|
||||||
{/* TEXTAREA SECTION */}
|
{/* TEXTAREA SECTION */}
|
||||||
<div className="w-full mb-3 hidden">
|
<div className="w-full mb-3 hidden">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
|
|||||||
@@ -125,27 +125,6 @@ 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 ? (
|
||||||
@@ -165,6 +144,28 @@ 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,7 +242,6 @@ 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}
|
||||||
@@ -250,277 +249,276 @@ const EditJobPopOut = ({
|
|||||||
>
|
>
|
||||||
{(props) => (
|
{(props) => (
|
||||||
<Form className="w-full">
|
<Form className="w-full">
|
||||||
<div className="flex flex-col-reverse sm:flex-row">
|
<div className="logout-modal-body w-full flex flex-col items-center px-10 pb-8 pt-2">
|
||||||
<div className="fields w-full">
|
<div className="flex flex-col-reverse sm:flex-row">
|
||||||
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
<div className="fields w-full">
|
||||||
<div className="field w-full mb-6 xl:mb-0">
|
<div className="xl:flex xl:space-x-7 mb-[0.5rem]">
|
||||||
|
<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 cursor-default"
|
fieldClass="px-6"
|
||||||
label="Currency"
|
label="Title"
|
||||||
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="country"
|
name="title"
|
||||||
value={props.values.country}
|
value={props.values.title}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
disable={true}
|
errorBorder={props.errors.title && props.touched.title}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Price */}
|
{/* Description */}
|
||||||
<div className="field w-full">
|
<div className="field w-full mb-[0.5rem]">
|
||||||
<InputCom
|
<InputCom
|
||||||
fieldClass="px-6 text-right"
|
fieldClass="px-6"
|
||||||
label="Price"
|
label="Description"
|
||||||
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="number"
|
type="text"
|
||||||
name="price"
|
name="description"
|
||||||
value={props.values.price}
|
value={props.values.description}
|
||||||
inputHandler={props.handleChange}
|
inputHandler={props.handleChange}
|
||||||
blurHandler={props.handleBlur}
|
blurHandler={props.handleBlur}
|
||||||
errorBorder={
|
errorBorder={
|
||||||
props.errors.price && props.touched.price
|
props.errors.description && props.touched.description
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</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>
|
|
||||||
|
|
||||||
{/* Description */}
|
{/* Details */}
|
||||||
<div className="field w-full mb-[0.5rem]">
|
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
||||||
<InputCom
|
<div className="sm:w-[60%] w-full">
|
||||||
fieldClass="px-6"
|
<label
|
||||||
label="Description"
|
htmlFor="job-label"
|
||||||
labelClass="tracking-wide"
|
className='job-label'
|
||||||
inputBg="bg-slate-100"
|
>
|
||||||
inputClass=" input-curve lg border border-light-purple"
|
Job Delivery Details
|
||||||
type="text"
|
</label>
|
||||||
name="description"
|
<textarea
|
||||||
value={props.values.description}
|
id="Job Delivery Details"
|
||||||
inputHandler={props.handleChange}
|
rows="5"
|
||||||
blurHandler={props.handleBlur}
|
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] ${
|
||||||
errorBorder={
|
props.errors.job_detail && props.touched.job_detail
|
||||||
props.errors.description && props.touched.description
|
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
||||||
}
|
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
||||||
/>
|
} rounded-[10px]`}
|
||||||
</div>
|
style={{ resize: "none" }}
|
||||||
|
name="job_detail"
|
||||||
{/* Details */}
|
value={props.values.job_detail}
|
||||||
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
|
onChange={props.handleChange}
|
||||||
<div className="sm:w-[60%] w-full">
|
onBlur={props.handleBlur}
|
||||||
<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
|
|
||||||
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
<div className="sm:w-[35%] w-full">
|
||||||
role="group"
|
<div
|
||||||
aria-labelledby="checked-group"
|
htmlFor="Job Categories"
|
||||||
>
|
className='job-label'
|
||||||
{categories &&
|
id="checked-group"
|
||||||
Object.entries(categories)?.map(([key, value]) => (
|
>
|
||||||
<label
|
Categories
|
||||||
key={key}
|
</div>
|
||||||
className="flex gap-1 w-full items-center dark:text-white"
|
<div
|
||||||
>
|
className="sm:flex-col flex flex-wrap px-3 mt-3"
|
||||||
<Field
|
role="group"
|
||||||
type="checkbox"
|
aria-labelledby="checked-group"
|
||||||
name="category"
|
>
|
||||||
value={key}
|
{categories &&
|
||||||
/>
|
Object.entries(categories)?.map(([key, value]) => (
|
||||||
<span className="text-[13.975px]">{value}</span>
|
<label
|
||||||
</label>
|
key={key}
|
||||||
))}
|
className="flex gap-1 w-full items-center dark:text-white"
|
||||||
<span className="h-5 text-sm italic text-[#cf3917]">
|
>
|
||||||
{props.errors.category &&
|
<Field
|
||||||
props.touched.category &&
|
type="checkbox"
|
||||||
"please select a category"}
|
name="category"
|
||||||
</span>
|
value={key}
|
||||||
</div>
|
/>
|
||||||
</div>
|
<span className="text-[13.975px]">{value}</span>
|
||||||
</div>
|
</label>
|
||||||
<div className="w-full flex items-center gap-2 mb-2">
|
))}
|
||||||
{/* FOR TASK IMAGE */}
|
<span className="h-5 text-sm italic text-[#cf3917]">
|
||||||
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
{props.errors.category &&
|
||||||
<input
|
props.touched.category &&
|
||||||
id="task_image"
|
"please select a category"}
|
||||||
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>
|
||||||
) : (
|
|
||||||
<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>
|
</div>
|
||||||
|
</div>
|
||||||
<Field
|
<div className="w-full flex items-center gap-2 mb-2">
|
||||||
component="select"
|
{/* FOR TASK IMAGE */}
|
||||||
name="timeline_days"
|
<div className="w-1/2 relative max-h-[130px] min-h-[130px]">
|
||||||
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 ${
|
<input
|
||||||
props.errors.timeline_days &&
|
id="task_image"
|
||||||
props.touched.timeline_days
|
className="hidden"
|
||||||
? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
|
type="file"
|
||||||
: "border border-[#f5f8fa] dark:border-[#5e6278]"
|
accept="image/*"
|
||||||
}`}
|
onChange={taskImgChangeHandler}
|
||||||
value={props.values.timeline_days}
|
/>
|
||||||
>
|
{taskImage ? (
|
||||||
<option value="">Select Duration</option>
|
<div className="w-full absolute -top-5">
|
||||||
{publicArray.map(({ name, duration }, idx) => (
|
<img
|
||||||
<option
|
src={taskImage}
|
||||||
key={duration}
|
className="max-h-[150px] min-h-[150px] w-full object-cover"
|
||||||
className="text-slate-500 text-lg"
|
alt="uploaded task"
|
||||||
value={duration}
|
/>
|
||||||
|
<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"
|
||||||
>
|
>
|
||||||
{name}
|
Select Task Image
|
||||||
</option>
|
</label>
|
||||||
))}
|
)}
|
||||||
</Field>
|
</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>
|
||||||
|
{publicArray.map(({ name, duration }, idx) => (
|
||||||
|
<option
|
||||||
|
key={duration}
|
||||||
|
className="text-slate-500 text-lg"
|
||||||
|
value={duration}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/* inputs ends here */}
|
||||||
</div>
|
</div>
|
||||||
{/* inputs ends here */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
<div className="content-footer w-full">
|
||||||
<div className="content-footer w-full">
|
{/* error or success display */}
|
||||||
{/* error or success display */}
|
{requestStatus.message != "" &&
|
||||||
{requestStatus.message != "" &&
|
(!requestStatus.status ? (
|
||||||
(!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-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>
|
||||||
)
|
|
||||||
))}
|
|
||||||
{/* End of error or success display */}
|
|
||||||
|
|
||||||
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
|
||||||
<div className="w-full">
|
|
||||||
{uploadStatus.message && !uploadStatus.loading && (
|
|
||||||
<p
|
|
||||||
className={`text-center ${
|
|
||||||
uploadStatus.status
|
|
||||||
? "text-green-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
|
requestStatus.status && (
|
||||||
type="submit"
|
<div
|
||||||
className="w-[120px] h-[40px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
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='w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
>
|
||||||
disabled={
|
{requestStatus.message}
|
||||||
requestStatus.loading || uploadStatus.loading
|
</div>
|
||||||
}
|
)
|
||||||
|
))}
|
||||||
|
{/* End of error or success display */}
|
||||||
|
|
||||||
|
{/* DISPLAYS TASK IMAGE UPLOADING STATUS */}
|
||||||
|
<div className="w-full">
|
||||||
|
{uploadStatus.message && !uploadStatus.loading && (
|
||||||
|
<p
|
||||||
|
className={`text-center ${
|
||||||
|
uploadStatus.status
|
||||||
|
? "text-green-500"
|
||||||
|
: "text-red-500"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
Save
|
{uploadStatus.message}
|
||||||
</button>
|
</p>
|
||||||
|
)}
|
||||||
|
{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>
|
||||||
);
|
);
|
||||||
|
|||||||
+1
-1
@@ -174,7 +174,7 @@
|
|||||||
|
|
||||||
/* modal footer */
|
/* modal footer */
|
||||||
.modal-footer-wrapper{
|
.modal-footer-wrapper{
|
||||||
@apply py-2 px-4 border-t-2 flex justify-between items-center
|
@apply p-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