manage Users table an api

src/APIs/ManageUsersAPIs/getUsersList.tsx

@@ -0,0 +1,19 @@
+import {useQuery} from '@tanstack/react-query'
+
+export const getUsersList = async()=>{
+    const response = await fetch(`http://localhost:8080/SonyMusicRights/users-list`);
+    if (!response.ok) {
+        throw new Error('Failed to get User list data');
+    }
+    const UserListData = await response.json()
+    return UserListData;
+}
+
+export const useGetUsersData = () => {
+    return useQuery(
+        {
+            queryKey: ['Users-list'],
+            queryFn: () => getUsersList(),
+        }
+    );
+}

src/App.tsx

@@ -7,6 +7,8 @@ import { BrowserRouter as Router, Routes, Route, BrowserRouter} from 'react-rout
 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 EditableTable from './components/manage_users/demo';
 
 function App() {
   const queryClient = new QueryClient();
@@ -18,6 +20,8 @@ function App() {
           <Routes>
             <Route path="/" element={<Dashboard />} />
             <Route path="/projects" element={<Projects />} />
+            <Route path="/manage-users" element={<ManageUsers />} />
+            {/* <Route path="/demo" element={<EditableTable />} /> */}
           </Routes>
         </div>
       </BrowserRouter>

src/components/Header.tsx

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

src/components/manage_users/ManageUsers.tsx

@@ -0,0 +1,163 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { getUsersList, useGetUsersData } from "../../APIs/ManageUsersAPIs/getUsersList";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Button,
+  IconButton,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from '@mui/icons-material/Add';
+
+interface Row {
+    id: number;
+    name: string;
+    age: number;
+  }
+  
+  const initialData: Row[] = [
+    { id: 1, name: 'Row 1', age: 25 },
+    { id: 2, name: 'Row 2', age: 30 },
+  ];
+
+export default function ManageUsers(){
+    const [manageUsersData,setManageUsersData] = useState<any>()
+    const { data: manageUsersResponse, isLoading, isError } = useGetUsersData();
+    const [data, setData] = useState<Row[]>(initialData);
+    const [open, setOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState<Row>({ id: 0, name: '', age: 0 });
+    const [newRow, setNewRow] = useState<Row>({ id: 0, name: '', age: 0 });
+  
+    const handleEdit = (row: Row) => {
+      setSelectedRow(row);
+      setOpen(true);
+    };
+  
+    const handleDelete = (id: number) => {
+      const updatedData = data.filter((row) => row.id !== id);
+      setData(updatedData);
+    };
+  
+    const handleSave = () => {
+      if (selectedRow.id) {
+        const updatedData = data.map((row) => (row.id === selectedRow.id ? selectedRow : row));
+        setData(updatedData);
+      } else {
+        const id = data.length + 1;
+        setNewRow({ ...newRow, id });
+        setData([...data, { ...newRow, id }]);
+      }
+  
+      setOpen(false);
+      setSelectedRow({ id: 0, name: '', age: 0 });
+    };
+  
+    const handleOpen = () => {
+      setOpen(true);
+    };
+  
+    const handleClose = () => {
+      setOpen(false);
+      setSelectedRow({ id: 0, name: '', age: 0 });
+    };
+  
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const { name, value } = e.target;
+      setSelectedRow({ ...selectedRow, [name]: value });
+      setNewRow({ ...newRow, [name]: value });
+    };
+  
+
+  
+    console.log(manageUsersResponse,"dsjhgfsdugf")
+    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' }}>
+                <div>
+                
+
+                <TableContainer component={Paper}>
+                    <Table>
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>
+                                <Button variant="contained" startIcon={<AddIcon />} onClick={handleOpen}>
+                                    Add New Row
+                                </Button>
+                            </TableCell>
+                            <TableCell>Name</TableCell>
+                            <TableCell>Email Id</TableCell>
+                            <TableCell>Last Login</TableCell>
+                            <TableCell>Active</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {manageUsersResponse && manageUsersResponse.map((row:any) => (
+                        <TableRow key={row.id}>
+                            <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.email_id}</TableCell>
+                            <TableCell>{row.last_login}</TableCell>
+                            <TableCell>{row.active}</TableCell>
+                            
+                        </TableRow>
+                        ))}
+                    </TableBody>
+                    </Table>
+                </TableContainer>
+
+                <Dialog className='projectScreen-background' open={open} onClose={handleClose}>
+                    <DialogTitle>{selectedRow.id ? 'Edit Row' : 'Add New Row'}</DialogTitle>
+                    <DialogContent>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        label="Name"
+                        type="text"
+                        fullWidth
+                        name="name"
+                        value={selectedRow.name}
+                        onChange={handleChange}
+                    />
+                    <TextField
+                        margin="dense"
+                        label="Age"
+                        type="number"
+                        fullWidth
+                        name="age"
+                        value={selectedRow.age}
+                        onChange={handleChange}
+                    />
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={handleClose} color="primary">
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave} color="primary">
+                        Save
+                    </Button>
+                    </DialogActions>
+                </Dialog>
+                </div>
+            </Paper>
+        </Paper>
+    )
+}