search feature for intranet screen

src/App.css

@@ -32,3 +32,9 @@
   padding-top: 6.5px !important;
   padding-bottom: 6.5px !important;
 }
+
+.table-header-bottomBorder-style .css-1ygcj2i-MuiTableCell-root{
+  /* background-color: #171716 !important; */
+  /* color:white ; */
+  border-bottom: 1px solid rgb(45 51 59) !important;
+}

src/components/intranet_users/IntranetUsers.tsx

@@ -17,11 +17,14 @@ import {
   DialogContent,
   DialogActions,
   TablePagination,
+  Grid,
+  InputAdornment,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 import { postNewIntranetUsersData } from "../../APIs/IntranetUsersAPIs/postAddUser";
+import { AccountCircle } from "@mui/icons-material";
+import SearchIcon from '@mui/icons-material/Search';
 
 
 const StyledTextField = (props:any) => (
@@ -52,7 +55,7 @@ const StyledTextField = (props:any) => (
   }
   
 export default function IntranetUsers(){
-    const [manageUsersData,setManageUsersData] = useState<any>()
+    const [searchByFilterOnBlur,setSearchByFilterOnBlur] = useState<any>()
     const { data: manageUsersResponse, isLoading, isError } = useGetIntranetUsersData();
     const [data, setData] = useState<Row[]>([]);
     const [open, setOpen] = useState(false);
@@ -60,6 +63,20 @@ export default function IntranetUsers(){
     const [newRow, setNewRow] = useState<any>();
     const [page, setPage] = React.useState(0);
     const [rowsPerPage, setRowsPerPage] = React.useState(10);
+    const [filteredData, setFilteredData] = useState<Row[]>([]);
+
+    useEffect(() => {
+      if (searchByFilterOnBlur) {
+        // Filter data based on the username
+        const filtered = manageUsersResponse?.filter((row: any) =>
+          row.username.toLowerCase().includes(searchByFilterOnBlur.toLowerCase())
+        );
+        setFilteredData(filtered || []);
+      } else {
+        // If search input is empty, show all data
+        setFilteredData(manageUsersResponse || []);
+      }
+    }, [searchByFilterOnBlur, manageUsersResponse]);
 
     useEffect(()=>{
       if (!open){
@@ -125,6 +142,51 @@ export default function IntranetUsers(){
         <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>
@@ -133,21 +195,18 @@ export default function IntranetUsers(){
                                     New
                                 </Button>
                             </TableCell>
-                            <TableCell className="no-padding-cell">Name</TableCell>
+                            <TableCell className="no-padding-cell table-header-bottomBorder-style">Name</TableCell>
                             <TableCell className="no-padding-cell">Role</TableCell>
                             <TableCell className="no-padding-cell">Active</TableCell>
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {manageUsersResponse && manageUsersResponse.map((row:any) => (
+                        {filteredData && filteredData.map((row:any) => (
                         <TableRow key={row.id} sx={{height:'20px'}}>
                             <TableCell className="no-padding-cell">
                             <IconButton onClick={() => handleEdit(row)} aria-label="edit">
                                 <EditIcon sx={{ color: 'white' }}/>
                             </IconButton>
-                            {/* <IconButton onClick={() => handleDelete(row.id)} aria-label="delete">
-                                <DeleteIcon sx={{ color: 'white' }}/>
-                            </IconButton> */}
                             </TableCell>
                             <TableCell className="no-padding-cell">{row.username}</TableCell>
                             <TableCell className="no-padding-cell">{row.role}</TableCell>