assign task text added

src/Routers.jsx

@@ -53,6 +53,7 @@ import LndPage from "./views/LndPage";
 import FamilySettingsPage from "./views/FamilySettingsPage";
 import AppDownloadPage from "./views/AppDownloadPage";
 import JobGroupsPage from "./views/JobGroupsPage";
+import YourPages from "./views/YourPage_";
 
 export default function Routers() {
   return (
@@ -115,6 +116,7 @@ export default function Routers() {
           <Route exact path="/acc-family"  element={<FamilyAccPage />} />
           <Route exact path="/manage-family"  element={<FamilyManagePage />} />
           <Route exact path="/start-job"  element={<StartJob />} />
+          <Route exact path="/yourpage"  element={<YourPages />} />
           <Route exact path="/manage-active-job"  element={<ManageActiveJobs />} />
           <Route exact path="/blog-page"  element={<BlogPage />} />
           <Route exact path="/offer-interest"  element={<OffersInterestPage />} />

src/assets/images/icons/my-page.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page"><path fill-rule="evenodd" d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z" fill="#767fad" class="color000000 svgShape"></path></svg>

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -172,9 +172,8 @@ const AssignTaskPopout = React.memo(
         <ModalCom
           action={action}
           situation={situation}
-          className="assign-task-popup"
         >
-          <div className="w-full h-full lg:w-[700px] lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+          <div className="w-11/12 lg:w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
             <div className="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">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Assign task to{" "}

src/components/FamilyAcc/FamilyTable.jsx

@@ -77,7 +77,7 @@ export default function FamilyTable({
       >
         <td className="py-4">
           <div className="flex space-x-2 items-center w-full">
-            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
+            <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
               <img
                 // src={profile_picture}
                 src={image || profile_picture || localImgLoad(`images/icons/${banner}`)}

src/components/FamilyAcc/index.jsx

@@ -226,7 +226,7 @@ const FamilyForm = ({
   popUpHandler,
 }) => {
   return (
-    <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 lg:w-[460px] 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: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">
           Add Members

src/components/Helpers/Icons.jsx

@@ -462,6 +462,15 @@ export default function Icons({ name }) {
             clipRule="evenodd"
           />
         </svg>
+      ) : name === "my-page" ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+          <path
+            fillRule="evenodd"
+            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+            fill="#ffffff"
+            className="color000000 svgShape"
+          ></path>
+        </svg>
       ) : name === "accordion-minus" ? (
         <svg
           width="20"
@@ -510,20 +519,48 @@ export default function Icons({ name }) {
       ) : name === "master-card" ? (
         <img className="w-[30px]" src={MasterCard} alt="card" />
       ) : name === "new-dashboard" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/dashboard.svg')} alt="dashboard" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/dashboard.svg")}
+          alt="dashboard"
+        />
       ) : name === "new-family" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/family.svg')} alt="family" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/family.svg")}
+          alt="family"
+        />
       ) : name === "new-logout" ? (
-        <img className="w-[45px] rounded-full bg-white p-1" src={localImgLoad('images/icons/logout.svg')} alt="logout" />
+        <img
+          className="w-[45px] rounded-full bg-white p-1"
+          src={localImgLoad("images/icons/logout.svg")}
+          alt="logout"
+        />
       ) : name === "new-market" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/market.svg')} alt="market" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/market.svg")}
+          alt="market"
+        />
       ) : name === "new-mytask" ? (
-        <img className="w-[17px] h-[17px]" src={localImgLoad('images/icons/my-task.svg')} alt="task" />
+        <img
+          className="w-[17px] h-[17px]"
+          src={localImgLoad("images/icons/my-task.svg")}
+          alt="task"
+        />
       ) : name === "family-id" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-id.svg')} alt="family-id" />
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-id.svg")}
+          alt="family-id"
+        />
       ) : name === "family-pin" ? (
-        <img className="w-[20px] h-[20px]" src={localImgLoad('images/icons/family-pin.svg')} alt="family-pin" />
-      ): (
+        <img
+          className="w-[20px] h-[20px]"
+          src={localImgLoad("images/icons/family-pin.svg")}
+          alt="family-pin"
+        />
+      ) : (
         ""
       )}
     </>

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>

src/components/JobGroups/GroupMemberTable.jsx

@@ -30,38 +30,34 @@ export default function GroupMemberTable({selectedList}) {
    
     return (
         <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[300px]">
-              <table className="table-auto min-w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
+              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                 <tbody>
                   <>
-                    <tr className='font-bold text-sm text-dark-gray dark:text-white whitespace-nowrap'>
-                        <th>First Name</th>
-                        <th>Last Name</th>
-                        <th>Email</th>
-                        <th></th>
-                    </tr>
-                    <tr>
-                        <td className='p-[1px] bg-slate-400 dark:bg-white rounded-full' colSpan="4"></td>
-                    </tr>
                     {selectedList && selectedList?.length > 0 ? (
-                    //   currentSelectedList?.length ? (
                         currentSelectedList.map((value, index) => (
-                        <tr key={value.uid} className="font-medium text-sm text-dark-gray dark:text-white whitespace-nowrap">
-                          <td className="p-1">{value?.firstname}</td>
+                        <tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
+                          {/* <td className="p-1">{value?.firstname}</td>
                           <td className="p-1">{value?.lastname}</td>
                           <td className="p-1">{value?.email}</td>
                           <td className="p-1 text-right">
                             <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
+                          </td> */}
+                          <td className='py-2'>
+                            <div className="flex flex-col">
+                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
+                                {value.firstname && value.firstname} {value.lastname && value.lastname}
+                              </h1>
+                              <span className="text-sm text-thin-light-gray">
+                                {value.email && value.email}
+                              </span>
+                            </div>
+                          </td>
+                          <td className='py-2 text-right'>
+                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
                           </td>
                         </tr>
                         ))
-                    //   ) : (
-                    //     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                    //       <td className="p-2">
-                    //         No Members Found
-                    //       </td>
-                    //     </tr>
-                    //   )
                     ) : (
                       <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                         <td className="p-2">No Members Found</td>

src/components/JobGroups/JobGroups.jsx

@@ -20,7 +20,7 @@ export default function JobGroups() {
         members: []
     })
 
-    const [selectedGroup, setSelectedGroup] = useState({id:'', data: []})
+    const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
 
     const changeSelectedGroup = (e) => {
         let groupID = e.target.value
@@ -42,10 +42,15 @@ export default function JobGroups() {
                 return
             }
             setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
-            let activeGroupId = data.result_list[0].group_id
-            let activeGroup = data.result_list[0].group_name
-            let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
-            setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
+            if(selectedGroup.id == ''){
+                let activeGroupId = data.result_list[0].group_id
+                let activeGroup = data.result_list[0].group_name
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == activeGroupId)
+                setSelectedGroup({id: activeGroupId, name:activeGroup, data:activeMembers})
+            }else{
+                let activeMembers = data.result_list_member?.filter(item => item.group_id == selectedGroup?.id)
+                setSelectedGroup({id: selectedGroup?.id, name:selectedGroup?.name, data:activeMembers})
+            }
         }).catch(error => {
             setGroupList({loading: false, groups: [], members: []})
             console.log(error)

src/components/JobGroups/MemberList.jsx

@@ -20,11 +20,42 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
 
     const handleFieldsChange = ({target:{name, value}}) => {
         setFields(prev => ({...prev, [name]:value}))
-        let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
-        if(error >= 0){
-          let oldErrorArr = requestState.errors
-          let newErrorArr = oldErrorArr.splice(error, 1)
-          setRequestState(prev => ({...prev, errors:oldErrorArr}))
+        // let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+        // if(error >= 0){
+        //   let oldErrorArr = requestState.errors
+        //   let newErrorArr = oldErrorArr.splice(error, 1)
+        //   setRequestState(prev => ({...prev, errors:oldErrorArr}))
+        // }
+
+        if(value == ''){
+            setRequestState({
+                loading: false,
+                status: false,
+                message: '',
+                data: [],
+                errors: [name]
+            })
+        }else{
+            let error = requestState?.errors?.indexOf(name) //// checks if the input field was in error array and removes it when the input changes
+            if(error >= 0){
+              let oldErrorArr = requestState.errors
+              let newErrorArr = oldErrorArr.splice(error, 1)
+              setRequestState(prev => ({...prev, errors:oldErrorArr}))
+            }
+        }
+
+        if(name == 'email'){
+             //checks if email is a valid email address
+            let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+            if (!EmailValidator(value)) {
+                setRequestState({
+                    loading: false,
+                    status: false,
+                    message: '',
+                    data: [],
+                    errors: ['email']
+                })
+            }
         }
     }
 
@@ -33,26 +64,26 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
         status: false,
         message: '',
         data: [],
-        errors: []
+        errors: ['email', 'firstname', 'lastname']
       })
 
     const addMember = () => {
-        let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
-            if(typeof item == 'string' && fields[item] === ''){
-                return item
-            }
-        })
+        // let errors = Object.keys(fields).filter((item) => { // CHECKS FOR EMPTY STRINGS
+        //     if(typeof item == 'string' && fields[item] === ''){
+        //         return item
+        //     }
+        // })
     
-        if(errors.length){
-        setRequestState({
-            loading: false,
-            status: false,
-            message: '',
-            data: [],
-            errors: [...errors]
-        })
-        return
-        }
+        // if(errors.length){
+        // setRequestState({
+        //     loading: false,
+        //     status: false,
+        //     message: '',
+        //     data: [],
+        //     errors: [...errors]
+        // })
+        // return
+        // }
 
         //checks if email is a valid email address
         let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
@@ -155,54 +186,61 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
         <>
             <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>{selectedGroup?.name}</h1>
             <div className='w-full flex flex-col-reverse lg:flex-col'>
-                <div className='py-3 w-full sm:w-[500px] xl:w-full xxl:w-[500px]'>
-                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2'>
-                        <div className='h-10 relative'>
-                            <input 
-                            id='firstname'
-                            name='firstname'
-                            // className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`} 
-                            className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('firstname') ? 'border-red-500' : 'border-transparent'}`} 
-                            type='text'
-                            placeholder='First Name' 
-                            value={fields.firstname}
-                            onChange={handleFieldsChange}
+                <div className='py-3 w-full'>
+                    <div className='relative grid grid-cols-1 sm:grid-cols-2 gap-2 place-content-center'>
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.firstname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="First Name"
+                                // label="Firstname"
+                                name="firstname"
+                                type="text"
+                                // iconName="message"
                             />
-                            {/* <label htmlFor='firstname' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('firstname') ? 'text-red-500' : ''}`}>First Name</label> */}
                         </div>
-                        <div className='h-10 relative'>
-                            <input 
-                            id='lastname'
-                            name='lastname'
-                            // className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`} 
-                            className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('lastname') ? 'border-red-500' : 'border-transparent'}`} 
-                            type='text'
-                            placeholder='Last Name' 
-                            value={fields.lastname}
-                            onChange={handleFieldsChange}
+                        <div className="input-item">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.lastname}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Last Name"
+                                // label="Lastname"
+                                name="lastname"
+                                type="text"
+                                // iconName="message"
                             />
-                            {/* <label htmlFor='lastname' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('lastname') ? 'text-red-500' : ''}`}>LastName</label> */}
                         </div>
-                        <div className='h-10 relative'>
-                            <input 
-                            id='email'
-                            name='email'
-                            // className={`peer px-5 w-full h-full rounded-full outline-none placeholder:text-transparent transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80`} 
-                            className={`peer px-5 w-full h-full rounded-full outline-none border placeholder:text-slate-600 transition-all duration-500 text-black dark:text-black bg-gradient-to-br from-slate-50/80 via-slate-200/80 to-slate-100/80 focus:from-slate-100/80 focus:to-slate-50/80 ${requestState.errors.includes('email') ? 'border-red-500' : 'border-transparent'}`} 
-                            type='email'
-                            placeholder='Email' 
-                            value={fields.email}
-                            onChange={handleFieldsChange}
+                        <div className="input-item w-full sm:w-[150%]">
+                            <InputCom
+                                labelClass="tracking-wider"
+                                fieldClass="sm:px-6 px-2"
+                                value={fields.email}
+                                inputHandler={handleFieldsChange}
+                                placeholder="Email"
+                                // label="Email"
+                                name="email"
+                                type="email"
+                                // iconName="message"
                             />
-                            {/* <label htmlFor='email' className={`text-sm text-black dark:text-slate-500 absolute left-5 -top-4 translate-y-0 peer-focus:-top-3 peer-focus:translate-y-0 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 transition-all duration-500 ${requestState.errors.includes('email') ? 'text-red-500' : ''}`}>Email</label> */}
                         </div>
-                        <div className='flex justify-end items-center'>
+                        <div className='flex justify-end items-end'>
                             {requestState.loading ?
                             <LoadingSpinner size='8' color='sky-blue' />
                             :
-                            <button onClick={addMember} disabled={requestState.loading || requestState.status} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Member</button>
+                            <button 
+                                onClick={addMember} 
+                                disabled={requestState.loading || requestState.status || requestState.errors.length} 
+                                className={`py-2 px-4 h-[42px] flex justify-center items-center text-base rounded-full text-white font-bold transition-all duration-500 ${requestState.loading || requestState.status || requestState.errors.length ? 'bg-sky-blue/50' : 'bg-sky-blue hover:bg-sky-600'} `}
+                            >
+                                Add Member
+                            </button>
                             }
                         </div>
+
                         {!requestState.loading && requestState.message &&
                         <p className={`text-lg absolute -bottom-7 left-0 ${requestState.status ? 'text-green-500' : 'text-red-500'}`}>{requestState.message}</p>
                         }

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -117,8 +117,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     .replace(/&/g, "&");
 
   return (
-    <ModalCom action={onClose} situation={situation} className="edit-popup">
-      <div className="logout-modal-wrapper md:w-[650px] md:h-[580px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
+    <ModalCom action={onClose} situation={situation}>
+      <div className="logout-modal-wrapper w-11/12 md:w-[650px] md:h-[580px] h-full 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]">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {details.offer_code}

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -600,10 +600,10 @@ const PopModal = ({
   myRef,
 }) => {
   return (
-    <ModalCom action={popUpHandler} situation={popUp} className="edit-popup">
+    <ModalCom action={popUpHandler} situation={popUp}>
       <div
         ref={myRef}
-        className="message-modal-wrapper min-w-[500px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl"
+        className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
         <div className="message-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">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -104,8 +104,8 @@ function ConfirmNairaWithdraw({
   };
 
   return (
-    <ModalCom action={action} 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">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <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">
             <h2 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -35,7 +35,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       situation={situation}
       className="assign-task-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">
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto 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">
             {confirmCredit?.show?.acceptConfirm?.loader

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -289,8 +289,8 @@ function NairaWithdraw({
   console.log("Testing Wallet Country", wallet?.walletCountry[0]?.code);
 
   return (
-    <ModalCom action={action} 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">
+    <ModalCom action={action} situation={situation}>
+      <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="w-full">
           <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">

src/components/Partials/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
@@ -238,6 +238,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </div>
             </button>
             {/* balance */}
+            
+            {/* My Page Button */}
+            <PageButton />
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
@@ -412,6 +415,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         </div>
                       </Link>
                     </li>
+                    {userDetails && userDetails?.account_type !== "FAMILY" && (
+                      <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
+                        <Link to="/yourpage" className="notifications">
+                          <div className="name">
+                            <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
+                              My Page
+                            </p>
+                          </div>
+                        </Link>
+                      </li>
+                    )}
                     {userDetails && userDetails?.account_type !== "FAMILY" && (
                       <>
                         <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
@@ -656,3 +670,29 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
     </>
   );
 }
+
+
+const PageButton = () => {
+  return (
+    <Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
+      <div
+          className="flex items-center lg:justify-between justify-center w-full h-full"
+        >
+          <span className="lg:block hidden w-[25px]">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
+          <path
+            fillRule="evenodd"
+            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+            fill="#ffffff"
+            className="color000000 svgShape"
+          ></path>
+        </svg>
+          </span>
+          <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+          <span className="lg:block hidden">
+            {/* <Icons name="deep-plus" /> */}
+          </span>
+        </div>
+    </Link>
+  )
+}

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

src/components/YourPage/UpdateButton.jsx

@@ -0,0 +1,14 @@
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+const UpdateButton = ({ onClick, loading }) => (
+  <button
+    type="submit"
+    onClick={onClick}
+    disabled={loading}
+    className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-full"
+  >
+    {loading ? <LoadingSpinner size="6" color="sky-blue" /> : "Update"}
+  </button>
+);
+
+export default UpdateButton;

src/components/YourPage/YourPageForm.jsx

@@ -0,0 +1,42 @@
+import InputCom from "../Helpers/Inputs/InputCom/index";
+import UpdateButton from "./UpdateButton";
+
+const YourPageForm = ({ values, onChange, onSubmit, loading }) => (
+  <div className="ml-16 my-2 flex flex-col gap-3">
+    <div className="field w-full">
+      <InputCom
+        fieldClass="px-4"
+        parentClass="flex items-center gap-1 justify-between"
+        labelClass="flex-[0.2] mb-0 font-semibold"
+        inputClass="flex-[0.8]"
+        inputBg="bg-slate-100"
+        label="Introduction: "
+        type="text"
+        name="intro"
+        value={values.intro}
+        inputHandler={onChange}
+      />
+    </div>
+
+    <div className="field w-full mb-6 flex gap-1 justify-between">
+      <label className="text-[#181c32] dark:text-white text-[13.975px] font-semibold flex flex-[0.2] mt-2.5">
+        Brief Details:
+      </label>
+      <textarea
+        style={{ resize: "none" }}
+        className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+        name="description"
+        cols="30"
+        rows="2"
+        value={values.description}
+        onChange={onChange}
+      />
+    </div>
+    <div className="w-full flex justify-end mb-2">
+      <UpdateButton onClick={onSubmit} loading={loading} />
+    </div>
+    <hr />
+  </div>
+);
+
+export default YourPageForm;

src/components/YourPage/index.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import Layout from "../Partials/Layout";
+import usersService from "../../services/UsersService";
+import YourPageForm from "./YourPageForm";
+
+const YourPage = () => {
+  const [pageValues, setPageValues] = useState({
+    intro: "",
+    description: "",
+  });
+
+  const [response, setResponse] = useState({
+    loading: false,
+    data: {},
+    error: "",
+    msg: "",
+  });
+
+  const handleChange = (event) => {
+    let { name, value } = event.target;
+    setPageValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const updateYourPageDetails = async () => {
+    try {
+      setResponse({ loading: true, error: "", msg: "" });
+
+      let api = new usersService();
+      const res = await api.MyPageIntro(pageValues);
+
+      setTimeout(() => {
+        setResponse({
+          loading: false,
+          data: res.data,
+          msg: "Page updated successfully",
+        });
+
+        // Clear form after successful update
+        setPageValues({ intro: "", description: "" });
+      }, 2000);
+    } catch (error) {
+      setResponse({
+        loading: false,
+        data: {},
+        error: "Error updating page",
+        msg: "",
+      });
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="notification-page w-full mb-10">
+        <div className="notification-wrapper w-full">
+          <div className="update-table w-full h-full p-4 bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px]">
+            <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide mb-2">
+              My page
+            </h1>
+            <hr />
+            <YourPageForm
+              values={pageValues}
+              onChange={handleChange}
+              onSubmit={updateYourPageDetails}
+              loading={response.loading}
+            />
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default YourPage;

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

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

src/components/jobPopout/FamilyOfferJobPopout.jsx

@@ -105,7 +105,7 @@ function FamilyOfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <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">
+      <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">
             Start Task

src/components/jobPopout/JobListPopout.jsx

@@ -23,8 +23,14 @@ 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})
+
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
     member: false,
@@ -96,7 +102,7 @@ const dispatch = useDispatch()
       else if (name === "individual")
         setErrMsg({ jobFields: { individual: "please enter email" } });
       else if (name === "group")
-        setErrMsg({ jobFields: { group: "please select a family member" } });
+        setErrMsg({ jobFields: { group: "please select a group" } });
     } finally {
       setTimeout(() => {
         setErrMsg({ jobFields: "" });
@@ -150,9 +156,12 @@ const dispatch = useDispatch()
       // for group input
       reqData = {
         ...jobReq,
-        email: values?.individual,
+        email: '',
+        group_id: values?.group,
         action: 13025,
-        assign_mode: 110033,
+        assign_mode: 110044,
+        duration: details?.timeline_days,
+        // duration: 0,
       };
       setLoader({ jobFields: { group: true } });
     } else {
@@ -161,21 +170,56 @@ const dispatch = useDispatch()
 
     try {
       const res = await apiCall.assignJobTask(reqData);
-      let { data } = await res;
-      setLoader({ jobFields: false });
+      let { status, data } = await res;
+      if(status != 200 || data.internal_return < 0){
+        setRequestStatus({message:'Unable to complete', status:false})
+        return setTimeout(()=>{
+          setLoader({ jobFields: false });
+          setRequestStatus({message:'', status:false})
+        },3000)
+      }
       dispatch(tableReload({ type: "JOBTABLE" }));
-      onClose();
-      throw new Response(data);
+      setRequestStatus({message:'Successful', status:true})
+      setTimeout(()=>{
+        setLoader({ jobFields: false });
+        onClose();
+        throw new Response(data);
+      },3000)
     } catch (error) {
-      setLoader({ jobFields: false });
-      throw new Error(error);
+      setRequestStatus({message:'Unable to complete', status:false})
+      setTimeout(()=>{
+        setRequestStatus({message:'', status:false})
+        setLoader({ jobFields: false });
+        throw new Error(error);
+      },3000)
     }
   };
 
+  const [groupList, setGroupList] = useState({loading: true, groups: [], members: []})
+
+  // FUNCTION TO POPULATE USER GROUP LIST
+  useEffect(()=>{
+    // setGroupList({loading: true, groups: [], members: []})
+    apiCall.jobGroupList({}).then(res => {
+        const {status, data} = res
+        if(status != 200 || data?.internal_return < 0){
+            setGroupList({loading: false, groups: [], members: []})
+            return
+        }
+        if(data.result_list.length < 0){
+            setGroupList({loading: false, groups: [], members: []})
+            return
+        }
+        setGroupList({loading: false, groups: data.result_list, members: data.result_list_member})
+    }).catch(error => {
+        setGroupList({loading: false, groups: [], members: []})
+    })
+},[])
+
   // 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}
@@ -206,8 +250,8 @@ const dispatch = useDispatch()
             </svg>
           </button>
         </div>
-        <div className="md:flex bg-white dark:bg-dark-white rounded-lg shadow-lg">
-          <div className="p-4 w-full md:w-2/4 md:border-r-2">
+        <div className="md:grid grid-cols-2 bg-white dark:bg-dark-white rounded-lg shadow-lg">
+          <div className="p-4 pb-3 w-full md:border-r-2">
             {/* <p className='text-lg font-semibold text-slate-900 tracking-wide'>{details.title}</p> */}
 
             {/* INPUT SECTION */}
@@ -233,7 +277,7 @@ const dispatch = useDispatch()
                 />
             </div>
 
-            <div className="my-3">
+            <div className="">
               <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
                 Delivery Detail
               </label>
@@ -249,130 +293,165 @@ const dispatch = useDispatch()
           </div>
 
           {/* ACTION SECTION */}
-          <div className="p-4 w-full md:w-2/4 h-full">
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.family}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4 hidden">
-                    {/* Assign to Family */}
-                    <JobFieldInput
-                      label="Assign to family"
-                      select={true}
-                      inputName="family"
-                      value={props?.values.family}
-                      data={familyList}
-                      btnText="Assign to family"
-                      optionText="Select Family"
-                      loader={loader?.jobFields.family}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.family === "" && (
-                        <span>{errMsg.jobFields.family}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
+          <div className="p-4 w-ful flex flex-col justify-between">
+            <h1 className="text-lg mt-3 font-medium tracking-wide text-black dark:text-white">Send this Task to:</h1>
+            <div className="flex flex-col grow">
+              <div className="grid grid-cols-3 mt-4">
+                {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]'}`}
+                    className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
+                    value={item} 
+                    name={item}
+                    onClick={()=>setSelectedTab(item)}
+                  >
+                    <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
+                    {item[0].toUpperCase() + item.slice(1)}
+                  </button>
+                ))}
+              </div>
+              <div className="grow flex flex-col bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
+                {selectedTab == 'family' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.family}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="hidden">
+                        {/* Assign to Family */}
+                        <JobFieldInput
+                          label="Assign to family"
+                          select={true}
+                          inputName="family"
+                          value={props?.values.family}
+                          data={familyList}
+                          btnText="Assign to family"
+                          optionText="Select Family"
+                          loader={loader?.jobFields?.family}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values?.family === "" && (
+                            <span>{errMsg?.jobFields?.family}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {selectedTab == 'public' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.public}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to public input */}
+                        <JobFieldInput
+                          label="Offer this job to public"
+                          select={true}
+                          inputName="public"
+                          value={props?.values.public}
+                          data={publicArray}
+                          btnText="Show Task to Public"
+                          optionText="Select Duration"
+                          loader={loader?.jobFields?.public}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.public === "" && (
+                            <span>{errMsg?.jobFields?.public}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
 
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.public}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to public input */}
-                    <JobFieldInput
-                      label="Offer this job to public"
-                      select={true}
-                      inputName="public"
-                      value={props?.values.public}
-                      data={publicArray}
-                      btnText="Show Task to Public"
-                      optionText="Select Duration"
-                      loader={loader?.jobFields.public}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.public === "" && (
-                        <span>{errMsg.jobFields.public}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
+                {selectedTab == 'individual' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.individual}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to individual input */}
+                        <JobFieldInput
+                          label="Offer this job to individual"
+                          input={true}
+                          inputName="individual"
+                          value={props?.values.individual}
+                          placeholder="Enter email of individual"
+                          inputHandler={props?.handleChange}
+                          btnText="Send Offer to Individual"
+                          loader={loader?.jobFields?.individual}
+                          errorHandler={errorHandler}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.individual === "" && (
+                            <span>{errMsg?.jobFields?.individual}</span>
+                          )}
+                        </p>{" "}
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+                
+                {/* { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 && } */}
+                {selectedTab == 'group' &&
+                <Formik
+                  initialValues={initialValues}
+                  validationSchema={validationSchema.fields.group}
+                  onSubmit={jobFieldHandler}
+                >
+                  {(props) => {
+                    return (
+                      <Form className="">
+                        {/* Offer this job to your group input */}
+                        <JobFieldInput
+                          label="Offer this job to your Group"
+                          select={true}
+                          inputName="group"
+                          value={props?.values.group}
+                          btnText="Send Order to Group"
+                          optionText="Select Group"
+                          loader={loader?.jobFields?.group}
+                          errorHandler={errorHandler}
+                          data={groupList}
+                          parentClass='w-full flex flex-col gap-4'
+                        />
+                        <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
+                          {" "}
+                          {props?.values.group === "" && (
+                            <span>{errMsg?.jobFields?.group}</span>
+                          )}
+                        </p>
+                      </Form>
+                    );
+                  }}
+                </Formik>
+                }
+              </div>
+            </div>
 
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.individual}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to individual input */}
-                    <JobFieldInput
-                      label="Offer this job to individual"
-                      input={true}
-                      inputName="individual"
-                      value={props?.values.individual}
-                      placeholder="Enter email of individual"
-                      inputHandler={props?.handleChange}
-                      btnText="Send Offer to Individual"
-                      loader={loader?.jobFields.individual}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.individual === "" && (
-                        <span>{errMsg.jobFields.individual}</span>
-                      )}
-                    </p>{" "}
-                  </Form>
-                );
-              }}
-            </Formik>
-            
-            { process.env.REACT_APP_SHOW_OFFER_GROUP_JOB != 0 &&
-            <Formik
-              initialValues={initialValues}
-              validationSchema={validationSchema.fields.group}
-              onSubmit={jobFieldHandler}
-            >
-              {(props) => {
-                return (
-                  <Form className="mb-4">
-                    {/* Offer this job to your group input */}
-                    <JobFieldInput
-                      label="Offer this job to your Group"
-                      select={true}
-                      inputName="group"
-                      value={props?.values.group}
-                      btnText="Send Order to Group"
-                      optionText="Group"
-                      loader={loader?.jobFields.group}
-                      errorHandler={errorHandler}
-                    />
-                    <p className="h-4 text-[13px] font-light italic text-red-600 tracking-wide">
-                      {" "}
-                      {props?.values.group === "" && (
-                        <span>{errMsg.jobFields.group}</span>
-                      )}
-                    </p>
-                  </Form>
-                );
-              }}
-            </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 */}
@@ -402,7 +481,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-md">
+    <div className="field w-full h-full px-3 pt-5 pb-3 flex flex-col justify-between gap-4">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -411,7 +490,7 @@ const JobFieldInput = ({
             >
               {label && (
                 <label
-                  className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                  className="input-label border-2 w-full border-sky-700 py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
                   htmlFor={inputName}
                 >
                   {label}
@@ -427,27 +506,52 @@ const JobFieldInput = ({
                 className={`input-field placeholder:text-base text-dark-gray w-full h-full bg-white outline-none px-2`}
                 value={value}
               >
-                <option value="">{optionText}</option>
-                {Array.isArray(data) &&
-                  data?.map((item, idx) => (
-                    <React.Fragment key={idx}>
-                      {inputName === "family" && item?.last_login !== "" && (
-                        <option value={item?.family_uid} key={idx}>
-                          {`${item?.firstname} ${item?.lastname}`}
+                {/* <option value="">{optionText}</option> */}
+                {(inputName == 'family' || inputName == 'public') &&
+                  Array.isArray(data) &&
+                  <>
+                  <option value="">{optionText}</option>
+                   { data?.map((item, idx) => (
+                      <React.Fragment key={idx}>
+                        {inputName === "family" && item?.last_login !== "" && (
+                          <option value={item?.family_uid} key={idx}>
+                            {`${item?.firstname} ${item?.lastname}`}
+                          </option>
+                        )}
+                        {inputName === "public" && (
+                          <option value={item?.duration} key={idx}>
+                            {item?.name}
+                          </option>
+                        )}
+                        {/* {inputName === "group" && (
+                          <option value={item?.group_id} key={idx}>
+                            {item?.group_name}
+                          </option>
+                        )} */}
+                      </React.Fragment>
+                    ))}
+                  </>
+                }
+                {(inputName == 'group') && 
+                <>
+                  {data.loading ?
+                    <option value={''}>
+                      Loading...
+                    </option>
+                    : data?.groups?.length > 0 ?
+                    <>
+                      <option value="">{optionText}</option>
+                     { data?.groups?.map((item, index)=>(
+                        <option value={item?.group_id} key={index}>
+                          {item?.group_name}
                         </option>
-                      )}
-                      {inputName === "public" && (
-                        <option value={item?.duration} key={idx}>
-                          {item?.name}
-                        </option>
-                      )}
-                      {inputName === "group" && (
-                        <option value={item?.family_uid} key={idx}>
-                          {item?.firstname}
-                        </option>
-                      )}
-                    </React.Fragment>
-                  ))}
+                      ))}
+                    </>
+                    :
+                    <option value="">No Group Found</option>
+                  }
+                </>
+                }
               </Field>
             </div>
           </div>
@@ -458,13 +562,14 @@ const JobFieldInput = ({
         <InputCom
           fieldClass="px-6"
           label={label}
-          labelClass="tracking-wide"
+          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
           type="email"
           name={inputName}
           placeholder={placeholder}
           value={value}
           inputHandler={inputHandler}
           inputBg="bg-white"
+          parentClass={`${parentClass}`}
         />
       )}
 

src/components/jobPopout/OfferJobPopout.jsx

@@ -102,7 +102,7 @@ function OfferJobPopout({ details, onClose, situation }) {
 
   return (
     <ModalCom action={onClose} situation={situation}>
-      <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">
+      <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">
             Start Task

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

src/services/UsersService.js

@@ -5,6 +5,16 @@ class usersService {
     console.log("WRB Service Entry");
   }
 
+  MyPageIntro(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      ...reqData
+    };
+    return this.postAuxEnd("/mypageintro", postData);
+  }
+
   CreateUser(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/createuser", reqData);

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

src/views/YourPage_.jsx

@@ -0,0 +1,5 @@
+import YourPage from "../components/YourPage";
+
+export default function YourPages() {
+    return <YourPage />;
+  }