made cancel btn to close the popout modal

src/components/AddJob/AddJob.jsx

@@ -6,7 +6,7 @@ import usersService from "../../services/UsersService";
 
 import { useSelector } from "react-redux";
 
-import { Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 
 const validationSchema = Yup.object().shape({
@@ -50,7 +50,7 @@ function AddJob() {
   const ApiCall = new usersService();
   const navigate = useNavigate();
 
-  let {userDetails} = useSelector((state)=> state.userDetails)
+  let { userDetails } = useSelector((state) => state.userDetails);
 
   let [pageLoading, setPageLoading] = useState(true); // State used for knowing when the page is mounting
 
@@ -208,7 +208,7 @@ function AddJob() {
                                   >
                                     {item[1]}
                                   </option>
-                                )
+                                );
                               }
                             })}
                           </>
@@ -316,19 +316,34 @@ function AddJob() {
                   </div>
 
                   <div className="field w-full mb-6">
-                    <InputCom
+                    <div className={`flex items-center justify-between mb-2.5`}>
-                      fieldClass="px-6"
+                      <label
-                      label="Timeline"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                      labelClass="tracking-wide"
+                        htmlFor="timeline_days"
-                      inputBg="bg-slate-100"
+                      >
-                      type="text"
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
                       name="timeline_days"
-                      spanTag=" - Expected duration of this task"
+                      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"
-                      // placeholder="Please Enter Detail Description of Job"
                       value={props.values.timeline_days}
-                      inputHandler={props.handleChange}
+                    >
-                      blurHandler={props.handleBlur}
+                      <option value="">Select Duration</option>
-                    />
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                     {props.errors.timeline_days &&
                       props.touched.timeline_days && (
                         <p className="text-sm text-red-500">
@@ -396,3 +411,16 @@ function AddJob() {
 }
 
 export default AddJob;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];

src/components/MyTasks/MyJobTable.jsx

@@ -58,15 +58,15 @@ export default function MyJobTable({ className, ActiveJobList }) {
           <LoadingSpinner size="16" color="sky-blue" />
         </div>
       ) : (
-        <div className="relative w-full overflow-x-auto sm:rounded-lg">
+        <div className="relative w-full sm:rounded-lg">
-          <div className="overflow-y-auto h-auto w-full">
+          <div className="h-auto w-full">
             {ActiveJobList?.data?.length > 0 ? (
               currentTask?.map((task, idx) => (
                 <div
                   className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] w-full flex justify-between items-center hover:bg-gray-50"
                   key={idx}
                 >
-                  <div className=" py-4">
+                  <div className="py-4 max-w-[80%]">
                     <div className="flex space-x-2 items-center">
                       <div className="w-full min-w-[60px] max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
                         <img
@@ -76,7 +76,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                         />
                       </div>
                       <div className="flex flex-col flex-[0.9]">
-                        <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                        <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                           {task?.title}
                         </h1>
                         <span className="text-base text-gray-600">
@@ -112,7 +112,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
                     </div>
                   </div>
 
-                  <div className="text-right py-4 px-2">
+                  <div className="flex justify-center items-center py-4 px-2">
                     <button
                       type="button"
                       onClick={() => {

src/components/MyTasks/MyOffersTable.jsx

@@ -7,6 +7,7 @@ import Icons from "../Helpers/Icons";
 import SliderCom from "../Helpers/SliderCom";
 
 import OfferJobPopout from '../jobPopout/OfferJobPopout'
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 
 export default function MyOffersTable({ className, MyActiveOffersList}) {
@@ -49,9 +50,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-       return(''); // want blank or no appear when no items
+//        return(''); // want blank or no appear when no items
-   }
+//    }
 
     return (
         <>
@@ -112,37 +113,40 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                             </div>
                             <div className="slider-content">
                                 <SliderCom settings={settings} selector={sellSlider}>
-
+                                {   MyActiveOffersList.loading ?
-                                    {MyActiveOffersList &&
+                                        <LoadingSpinner size={16} color='sky-blue' />
-                                        MyActiveOffersList?.result_list?.length > 0 &&
+                                    :
-                                        MyActiveOffersList.result_list.map((value, index) => (
+                                    MyActiveOffersList?.data?.length > 0 ?
-
+                                        MyActiveOffersList.data.map((value, index) => (
                                             <div className="item" key={index}>
-                                                <div className="offer-slide-item" >
+                                                <div className="offer-slide-item flex flex-col justify-between items-center">
                                                     {/* title */}
                                                     <div className="flex justify-center">
-                                                        <p className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
+                                                        <p className="text-xl text-dark-gray dark:text-white font-bold mb-2">
                                                             {value.title}
                                                         </p>
                                                     </div>
                                                     {/* username */}
-                                                    <div className="flex justify-center mb-1">
+                                                    <div className="flex flex-col justify-center my-1">
                                                         <p className="text-xs text-thin-light-gray">
                                                             {value.timeline_days} Days
                                                         </p>
-                                                    </div>
+                                                        <div className="my-2 flex space-x-1 items-center text-purple text-xs">
-                                                    {/* items */}
-                                                    <div className="flex justify-center">
-                                                        <div className="flex space-x-1 items-center text-purple text-xs">
                                                             <span>{value.price*0.01} {value.currency}</span>
                                                         </div>
                                                     </div>
+                                                    {/* items */}
+                                                    {/* <div className="flex justify-center">
+                                                        <div className="flex space-x-1 items-center text-purple text-xs">
+                                                            <span>{value.price*0.01} {value.currency}</span>
+                                                        </div>
+                                                    </div> */}
                                                     <button
                                                         type="button"
                                                         onClick={() => {
                                                             setOfferPopout({ show: true, data: value });
                                                         }}
-                                                        className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                        className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
                                                     >
                                                         Start Task
                                                     </button>
@@ -150,7 +154,25 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
                                                 </div>
 
                                             </div>
-                                        ))}
+                                        ))
+                                    :
+                                    MyActiveOffersList.status ?
+                                        (
+                                            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                <div className="p-2">
+                                                    No Tasks!
+                                                </div>
+                                            </div>
+                                        )
+                                    :
+                                        (
+                                            <div className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
+                                                <p className="p-2">
+                                                Error Occurred! Unable to display Tasks!
+                                                </p>
+                                            </div>
+                                        )
+                                }
 
 
 

src/components/Partials/RightSideBar.jsx

@@ -46,6 +46,8 @@ export default function RightSideBar() {
           </div>
 
           <div className="platform-list">
+            {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <>
             <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
@@ -77,8 +79,7 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
-            {userDetails && userDetails?.account_type !== "FAMILY" && (
+
-              <>
                 <div className="item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -122,6 +123,10 @@ export default function RightSideBar() {
                     </p>
                   </div>
                 </div>
+
+              </>
+            )}
+
             <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
@@ -156,8 +161,7 @@ export default function RightSideBar() {
                 </p>
               </div>
             </div>
-              </>
+
-            )}
           </div>
         </div>
         {/*<SideStatistics />*/}

src/components/jobPopout/JobListPopout.jsx

@@ -3,12 +3,12 @@ import Detail from "./popoutcomponent/Detail";
 import ModalCom from "../Helpers/ModalCom";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import SiteService from "../../services/SiteService";
-import { Form, Formik, Field } from "formik";
+import { Form, Formik, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
 const validationSchema = Yup.object().shape({
-  family: Yup.string().required("THis is required "),
+  family: Yup.string().required("This is required "),
   public: Yup.string(),
   individual: Yup.string()
     .email("Invalid email format")
@@ -68,18 +68,29 @@ function JobListPopout({ details, onClose, situation }) {
     group: "",
   };
 
-  let [inputs, setInputs] = useState({});
+  let [textArea, setTextArea] = useState(details?.job_detail);
+  const [errMsg, setErrMsg] = useState("")
 
-  const handleInputChange = ({ target: { name, value } }) => {
+  const handleInputChange = ({ target: { value } }) => {
-    setInputs((prev) => ({ ...prev, [name]: value }));
+    setTextArea(value);
   };
 
+  const errorHandler = ({target: {name}}) => {
+
+  }
+
   const jobFieldHandler = async (values, helpers) => {
-    let { job_id, job_uid, job_detail } = details;
+    let { job_id, job_uid } = details;
+
+    if(!textArea) {
+      setErrMsg("delivery detail is required!")
+      return
+    }
+
     let jobReq = {
       job_id,
       job_uid,
-      job_description: job_detail
+      job_description: textArea
     };
     let reqData;
 
@@ -119,16 +130,19 @@ function JobListPopout({ details, onClose, situation }) {
         assign_mode: 110033,
       };
       setLoader({ jobFields: { group: true } });
+    } else {
+      setErrMsg("err herre")
+      return
     }
 
     try {
       const res = await apiCall.assignJobTask(reqData);
       let { data } = await res;
-      setLoader({ member: false, jobFields: false });
+      setLoader({ jobFields: false });
       onClose();
       throw new Response(data);
     } catch (error) {
-      setLoader({ member: false, jobFields: false });
+      setLoader({ jobFields: false });
       throw new Error(error);
     }
   };
@@ -200,11 +214,11 @@ function JobListPopout({ details, onClose, situation }) {
               <textarea
                 className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
                 rows="5"
-                name="details"
                 style={{ resize: "none" }}
-                value={details.job_detail}
+                value={textArea}
                 onChange={handleInputChange}
               />
+            {/* <p>{errMsg}</p> */}
             </div>
           </div>
 
@@ -226,9 +240,10 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.family}
                       data={familyList}
                       btnText="Assign to family"
-                      optionText="select family"
+                      optionText="Select Family"
                       loader={loader?.jobFields.family}
                     />
+                    {/* <p>{errMsg}</p> */}
                   </Form>
                 );
               }}
@@ -250,9 +265,10 @@ function JobListPopout({ details, onClose, situation }) {
                       value={props?.values.public}
                       data={publicArray}
                       btnText="Show Task to Public"
-                      optionText="select duration"
+                      optionText="Select Duration"
                       loader={loader?.jobFields.public}
                     />
+                    {/* <p>{errMsg}</p> */}
                   </Form>
                 );
               }}
@@ -277,6 +293,7 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Send Offer to Individual"
                       loader={loader?.jobFields.individual}
                     />
+                    {/* <p>{errMsg}</p> */}
                   </Form>
                 );
               }}
@@ -300,10 +317,12 @@ function JobListPopout({ details, onClose, situation }) {
                       optionText="Group"
                       loader={loader?.jobFields.group}
                     />
+                    {/* <p>{errMsg}</p> */}
                   </Form>
                 );
               }}
             </Formik>
+            
           </div>
           {/* END OF ACTION SECTION */}
         </div>

src/components/jobPopout/OfferJobPopout.jsx

@@ -33,10 +33,6 @@ function OfferJobPopout({details, onClose, situation}) {
       setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
       reqData.offer_result = 333
     }
-    if(name == 'cancel'){
-      setRequestStatus({loading: true, status: false, message: '', trigger: 'cancel'})
-      reqData.offer_result = 222
-    }
 
     // API CALL
     apiUrl.offersResponse(reqData).then(response => {
@@ -191,19 +187,14 @@ function OfferJobPopout({details, onClose, situation}) {
 
         {/* close button */} 
         <div className="p-6 flex justify-end">
-          {requestStatus.loading && requestStatus.trigger == 'cancel' ?
-            <LoadingSpinner size={8} color='sky-blue' />
-            :
           <button
-              onClick={handleOffer}
+              onClick={onClose}
               disabled={requestStatus.loading}
               type="button"
-              name='cancel'
+              className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
-              className="border border-red-500 text-red-500 text-18 tracking-wide px-2 py-2 rounded-full"
             >
-              Cancel
+              <span className="text-gradient">Close</span>
             </button>
-          }
         </div>
         {/* end of close button */}
     </div>

src/views/MyTaskPage.jsx

@@ -9,7 +9,7 @@ export default function MyTaskPage() {
     const {jobListTable} = useSelector((state) => state.tableReload)
 
     const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
-    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
+    const [MyActiveOffersList, setMyActiveOffersList] = useState({loading: true, status:false, data:[]});
     const api = new usersService();
     const commonHeadData =()=>{
         console.log("COMMON HEAD DATA ----------------=====---------------------");
@@ -26,10 +26,12 @@ export default function MyTaskPage() {
         }
     };
     const getMyActiveOffersList = async () => {
+        setMyActiveOffersList({loading: true, status:false, data:[]});
         try {
             const res = await api.getOffersList();
-            setMyActiveOffersList(res.data);
+            setMyActiveOffersList({loading: false, status:true, data:res.data.result_list});
         } catch (error) {
+            setMyActiveOffersList({loading: false, status:false, data:[]});
             console.log("Error getting offers");
         }
     };