Add invite routing

frontend/src/App.tsx

@@ -33,6 +33,7 @@ import SignupEmergencyContact from "./components/auth/SignupEmergencyContact";
 import SignupSecondary from "./components/auth/SignupSecondary";
 import CustomizedCalendar from "./components/pages/Calendar/CustomizedCalendar";
 import PlatformSignupRequests from "./components/pages/PlatformSignupRequests";
+import Invite from "./components/pages/Invite";
 
 const App = (): React.ReactElement => {
   const currentUser: AuthenticatedUser = getLocalStorageObj<AuthenticatedUser>(
@@ -140,6 +141,11 @@ const App = (): React.ReactElement => {
                     path={Routes.PLATFORM_SIGNUP_REQUESTS}
                     component={PlatformSignupRequests}
                   />
+                  <PrivateRoute
+                    exact
+                    path={Routes.INVITE_PAGE}
+                    component={Invite}
+                  />
                   <Route exact path="*" component={NotFound} />
                 </Switch>
               </Router>

frontend/src/components/auth/PrivateRoute.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from "react";
-import { Route, Redirect } from "react-router-dom";
+import { Route, Redirect, useLocation } from "react-router-dom";
 
 import AuthContext from "../../contexts/AuthContext";
 import { LOGIN_PAGE } from "../../constants/Routes";
@@ -17,11 +17,20 @@ const PrivateRoute: React.FC<PrivateRouteProps> = ({
 }: PrivateRouteProps) => {
   const { authenticatedUser } = useContext(AuthContext);
 
-  return authenticatedUser ? (
-    <Route path={path} exact={exact} component={component} />
-  ) : (
-    <Redirect to={LOGIN_PAGE} />
-  );
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location.search);
+  const shiftId = queryParams.get('shiftId');
+
+  if (authenticatedUser) {
+    return <Route path={path} exact={exact} component={component} />
+  }
+
+  if (shiftId) {
+    localStorage.setItem('shiftId', shiftId)
+  }
+
+  return <Redirect to={LOGIN_PAGE} />
 };
 
 export default PrivateRoute;

frontend/src/components/pages/Invite.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import {
+    Text,
+    Flex,
+    Table,
+    Thead,
+    Tbody,
+    Tr,
+    Th,
+    Td,
+    TableContainer,
+    Checkbox,
+    Badge,
+    IconButton,
+    Icon,
+} from '@chakra-ui/react';
+import { FaCheck, FaXmark, FaSistrix, FaArrowsRotate, FaBars, FaAngleRight, FaAngleLeft } from "react-icons/fa6";
+import { useLocation } from 'react-router-dom'
+
+import NavBarAdmin from "../common/NavBarAdmin";
+import ServiceRequestAPIClient from "../../APIClients/ServiceRequestAPIClient";
+import NavBarVolunteer from "../common/NavBarVolunteer";
+
+interface UserInfo {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    status: string;
+    createdAt: string | null;
+}
+
+const Invite = (): React.ReactElement => {
+
+    const location = useLocation();
+
+    const queryParams = new URLSearchParams(location.search);
+    const id = queryParams.get('id');
+    const [userInfo, setUserInfo] = useState<UserInfo[]>([]);
+
+    useEffect(() => {
+        console.log(id)
+        const fetchData = async () => {
+            try {
+                const response = await ServiceRequestAPIClient.getPlatformSignups();
+                setUserInfo(response);
+            } catch (error) {
+                console.error("Error fetching platform signups:", error);
+            }
+        };
+        fetchData();
+    }, []);
+
+    const [selectAll, setSelectAll] = useState<boolean>(false);
+    const [checkedItems, setCheckedItems] = useState<boolean[]>([]);
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const itemsPerPage = 999;
+
+    useEffect(() => {
+        setCheckedItems(new Array(userInfo.length).fill(false));
+    }, [userInfo]);
+
+    const handleSelectAllChange = () => {
+        const newSelectAll = !selectAll;
+        setSelectAll(newSelectAll);
+        setCheckedItems(new Array(userInfo.length).fill(newSelectAll));
+    };
+
+    const handleCheckboxChange = (index: number) => {
+        const newCheckedItems = [...checkedItems];
+        newCheckedItems[index] = !newCheckedItems[index];
+        setCheckedItems(newCheckedItems);
+        setSelectAll(newCheckedItems.every(item => item));
+    };
+
+    const getBadgeBg = (status: string): string => {
+        if (status === "PENDING") return '#DACFFB';
+        return 'gray.200';
+    };
+
+    const getBadgeColor = (status: string): string => {
+        if (status === "PENDING") return "#230282";
+        return 'black';
+    };
+
+    const handleApproveClick = () => {
+        console.log("Approve icon clicked");
+    };
+
+    const handleRejectClick = () => {
+        console.log("Reject icon clicked");
+    };
+
+    const handleSearchClick = () => {
+        console.log("Search icon clicked");
+    };
+
+    const handleRefreshClick = () => {
+        console.log("Refresh icon clicked");
+    };
+
+    const handleFilterClick = () => {
+        console.log("Filter icon clicked");
+    };
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    const totalPages = Math.ceil(userInfo.length / itemsPerPage);
+    const currentItems = userInfo.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+    const itemCountStart = (currentPage - 1) * itemsPerPage + 1;
+    const itemCountEnd = Math.min(currentPage * itemsPerPage, userInfo.length);
+
+    return (
+        <div>
+            Invite Page
+        </div>
+    );
+};
+
+export default Invite;

frontend/src/components/pages/VolunteerDashboard.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Flex, Box, Heading } from "@chakra-ui/react";
+import {Redirect} from "react-router-dom";
 import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
 import CustomizedCalendar from "./Calendar/CustomizedCalendar";
 import Shifts from "./Shifts";
 import NavBarVolunteer from "../common/NavBarVolunteer";
+import { INVITE_PAGE } from "../../constants/Routes";
 
 const VolunteerDashboard = (): React.ReactElement => {
   const [userInfo, setUserInfo] = useState<any>({
@@ -12,9 +14,16 @@ const VolunteerDashboard = (): React.ReactElement => {
     role: "",        
   });
 
+
+  const [inviteShiftId, setInviteShiftId] = useState<string | null>(null);
+
   useEffect(() => {
     const userData = localStorage.getItem(AUTHENTICATED_USER_KEY);
-
+    const shiftId = localStorage.getItem('shiftId');
+    if (shiftId) {
+      setInviteShiftId(shiftId);
+      localStorage.removeItem('shiftId');
+    }
 
     if (userData) {
       const parsedUserData = JSON.parse(userData);
@@ -24,6 +33,11 @@ const VolunteerDashboard = (): React.ReactElement => {
     }
   }, []);
 
+  if (inviteShiftId) {
+    return <Redirect to={{pathname: INVITE_PAGE, search: `?shiftId=${inviteShiftId}`}} />
+  }
+
+
   return (
     <Flex direction="column" h="100vh">
       <NavBarVolunteer firstName={userInfo.firstName} lastName={userInfo.lastName} role={userInfo.role}/>

frontend/src/constants/Routes.ts

@@ -31,3 +31,5 @@ export const SHIFTS_PAGE = "/shifts";
 export const VOLUNTEER_DASHBOARD_PAGE = "/volunteer-dashboard";
 
 export const PLATFORM_SIGNUP_REQUESTS = "/platform-signup-requests";
+
+export const INVITE_PAGE = "/invite"