fixed relative list

src/components/FamilyAcc/FamilySettings/Tabs/InviteRelative.jsx

@@ -49,8 +49,6 @@ export default function InviteRelative({action, situation, setReloadRelList}) {
       }); // STATE FOR KNOWING WHEN A REQUEST IS MADE TO THE SERVER
 
     const handleInvite = (values) => {
-        // delete values.firstname
-        // delete values.lasttname
         setRequestStatus({loading: true, status: false, message: ""})
         api.inviteFamilyRelative(values).then(response => {
             let {status, data} = response

src/components/FamilyAcc/FamilySettings/Tabs/RelativeTable.jsx

@@ -24,21 +24,22 @@ export default function RelativeTable({relativeList}) {
                     {relativeList && relativeList?.length > 0 ? (
                         currentRelativeList.map((value, index) => (
                         <tr key={value.uid || index} className="border-b dark:border-[#5356fb29] hover:bg-gray-50">
-                          <td className='py-2'>
+                          <td className='p-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} */} Firstname Lastname
+                                {value.firstname && value.firstname} {value.lastname && value.lastname}
                               </h1>
                               <span className="text-sm text-thin-light-gray">
-                                {/* {value.email && value.email} */} email.gmail.com
+                                {value.email && value.email}
                               </span>
                             </div>
                           </td>
-                          <td className='py-2'>
-                            family type
+                          <td className='p-2'>
+                            {/* <span>Family Type</span> */}
+                            <span>{value.family_type && value.family_type.toUpperCase()}</span>
                           </td>
-                          <td className='py-2 text-right'>
-                            {0}
+                          <td className='p-2 text-right'>
+                            {value.status && value.status}
                           </td>
                         </tr>
                         ))

src/components/FamilyAcc/FamilySettings/Tabs/Relatives.jsx

@@ -21,8 +21,12 @@ const Relatives = () => {
   const getRelativeList = () => {
     setRelativeList(prev => ({...prev, loading: true}))
     api.getFamilyRelativeList().then(response => {
-      setRelativeList({loading:false, data:response.data.family_types})
-      // console.log('RESPONSE',response.data)
+      let {data:{result_list}} = response
+      if(!result_list || result_list?.length <= 0){
+        setRelativeList({loading:false, data:[]})
+        return
+      }
+      setRelativeList({loading:false, data:result_list})
     }).catch(error => {
       setRelativeList({loading:false, data:[]})
     })

src/components/JobGroups/DeleteGroup.jsx

@@ -73,7 +73,7 @@ export default function DeleteGroup({action, situation, details}) {
           </div>
           <div className="mb-6">
             <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
-              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span>
+              Are you sure, you want to delete <br /> <span>'{details?.group_name}'</span> group?
             </p>
           </div>
           <div className="flex space-x-2.5">

src/components/JobGroups/DeleteMember.jsx

@@ -23,7 +23,7 @@ export default function DeleteMember({action, situation, details}) {
       <div className="logout-modal-wrapper lg:w-[500px] h-full lg:h-auto 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 Member
+            Remove Member
           </h1>
           <button
             type="button"
@@ -73,7 +73,7 @@ export default function DeleteMember({action, situation, details}) {
           </div>
           <div className="mb-6">
             <p className="text-xl text-center tracking-wide text-dark-gray dark:text-white">
-              Are you sure, you want to delete <br /> <span>'{details?.firstname} {details.lastname}'</span>
+              Are you sure, you want to remove <br /> <span>'{details?.firstname} {details.lastname}'</span>
             </p>
           </div>
           <div className="flex space-x-2.5">
@@ -92,7 +92,7 @@ export default function DeleteMember({action, situation, details}) {
                 type="button"
                 className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
               >
-                Confirm Delete
+                Remove
               </button>
             )}
           </div>

src/components/JobGroups/GroupList.jsx

@@ -1,72 +1,104 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
 
-import InputCom from '../../components/Helpers/Inputs/InputCom/index'
-import DeleteGroup from './DeleteGroup'
-import AddGroup from './AddGroup'
+import AddGroup from "./AddGroup";
+import DeleteGroup from "./DeleteGroup";
+import { localImgLoad } from "../../lib";
 
-export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {
+export default function GroupList({
+  groupList,
+  selectedGroup,
+  changeSelectedGroup,
+  setUpdateList,
+}) {
+  const [deletePopout, setDeletePopout] = useState({
+    status: false,
+    data: {},
+  });
 
-    const [deletePopout, setDeletePopout] = useState({
-        status: false,
-        data: {}
-    })
+  const [addGroupPopout, setAddGroupPopout] = useState(false);
 
-    const [addGroupPopout, setAddGroupPopout] = useState(false)
-
-    const handleAddGroup = () => {
-        setAddGroupPopout(true)
-    }
-
-    const handleDeleteGroup = (item) => {
-        setDeletePopout({
-            status: true,
-            data: {...item}
-        })
-    }
+  const handleAddGroup = () => {
+    setAddGroupPopout(true);
+  };
 
+  const handleDeleteGroup = (item) => {
+    setDeletePopout({
+      status: true,
+      data: { ...item },
+    });
+  };
 
   return (
     <>
-        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
-            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
-            <div className='flex justify-end items-center'>
-                <button onClick={handleAddGroup} 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 Group</button>
-            </div>
-
-            {groupList && groupList.length < 1 ?
-            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
-            :
-            <div className='my-4 max-h-[400px] overflow-y-auto'>
-                <div className='flex flex-col'>
-                    {groupList.map(item=> (
-                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
-                            <div className='flex gap-2 items-center'>
-                                <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 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>
-            </div>
-            }
+      <div className="p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl">
+        {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
+        <div className="flex justify-end items-center">
+          <button
+            onClick={handleAddGroup}
+            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 Group
+          </button>
         </div>
-        
-        {deletePopout.status &&
-            <DeleteGroup 
-                action={()=>setDeletePopout({status:false, data:{}})}
-                situation={deletePopout.status}
-                details={deletePopout.data}
-            />
-        }
 
-        {addGroupPopout &&
-            <AddGroup 
-                action={()=>setAddGroupPopout(false)}
-                situation={addGroupPopout}
-                setUpdateList={setUpdateList}
-            />
-        }
+        {groupList && groupList.length < 1 ? (
+          <h1 className="my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100">
+            No Group Found!
+          </h1>
+        ) : (
+          <div className="my-4 max-h-[400px] overflow-y-auto">
+            <div className="flex flex-col">
+              {groupList.map((item) => (
+                <div
+                  key={item.group_uid}
+                  className="p-2 flex gap-2 items-center justify-between w-full"
+                >
+                  <div className="flex gap-2 items-center">
+                    <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="flex relative items-center justify-center border-0 w-6 h-6"
+                  >
+                    <img
+                      src={localImgLoad("images/icons/remove_grp.svg")}
+                      alt="remove-icon"
+                    />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {deletePopout.status && (
+        <DeleteGroup
+          action={() => setDeletePopout({ status: false, data: {} })}
+          situation={deletePopout.status}
+          details={deletePopout.data}
+        />
+      )}
+
+      {addGroupPopout && (
+        <AddGroup
+          action={() => setAddGroupPopout(false)}
+          situation={addGroupPopout}
+          setUpdateList={setUpdateList}
+        />
+      )}
     </>
-  )
+  );
 }

src/components/JobGroups/GroupMemberTable.jsx

@@ -1,98 +1,118 @@
-import React, { useState } from 'react'
-import { handlePagingFunc } from '../Pagination/HandlePagination';
-import PaginatedList  from '../Pagination/PaginatedList';
-import DeleteMember from './DeleteMember';
+import React, { useState } from "react";
+import { handlePagingFunc } from "../Pagination/HandlePagination";
+import PaginatedList from "../Pagination/PaginatedList";
+import DeleteMember from "./DeleteMember";
+import { localImgLoad } from "../../lib";
 
-export default function GroupMemberTable({selectedList}) {
-  
-    // Handle Pagination
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+export default function GroupMemberTable({ selectedList }) {
+  // Handle Pagination
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
 
-    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-      handlePagingFunc(e, setCurrentPage);
-    };
+  const currentSelectedList = selectedList?.slice(
+    indexOfFirstItem,
+    indexOfLastItem
+  );
 
-    const [deletePopout, setDeletePopout] = useState({
-        status: false,
-        data: {}
-    })
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
 
-    const handleDeleteMember = (item) => {
-        setDeletePopout({
-            status: true,
-            data: {...item}
-        })
-    }
-   
-    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-[400px]">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  <>
-                    {selectedList && selectedList?.length > 0 ? (
-                        currentSelectedList.map((value, index) => (
-                        <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>
+  const [deletePopout, setDeletePopout] = useState({
+    status: false,
+    data: {},
+  });
+
+  const handleDeleteMember = (item) => {
+    setDeletePopout({
+      status: true,
+      data: { ...item },
+    });
+  };
+
+  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-[400px]">
+        <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+          <tbody>
+            <>
+              {selectedList && selectedList?.length > 0 ? (
+                currentSelectedList.map((value, index) => (
+                  <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>
-                    )}
-                  </>
-                </tbody>
-              </table>
-    
-              {/* PAGINATION BUTTON */}
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage == 0 ? true : false}
-                next={
-                  currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-                  selectedList?.length
-                    ? true
-                    : false
-                }
-                data={selectedList}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-              {/* END OF PAGINATION BUTTON */}
-            </div>
-    
-          {/* DELETE MEMBER POPOUT */}
-          {deletePopout.status &&
-                <DeleteMember 
-                    action={()=>setDeletePopout({status:false, data:{}})}
-                    situation={deletePopout.status}
-                    details={deletePopout.data}
-                />
-            }
-          {/* END OF DELETE MEMBER POPOUT */}
-        </div>
-      );
-    };
+                    <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="flex relative items-center justify-center border-0 w-8 h-8"
+                      >
+                        <img
+                          src={localImgLoad("images/icons/remove_grp.svg")}
+                          alt="remove-icon"
+                        />
+                      </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>
+              )}
+            </>
+          </tbody>
+        </table>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+          onClick={handlePagination}
+          prev={currentPage == 0 ? true : false}
+          next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            selectedList?.length
+              ? true
+              : false
+          }
+          data={selectedList}
+          start={indexOfFirstItem}
+          stop={indexOfLastItem}
+        />
+        {/* END OF PAGINATION BUTTON */}
+      </div>
+
+      {/* DELETE MEMBER POPOUT */}
+      {deletePopout.status && (
+        <DeleteMember
+          action={() => setDeletePopout({ status: false, data: {} })}
+          situation={deletePopout.status}
+          details={deletePopout.data}
+        />
+      )}
+      {/* END OF DELETE MEMBER POPOUT */}
+    </div>
+  );
+}

src/components/JobGroups/JobGroups.jsx

@@ -1,79 +1,119 @@
-import React, { useEffect, useState } from 'react'
-import Layout from '../Partials/Layout'
+import React, { useEffect, useState } from "react";
+import Layout from "../Partials/Layout";
 
-import GroupList from './GroupList'
-import MemberList from './MemberList'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
+import GroupList from "./GroupList";
+import MemberList from "./MemberList";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 
-import usersService from '../../services/UsersService'
+import usersService from "../../services/UsersService";
 
 export default function JobGroups() {
+  const userApi = new usersService();
 
-    const userApi = new usersService();
+  const [updateList, setUpdateList] = useState(false);
 
-    const [updateList, setUpdateList] = useState(false)
+  const [groupList, setGroupList] = useState({
+    loading: true,
+    groups: [],
+    members: [],
+  });
 
-    
-    const [groupList, setGroupList] = useState({
-        loading:true,
-        groups: [],
-        members: []
-    })
+  const [selectedGroup, setSelectedGroup] = useState({
+    id: "",
+    name: "",
+    data: [],
+  });
 
-    const [selectedGroup, setSelectedGroup] = useState({id:'', name:'', data: []})
+  const changeSelectedGroup = (e) => {
+    let groupID = e.target.value;
+    const activeMembers = groupList?.members?.filter(
+      (item) => item.group_id == groupID
+    );
+    const activeGroup = groupList?.groups?.filter(
+      (item) => item.group_id == groupID
+    );
+    setSelectedGroup({
+      id: groupID,
+      name: activeGroup[0]?.group_name,
+      data: activeMembers,
+    });
+  };
 
-    const changeSelectedGroup = (e) => {
-        let groupID = e.target.value
-        const activeMembers = groupList?.members?.filter(item => item.group_id == groupID)
-        const activeGroup = groupList?.groups?.filter(item => item.group_id == groupID)
-        setSelectedGroup({id: groupID, name:activeGroup[0]?.group_name, data:activeMembers})
-    }
-
-    useEffect(()=>{
-        setGroupList({loading: true, groups: [], members: []})
-        userApi.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})
-            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)
-        })
-    },[updateList])
+  useEffect(() => {
+    setGroupList({ loading: true, groups: [], members: [] });
+    userApi
+      .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,
+        });
+        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);
+      });
+  }, [updateList]);
 
   return (
     <Layout>
-        <div>
-            <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1>
-        </div>
-        <div className='p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white'>
-            {groupList.loading ?
-                <div className='w-full h-[400px] flex justify-center items-center'>
-                    <LoadingSpinner size='16' />
-                </div>
-            :
-            <>
-                <GroupList groupList={groupList?.groups} selectedGroup={selectedGroup} changeSelectedGroup={changeSelectedGroup} setUpdateList={setUpdateList} />
-                <MemberList groupList={groupList?.groups} selectedGroup={selectedGroup} setUpdateList={setUpdateList} />
-            </>
-            }
-        </div>
+      <div>
+        <h1 className="mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100">
+          Jobs Groups
+        </h1>
+      </div>
+      <div className="p-5 w-full min-h-[400px] flex flex-col lg:flex-row gap-3 lg:gap-6 rounded-lg shadow-md bg-white dark:bg-dark-white">
+        {groupList.loading ? (
+          <div className="w-full h-[400px] flex justify-center items-center">
+            <LoadingSpinner size="16" />
+          </div>
+        ) : (
+          <>
+            <GroupList
+              groupList={groupList?.groups}
+              selectedGroup={selectedGroup}
+              changeSelectedGroup={changeSelectedGroup}
+              setUpdateList={setUpdateList}
+            />
+            <MemberList
+              groupList={groupList?.groups}
+              selectedGroup={selectedGroup}
+              setUpdateList={setUpdateList}
+            />
+          </>
+        )}
+      </div>
     </Layout>
-  )
+  );
 }

src/components/JobGroups/MemberList.jsx

@@ -6,8 +6,8 @@ import GroupMemberTable from "./GroupMemberTable";
 
 import EmailValidator from "../../lib/EmailValidator";
 
-import usersService from "../../services/UsersService";
 import { apiConst } from "../../lib/apiConst";
+import usersService from "../../services/UsersService";
 
 export default function MemberList({
   groupList,

src/components/MyActiveJobs/MyActiveJobTable.jsx

@@ -1,12 +1,10 @@
 import React, { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import localImgLoad from "../../lib/localImgLoad";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 export default function MyActiveJobTable({ MyJobList, className }) {
-
   const navigate = useNavigate();
   let { pathname } = useLocation();
 
@@ -45,7 +43,11 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${
+                        MyJobList.session_image_server
+                      }${localStorage.getItem("session_token")}/job/${
+                        value.job_uid
+                      }`;
                       return (
                         <tr
                           key={index}
@@ -112,7 +114,7 @@ export default function MyActiveJobTable({ MyJobList, className }) {
                                 className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                               >
                                 {value.owner_status == "OWNER"
-                                  ? "Manage"
+                                  ? "Review"
                                   : "Send Updates"}
                               </button>
                             </div>

src/components/MyPendingJobs/MyPendingJobTable.jsx

@@ -6,9 +6,7 @@ import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import localImgLoad from "../../lib/localImgLoad";
 
-
 export default function MyPendingJobTable({ MyJobList, className }) {
-
   let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
   const [currentPage, setCurrentPage] = useState(0);
@@ -19,7 +17,7 @@ export default function MyPendingJobTable({ MyJobList, className }) {
     indexOfFirstItem,
     indexOfLastItem
   );
-  
+
   const handlePagination = (e) => {
     handlePagingFunc(e, setCurrentPage);
   };
@@ -46,7 +44,11 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                         value?.currency_code,
                         value?.currency
                       );
-                      let image = `${MyJobList.session_image_server}${localStorage.getItem('session_token')}/job/${value.job_uid}`
+                      let image = `${
+                        MyJobList.session_image_server
+                      }${localStorage.getItem("session_token")}/job/${
+                        value.job_uid
+                      }`;
                       return (
                         <tr
                           key={index}
@@ -107,7 +109,9 @@ export default function MyPendingJobTable({ MyJobList, className }) {
                               }}
                               className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                             >
-                              {value.owner_status == 'OWNER' ? 'Manage' : 'Send Updates'}
+                              {value.owner_status == "OWNER"
+                                ? "Manage"
+                                : "View"}
                             </button>
                           </td>
                         </tr>

src/components/jobPopout/JobListPopout.jsx

@@ -1,13 +1,13 @@
 import { Field, Form, Formik } from "formik";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useDispatch } from "react-redux";
 import * as Yup from "yup";
 import usersService from "../../services/UsersService";
+import { tableReload } from "../../store/TableReloads";
 import InputCom from "../Helpers/Inputs/InputCom/index";
 import ModalCom from "../Helpers/ModalCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import Detail from "./popoutcomponent/Detail";
-import { tableReload } from "../../store/TableReloads";
-import { useDispatch } from "react-redux";
 
 const validationSchema = Yup.object().shape({
   family: Yup.string().required("This is required "),
@@ -23,13 +23,15 @@ const validationSchema = Yup.object().shape({
 });
 
 function JobListPopout({ details, onClose, situation }) {
+  const [selectedTab, setSelectedTab] = useState("public");
+  const tabs = ["public", "individual", "group"];
 
-  const [selectedTab, setSelectedTab] = useState('public')
-  const tabs = ['public', 'individual', 'group']
+  const dispatch = useDispatch();
 
-const dispatch = useDispatch()
-
-const [requestStatus, setRequestStatus] = useState({message:'', status:false})
+  const [requestStatus, setRequestStatus] = useState({
+    message: "",
+    status: false,
+  });
 
   const [familyList, setFamilyList] = useState([]);
   let [loader, setLoader] = useState({
@@ -147,7 +149,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
       // for group input
       reqData = {
         ...jobReq,
-        email: '',
+        email: "",
         group_id: values?.group,
         assign_mode: 110044,
         duration: details?.timeline_days,
@@ -161,50 +163,61 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
     try {
       const res = await apiCall.assignJobTask(reqData);
       let { status, data } = await res;
-      if(status != 200 || data.internal_return < 0){
-        setRequestStatus({message:'Unable to complete', status:false})
-        return setTimeout(()=>{
+      if (status != 200 || data.internal_return < 0) {
+        setRequestStatus({ message: "Unable to complete", status: false });
+        return setTimeout(() => {
           setLoader({ jobFields: false });
-          setRequestStatus({message:'', status:false})
-        },3000)
+          setRequestStatus({ message: "", status: false });
+        }, 3000);
       }
       dispatch(tableReload({ type: "JOBTABLE" }));
-      setRequestStatus({message:'Successful', status:true})
-      setTimeout(()=>{
+      setRequestStatus({ message: "Successful", status: true });
+      setTimeout(() => {
         setLoader({ jobFields: false });
         onClose();
         throw new Response(data);
-      },3000)
+      }, 3000);
     } catch (error) {
-      setRequestStatus({message:'Unable to complete', status:false})
-      setTimeout(()=>{
-        setRequestStatus({message:'', status:false})
+      setRequestStatus({ message: "Unable to complete", status: false });
+      setTimeout(() => {
+        setRequestStatus({ message: "", status: false });
         setLoader({ jobFields: false });
         throw new Error(error);
-      },3000)
+      }, 3000);
     }
   };
 
-  const [groupList, setGroupList] = useState({loading: true, groups: [], members: []})
+  const [groupList, setGroupList] = useState({
+    loading: true,
+    groups: [],
+    members: [],
+  });
 
   // FUNCTION TO POPULATE USER GROUP LIST
-  useEffect(()=>{
+  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
+    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
+        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: []})
-    })
-},[])
+        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 (
@@ -241,7 +254,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </button>
         </div>
         <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">
+          <div className="px-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 */}
@@ -264,7 +277,7 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
               <Detail
                 label="Created"
                 value={new Date(details?.created).toDateString()}
-                />
+              />
             </div>
 
             <div className="">
@@ -283,166 +296,185 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
           </div>
 
           {/* ACTION SECTION */}
-          <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="px-4 pb-3 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 
+                {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} 
+                    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)}
+                    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>
+                    <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>
-                }
+                {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>
+                )}
+
+                {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>
+                )}
 
-                {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}
+                {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>
+                )}
+                <p
+                  className={`text-center w-full text-lg ${
+                    requestStatus.status ? "text-emerald-600" : "text-red-600"
+                  }`}
                 >
-                  {(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>
-                }
+                  {requestStatus.message && requestStatus.message}
+                </p>
               </div>
             </div>
-
+            {/* 
             {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>
@@ -480,7 +512,7 @@ const JobFieldInput = ({
             >
               {label && (
                 <label
-                  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"
+                  className="input-label border-2 w-full border-sky-700 rounded py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
                   htmlFor={inputName}
                 >
                   {label}
@@ -497,51 +529,50 @@ const JobFieldInput = ({
                 value={value}
               >
                 {/* <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" && (
+                {(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>
+                        </React.Fragment>
                       ))}
                     </>
-                    :
-                    <option value="">No Group Found</option>
-                  }
-                </>
-                }
+                  )}
+                {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>
+                        ))}
+                      </>
+                    ) : (
+                      <option value="">No Group Found</option>
+                    )}
+                  </>
+                )}
               </Field>
             </div>
           </div>