added confirmation modal inside team, wherevener delete employee confirm modal appear.

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)
+console.log(filteredEmployees)
   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>