addNew feature

src/APIs/ManageUsersAPIs/postAddUser.tsx

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const postNewManageUsersData = async (data: any)=> {
+    const { data: response } = await axios.post(
+      `${process.env.REACT_APP_API_URL}/add-user`,
+      data
+    );
+    return await response.data;
+  };

src/components/manage_users/ManageUsers.tsx

@@ -21,6 +21,9 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
+import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
+import { useMutation } from '@tanstack/react-query';
+
 
 const StyledTextField = (props:any) => (
     <TextField
@@ -44,8 +47,8 @@ const StyledTextField = (props:any) => (
   );
 
   interface Row {
-    name: string;
+    username: string;
-    email: string;
+    email_id: string;
     last_login:string;
     active:boolean|string;
   }
@@ -59,7 +62,19 @@ export default function ManageUsers(){
     const [newRow, setNewRow] = useState<any>();
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  
+
+    useEffect(()=>{
+      if (!open){
+        setSelectedRow({username: '', email_id: '', last_login: '', active: '' });
+        setNewRow({username: '', email_id: '', last_login: '', active: '' });  
+      }
+    },[open])
+    useEffect(() => {
+      if (selectedRow){
+        postNewManageUsersData(selectedRow);
+      }
+     },[data])
+      
     const handleChangePage = (event:any, newPage:any) => {
       setPage(newPage);
     };
@@ -84,14 +99,12 @@ export default function ManageUsers(){
       // }
     
       setOpen(false);
-      setSelectedRow({name: '', email: '', last_login: '', active: '' });
-      setNewRow({name: '', email: '', last_login: '', active: '' });
     };
   
     const handleClose = () => {
       setOpen(false);
-      setSelectedRow({name: '', email: '', last_login: '', active: '' });
+      setSelectedRow({username: '', email_id: '', last_login: '', active: '' });
-      setNewRow({name: '', email: '', last_login: '', active: '' });
+      setNewRow({username: '', email_id: '', last_login: '', active: '' });
     };
   
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -167,19 +180,18 @@ export default function ManageUsers(){
                         <StyledTextField
                         label="Name"
                         type="text"
-                        name="name"
+                        name="username"
-                        value={selectedRow && selectedRow.name}
+                        value={selectedRow && selectedRow.username}
                         onChange={handleChange}
                         />
                         <StyledTextField
                         label="Email"
-                        name="email"
+                        name="email_id"
                         value={selectedRow && selectedRow.email_id}
                         onChange={handleChange}
                         />
                         <StyledTextField
                         label="Last Login"
-                        type="last_login"
                         name="last_login"
                         value={selectedRow && selectedRow.last_login}
                         onChange={handleChange}