.

src/components/jobPopout/JobListPopout.jsx

@@ -69,28 +69,49 @@ function JobListPopout({ details, onClose, situation }) {
   };
 
   let [textArea, setTextArea] = useState(details?.job_detail);
-  const [errMsg, setErrMsg] = useState("")
+  const [errMsg, setErrMsg] = useState({
+    deliveryDetail: "",
+    jobFields: {
+      family: "",
+      public: "",
+      individual: "",
+      group: "",
+    },
+  });
 
   const handleInputChange = ({ target: { value } }) => {
     setTextArea(value);
   };
 
-  const errorHandler = ({target: {name}}) => {
-
-  }
+  const errorHandler = ({ target: { name } }) => {
+    try {
+      if (name === "family")
+        setErrMsg({ jobFields: { family: "please select a family member" } });
+      else if (name === "public")
+        setErrMsg({ jobFields: { public: "please select duration" } });
+      else if (name === "individual")
+        setErrMsg({ jobFields: { individual: "please enter email" } });
+      else if (name === "group")
+        setErrMsg({ jobFields: { group: "please select a family member" } });
+    } finally {
+      setTimeout(() => {
+        setErrMsg({ jobFields: "" });
+      }, 3000);
+    }
+  };
 
   const jobFieldHandler = async (values, helpers) => {
     let { job_id, job_uid } = details;
 
-    if(!textArea) {
-      setErrMsg("delivery detail is required!")
-      return
+    if (!textArea) {
+      setErrMsg({ deliveryDetail: "delivery detail is required!" });
+      return;
     }
 
     let jobReq = {
       job_id,
       job_uid,
-      job_description: textArea
+      job_description: textArea,
     };
     let reqData;
 
@@ -131,8 +152,7 @@ function JobListPopout({ details, onClose, situation }) {
       };
       setLoader({ jobFields: { group: true } });
     } else {
-      setErrMsg("err herre")
-      return
+      return;
     }
 
     try {
@@ -218,7 +238,7 @@ function JobListPopout({ details, onClose, situation }) {
                 value={textArea}
                 onChange={handleInputChange}
               />
-            {/* <p>{errMsg}</p> */}
+              <p>{errMsg.deliveryDetail}</p>
             </div>
           </div>
 
@@ -231,7 +251,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Assign to Family */}
                     <JobFieldInput
                       label="Assign to family"
@@ -242,8 +262,11 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Assign to family"
                       optionText="Select Family"
                       loader={loader?.jobFields.family}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.family === "" && (
+                      <p>{errMsg.jobFields.family}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -256,7 +279,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to public input */}
                     <JobFieldInput
                       label="Offer this job to public"
@@ -267,8 +290,11 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Show Task to Public"
                       optionText="Select Duration"
                       loader={loader?.jobFields.public}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.public === "" && (
+                      <p>{errMsg.jobFields.public}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -281,7 +307,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to individual input */}
                     <JobFieldInput
                       label="Offer this job to individual"
@@ -292,8 +318,11 @@ function JobListPopout({ details, onClose, situation }) {
                       inputHandler={props?.handleChange}
                       btnText="Send Offer to Individual"
                       loader={loader?.jobFields.individual}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.individual === "" && (
+                      <p>{errMsg.jobFields.individual}</p>
+                    )}
                   </Form>
                 );
               }}
@@ -306,7 +335,7 @@ function JobListPopout({ details, onClose, situation }) {
             >
               {(props) => {
                 return (
-                  <Form>
+                  <Form className="mb-4">
                     {/* Offer this job to your group input */}
                     <JobFieldInput
                       label="Offer this job to your Group"
@@ -316,13 +345,15 @@ function JobListPopout({ details, onClose, situation }) {
                       btnText="Send Order to Group"
                       optionText="Group"
                       loader={loader?.jobFields.group}
+                      errorHandler={errorHandler}
                     />
-                    {/* <p>{errMsg}</p> */}
+                    {props?.values.group === "" && (
+                      <p>{errMsg.jobFields.group}</p>
+                    )}
                   </Form>
                 );
               }}
             </Formik>
-            
           </div>
           {/* END OF ACTION SECTION */}
         </div>
@@ -346,11 +377,12 @@ const JobFieldInput = ({
   btnText,
   parentClass,
   optionText,
+  errorHandler,
   loader,
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-6 bg-red-50 rounded-md">
+    <div className="field w-full p-3 mb-2 bg-red-50 rounded-md">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -421,6 +453,7 @@ const JobFieldInput = ({
         <button
           type="submit"
           name={inputName}
+          onClick={errorHandler}
           className="px-2 py-1 text-sm text-white btn-gradient tracking-wide rounded-md"
         >
           {loader ? <LoadingSpinner size={5} /> : btnText}