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

.

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-20 20:46:51 +01:00
parent 2d366cd103
commit 3ce97a4b76
9 changed files with 208 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Routers.jsx
+1 -1
View File
@@ -89,7 +89,7 @@ export default function Routers() {
<Route exact path="/notification" element={<Notification />} /> <Route exact path="/notification" element={<Notification />} />
<Route exact path="/mytask" element={<MyTaskPage />} /> <Route exact path="/mytask" element={<MyTaskPage />} />
<Route exact path="/myjobs" element={<MyJobsPage />} /> <Route exact path="/myjobs" element={<MyJobsPage />} />
{/* <Route exact path="/add-job" element={<AddJobPage />} /> */} <Route exact path="/add-job" element={<AddJobPage />} />
<Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} /> <Route exact path="/my-active-jobs" element={<MyActiveJobsPage />} />
<Route exact path="/my-pastdue-jobs" element={<MyPastDueJobsPage />} /> <Route exact path="/my-pastdue-jobs" element={<MyPastDueJobsPage />} />
<Route exact path="/my-pending-jobs" element={<MyPendingJobsPage />} /> <Route exact path="/my-pending-jobs" element={<MyPendingJobsPage />} />
src/components/AddJob/AddJob.jsx
+62 -62
View File
@@ -3,11 +3,8 @@ import { Link } from "react-router-dom";
import InputCom from "../Helpers/Inputs/InputCom"; import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner"; import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService"; import usersService from "../../services/UsersService";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { tableReload } from "../../store/TableReloads"; import { tableReload } from "../../store/TableReloads";
import { Field, Form, Formik } from "formik"; import { Field, Form, Formik } from "formik";
import * as Yup from "yup"; import * as Yup from "yup";
@@ -36,9 +33,10 @@ const validationSchema = Yup.object().shape({
.typeError("you must specify a number") .typeError("you must specify a number")
.min(1, "Price must be greater than 0") .min(1, "Price must be greater than 0")
.required("Timeline is required"), .required("Timeline is required"),
category: Yup.array().min(1, "Select at least one checkbox"),
}); });
function AddJob({ popUpHandler }) { function AddJob({ popUpHandler, categories }) {
const ApiCall = new usersService(); const ApiCall = new usersService();
let dispatch = useDispatch(); let dispatch = useDispatch();
@@ -58,6 +56,7 @@ function AddJob({ popUpHandler }) {
description: "", description: "",
job_detail: "", job_detail: "",
timeline_days: "", timeline_days: "",
category: [],
}; };
let [requestStatus, setRequestStatus] = useState({ let [requestStatus, setRequestStatus] = useState({
@@ -88,6 +87,7 @@ function AddJob({ popUpHandler }) {
// FUNCTION TO HANDLE ADD JOB FORM // FUNCTION TO HANDLE ADD JOB FORM
const handleAddJob = (values, helpers) => { const handleAddJob = (values, helpers) => {
values.category = values.category?.join("@");
setRequestStatus({ loading: true, status: false, message: "" }); setRequestStatus({ loading: true, status: false, message: "" });
ApiCall.jobManagerCreateJob(values) ApiCall.jobManagerCreateJob(values)
.then((res) => { .then((res) => {
@@ -127,6 +127,8 @@ function AddJob({ popUpHandler }) {
getUserCountry(); getUserCountry();
}, []); }, []);
console.log("This is for AddJob >>", categories);
return ( return (
<div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between"> <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
<Formik <Formik
@@ -187,13 +189,6 @@ function AddJob({ popUpHandler }) {
</option> </option>
)} )}
</select> </select>
<div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.country && props.touched.country && (
<p className="text-sm text-red-500">
{props.errors.country}
</p>
)}
</div>
</div> </div>
{/* Price */} {/* Price */}
@@ -209,14 +204,8 @@ function AddJob({ popUpHandler }) {
value={props.values.price} value={props.values.price}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={props.errors.price && props.touched.price}
/> />
<div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.price && props.touched.price && (
<p className="text-sm text-red-500">
{props.errors.price}
</p>
)}
</div>
</div> </div>
</div> </div>
@@ -233,14 +222,8 @@ function AddJob({ popUpHandler }) {
value={props.values.title} value={props.values.title}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={props.errors.title && props.touched.title}
/> />
<div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.title && props.touched.title && (
<p className="text-sm text-red-500">
{props.errors.title}
</p>
)}
</div>
</div> </div>
{/* Description */} {/* Description */}
@@ -255,42 +238,64 @@ function AddJob({ popUpHandler }) {
value={props.values.description} value={props.values.description}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={props.errors.description && props.touched.description}
/> />
<div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.description &&
props.touched.description && (
<p className="text-sm text-red-500">
{props.errors.description}
</p>
)}
</div>
</div> </div>
{/* Details */} {/* Details */}
<div className="field w-full mb-[5px]"> <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
<label <div className="sm:w-[60%] w-full">
htmlFor="Job Delivery Details" <label
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"' htmlFor="Job Delivery Details"
> className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
Job Delivery Details >
</label> Job Delivery Details
<textarea </label>
id="Job Delivery Details" <textarea
rows="7" id="Job Delivery Details"
className={`input-field p-6 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`} rows="5"
style={{ resize: "none" }} 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] border border-[#dce4e9] rounded-[10px]`}
name="job_detail" style={{ resize: "none" }}
value={props.values.job_detail} name="job_detail"
onChange={props.handleChange} value={props.values.job_detail}
onBlur={props.handleBlur} onChange={props.handleChange}
/> onBlur={props.handleBlur}
<div className={`${!props.errors && "invisible"} h-5`}> />
</div>
<div className="sm:w-[35%] w-full">
<div
htmlFor="Job Categories"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
id="checked-group"
>
Categories
</div>
<div
className="sm:flex-col flex flex-wrap px-3 mt-3"
role="group"
aria-labelledby="checked-group"
>
{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>
))}
</div>
</div>
{/* <div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.job_detail && props.touched.job_detail && ( {props.errors.job_detail && props.touched.job_detail && (
<p className="text-sm text-red-500"> <p className="text-sm text-red-500">
{props.errors.job_detail} {props.errors.job_detail}
</p> </p>
)} )}
</div> </div> */}
</div> </div>
<div className="field w-full mb-[5px]"> <div className="field w-full mb-[5px]">
@@ -322,14 +327,6 @@ function AddJob({ popUpHandler }) {
</option> </option>
))} ))}
</Field> </Field>
<div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.timeline_days &&
props.touched.timeline_days && (
<p className="text-sm text-red-500">
{props.errors.timeline_days}
</p>
)}
</div>
</div> </div>
{/* inputs ends here */} {/* inputs ends here */}
</div> </div>
@@ -356,13 +353,16 @@ function AddJob({ popUpHandler }) {
))} ))}
{/* End of error or success display */} {/* End of error or success display */}
<div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center"> <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"> <div className="flex items-center space-x-4 mr-9">
<Link <Link
to="/myjobs" to="/myjobs"
className="text-18 text-light-red tracking-wide " className="text-18 text-light-red tracking-wide "
> >
<span className="border-b dark:border-[#5356fb29] border-light-red"> <span
className="border-b dark:border-[#5356fb29] border-light-red"
onClick={popUpHandler}
>
{" "} {" "}
Cancel Cancel
</span> </span>
src/components/Helpers/Inputs/InputCom/index.jsx
+3 -2
View File
@@ -21,7 +21,8 @@ export default function InputCom({
blurHandler, blurHandler,
spanTag, spanTag,
inputBg, inputBg,
direction direction,
errorBorder
}) { }) {
const inputRef = useRef(null); const inputRef = useRef(null);
// Entry Validation // Entry Validation
@@ -73,7 +74,7 @@ export default function InputCom({
)} )}
</div> </div>
<div <div
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`} className={`input-wrapper border ${errorBorder ? "border-red-500 border-[0.5px] animate-shake" : "border border-[#f5f8fa] dark:border-[#5e6278]"} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
> >
<input <input
placeholder={placeholder} placeholder={placeholder}
src/components/MarketPlace/MainSection.jsx
+2 -2
View File
@@ -12,7 +12,7 @@ export default function MainSection({
() => ({ All: "All Categories", ...categories }), () => ({ All: "All Categories", ...categories }),
[categories] [categories]
); );
const [tab, setTab] = useState(marketCategories.All); const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
// Convert to array in order to map // Convert to array in order to map
const mappedArray = Object.entries(marketCategories).map(([key, value]) => { const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -24,7 +24,7 @@ export default function MainSection({
setTab(value); setTab(value);
}; };
useEffect(() => { useEffect(() => {
if (tab === marketCategories.All) { if (tab === "All") {
setProducts(marketPlaceProduct); setProducts(marketPlaceProduct);
} else { } else {
const filteredProducts = marketPlaceProduct.filter((product) => const filteredProducts = marketPlaceProduct.filter((product) =>
src/components/MyJobs/MyJobTable.jsx
+1
View File
@@ -280,6 +280,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
}} }}
situation={editJob.show} situation={editJob.show}
country={myCountry} country={myCountry}
categories={currentJobCart}
/> />
)} )}
</div> </div>
src/components/MyJobs/index.jsx
+9 -1
View File
@@ -10,6 +10,8 @@ export default function MyJobs(props) {
setPopUp((prev) => !prev); setPopUp((prev) => !prev);
}; };
const categoryOptions = props.MyJobList?.data?.categories;
return ( return (
<Layout> <Layout>
<CommonHead commonHeadData={props.commonHeadData} /> <CommonHead commonHeadData={props.commonHeadData} />
@@ -35,7 +37,13 @@ export default function MyJobs(props) {
</div> </div>
{/* Add Job List Popout */} {/* Add Job List Popout */}
{popUp && <AddJobPage action={popUpHandler} situation={popUp} />} {popUp && (
<AddJobPage
action={popUpHandler}
situation={popUp}
categories={categoryOptions}
/>
)}
{/* End of Add Job List Popout */} {/* End of Add Job List Popout */}
</Layout> </Layout>
); );
src/components/jobPopout/EditJobPopout.jsx
+103 -82
View File
@@ -9,9 +9,14 @@ import { useNavigate } from "react-router-dom";
import { tableReload } from "../../store/TableReloads"; import { tableReload } from "../../store/TableReloads";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
const EditJobPopOut = ({ details, onClose, situation, country }) => { const EditJobPopOut = ({
details,
const dispatch = useDispatch() onClose,
situation,
country,
categories,
}) => {
const dispatch = useDispatch();
let [requestStatus, setRequestStatus] = useState({ let [requestStatus, setRequestStatus] = useState({
loading: false, loading: false,
@@ -54,8 +59,11 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
description: details?.description, description: details?.description,
job_detail: details?.job_detail, job_detail: details?.job_detail,
timeline_days: details?.timeline_days, timeline_days: details?.timeline_days,
category: details?.category
}; };
console.log("This is the init values for edit job",initialValues)
const jobApi = useMemo(() => new usersService(), []); const jobApi = useMemo(() => new usersService(), []);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -67,14 +75,14 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
job_uid: details.job_uid, job_uid: details.job_uid,
...values, ...values,
}; };
delete reqData?.country delete reqData?.country;
try { try {
let res = await jobApi.jobManagerUpdateJob(reqData); let res = await jobApi.jobManagerUpdateJob(reqData);
let { data } = await res; let { data } = await res;
if (data?.internal_return < 0) return; if (data?.internal_return < 0) return;
setRequestStatus({ loading: false, message: null }); setRequestStatus({ loading: false, message: null });
setTimeout(() => { setTimeout(() => {
dispatch(tableReload({type:'JOBTABLE'})) dispatch(tableReload({ type: "JOBTABLE" }));
navigate("/myjobs", { replace: true }); navigate("/myjobs", { replace: true });
onClose(); onClose();
}, 1000); }, 1000);
@@ -129,7 +137,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
<Form className="w-full"> <Form className="w-full">
<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-6"> <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 <InputCom
fieldClass="px-6 cursor-default" fieldClass="px-6 cursor-default"
@@ -144,11 +152,6 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
disable={true} disable={true}
/> />
{props.errors.country && props.touched.country && (
<p className="text-sm text-red-500">
{props.errors.country}
</p>
)}
</div> </div>
{/* Price */} {/* Price */}
@@ -161,20 +164,17 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
inputClass="input-curve lg border border-light-purple" inputClass="input-curve lg border border-light-purple"
type="number" type="number"
name="price" name="price"
// placeholder="Please Enter Amount"
value={props.values.price * 0.01} value={props.values.price * 0.01}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={
props.errors.price && props.touched.price
}
/> />
{props.errors.price && props.touched.price && (
<p className="text-sm text-red-500">
{props.errors.price}
</p>
)}
</div> </div>
</div> </div>
{/* Title */} {/* Title */}
<div className="field w-full mb-6"> <div className="field w-full mb-[0.5rem]">
<InputCom <InputCom
fieldClass="px-6" fieldClass="px-6"
label="Title" label="Title"
@@ -183,20 +183,15 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
inputClass=" input-curve lg border border-light-purple" inputClass=" input-curve lg border border-light-purple"
type="text" type="text"
name="title" name="title"
// placeholder="Enter Job Title"
value={props.values.title} value={props.values.title}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={props.errors.title && props.touched.title}
/> />
{props.errors.title && props.touched.title && (
<p className="text-sm text-red-500">
{props.errors.title}
</p>
)}
</div> </div>
{/* Description */} {/* Description */}
<div className="field w-full mb-6"> <div className="field w-full mb-[0.5rem]">
<InputCom <InputCom
fieldClass="px-6" fieldClass="px-6"
label="Description" label="Description"
@@ -205,84 +200,110 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
inputClass=" input-curve lg border border-light-purple" inputClass=" input-curve lg border border-light-purple"
type="text" type="text"
name="description" name="description"
// placeholder="Enter a description"
value={props.values.description} value={props.values.description}
inputHandler={props.handleChange} inputHandler={props.handleChange}
blurHandler={props.handleBlur} blurHandler={props.handleBlur}
errorBorder={
props.errors.description && props.touched.description
}
/> />
{props.errors.description &&
props.touched.description && (
<p className="text-sm text-red-500">
{props.errors.description}
</p>
)}
</div> </div>
{/* Details */} {/* Details */}
<div className="field w-full mb-6"> <div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
<label <div className="sm:w-[60%] w-full">
htmlFor="Job Delivery Details" <label
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-3' htmlFor="Job Delivery Details"
> className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
Job Delivery Details >
</label> Job Delivery Details
<textarea </label>
id="Job Delivery Details" <textarea
rows="5" id="Job Delivery Details"
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] border border-[#dce4e9] rounded-[10px]`} rows="5"
style={{ resize: "none" }} 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] border border-[#dce4e9] rounded-[10px]`}
name="job_detail" style={{ resize: "none" }}
value={props.values.job_detail} name="job_detail"
onChange={props.handleChange} value={props.values.job_detail}
onBlur={props.handleBlur} onChange={props.handleChange}
/> onBlur={props.handleBlur}
/>
</div>
<div className="sm:w-[35%] w-full">
<div
htmlFor="Job Categories"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
id="checked-group"
>
Categories
</div>
<div
className="sm:flex-col flex flex-wrap px-3 mt-3"
role="group"
aria-labelledby="checked-group"
>
{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>
))}
</div>
</div>
{/* <div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.job_detail && props.touched.job_detail && ( {props.errors.job_detail && props.touched.job_detail && (
<p className="text-sm text-red-500"> <p className="text-sm text-red-500">
{props.errors.job_detail} {props.errors.job_detail}
</p> </p>
)} )}
</div> */}
</div> </div>
<div className="field w-full mb-6"> <div className="field w-full mb-6">
<div className={`flex items-center justify-between mb-2.5`}> <div
<label className={`flex items-center justify-between mb-2.5`}
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
htmlFor="timeline_days"
> >
Timeline <label
<span className="text-green-700 text-sm tracking-wide"> className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
- Expected duration of this task htmlFor="timeline_days"
</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"
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
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>
{props.errors.timeline_days && </label>
props.touched.timeline_days && ( </div>
<p className="text-sm text-red-500">
{props.errors.timeline_days} <Field
</p> 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"
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
{publicArray.map(({ name, duration }, idx) => (
<option
className="text-slate-500 text-lg"
value={duration}
>
{name}
</option>
))}
</Field>
</div> </div>
{/* inputs ends here */} {/* inputs ends here */}
</div> </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 != "" &&
src/index.css
+23 -1
View File
@@ -900,4 +900,26 @@ TODO: Responsive ===========================
.addJob-popup{ .addJob-popup{
top: 30px; top: 30px;
height: 55rem !important; height: 55rem !important;
} }
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
75% {
transform: translateX(-5px);
}
100% {
transform: translateX(0);
}
}
.ebu-animate-shake {
animation: shake 0.3s linear 3;
}
src/views/AddJobPage.jsx
+4 -4
View File
@@ -2,10 +2,10 @@ import React from "react";
import AddJob from "../components/AddJob/AddJob"; import AddJob from "../components/AddJob/AddJob";
import ModalCom from "../components/Helpers/ModalCom"; import ModalCom from "../components/Helpers/ModalCom";
function AddJobPage({ action, situation }) { function AddJobPage({ action, situation, categories }) {
return ( return (
<ModalCom action={action} situation={situation} className="addJob-popup"> <ModalCom action={action} situation={situation} className="edit-popup">
<div className="lg:w-[600px] w-full h-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white "> <div className="lg:w-[600px] w-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white ">
<div className="heading flex justify-between items-center py-6 md:px-[30px] px-[23px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] "> <div className="heading flex justify-between items-center py-6 md:px-[30px] px-[23px] border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] ">
<p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide"> <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
Create New Job Create New Job
@@ -31,7 +31,7 @@ function AddJobPage({ action, situation }) {
</svg> </svg>
</button> </button>
</div> </div>
<AddJob popUpHandler={action} /> <AddJob popUpHandler={action} categories={categories} />
</div> </div>
</ModalCom> </ModalCom>
); );