Create redesigned "Users" page

client/src/App.jsx

@@ -18,6 +18,7 @@ import HandleAuth from './components/auth/HandleAuth';
 import EmailSent from './pages/EmailSent';
 import Events from './pages/Events';
 import ProjectLeaderDashboard from './pages/ProjectLeaderDashboard';
+import Users from './pages/Users';
 import UserAdmin from './pages/UserAdmin';
 import ProjectList from './pages/ProjectList';
 import ManageProjects from './pages/ManageProjects';
@@ -46,9 +47,11 @@ const routes = [
   { path: '/handleauth', name: 'handleauth', Component: HandleAuth },
   { path: '/emailsent', name: 'emailsent', Component: EmailSent },
   { path: '/events', name: 'events', Component: Events },
-  { path: '/useradmin', name: 'useradmin', Component: UserAdmin },
+  { path: '/users', name: 'users', Component: Users },
+
+  { path: '/users/user-search', name: 'useradmin', Component: UserAdmin },
   { path: '/projects', name: 'projects', Component: ProjectList },
-  { path: '/projects/create', name: 'projectform', Component:  addProject},
+  { path: '/projects/create', name: 'projectform', Component: addProject },
   {
     path: '/projects/:projectId',
     name: 'project',

client/src/components/Navbar.jsx

@@ -61,7 +61,7 @@ const Navbar = (props) => {
           {/* Admin auth -> Displays 2 links -> 'Users' and 'Projects'. */}
           {auth?.user?.accessLevel === 'admin' && (
             <>
-              <StyledButton component={NavLink} to="/useradmin">
+              <StyledButton component={NavLink} to="/users">
                 USERS
               </StyledButton>
               <StyledButton component={NavLink} to="/projects">

client/src/components/user-admin/UserManagement.jsx

@@ -1,13 +1,21 @@
 import React, { useState } from 'react';
-import {Box, Button, ButtonGroup, TextField, Typography, List, ListItem, ListItemButton} from '@mui/material';
-
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  TextField,
+  Typography,
+  List,
+  ListItem,
+  ListItemButton,
+} from '@mui/material';
 
 import '../../sass/UserAdmin.scss';
 
 const Buttonsx = {
   px: 2,
   py: 0.5,
-}
+};
 
 const UserManagement = ({ users, setUserToEdit }) => {
   let searchResults = [];
@@ -50,97 +58,96 @@ const UserManagement = ({ users, setUserToEdit }) => {
             );
   }
   return (
-    <Box className="container--usermanagement" sx={{px: '1.8rem', mb: 0,}}>
-      <Box sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        pt: 5,
-        height: '100%',
-        width: 1/1,
-      }}>
-        <Typography variant='h1'>User Management</Typography>
-
+    <Box className="container--usermanagement" sx={{ px: '1.8rem', mb: 0 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          pt: 5,
+          height: '100%',
+          width: 1 / 1,
+        }}
+      >
+        <Typography variant="h1">User Search</Typography>
+
         <Box className="tab-buttons">
-          <ButtonGroup sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'center',
-            whiteSpace: 'nowrap',
-            mx: 1,
-            }}>
-              <Button
-                sx={Buttonsx}
-                type="button"
-                variant={
-                  searchResultType === 'name'
-                  ? 'contained'
-                  : 'secondary'
-                }
-                onClick={buttonSwap}
-              >
-                Results by Name
-              </Button>
-              <Button
-                sx={Buttonsx}
-                type="button"
-                variant={
-                  searchResultType === 'email'
-                  ? 'contained'
-                  : 'secondary'
-                }
-                onClick={buttonSwap}
-              >
-                Results by Email
-              </Button>
+          <ButtonGroup
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'center',
+              whiteSpace: 'nowrap',
+              mx: 1,
+            }}
+          >
+            <Button
+              sx={Buttonsx}
+              type="button"
+              variant={searchResultType === 'name' ? 'contained' : 'secondary'}
+              onClick={buttonSwap}
+            >
+              Results by Name
+            </Button>
+            <Button
+              sx={Buttonsx}
+              type="button"
+              variant={searchResultType === 'email' ? 'contained' : 'secondary'}
+              onClick={buttonSwap}
+            >
+              Results by Email
+            </Button>
           </ButtonGroup>
         </Box>
         <TextField
           type="text"
           placeholder="Enter name and / or email to find a user."
-          variant='standard'
+          variant="standard"
           value={searchTerm}
           onChange={handleChange}
         />
-        <Box sx={{ 
-          bgcolor: searchResults.length>0? '#F5F5F5': 'transparent',
-          my: 1.2,
-          borderRadius: 1,
-          flexGrow: 1,
-          width: 1/1,
-          }}>
+        <Box
+          sx={{
+            bgcolor: searchResults.length > 0 ? '#F5F5F5' : 'transparent',
+            my: 1.2,
+            borderRadius: 1,
+            flexGrow: 1,
+            width: 1 / 1,
+          }}
+        >
           <Box>
-              <List className="search-results disablePadding">
-                {searchResults.map((u) => {
-                  return (
-                    // eslint-disable-next-line no-underscore-dangle
-                    <ListItem
+            <List className="search-results disablePadding">
+              {searchResults.map((u) => {
+                return (
+                  // eslint-disable-next-line no-underscore-dangle
+                  <ListItem
                     sx={{
                       px: 2.4,
                       py: 1,
                       borderBottom: 1.6,
                       borderBottomColor: 'grey.300',
-                    }} 
-                      key={`result_${u._id}`}>
-                      <ListItemButton
-                        sx={{
-                          px: 0.25,
-                          py: 0.36,
-                          color: 'primary.main',
-                          mx: 0.16,
-                        }}
-                        className="search-results-button"
-                        type="button"
-                        onClick={() => setUserToEdit(u)}
-                      >
-                        {searchResultType === 'name'
-                          ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
-                          : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
-                      </ListItemButton>
-                    </ListItem>
-                  );
-                })}
-              </List>
+                    }}
+                    key={`result_${u._id}`}
+                  >
+                    <ListItemButton
+                      sx={{
+                        px: 0.25,
+                        py: 0.36,
+                        color: 'primary.main',
+                        mx: 0.16,
+                      }}
+                      className="search-results-button"
+                      type="button"
+                      onClick={() => setUserToEdit(u)}
+                    >
+                      {searchResultType === 'name'
+                        ? `${u.name?.firstName} ${u.name?.lastName} ( ${u.email} )`
+                        : `${u.email} ( ${u.name?.firstName} ${u.name?.lastName} )`}
+                    </ListItemButton>
+                  </ListItem>
+                );
+              })}
+            </List>
           </Box>
         </Box>
         <Box>

client/src/pages/UserAdmin.jsx

@@ -33,9 +33,10 @@ const UserAdmin = () => {
   const updateUserActiveStatus = useCallback(
     async (user, isActive) => {
       await userApiService.updateUserDbIsActive(user, isActive);
-      fetchUsers()
-    }, [userApiService, fetchUsers]
-  )
+      fetchUsers();
+    },
+    [userApiService, fetchUsers]
+  );
 
   // Update user's access level (admin/user)
   const updateUserAccessLevel = useCallback(

client/src/pages/Users.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Button, Box, Container } from '@mui/material';
+
+import '../sass/Users.scss';
+
+const Users = () => {
+  return (
+    <Container className="container--users">
+      <Box className="margin-bottom center">
+        <Button
+          component={Link}
+          to="/users/user-search"
+          className="button"
+          variant="contained"
+        >
+          User Search
+        </Button>
+      </Box>
+      <Box className="center">
+        <Button
+          component={Link}
+          to="/users/permission-search"
+          className="button"
+          variant="contained"
+        >
+          User Permission Search
+        </Button>
+      </Box>
+    </Container>
+  );
+};
+
+export default Users;

client/src/sass/Users.scss

@@ -0,0 +1,21 @@
+.container--users {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+.button {
+   width: 250px; 
+   border-radius: 8px;
+}
+
+.margin-bottom {
+    margin-bottom: 15px;
+}