manageusers serach feature

src/components/manage_users/ManageUsers.tsx

@@ -17,8 +17,9 @@ import {
   DialogContent,
   DialogActions,
   TablePagination,
+  InputAdornment,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
+import SearchIcon from '@mui/icons-material/Search';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 import { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
@@ -61,6 +62,23 @@ export default function ManageUsers(){
     const [newRow, setNewRow] = useState<any>();
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
+    const [filteredData, setFilteredData] = useState<Row[]>([]);
+    const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState<any>()
+
+
+    useEffect(() => {
+      if (searchByFilterOnBlur) {
+        // Filter data based on the username
+        const filtered = manageUsersResponse?.filter((row: any) =>
+          row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()) ||
+          (row.email_id && row.email_id.toLowerCase().includes(searchByFilterOnBlur.toLowerCase()))
+        );
+        setFilteredData(filtered || []);
+      } else {
+        // If search input is empty, show all data
+        setFilteredData(manageUsersResponse || []);
+      }
+    }, [searchByFilterOnBlur, manageUsersResponse]);
 
     useEffect(()=>{
       if (!open){
@@ -126,6 +144,51 @@ export default function ManageUsers(){
         <Paper square className='projectScreen-background' sx={{ width: '100%', overflow: 'hidden',backgroundColor:'rgb(13 13 13)' }}>
             <Paper  className='projectScreen-background' sx={{ margin:'1%', width: '100%', overflow: 'hidden' }}>
                 <TableContainer component={Paper}>
+                <TableRow sx={{bgcolor:'#171716 !important',borderBottom:'#171716',width:'100%', display:'flex',flexDirection:'row-reverse'}}>
+                        <TableCell className="no-padding-cell" sx={{borderBottom:'black'}}>
+                          <TextField
+                              id="standard-name"
+                              variant="standard"
+                              InputProps={{
+                                startAdornment: (
+                                  <InputAdornment sx={{fontSize: 40}} position="start">
+                                    <SearchIcon sx={{color:'white'}}/>
+                                  </InputAdornment>
+                                ),
+                              }}
+                              value={searchByFilterOnBlur}
+                              onChange={(e)=>{
+                                  setSearchByFilterOnBlur(e.target.value);
+                              }}
+                              sx={{input: { color: 'white' },
+                              "& label": {
+                                  color: "white"
+                                },
+                                "& label.Mui-focused": {
+                                  color: "white"
+                                },
+                                "& .MuiInput-underline:after": {
+                                  borderBottomColor: "white"
+                                },
+                                "& .MuiOutlinedInput-root": {
+                                  "& fieldset": {
+                                    borderColor: "white"
+                                  }},
+                                  "&:hover fieldset": {
+                                      borderColor: "white",
+                                      borderWidth: 2
+                                    },
+                                    "&.Mui-focused fieldset": {
+                                      borderColor: "white"
+                                    },
+                                    margin:1,
+                                    // marginTop:3
+                                                                     
+                              }}
+                              placeholder="Search..."
+                          />
+                        </TableCell>                          
+                        </TableRow>
                     <Table>
                     <TableHead className="manageusers-table-header-style">
                         <TableRow >
@@ -141,7 +204,7 @@ export default function ManageUsers(){
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {manageUsersResponse && manageUsersResponse.map((row:any) => (
+                        {filteredData && filteredData.map((row:any) => (
                         <TableRow key={row.id} >
                             <TableCell className="no-padding-cell">
                               <IconButton onClick={() => handleEdit(row)} aria-label="edit">