Intranet users screen and style

src/APIs/IntranetUsersAPIs/getUsersList.tsx

@@ -0,0 +1,19 @@
+import {useQuery} from '@tanstack/react-query'
+
+export const getIntranetUsersList = async()=>{
+    const response = await fetch(`${process.env.REACT_APP_API_URL}/intranet-users-list`);
+    if (!response.ok) {
+        throw new Error('Failed to get User list data');
+    }
+    const UserListData = await response.json()
+    return UserListData;
+}
+
+export const useGetIntranetUsersData = () => {
+    return useQuery(
+        {
+            queryKey: ['IntranetUsers-list'],
+            queryFn: () => getIntranetUsersList(),
+        }
+    );
+}

src/App.tsx

@@ -8,6 +8,7 @@ import Dashboard from './components/Dashboard';
 import Projects from './components/projects/Projects';
 import { ReactQueryDevtools} from 'react-query/devtools'
 import ManageUsers from './components/manage_users/ManageUsers';
+import IntranetUsers from './components/intranet_users/IntranetUsers';
 
 function App() {
   const queryClient = new QueryClient();
@@ -20,6 +21,7 @@ function App() {
             <Route path="/" element={<Dashboard />} />
             <Route path="/projects" element={<Projects />} />
             <Route path="/manage-users" element={<ManageUsers />} />
+            <Route path="/intranet-users" element={<IntranetUsers />} />
           </Routes>
         </div>
       </BrowserRouter>

src/components/Header.tsx

@@ -106,6 +106,10 @@ function Header() {
                   <Typography textAlign="center" component={Link}
                     to='/manage-users'>MANAGE USERS</Typography>
                 </MenuItem>
+                <MenuItem key='home' onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center" component={Link}
+                    to='/intranet-users'>INTRANET USERS</Typography>
+                </MenuItem>
             </Menu>
           </Box>
 
@@ -165,6 +169,15 @@ function Header() {
               >
                 MANAGE USERS
               </Button>
+              <Button
+                key='home'
+                onClick={handleCloseNavMenu}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+                component={Link}
+                    to='/intranet-users'
+              >
+                INTRANET USERS
+              </Button>
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>

src/components/intranet_users/IntranetUsers.tsx

@@ -0,0 +1,208 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { useGetIntranetUsersData } from "../../APIs/IntranetUsersAPIs/getUsersList";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  tableRowClasses,
+  Paper,
+  Button,
+  IconButton,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TablePagination,
+} 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 { postNewManageUsersData } from "../../APIs/ManageUsersAPIs/postAddUser";
+
+
+const StyledTextField = (props:any) => (
+    <TextField
+      variant="standard"
+      margin="dense"
+      fullWidth
+      {...props}
+      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' },
+        },
+        ...props.sx,
+      }}
+    />
+  );
+
+  interface Row {
+    username: string;
+    role: string;
+    active:any;
+  }
+  
+export default function IntranetUsers(){
+    const [manageUsersData,setManageUsersData] = useState<any>()
+    const { data: manageUsersResponse, isLoading, isError } = useGetIntranetUsersData();
+    const [data, setData] = useState<Row[]>([]);
+    const [open, setOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState<any>();
+    const [newRow, setNewRow] = useState<any>();
+    const [page, setPage] = React.useState(0);
+    const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+    useEffect(()=>{
+      if (!open){
+        setSelectedRow({username: '', role: '', active: '' });
+        setNewRow({username: '', role: '', active: '' });  
+      }
+    },[open])
+    useEffect(() => {
+      if (selectedRow){
+        postNewManageUsersData(selectedRow);
+      }
+     },[data])
+      
+    const handleChangePage = (event:any, newPage:any) => {
+      setPage(newPage);
+    };
+  
+    const handleChangeRowsPerPage = (event:any) => {
+      setRowsPerPage(+event.target.value);
+      setPage(0);
+    };
+  
+    const handleEdit = (row: Row) => {
+      setSelectedRow({...row});
+      setOpen(true);
+    };
+
+    const handleSave = () => {
+      // if (selectedRow.id) {
+      //   const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
+      //   setData(updatedData);
+      // } else {
+        const id = data.length + 1;
+        setData([...data, { ...selectedRow, id }]);
+      // }
+    
+      setOpen(false);
+    };
+  
+    const handleClose = () => {
+      setOpen(false);
+      setSelectedRow({username: '', role: '', active: '' });
+      setNewRow({username: '', role: '', active: '' });
+    };
+  
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      if (selectedRow) {
+        // Editing existing row
+        setSelectedRow({ ...selectedRow, [name]: value });
+      } else {
+        // Adding a new row
+        setNewRow({ ...newRow, [name]: value });
+      }
+    };
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+    console.log(selectedRow,"sdfhhgfdg")
+  
+    return(
+        <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}>
+                    <Table>
+                    <TableHead className="manageusers-table-header-style">
+                        <TableRow>
+                            <TableCell>
+                                <Button variant="contained" sx={{bgcolor:'white',color:'#1e1e1e', fontWeight:600}} startIcon={<AddIcon />} onClick={handleOpen}>
+                                    New
+                                </Button>
+                            </TableCell>
+                            <TableCell>Name</TableCell>
+                            <TableCell>Role</TableCell>
+                            <TableCell>Active</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {manageUsersResponse && manageUsersResponse.map((row:any) => (
+                        <TableRow key={row.id} sx={{height:'20px'}}>
+                            <TableCell>
+                            <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>{row.username}</TableCell>
+                            <TableCell>{row.role}</TableCell>
+                            {row.active==1?
+                            <TableCell sx={{color:'green', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Active</TableCell>
+                            :
+                            <TableCell sx={{color:'red', backgroundColor:'#171716', borderBottom:'1px solid rgb(45 51 59)'}}>Inactive</TableCell>}
+                        </TableRow>
+                        ))}
+                    </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                  sx={{bgcolor:'#171716',color:'white'}}
+                  rowsPerPageOptions={[10, 25, 100]}
+                  component="div"
+                  count={manageUsersResponse && manageUsersResponse.length}
+                  rowsPerPage={rowsPerPage}
+                  page={page}
+                  onPageChange={handleChangePage}
+                  onRowsPerPageChange={handleChangeRowsPerPage}
+                />
+                <Dialog  open={open} onClose={handleClose}>
+                    <DialogTitle sx={{bgcolor:'rgb(24 24 23)', color:'white'}}>{selectedRow && selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
+                    <DialogContent sx={{ bgcolor: 'rgb(24 24 23)' }}>
+                        <StyledTextField
+                        label="Name"
+                        type="text"
+                        name="username"
+                        value={selectedRow && selectedRow.username}
+                        onChange={handleChange}
+                        />
+                        <StyledTextField
+                        label="Role"
+                        name="role"
+                        value={selectedRow && selectedRow.role}
+                        onChange={handleChange}
+                        />
+                        <StyledTextField
+                        label="Active"
+                        name="active"
+                        value={selectedRow && selectedRow.active}
+                        onChange={handleChange}
+                        />
+                    </DialogContent>
+                    <DialogActions sx={{bgcolor:'rgb(24 24 23)'}}>
+                    <Button onClick={handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave} color="primary">
+                        Save
+                    </Button>
+                    </DialogActions>
+                </Dialog>
+            </Paper>
+        </Paper>
+    )
+}

src/components/manage_users/ManageUsers.tsx

@@ -22,7 +22,6 @@ 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) => (