Refactor UserManagementPage component and UserAPIClient

- Add useEffect and useState to UserManagementPage component to fetch and display users
- Update UserManagementPage component UI to display a table of users
- Add fetchUsers function to UserManagementPage component to fetch users from the backend
- Create UserAPIClient module to handle API requests for user data
- Implement get function in UserAPIClient to fetch users from the backend
- Define User type in UserTypes module to represent user data

frontend/src/APIClients/UserAPIClient.ts

@@ -0,0 +1,27 @@
+import axios from "axios";
+import { User } from "../types/UserTypes";
+import { getLocalStorageObj } from "../utils/LocalStorageUtils";
+import AUTHENTICATED_USER_KEY from "../constants/AuthConstants";
+
+const baseURL = process.env.REACT_APP_BACKEND_URL;
+
+const get = async (): Promise<User[]> => {
+  try {
+    const currentUser: { accessToken?: string } =
+      getLocalStorageObj(AUTHENTICATED_USER_KEY) || {};
+    const accessToken = currentUser?.accessToken;
+
+    const { data } = await axios.get(`${baseURL}/users`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+      withCredentials: true,
+    });
+
+    return data;
+  } catch (error) {
+    throw new Error(`Failed to get users: ${error}`);
+  }
+};
+
+export default { get };

frontend/src/components/pages/UserManagementPage.tsx

@@ -1,11 +1,62 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  VStack,
+  Button,
+} from "@chakra-ui/react";
+import UserAPIClient from "../../APIClients/UserAPIClient";
+import { User } from "../../types/UserTypes";
 import MainPageButton from "../common/MainPageButton";
 
 const UserManagementPage = (): React.ReactElement => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  const fetchUsers = async () => {
+    try {
+      const fetchedUsers = await UserAPIClient.get();
+      setUsers(fetchedUsers);
+    } catch (error) {
+      /* empty */
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
   return (
-    <div style={{ textAlign: "center", width: "25%", margin: "0px auto" }}>
-      <h1>User Management</h1>
-      <MainPageButton />
+    <div style={{ textAlign: "center", width: "75%", margin: "0px auto" }}>
+      <h1>Team Members Page</h1>
+      <VStack spacing="24px" style={{ margin: "24px auto" }}>
+        <TableContainer>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>First Name</Th>
+                <Th>Last Name</Th>
+                <Th>Role</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {users.map((user) => (
+                <Tr key={user.id}>
+                  <Td>{user.firstName}</Td>
+                  <Td>{user.lastName}</Td>
+                  <Td>{user.role}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        <Button onClick={fetchUsers}>Refresh</Button>
+        <MainPageButton />
+      </VStack>
     </div>
   );
 };

frontend/src/types/UserTypes.ts

@@ -0,0 +1,8 @@
+export type User = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  email: string;
+  role: string;
+  status: string;
+};