src/components/Project/Teams.jsx

@@ -12,6 +12,7 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { ASSIGN_TO_PROJECT } from "../../utils/constants";
+import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
@@ -25,11 +26,13 @@ const Teams = ({ project }) => {
   const [removingEmployeeId, setRemovingEmployeeId] = useState(null);
   const [assignedLoading, setAssignedLoading] = useState(false);
   const [ employeeLodaing, setEmployeeLoading ] = useState( false );
-  const [activeEmployee,setActiveEmployee] = useState(true)
+  const [ activeEmployee, setActiveEmployee ] = useState( true )
+  const [deleteEmployee,setDeleteEmplyee] = useState(null)
 
   const navigate = useNavigate();
 
-  const HasAssignUserPermission = useHasUserPermission(ASSIGN_TO_PROJECT);
+  const HasAssignUserPermission = useHasUserPermission( ASSIGN_TO_PROJECT );
+  const[IsDeleteModal,setIsDeleteModal] = useState(false)
 
   const fetchEmployees = async () => {
     try {
@@ -39,7 +42,8 @@ const Teams = ({ project }) => {
       ProjectRepository.getProjectAllocation(project.id)
         .then((response) => {
           setEmployees(response.data);
-          setFilteredEmployees(response.data.filter((emp) => emp.isActive));
+          setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
+          console.log(response)
           setEmployeeLoading(false);
         })
         .catch((error) => {
@@ -52,16 +56,25 @@ const Teams = ({ project }) => {
     }
   };
 
-  const submitAllocations = (items) => {
+  const submitAllocations = (items,added) => {
     ProjectRepository.manageProjectAllocation(items)
       .then((response) => {
-        showToast("Details updated successfully.", "success");
         fetchEmployees();
+        if ( added )
+        {
+          showToast("Employee Assigned Successfully", "success");
+        }else{
+          showToast("Removed Employee Successfully", "success"); 
+        }
         setRemovingEmployeeId(null);
-        setAssignedLoading(false);
+        setAssignedLoading( false );
+        setDeleteEmplyee( null )
+        closeDeleteModal()
       })
       .catch((error) => {
-        showToast(error.message, "error");
+        const message = error.response.data.message || error.message || "Error Occured during Api Call";
+        showToast( message, "error" );
+        closeDeleteModal()
       });
   };
 
@@ -74,7 +87,8 @@ const Teams = ({ project }) => {
         projectId: project.id,
         status: false,
       },
-    ]);
+    ] ,false);
+
   };
 
   const handleEmpAlicationFormSubmit = (allocaionObj) => {
@@ -87,7 +101,8 @@ const Teams = ({ project }) => {
       };
     });
 
-    submitAllocations(items);
+    submitAllocations( items ,true);
+  
   };
 
   const getRole = (jobRoleId) => {
@@ -140,6 +155,13 @@ const Teams = ({ project }) => {
     }
   };
 
+  const deleteModalOpen = (item) =>
+  {
+    setDeleteEmplyee(item)
+    setIsDeleteModal(true)
+  }
+  const closeDeleteModal = ()=> setIsDeleteModal(false)
+
   return (
     <>
       <div
@@ -160,6 +182,31 @@ const Teams = ({ project }) => {
         ></MapUsers>
       </div>
 
+
+       {IsDeleteModal && (
+        <div
+          className={`modal fade  ${IsDeleteModal ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: IsDeleteModal ? "block" : "none",
+            backgroundColor: IsDeleteModal ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+ 
+          <ConfirmModal
+            type={"delete"}
+            header={"Removed Employee"}
+            message={"Are you sure you want delete?"}
+            onSubmit={removeAllocation}
+            onClose={closeDeleteModal}
+            loading={employeeLodaing}
+            paramData={deleteEmployee}
+          />
+        </div>
+      )}
+
       <div className="card card-action mb-6">
         <div className="card-body">
           <div className="row">
@@ -259,7 +306,7 @@ const Teams = ({ project }) => {
                               type="button"
                               title="Remove from project"
                               className="btn p-0 dropdown-toggle hide-arrow"
-                              onClick={() => removeAllocation(item)}
+                              onClick={() => deleteModalOpen(item)}
                             >
                               {" "}
                               {removingEmployeeId === item.id ? (
@@ -283,7 +330,7 @@ const Teams = ({ project }) => {
                 </tbody>
               </table>
             )}
-            {!employeeLodaing && employees.length == 0 && (
+            {(!employeeLodaing && employees.length == 0 )&& (
               <span>No employees assigned to the project</span>
             )}
           </div>

src/components/common/ConfirmModal.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
+const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header, paramData}) => {
   
   const TypeofIcon = (type) => {
     switch (type) {
@@ -48,7 +48,7 @@ const ConfirmModal = ({ type, onSubmit, onClose, message, loading ,header}) => {
                     <div className='d-flex justify-content-end mt-4'>
                   <button
                     className='btn btn-primary btn-sm'
-                    onClick={onSubmit}
+                    onClick={()=>onSubmit(paramData)}
                     disabled={loading} 
                   >
                     {loading ? "Please Wait..." : "Yes"}

src/pages/employee/EmployeeList.jsx

@@ -21,6 +21,7 @@ import {
 } from "../../utils/tableExportUtils";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
+import ConfirmModal from "../../components/common/ConfirmModal";
 
 const EmployeeList = () => {
   const { profile: loginUser } = useProfile();
@@ -42,7 +43,10 @@ const EmployeeList = () => {
   const [searchText, setSearchText] = useState("");
   const [filteredData, setFilteredData] = useState([]);
   const [showModal, setShowModal] = useState(false);
-  const [selectedEmployeeId, setSelecedEmployeeId] = useState();
+  const [ selectedEmployeeId, setSelecedEmployeeId ] = useState();
+  const [ IsDeleteModalOpen, setIsDeleteModalOpen ] = useState( false )
+  const [ selectedEmpFordelete, setSelectedEmpFordelete ] = useState( null )
+  const[employeeLodaing,setemployeeLodaing] = useState(false)
 
   const navigate = useNavigate();
 
@@ -108,7 +112,7 @@ const EmployeeList = () => {
   const handleClose = () => setShowModal(false);
 
   const suspendEmployee = (id) => {
-    // console.log(id);
+    setemployeeLodaing(true)
     EmployeeRepository.deleteEmployee(id)
       .then((response) => {
         showToast("Employee deleted successfully.", "success");
@@ -117,14 +121,18 @@ const EmployeeList = () => {
         clearCacheKey("allInactiveEmployeeList");
         clearCacheKey("employeeProfile");
         setEmployeeList([]);
-        recallEmployeeData(showInactive);
+        recallEmployeeData( showInactive );
+        setemployeeLodaing( false )
+        setIsDeleteModalOpen(false)
       })
       .catch((error) => {
         const message =
           error.response?.data?.message ||
           error.message ||
           "An unexpected error occurred";
-        showToast(message, "error");
+         showToast( message, "error" );
+        setemployeeLodaing( false )
+        setIsDeleteModalOpen(false)
       });
   };
 
@@ -170,6 +178,14 @@ const EmployeeList = () => {
     setShowModal(true);
   };
 
+  const handleOpenDelete = (employee) =>
+  {
+    console.log(employee)
+    setSelectedEmpFordelete( employee )
+    setIsDeleteModalOpen( true );
+  }
+ 
+
   return (
     <>
       {isCreateModalOpen && (
@@ -195,6 +211,31 @@ const EmployeeList = () => {
         </div>
       </div>
 
+   
+       {IsDeleteModalOpen && (
+        <div
+          className={`modal fade  ${IsDeleteModalOpen ? "show" : ""}`}
+          tabIndex="-1"
+          role="dialog"
+          style={{
+            display: IsDeleteModalOpen ? "block" : "none",
+            backgroundColor: IsDeleteModalOpen ? "rgba(0,0,0,0.5)" : "transparent",
+          }}
+          aria-hidden="false"
+        >
+ 
+          <ConfirmModal
+            type={"delete"}
+            header={"Suspend Employee"}
+            message={"Are you sure you want delete?"}
+            onSubmit={suspendEmployee}
+            onClose={()=>setIsDeleteModalOpen(false)}
+            loading={employeeLodaing}
+            paramData={selectedEmpFordelete}
+          />
+        </div>
+      )}
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -578,7 +619,7 @@ const EmployeeList = () => {
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() => suspendEmployee(item.id)}
+                                        onClick={()=>handleOpenDelete(item.id)}
                                       >
                                         <i className="bx bx-task-x bx-sm"></i>{" "}
                                         Suspend