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 1/2] 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>

From 393b4e7b37ede5e2a80e1c6f68ebcf7222b90736 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 8 Jan 2024 19:48:03 +0100
Subject: [PATCH 2/2] change popout class style

---
 src/components/Helpers/ModalCom.jsx            | 2 +-
 src/components/Partials/Layout.jsx             | 2 +-
 src/components/jobPopout/DeleteJobPopout.jsx   | 2 +-
 src/components/jobPopout/EditJobPopout.jsx     | 4 ++--
 src/components/jobPopout/JobListPopout.jsx     | 4 ++--
 src/components/jobPopout/PendingJobsPopout.jsx | 4 ++--
 src/views/AddJobPage.jsx                       | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Helpers/ModalCom.jsx b/src/components/Helpers/ModalCom.jsx
index 1635a45..eee01f3 100644
--- a/src/components/Helpers/ModalCom.jsx
+++ b/src/components/Helpers/ModalCom.jsx
@@ -16,7 +16,7 @@ export default function ModalCom({ action, children, situation, isOpen, classNam
         onClick={action || isOpen}
         className="fixed top-0 left-0 w-full lg:h-[100vh] h-full bg-black bg-opacity-40 backdrop-filter backdrop-blur-sm z-50"
       ></div>
-      <div className={`children-element fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto ${className}`}>
+      <div className={`fixed lg:h-100vh h-full z-[99999999999999] w-full lg:w-auto inset-0 flex flex-col justify-center items-center ${className}`}>
         {children && children}
       </div>
     </div>
diff --git a/src/components/Partials/Layout.jsx b/src/components/Partials/Layout.jsx
index 6bd8c47..dab7137 100644
--- a/src/components/Partials/Layout.jsx
+++ b/src/components/Partials/Layout.jsx
@@ -87,7 +87,7 @@ export default function Layout({ children }) {
       </div>
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
-          <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="logout-modal-wrapper w-11/12 sm:w-[460px] bg-white dark:bg-dark-white lg:rounded-2xl">
             <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm
diff --git a/src/components/jobPopout/DeleteJobPopout.jsx b/src/components/jobPopout/DeleteJobPopout.jsx
index 5c8e1ff..edaf481 100644
--- a/src/components/jobPopout/DeleteJobPopout.jsx
+++ b/src/components/jobPopout/DeleteJobPopout.jsx
@@ -63,7 +63,7 @@ function DeleteJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+      <div className="logout-modal-wrapper lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Delete Job
diff --git a/src/components/jobPopout/EditJobPopout.jsx b/src/components/jobPopout/EditJobPopout.jsx
index e68d5ad..a10fca3 100644
--- a/src/components/jobPopout/EditJobPopout.jsx
+++ b/src/components/jobPopout/EditJobPopout.jsx
@@ -215,8 +215,8 @@ const EditJobPopOut = ({
   const isWindows = /Windows/.test(navigator.userAgent);
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lg:w-[600px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
         <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Edit Job
diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 46f0546..6f42135 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -218,8 +218,8 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
 
   // console.log("Job List P >> ", details)
   return (
-    <ModalCom action={onClose} situation={situation} className="job-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation} className="">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
             {details.title}
diff --git a/src/components/jobPopout/PendingJobsPopout.jsx b/src/components/jobPopout/PendingJobsPopout.jsx
index 9de71fb..258bf84 100644
--- a/src/components/jobPopout/PendingJobsPopout.jsx
+++ b/src/components/jobPopout/PendingJobsPopout.jsx
@@ -133,8 +133,8 @@ function PendingJobsPopout({ details, onClose, situation }) {
   };
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Manage Pending Item
diff --git a/src/views/AddJobPage.jsx b/src/views/AddJobPage.jsx
index 5c89ddf..b6f336c 100644
--- a/src/views/AddJobPage.jsx
+++ b/src/views/AddJobPage.jsx
@@ -4,8 +4,8 @@ import ModalCom from "../components/Helpers/ModalCom";
 
 function AddJobPage({ action, situation, categories }) {
   return (
-    <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 dark:text-white">
+    <ModalCom action={action} situation={situation}>
+      <div className="lg:w-[600px] w-11/12 lg:overflow-hidden lg:rounded-2xl bg-white dark:bg-dark-white dark:text-white">
         <div className="heading flex justify-between items-center py-6  md:px-[30px] px-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
           <p className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Create New Job