login, usermanagement, role

src/components/Header.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   AppBar,
   Toolbar,
@@ -6,16 +6,23 @@ import {
   IconButton,
   Menu,
   MenuItem,
-  Avatar,
+  Avatar,Button
 } from "@mui/material";
 import { Mail, AccountCircle } from "@mui/icons-material";
 import "../style/Header.css";
 import { useNavigate } from 'react-router-dom';
+import Cookies from "js-cookie";
 
 const Header = () => {
+  const [userData, setUserData] = useState('');
   const [anchorEl, setAnchorEl] = useState(null);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    let username = Cookies.get('username');
+    setUserData(username)
+  }, []);
+
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -25,7 +32,9 @@ const Header = () => {
   };
 
   function logoutBtn() {
-    localStorage.removeItem("authToken");
+    Cookies.remove('token');
+    Cookies.remove('role');
+    Cookies.remove('username');
     navigate('/login')
   }
 
@@ -34,9 +43,7 @@ const Header = () => {
   return (
     <AppBar position="fixed" sx={{ backgroundColor: "#f5f5f5", color: "#333" }}>
       <Toolbar>
-        <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
-          
-        </Typography>
+        <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}></Typography>
         <IconButton>
           <Mail />
         </IconButton>
@@ -51,6 +58,12 @@ const Header = () => {
         >
           <AccountCircle />
         </IconButton>
+        <Button onClick={handleClick}
+          id="basic-button"
+          aria-controls={open ? 'account-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}>{userData}
+        </Button>
         <Menu
           id="account-menu"
           anchorEl={anchorEl}
@@ -59,6 +72,10 @@ const Header = () => {
           onClick={handleClose}
           transformOrigin={{ horizontal: "right", vertical: "top" }}
           anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+          title="User Profile"
+          MenuListProps={{
+            'aria-labelledby': 'basic-button',
+          }}
         >
           <MenuItem>
             <Avatar sx={{ marginRight: 1 }} /> Profile

src/components/SideBar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Drawer,
   List,
@@ -12,7 +12,8 @@ import {
   // Divider,
   Box,
   Tooltip,
-  Avatar
+  Avatar,
+  Link
 } from '@mui/material';
 
 import SettingsIcon from "@mui/icons-material/Settings";
@@ -22,6 +23,8 @@ import InfoIcon from "@mui/icons-material/Info";
 import Logout from "@mui/icons-material/Logout";
 import { useNavigate } from 'react-router-dom';
 import logo from '../logo/logo.jpeg';
+import Cookies from "js-cookie";
+import { Link as ReactRouterLink } from 'react-router-dom';
 
 const Sidebar = () => {
   const [userRole, setUserRole] = useState('');
@@ -131,6 +134,14 @@ const Sidebar = () => {
         {
           title: 'Setting',
           path: '/setting'
+        },
+        {
+          title: 'User Management',
+          path: '/user-management'
+        },
+        {
+          title: 'Role Management',
+          path: '/role-management'
         }
       ],
     },
@@ -229,7 +240,7 @@ const Sidebar = () => {
         },
         {
           title: 'Transfer',
-          path: '/transfer'
+          path: '/operation-transfer'
         },
       ],
     },
@@ -238,26 +249,33 @@ const Sidebar = () => {
       options: [
         {
           title: 'Agent Registered',
-          path: '/agent'
+          path: '/registered-agent'
         },
         {
           title: 'Supervisor Registered',
-          path: '/supervisor'
+          path: '/registered-supervisor'
         }
       ],
     },
   ]
 
+  useEffect(() => {
+    let token = Cookies.get(`token`);
+    let role = Cookies.get(`role`);
+    if (token && role) setUserRole(role);
+  }, []);
+
   function roleMenu() {
-    setUserRole('escrow')
-    if (userRole === 'admin') return adminMenu
+    if (userRole === 'Super Admin') return adminMenu
     if (userRole === 'escrow') return esCrowMenu
     if (userRole === 'tds') return tdsMenu
     return []
   }
 
   function logoutBtn() {
-    localStorage.removeItem("authToken");
+    Cookies.remove('token');
+    Cookies.remove('role');
+    Cookies.remove('username');
     navigate('/login');
   }
 
@@ -356,9 +374,11 @@ function ListOfMenus({roleMenu, navigate, label}) {
             </AccordionSummary>
             <AccordionDetails>
               {menuItem.options && menuItem.options.map((option, subIndex) => (
-                <ListItem button key={subIndex} sx={{ pl: 2 }}>
+                <ListItem key={subIndex} sx={{ pl: 2 }}>
                   <ListItemText>
-                    <Typography onClick={() => navigate(option.path)} color='wheat' style={{ textAlign: 'left' }}>{option.title}</Typography>
+                    <Link to={option.path} component={ReactRouterLink} underline="none">
+                      <Typography  color='wheat' style={{ textAlign: 'left' }}>{option.title}</Typography>
+                    </Link>
                   </ListItemText>
                 </ListItem>
               ))}

src/components/Table.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { tableCellClasses } from '@mui/material/TableCell';
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Button, styled, TablePagination } from '@mui/material';
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: `grey`,
+        color: theme.palette.common.white,
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14,
+    },
+}));
+
+const StyledTableRow = styled(TableRow)(({ theme }) => ({
+    '&:nth-of-type(odd)': {
+        backgroundColor: theme.palette.action.hover,
+    },
+    // hide last border
+    '&:last-child td, &:last-child th': {
+        border: 0,
+    },
+}));
+
+function ReusableTable({ columns, data }) {
+    const [page, setPage] = React.useState(0);
+    const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(+event.target.value);
+        setPage(0);
+    };
+
+    return (
+        <>
+            <TableContainer component={Paper}>
+                <Table>
+                    <TableHead>
+                        <TableRow>
+                            {columns.map((column, index) => (
+                                <StyledTableCell align={index === columns.length - 1 ? "right" : "left"} key={column.id}>{column.label}</StyledTableCell>
+                            ))}
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {data.map((row, index) => (
+                            <StyledTableRow key={row.id || index}>
+                                {columns.map((column, index) => (
+                                    <StyledTableCell align={index === columns.length - 1 ? "right" : "left"} key={column.id}>
+                                        {column.id === 'actions' && row.actions ? (
+                                            row.actions.map((action, actionIndex) => (
+                                                <Button
+                                                    key={actionIndex}
+                                                    variant="contained"
+                                                    color={action.color || 'primary'}
+                                                    onClick={() => action.onClick(row)}
+                                                    style={{ marginRight: '5px' }}
+                                                    size='small'
+                                                >
+                                                    {action.label}
+                                                </Button>
+                                            ))
+                                        ) : (
+                                            row[column.id]
+                                        )}
+                                    </StyledTableCell>
+                                ))}
+                            </StyledTableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+            <TablePagination
+                rowsPerPageOptions={[10, 25, 100]}
+                component="div"
+                count={data.length}
+                rowsPerPage={rowsPerPage}
+                page={page}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+        </>
+    );
+}
+
+export default ReusableTable;