market category toggle position changed

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 />} />

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,7 @@ function AddJob({ popUpHandler }) {
     getUserCountry();
   }, []);
 
+
   return (
     <div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
       <Formik
@@ -187,13 +188,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 +203,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 +221,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 +237,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]">
+                  <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 && (
                         <p className="text-sm text-red-500">
                           {props.errors.job_detail}
                         </p>
                       )}
-                    </div>
+                    </div> */}
                   </div>
 
                   <div className="field w-full mb-[5px]">
@@ -322,14 +326,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 +352,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>

src/components/Cards/AvailableJobsCard.jsx

@@ -3,11 +3,13 @@ import { Link, useNavigate } from "react-router-dom";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 import usersService from "../../services/UsersService";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
+import dataImage2 from "../../assets/images/data-table-user-2.png";
 
 export default function AvailableJobsCard({
   className,
   datas,
   hidden = false,
+  contentDisplay
 }) {
   //debugger;
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
@@ -49,6 +51,7 @@ export default function AvailableJobsCard({
   }, []);
   return (
     <>
+    {contentDisplay == 'grid' ?
       <div
         className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
           className || ""
@@ -145,6 +148,78 @@ export default function AvailableJobsCard({
           </div>
         </div>
       </div>
+    :
+      <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
+        <div className="flex gap-5 items-center w-full">
+          <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
+            <img src={dataImage2} alt="data" className="w-full h-full" />
+          </div>
+          <div className="flex flex-col flex-[0.9]">
+            <Link to="/shop-details" className="">
+              <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
+                {datas?.title}
+              </h1>
+            </Link>
+
+            <div className="my-2">
+              <p className="text-dark-gray dark:text-white">{datas?.description}</p>
+            </div>
+
+            {/* <div className="card-two-info flex gap-2 items-center">
+              <div className="owned-by flex space-x-2 items-center">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
+                  <p className="text-base   text-dark-gray dark:text-white">
+                    {datas.offer_added}
+                  </p>
+                </div>
+              </div>
+              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
+              <div className="created-by flex space-x-2 items-center flex-row-reverse">
+                <div>
+                  <p className="text-thin-light-gray text-sm leading-3 text-right">
+                    Expires
+                  </p>
+                  <p className="text-base text-dark-gray dark:text-white text-right">
+                    {datas.expire}
+                  </p>
+                </div>
+              </div>
+            </div> */}
+            <div className="block sm:flex flex-wrap gap-4">
+              <p className="text-sm text-thin-light-gray">
+                Price: <span className="text-purple">{thePrice}</span>
+              </p>
+              <p className="text-sm text-thin-light-gray">
+                Duration:{" "}
+                <span className="text-purple italic">
+                  {" "}
+                  {datas?.timeline_days} day(s)
+                </span>
+              </p>
+              <p className="text-sm text-thin-light-gray">
+                Code:{" "}
+                <span className="text-purple">
+                  {" "}
+                  {datas?.offer_code}
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="">
+          <button
+            type="button"
+            className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
+            onClick={() => {
+              setMarketPopUp({ show: true, data: datas });
+            }}
+          >
+            View
+          </button>
+        </div>
+      </div>
+    }
       {marketPopUp.show && (
         <MarketPopUp
           details={datas}

src/components/Helpers/Icons.jsx

@@ -1,5 +1,9 @@
 import React from "react";
 
+import ATMCard from '../../assets/images/card.svg'
+import VisaCard from '../../assets/images/visa.svg'
+import MasterCard from '../../assets/images/master.svg'
+
 export default function Icons({ name }) {
   return (
     <>
@@ -483,6 +487,12 @@ export default function Icons({ name }) {
       c0.3,0,0.5-0.1,0.7-0.3l5.7-5.7c0,0,0,0,0,0C15.9,12.3,15.9,11.7,15.5,11.3z"
           ></path>
         </svg>
+      ) : name === "atm-card" ? (
+        <img className="w-[20px]" src={ATMCard} alt="card" />
+      ) : name === "visa-card" ? (
+        <img className="w-[20px]" src={VisaCard} alt="card" />
+      ) : name === "master-card" ? (
+        <img className="w-[20px]" src={MasterCard} alt="card" />
       ) : (
         ""
       )}

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}
@@ -94,8 +95,12 @@ export default function InputCom({
           dir={direction}
         />
         {iconName && (
-          <div className="absolute right-6 bottom-[10px] z-10">
+          <div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
-            <Icons name={iconName} />
+            {
+              iconName.split(' ').map((item, index)=>(
+                <Icons key={index} name={item} />
+              ))
+            }
           </div>
         )}
         {passIcon && (

src/components/Helpers/SelectBox/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import useToggle from "../../../hooks/useToggle";
 
-function SelectBox({ datas = [], className, action, contentBodyClasses }) {
+function SelectBox({ datas = [], className, action, contentBodyClasses, position }) {
   const [item, setItem] = useState(datas[0]);
   // custom hook
   const [toggle, setToggle] = useToggle(false);
@@ -49,7 +49,7 @@ function SelectBox({ datas = [], className, action, contentBodyClasses }) {
 
           <div
             style={{ boxShadow: "0px 4px 87px 0px #0000002B" }}
-            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute right-0 top-[100%] z-20 ${
+            className={`drop-down-content w-[120px] bg-white dark:bg-dark-white   rounded-[4px] p-3 absolute ${position =='left' ? 'left-0' : 'right-0'} top-[100%] z-20 ${
               toggle ? "active" : ""
             } ${contentBodyClasses || ""}`}
           >

src/components/MarketPlace/MainSection.jsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
 import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
+import ListView from '../../assets/images/list-view.png'
+import GridView from '../../assets/images/grid-view.svg'
+import SelectBox from "../Helpers/SelectBox";
 
 export default function MainSection({
   className,
@@ -12,7 +15,9 @@ export default function MainSection({
     () => ({ All: "All Categories", ...categories }),
     [categories]
   );
-  const [tab, setTab] = useState(marketCategories.All);
+  const [tab, setTab] = useState(Object.keys(marketCategories)[0]);
+
+  let [contentDisplay, setContentDisplay] = useState('grid') // STATE TO HOLD LIST VIEW STYLE
 
   // Convert to array in order to map
   const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
@@ -23,8 +28,18 @@ export default function MainSection({
   const tabHandler = (value) => {
     setTab(value);
   };
+
+   // Handles the category selection on mobile view
+   const handleSetCategory = (value) => {
+    for (let i in marketCategories) {
+      if (marketCategories[i] == value) {
+        setTab(i);
+      }
+    }
+  };
+
   useEffect(() => {
-    if (tab === marketCategories.All) {
+    if (tab === "All") {
       setProducts(marketPlaceProduct);
     } else {
       const filteredProducts = marketPlaceProduct.filter((product) =>
@@ -37,9 +52,9 @@ export default function MainSection({
   return (
     <div className={`market-place-section w-full ${className || ""}`}>
       <div className="market-place-wrapper w-full">
-        <div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
+        <div className="filter-navigate-area flex justify-between items-center mb-8">
-          <div className="tab-item lg:mb-0 mb-5">
+          <div className="tab-item w-full flex items-center">
-            <div className="md:flex md:space-x-8 space-x-2">
+            <div className="hidden lg:flex md:space-x-8 space-x-2">
               {mappedArray.map(({ key, value }) => (
                 <span
                 key={key}
@@ -54,17 +69,37 @@ export default function MainSection({
                 </span>
               ))}
             </div>
+            {/* market categories on screen smaller than large screen */}
+            <div className="w-[80%] lg:hidden">
+              <SelectBox
+                action={handleSetCategory}
+                datas={Object.values(marketCategories)}
+                className="Update-table-dropdown"
+                contentBodyClasses="w-auto min-w-max"
+                position='left'
+              />
+            </div>
           </div>
+          {/* contentDisplay toggler */}
+          <div className="p-2 w-[35px] h-[35px] bg-white dark:bg-slate-200 rounded-lg">
+              <img 
+                title={contentDisplay=='grid'? 'list view' : 'grid view'}
+                onClick={()=>setContentDisplay((prev)=>prev=='grid'? 'list' : 'grid')}
+                src={contentDisplay=='grid'? ListView : GridView}
+                className="w-full h-full cursor-pointer" alt="view" 
+              />
+          </div>
+          {/* end of contentDisplay toggler */}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">
-          <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">
+          <div className={contentDisplay == 'grid' ? 'grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]' : 'w-full'}>
             <DataIteration
               datas={products}
               startLength={process.env.REACT_APP_ZERO_STATE}
               endLength={products?.length}
             >
               {({ datas }) => (
-                <AvailableJobsCard key={datas.id} datas={datas} />
+                <AvailableJobsCard contentDisplay={contentDisplay} key={datas.id} datas={datas} />
               )}
             </DataIteration>
           </div>

src/components/MyJobs/MyJobTable.jsx

@@ -280,6 +280,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
           }}
           situation={editJob.show}
           country={myCountry}
+          categories={currentJobCart}
         />
       )}
     </div>

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>
   );

src/components/MyWallet/AddFundDollars.jsx

@@ -230,7 +230,7 @@ function AddFundDollars(props) {
                                         <InputCom
                                             fieldClass="px-6"
                                             spanTag='*'
-                                            iconName='wallet-two'
+                                            iconName='master-card visa-card atm-card'
                                             label="Card Number"
                                             type="text"
                                             name="cardNum"
@@ -318,7 +318,7 @@ function AddFundDollars(props) {
                                                 <InputCom
                                                 fieldClass="px-6"
                                                 spanTag='*'
-                                                iconName='wallet-two'
+                                                iconName='atm-card'
                                                 label="CVV"
                                                 type="text"
                                                 name="cvv"

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 EditJobPopOut = ({
-
+  details,
-  const dispatch = useDispatch()
+  onClose,
+  situation,
+  country,
+  categories,
+}) => {
+  const dispatch = useDispatch();
 
   let [requestStatus, setRequestStatus] = useState({
     loading: false,
@@ -54,27 +59,31 @@ 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();
 
   const handleEditJob = useCallback(
     async (values) => {
+      values.category = values.category?.join("@");
       setRequestStatus({ loading: true, message: "" });
       let reqData = {
         job_id: details.job_id,
         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 +138,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 +153,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 +165,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 +184,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 +201,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">
+                    <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 && (
                         <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`}>
+                      <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>
                     {/* 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 != "" &&

src/index.css

@@ -900,4 +900,26 @@ TODO: Responsive ===========================
 .addJob-popup{
   top: 30px;
   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

@@ -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">
+    <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] ">
           <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>
   );