From 3ce97a4b76b890f65d48118c2f5ce569a22c240b Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Tue, 20 Jun 2023 20:46:51 +0100
Subject: [PATCH] .

---
 src/Routers.jsx                               |   2 +-
 src/components/AddJob/AddJob.jsx              | 124 ++++++------
 .../Helpers/Inputs/InputCom/index.jsx         |   5 +-
 src/components/MarketPlace/MainSection.jsx    |   4 +-
 src/components/MyJobs/MyJobTable.jsx          |   1 +
 src/components/MyJobs/index.jsx               |  10 +-
 src/components/jobPopout/EditJobPopout.jsx    | 185 ++++++++++--------
 src/index.css                                 |  24 ++-
 src/views/AddJobPage.jsx                      |   8 +-
 9 files changed, 208 insertions(+), 155 deletions(-)

diff --git a/src/Routers.jsx b/src/Routers.jsx
index af3f32f..7240e91 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -89,7 +89,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <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-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />
diff --git a/src/components/AddJob/AddJob.jsx b/src/components/AddJob/AddJob.jsx
index b6dc1d6..14d82eb 100644
--- a/src/components/AddJob/AddJob.jsx
+++ b/src/components/AddJob/AddJob.jsx
@@ -3,11 +3,8 @@ import { Link } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import usersService from "../../services/UsersService";
-
 import { useSelector, useDispatch } from "react-redux";
-
 import { tableReload } from "../../store/TableReloads";
-
 import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 
@@ -36,9 +33,10 @@ const validationSchema = Yup.object().shape({
     .typeError("you must specify a number")
     .min(1, "Price must be greater than 0")
     .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();
   let dispatch = useDispatch();
 
@@ -58,6 +56,7 @@ function AddJob({ popUpHandler }) {
     description: "",
     job_detail: "",
     timeline_days: "",
+    category: [],
   };
 
   let [requestStatus, setRequestStatus] = useState({
@@ -88,6 +87,7 @@ function AddJob({ popUpHandler }) {
 
   // FUNCTION TO HANDLE ADD JOB FORM
   const handleAddJob = (values, helpers) => {
+    values.category = values.category?.join("@");
     setRequestStatus({ loading: true, status: false, message: "" });
     ApiCall.jobManagerCreateJob(values)
       .then((res) => {
@@ -127,6 +127,8 @@ function AddJob({ popUpHandler }) {
     getUserCountry();
   }, []);
 
+  console.log("This is for AddJob >>", categories);
+
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -187,13 +189,6 @@ function AddJob({ popUpHandler }) {
                           </option>
                         )}
                       </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>
 
                     {/* Price */}
@@ -209,14 +204,8 @@ function AddJob({ popUpHandler }) {
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         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>
 
@@ -233,14 +222,8 @@ function AddJob({ popUpHandler }) {
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       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>
 
                   {/* Description  */}
@@ -255,42 +238,64 @@ function AddJob({ popUpHandler }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       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>
 
                   {/* Details */}
-                  <div className="field w-full mb-[5px]">
-                    <label
-                      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>
-                    <textarea
-                      id="Job Delivery Details"
-                      rows="7"
-                      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`}
-                      style={{ resize: "none" }}
-                      name="job_detail"
-                      value={props.values.job_detail}
-                      onChange={props.handleChange}
-                      onBlur={props.handleBlur}
-                    />
-                    <div className={`${!props.errors && "invisible"} h-5`}>
+                  <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='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                      >
+                        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] border border-[#dce4e9] 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='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 && (
                         <p className="text-sm text-red-500">
                           {props.errors.job_detail}
                         </p>
                       )}
-                    </div>
+                    </div> */}
                   </div>
 
                   <div className="field w-full mb-[5px]">
@@ -322,14 +327,6 @@ function AddJob({ popUpHandler }) {
                         </option>
                       ))}
                     </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>
                   {/* inputs ends here */}
                 </div>
@@ -356,13 +353,16 @@ function AddJob({ popUpHandler }) {
                   ))}
                 {/* 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">
                     <Link
                       to="/myjobs"
                       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
                       </span>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index f05dd0d..43dc849 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -21,7 +21,8 @@ export default function InputCom({
   blurHandler,
   spanTag,
   inputBg,
-  direction
+  direction,
+  errorBorder
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -73,7 +74,7 @@ export default function InputCom({
         )}
       </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
           placeholder={placeholder}
diff --git a/src/components/MarketPlace/MainSection.jsx b/src/components/MarketPlace/MainSection.jsx
index 6d5e4fe..018c4b9 100644
--- a/src/components/MarketPlace/MainSection.jsx
+++ b/src/components/MarketPlace/MainSection.jsx
@@ -12,7 +12,7 @@ export default function MainSection({
     () => ({ All: "All Categories", ...categories }),
     [categories]
   );
-  const [tab, setTab] = useState(marketCategories.All);
+  const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
 
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -24,7 +24,7 @@ export default function MainSection({
     setTab(value);
   };
   useEffect(() => {
-    if (tab === marketCategories.All) {
+    if (tab === "All") {
       setProducts(marketPlaceProduct);
     } else {
       const filteredProducts = marketPlaceProduct.filter((product) =>
diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index e9b7487..f0e5bfa 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -280,6 +280,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           }}
           situation={editJob.show}
           country={myCountry}
+          categories={currentJobCart}
         />
       )}
     </div>
diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx
index 2f96bf8..e3d9458 100644
--- a/src/components/MyJobs/index.jsx
+++ b/src/components/MyJobs/index.jsx
@@ -10,6 +10,8 @@ export default function MyJobs(props) {
     setPopUp((prev) => !prev);
   };
 
+  const categoryOptions = props.MyJobList?.data?.categories;
+
   return (
     <Layout>
       <CommonHead commonHeadData={props.commonHeadData} />
@@ -35,7 +37,13 @@ export default function MyJobs(props) {
       </div>
 
       {/* Add Job List Popout */}
-      {popUp && <AddJobPage action={popUpHandler} situation={popUp} />}
+      {popUp && (
+        <AddJobPage
+          action={popUpHandler}
+          situation={popUp}
+          categories={categoryOptions}
+        />
+      )}
       {/* End of Add Job List Popout */}
     </Layout>
   );
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index d7e143c..4213249 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -9,9 +9,14 @@ import { useNavigate } from "react-router-dom";
 import { tableReload } from "../../store/TableReloads";
 import { useDispatch } from "react-redux";
 
-const EditJobPopOut = ({ details, onClose, situation, country }) => {
-
-  const dispatch = useDispatch()
+const EditJobPopOut = ({
+  details,
+  onClose,
+  situation,
+  country,
+  categories,
+}) => {
+  const dispatch = useDispatch();
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -54,8 +59,11 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
     description: details?.description,
     job_detail: details?.job_detail,
     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 navigate = useNavigate();
 
@@ -67,14 +75,14 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
         job_uid: details.job_uid,
         ...values,
       };
-      delete reqData?.country
+      delete reqData?.country;
       try {
         let res = await jobApi.jobManagerUpdateJob(reqData);
         let { data } = await res;
         if (data?.internal_return < 0) return;
         setRequestStatus({ loading: false, message: null });
         setTimeout(() => {
-          dispatch(tableReload({type:'JOBTABLE'}))
+          dispatch(tableReload({ type: "JOBTABLE" }));
           navigate("/myjobs", { replace: true });
           onClose();
         }, 1000);
@@ -129,7 +137,7 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
               <Form className="w-full">
                 <div className="flex flex-col-reverse sm:flex-row">
                   <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">
                         <InputCom
                           fieldClass="px-6 cursor-default"
@@ -144,11 +152,6 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                           blurHandler={props.handleBlur}
                           disable={true}
                         />
-                        {props.errors.country && props.touched.country && (
-                          <p className="text-sm text-red-500">
-                            {props.errors.country}
-                          </p>
-                        )}
                       </div>
 
                       {/* Price */}
@@ -161,20 +164,17 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                           inputClass="input-curve lg border border-light-purple"
                           type="number"
                           name="price"
-                          // placeholder="Please Enter Amount"
                           value={props.values.price * 0.01}
                           inputHandler={props.handleChange}
                           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>
                     {/* Title  */}
-                    <div className="field w-full mb-6">
+                    <div className="field w-full mb-[0.5rem]">
                       <InputCom
                         fieldClass="px-6"
                         label="Title"
@@ -183,20 +183,15 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                         inputClass=" input-curve lg border border-light-purple"
                         type="text"
                         name="title"
-                        // placeholder="Enter Job Title"
                         value={props.values.title}
                         inputHandler={props.handleChange}
                         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>
 
                     {/* Description  */}
-                    <div className="field w-full mb-6">
+                    <div className="field w-full mb-[0.5rem]">
                       <InputCom
                         fieldClass="px-6"
                         label="Description"
@@ -205,84 +200,110 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                         inputClass=" input-curve lg border border-light-purple"
                         type="text"
                         name="description"
-                        // placeholder="Enter a description"
                         value={props.values.description}
                         inputHandler={props.handleChange}
                         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>
 
                     {/* Details */}
-                    <div className="field w-full mb-6">
-                      <label
-                        htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-3'
-                      >
-                        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] border border-[#dce4e9] rounded-[10px]`}
-                        style={{ resize: "none" }}
-                        name="job_detail"
-                        value={props.values.job_detail}
-                        onChange={props.handleChange}
-                        onBlur={props.handleBlur}
-                      />
+                    <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='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        >
+                          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] border border-[#dce4e9] 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='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 && (
                         <p className="text-sm text-red-500">
                           {props.errors.job_detail}
                         </p>
                       )}
+                    </div> */}
                     </div>
 
                     <div className="field w-full mb-6">
-                    <div className={`flex items-center justify-between mb-2.5`}>
-                      <label
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                        htmlFor="timeline_days"
+                      <div
+                        className={`flex items-center justify-between mb-2.5`}
                       >
-                        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"
-                      value={props.values.timeline_days}
-                    >
-                      <option value="">Select Duration</option>
-                      {publicArray.map(({ name, duration }, idx) => (
-                        <option
-                          className="text-slate-500 text-lg"
-                          value={duration}
+                        <label
+                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                          htmlFor="timeline_days"
                         >
-                          {name}
-                        </option>
-                      ))}
-                    </Field>
-                      {props.errors.timeline_days &&
-                        props.touched.timeline_days && (
-                          <p className="text-sm text-red-500">
-                            {props.errors.timeline_days}
-                          </p>
-                        )}
+                          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"
+                        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>
                     {/* inputs ends here */}
                   </div>
                 </div>
-                {/* ERROR DISPLAY AND SUBMIT BUTTON */} 
+                {/* ERROR DISPLAY AND SUBMIT BUTTON */}
                 <div className="content-footer w-full">
                   {/* error or success display */}
                   {requestStatus.message != "" &&
diff --git a/src/index.css b/src/index.css
index fce17af..76bbca7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -900,4 +900,26 @@ TODO: Responsive ===========================
 .addJob-popup{
   top: 30px;
   height: 55rem !important;
-}
\ No newline at end of file
+}
+
+@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;
+}
diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx
index 64660a5..a440301 100644
--- a/src/views/AddJobPage.jsx
+++ b/src/views/AddJobPage.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import AddJob from "../components/AddJob/AddJob";
 import ModalCom from "../components/Helpers/ModalCom";
 
-function AddJobPage({ action, situation }) {
+function AddJobPage({ action, situation, categories }) {
   return (
-    <ModalCom action={action} situation={situation} className="addJob-popup">
-      <div className="lg:w-[600px] w-full h-full lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white  ">
+    <ModalCom action={action} situation={situation} className="edit-popup">
+      <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] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job
@@ -31,7 +31,7 @@ function AddJobPage({ action, situation }) {
             </svg>
           </button>
         </div>
-        <AddJob popUpHandler={action} />
+        <AddJob popUpHandler={action} categories={categories} />
       </div>
     </ModalCom>
   );