adding navbar to admin dashboard

Author: emilyniee

frontend/src/components/common/NavBarAdmin.tsx

@@ -10,7 +10,17 @@ import {
   Image,
   Spacer,
   Avatar,
+  Button,
   Icon,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverHeader,
+  PopoverBody,
+  PopoverFooter,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverAnchor
 } from '@chakra-ui/react';
 import { Link as ReactRouterLink, useLocation } from 'react-router-dom';
 import { BsPerson } from 'react-icons/bs';
@@ -19,7 +29,13 @@ import { PiBell } from "react-icons/pi";
 import { GoHome } from "react-icons/go";
 import abtc_logo from '../../images/abtc_logo.png';
 
-const NavBarAdmin: React.FC = () => {
+interface NavBarAdminProps {
+  firstName: string;
+  lastName: string;
+  role: string;
+}
+
+const NavBarAdmin: React.FC<NavBarAdminProps> = ({firstName, lastName, role}) => {
   const location = useLocation();
 
   return (
@@ -96,50 +112,21 @@ const NavBarAdmin: React.FC = () => {
         color="#444750"
         fontWeight="500"
         _hover={{ color: "black", textDecoration: "none" }}
+        paddingRight={4}
       >
         <Icon as={PiBell} boxSize={6} />
       </ChakraLink>
-      <Box ml={6} mr={2}>
-        <ChakraLink as={ReactRouterLink} to="/user-profile" fontWeight="bold" lineHeight="1.5">
-          <Avatar size="md" name="User" src="https://placehold.co/25x25" />
-        </ChakraLink>
-      </Box>
+      
       <Box>
-        <Menu>
-          <MenuButton
-            as={Box}
-            color="#444750"
-            fontWeight="500"
-            _hover={{ color: "black", textDecoration: "none" }}
-          >
-            <Flex align="center">
-              <Box ml={2}>
-                Name-First-Last
-              </Box>
-              <Icon as={RxChevronDown} boxSize={6} ml={2} mr={2}/>
-            </Flex>
-          </MenuButton>
-          <MenuList bg="white" border="none" minW="auto" w="auto">
-            <MenuItem
-              as={ReactRouterLink}
-              to="/profile/placeholder"
-              color="#444750"
-              fontWeight="500"
-              _hover={{ color: "black", textDecoration: "none" }}
-            >
-              Placeholder
-            </MenuItem>
-            <MenuItem
-              as={ReactRouterLink}
-              to="/profile/placeholder1"
-              color="#444750"
-              fontWeight="500"
-              _hover={{ color: "black", textDecoration: "none" }}
-            >
-              Placeholder 2
-            </MenuItem>
-          </MenuList>
-        </Menu>
+        <Popover trigger="hover" placement="bottom-end">
+          <PopoverTrigger>
+            <Avatar size="md" name="User" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSNfBG0r9nBON7QsYexKnLDtTnn4bjfuWZyDndX4OuZPwJTtPUA" />
+          </PopoverTrigger>
+          <PopoverContent maxW="200px">
+            <PopoverHeader>{firstName} {lastName}</PopoverHeader>
+            <PopoverBody>Role: {role}</PopoverBody>
+          </PopoverContent>
+        </Popover>
       </Box>
     </Flex>
   );

frontend/src/components/pages/PlatformSignupRequests.tsx

@@ -15,11 +15,12 @@ import {
     Icon,
 } from '@chakra-ui/react';
 import { FaCheck, FaXmark, FaSistrix, FaArrowsRotate, FaBars, FaAngleRight, FaAngleLeft } from "react-icons/fa6";
+import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
 
 import NavBarAdmin from "../common/NavBarAdmin";
 import ServiceRequestAPIClient from "../../APIClients/ServiceRequestAPIClient";
 
-interface UserInfo {
+interface PlatformSignupRequestsUser {
     id: string;
     email: string;
     firstName: string;
@@ -29,13 +30,27 @@ interface UserInfo {
 }
 
 const PlatformSignupRequests = (): React.ReactElement => {
-    const [userInfo, setUserInfo] = useState<UserInfo[]>([]);
+    const [platformSignupRequestUsers, setPlatformSignupRequestUsers] = useState<PlatformSignupRequestsUser[]>([]);
+    const [userInfo, setUserInfo] = useState<any>({
+        firstName: "",   
+        lastName: "",    
+        role: "",        
+      });
 
     useEffect(() => {
+        const userData = localStorage.getItem(AUTHENTICATED_USER_KEY);
+    
+        if (userData) {
+            const parsedUserData = JSON.parse(userData);
+            console.log(parsedUserData); // Remove this later
+    
+            setUserInfo(parsedUserData);
+        }
+
         const fetchData = async () => {
             try {
                 const response = await ServiceRequestAPIClient.getPlatformSignups();
-                setUserInfo(response);
+                setPlatformSignupRequestUsers(response);
             } catch (error) {
                 console.error("Error fetching platform signups:", error);
             }
@@ -49,13 +64,13 @@ const PlatformSignupRequests = (): React.ReactElement => {
     const itemsPerPage = 999;
 
     useEffect(() => {
-        setCheckedItems(new Array(userInfo.length).fill(false));
-    }, [userInfo]);
+        setCheckedItems(new Array(platformSignupRequestUsers.length).fill(false));
+    }, [platformSignupRequestUsers]);
 
     const handleSelectAllChange = () => {
         const newSelectAll = !selectAll;
         setSelectAll(newSelectAll);
-        setCheckedItems(new Array(userInfo.length).fill(newSelectAll));
+        setCheckedItems(new Array(platformSignupRequestUsers.length).fill(newSelectAll));
     };
 
     const handleCheckboxChange = (index: number) => {
@@ -99,14 +114,14 @@ const PlatformSignupRequests = (): React.ReactElement => {
         setCurrentPage(page);
     };
 
-    const totalPages = Math.ceil(userInfo.length / itemsPerPage);
-    const currentItems = userInfo.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+    const totalPages = Math.ceil(platformSignupRequestUsers.length / itemsPerPage);
+    const currentItems = platformSignupRequestUsers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
     const itemCountStart = (currentPage - 1) * itemsPerPage + 1;
-    const itemCountEnd = Math.min(currentPage * itemsPerPage, userInfo.length);
+    const itemCountEnd = Math.min(currentPage * itemsPerPage, platformSignupRequestUsers.length);
 
     return (
         <Flex direction="column" h="100vh" ml="20" mr="20">
-            <NavBarAdmin />
+            <NavBarAdmin firstName={userInfo.firstName} lastName={userInfo.lastName} role={userInfo.role}/>
             <Text mt="10" fontSize='2xl'>Manage Accounts</Text>
 
             <TableContainer mt='5' border='1px' borderColor='gray.200' borderRadius='20'>
@@ -157,7 +172,7 @@ const PlatformSignupRequests = (): React.ReactElement => {
                             <Th>
                                 <Flex justifyContent="space-between" alignItems="center">
                                     <Flex alignItems="center">
-                                        <Text>{itemCountStart}-{itemCountEnd} of {userInfo.length}</Text>
+                                        <Text>{itemCountStart}-{itemCountEnd} of {platformSignupRequestUsers.length}</Text>
                                         <IconButton
                                             aria-label="Previous Page"
                                             size="sm"