Set up basic routing for seperated admin pages.

frontend/package.json

@@ -16,7 +16,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "FAST_REFRESH=false react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/App.js

@@ -13,16 +13,24 @@ import PracticeHome from "./components/APITest/PracticeHome";
 import AdminHome from "./components/AdminHome/AdminHome";
 import MyAccountAdminView from "./components/MyAccountAdminView/MyAccountAdminView";
 import SearchResults from "./components/SearchResults/SearchResults";
+import Navbar from "./components/NavBar/Navbar";
+import AdminDashboard from "./components/AdminDashboard/AdminDashboard";
+import ApplicationActivity from "./components/ApplicationActivity/ApplicationActivity";
+import CreateUsers from "./components/CreateUsers/CreateUsers";
+import EditUsers from "./components/EditUsers/EditUsers";
 
 function App() {
   return (
     <Router>
       <div className="App">
-        å
         <Navbar />
         <Routes>
           <Route path="/login" element={<Login />} />
           <Route path="/home" element={<Home />} />
+          <Route path="/admin/dashboard" element={<AdminDashboard />} />
+          <Route path="/admin/activity" element={<ApplicationActivity />} />
+          <Route path="/admin/create-people" element={<CreateUsers />} />
+          <Route path="/admin/edit-people" element={<EditUsers />} />
           <Route path="/practice" element={<PracticeHome />} />
           <Route path="/AdminHome" element={<AdminHome />} />
           <Route path="/MyAccountAdminView" element={<MyAccountAdminView />} />

frontend/src/components/AdminDashboard/AdminDashboard.js

+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styles from "./AdminDashboardStyles.module.css";
+
+const AdminDashboard = () => {
+  // used to navigate to different pages
+  const navigate = useNavigate();
+
+  // function to navigate to new page
+  const handleNavigation = (path) => {
+    navigate(path);
+  };
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>Admin Dashboard</h1>
+      <div className={styles.buttonGroup}>
+        <button onClick={() => handleNavigation("/admin/edit-people")}>
+          Edit/Update People
+        </button>
+        <button onClick={() => handleNavigation("/admin/create-people")}>
+          Create People
+        </button>
+        <button onClick={() => handleNavigation("/admin/activity")}>
+          Track Application Activity
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AdminDashboard;

frontend/src/components/AdminDashboard/AdminDashboardStyles.module.css

+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.buttonGroup {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #007bff;
+  color: white;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+button:active {
+  background-color: #003f7f;
+}

frontend/src/components/NavBar/Navbar.js

@@ -13,7 +13,7 @@ const Navbar = () => {
           <Link to="/search"> Search </Link>
         </li>
         <li>
-          <Link to="/admin"> Admin </Link>
+          <Link to="/admin/dashboard"> Admin </Link>
         </li>
         <li>
           <Link to="/my-profile"> My Profile </Link>