added pagination for member list table

src/components/JobGroups/AddGroup.jsx

@@ -111,13 +111,13 @@ export default function AddGroup({action, situation , setUpdateList}) {
                 />
             </div>
           </div>
-          <div className="flex space-x-2.5">
+          <div className="w-full flex justify-between items-center gap-4">
             <button
               onClick={action}
               type="button"
-              className=" border-gradient text-18 tracking-wide px-4 py-3 rounded-full"
+              className="text-base text-light-red tracking-wide "
             >
-              <span className="text-gradient">Cancel</span>
+              <span className="border-b dark:border-[#5356fb29]  border-light-red">Cancel</span>
             </button>
             {requestStatus.loading ? (
               <LoadingSpinner size="8" color="sky-blue" />
@@ -125,7 +125,7 @@ export default function AddGroup({action, situation , setUpdateList}) {
               <button
                 onClick={() => addGroup()}
                 type="button"
-                className="py-1 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold"
+                className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
               >
                 Add Group
               </button>

src/components/JobGroups/GroupList.jsx

@@ -44,7 +44,7 @@ export default function GroupList({groupList, selectedGroup, changeSelectedGroup
                                 <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
                                 <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
                             </div>
-                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button>
+                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
                         </div>
                     ))}
                 </div>

src/components/JobGroups/GroupMemberTable.jsx

@@ -12,7 +12,6 @@ export default function GroupMemberTable({selectedList}) {
 
     const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
   
-  
     const handlePagination = (e) => {
       handlePagingFunc(e, setCurrentPage);
     };
@@ -45,24 +44,24 @@ export default function GroupMemberTable({selectedList}) {
                         <td className='p-[1px] bg-slate-400 dark:bg-white rounded-full' colSpan="4"></td>
                     </tr>
                     {selectedList && selectedList?.length > 0 ? (
-                      currentSelectedList?.length ? (
+                    //   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>
                           <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 bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-3'>X</button>
+                            <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>
+                    //     </tr>
+                    //   )
                     ) : (
                       <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                         <td className="p-2">No Members Found</td>
@@ -78,11 +77,11 @@ export default function GroupMemberTable({selectedList}) {
                 prev={currentPage == 0 ? true : false}
                 next={
                   currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  currentSelectedList?.length
+                  selectedList?.length
                     ? true
                     : false
                 }
-                data={currentSelectedList}
+                data={selectedList}
                 start={indexOfFirstItem}
                 stop={indexOfLastItem}
               />

src/components/JobGroups/MemberList.jsx

@@ -149,7 +149,7 @@ export default function MemberList({groupList, selectedGroup, setUpdateList}) {
     <div className='p-5 w-full min-h-[600px] overflow-y-auto'>
         {groupList && groupList.length < 1 ?
         <>
-            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>No Group selected</h1>
+            <h1 className='my-5 text-lg lg:text-xl tracking-wide text-slate-900 dark:text-slate-100'>You Currently Do not have any Group, Please Add Group</h1>
         </>
         :
         <>

src/components/Partials/RightSideBar.jsx

@@ -196,8 +196,10 @@ export default function RightSideBar({myJobList}) {
                 </div>
                 {/* action */}
               </div>
-              {userDetails && userDetails?.account_type !== "FAMILY" && (
-              <>
+              {/* {userDetails && userDetails?.account_type !== "FAMILY" && (
+                <>
+                </>
+              )} */}
                 <div className="px-8 item flex space-x-3 items-center mb-4">
                   {/* image */}
                   <div className="w-8 h-8 rounded-full">
@@ -311,8 +313,6 @@ export default function RightSideBar({myJobList}) {
                     </p>
                   </div>
                 </div>
-              </>
-            )}
           </div>
         </div>
         }