From b2411285bc6b1e85d6bc3ded194ec0a25b6f568f Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 8 Jan 2024 19:21:15 +0100
Subject: [PATCH] added assign tabs

---
 src/components/jobPopout/JobListPopout.jsx | 36 +++++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 7069692..46f0546 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -23,6 +23,10 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+
+  const [selectedTab, setSelectedTab] = useState('public')
+  const tabs = ['public', 'individual', 'group']
+
 const dispatch = useDispatch()
 
 const [requestStatus, setRequestStatus] = useState({message:'', status:false})
@@ -170,6 +174,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       if(status != 200 || data.internal_return < 0){
         setRequestStatus({message:'Unable to complete', status:false})
         return setTimeout(()=>{
+          setLoader({ jobFields: false });
           setRequestStatus({message:'', status:false})
         },3000)
       }
@@ -285,14 +290,24 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
               />
               <p>{errMsg.deliveryDetail}</p>
             </div>
-
-            {requestStatus.message &&
-              <p className={`w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
-            }
           </div>
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-2/4 h-full">
+            <div className="grid grid-cols-3 my-4 border-b-2">
+              {tabs.map(item => (
+                <button 
+                  className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`} 
+                  value={item} 
+                  name={item}
+                  onClick={()=>setSelectedTab(item)}
+                >
+                  {item[0].toUpperCase() + item.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            {selectedTab == 'family' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.family}
@@ -323,7 +338,9 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
-
+            }
+            
+            {selectedTab == 'public' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.public}
@@ -354,7 +371,9 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
+            }
 
+            {selectedTab == 'individual' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.individual}
@@ -385,8 +404,10 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
+            }
             
             {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+            {selectedTab == 'group' &&
             <Formik
               initialValues={initialValues}
               validationSchema={validationSchema.fields.group}
@@ -417,6 +438,11 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
                 );
               }}
             </Formik>
+            }
+
+            {requestStatus.message &&
+              <p className={`mt-4 w-full text-lg ${requestStatus.status ? 'text-emerald-600' : 'text-red-600'}`}>{requestStatus.message}</p>
+            }
           </div>
           {/* END OF ACTION SECTION */}
         </div>