Merge branch 'create-frontend-pages' into 'main'

Set up routing for major pages.

See merge request !9

frontend/README.md

@@ -69,3 +69,59 @@
 
     - if any value is not given (example: graduation date for a person who did not graduate), leave that value as null in the
       request to the backend server
+
+request body for update person:
+
+    {
+        personInfo: { -- note: pass ALL of the info here, even if it is not updated. Ex: if person only updates their nickname, still send their firstName, lastName, etc. in the request
+            firstName: string (not null)
+            lastName: string (not null)
+            middleName: string
+            suffix: string
+            maidenName: string
+            nickName: string
+            techAlumniChapter: string
+            classYear: int (not null)
+            gradYear: int
+            gradSemester: int
+            gender: string (accepted values: male. female, other)
+        }
+        degrees: [ -- note: include ONLY the degrees that should be updated
+            {
+                peopleDegreeId: int, -- this is not present in createPerson, will need this.
+                degreeType: string
+                degreeYear: int (not null),
+                degreeDescription: string (max 255 chars)
+                degreeDepartment: string,
+                degreeCollege: string,
+            },
+            ....
+        ],
+        addresses: [ -- note: include ONLY the addresses that should be updated
+            {
+                address1: string (not null),
+                address2: string, -- not sure if we need this
+                city: string (not null),
+                state: string (not null),
+                country: string (not null),
+                zipCode: int,
+                preferredAddress: boolean
+            },
+            {
+            ** ADD ANOTHER ADDRESS HERE IF NECESSARY
+            }
+        ],
+        contacts: [
+            {
+                contactNumber: string --> i guess this can be a phone nunber, email, etc.
+                contactType: string --> need to define list: phone, email, ....
+                preferredContact: boolean
+            },
+            ..... more contacts if needed
+        ],
+        involvements: [
+            involvement1: string,
+            involvement2: string ,
+            .... more if needed
+        ]
+    }

frontend/src/App.js

@@ -10,15 +10,30 @@ import {
 import Home from "./components/Home/Home";
 import Login from "./components/Login/Login";
 import PracticeHome from "./components/APITest/PracticeHome";
+import Navbar from "./components/NavBar/Navbar";
+import AdminHome from "./components/AdminHome/AdminHome";
+import ApplicationActivity from "./components/ApplicationActivity/ApplicationActivity";
+import EditUsers from "./components/EditUsers/EditUsers";
+import ViewUsers from "./components/ViewUsers/ViewUsers";
+import CreateUsers from "./components/CreateUsers/CreateUsers";
+import MyProfile from "./components/MyProfile/MyProfile";
 
 function App() {
   return (
     <Router>
       <div className="App">
+        å
+        <Navbar />
         <Routes>
           <Route path="/login" element={<Login />} />
           <Route path="/home" element={<Home />} />
           <Route path="/practice" element={<PracticeHome />} />
+          <Route path="/admin" element={<AdminHome />} />
+          <Route path="/app-activity" element={<ApplicationActivity />} />
+          <Route path="/edit-users" element={<EditUsers />} />
+          <Route path="/view-users" element={<ViewUsers />} />
+          <Route path="/create-users" element={<CreateUsers />} />
+          <Route path="/my-profile" element={<MyProfile />} />
         </Routes>
       </div>
     </Router>

frontend/src/components/AdminHome/AdminHome.js

@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
 import "./AdminHome.css";
 
 function AdminHome() {
+  const navigate = useNavigate();
+
   const [isSidebarOpen, setSidebarOpen] = useState(true);
 
   const toggleSidebar = () => {
@@ -12,14 +14,14 @@ function AdminHome() {
   return (
     <div className="admin-page">
       {/* Navbar */}
-      <nav className="navbar">
+      {/* <nav className="navbar">
         <div className="navbar-links">
           <a href="#">Home</a>
           <a href="#">Browse</a>
           <a href="#">Search</a>
           <a href="#">Messages</a>
         </div>
-      </nav>
+      </nav> */}
 
       {/* Main content wrapper */}
       <div className="main-content">
@@ -30,9 +32,15 @@ function AdminHome() {
           </button>
           {isSidebarOpen && (
             <ul className="sidebar-menu">
-              <li><a href="#">Account Settings</a></li>
-              <li><a href="#">Privacy Policy</a></li>
-              <li><a href="#">More...</a></li>
+              <li>
+                <a href="#">Account Settings</a>
+              </li>
+              <li>
+                <a href="#">Privacy Policy</a>
+              </li>
+              <li>
+                <a href="#">More...</a>
+              </li>
             </ul>
           )}
         </div>
@@ -41,20 +49,32 @@ function AdminHome() {
         <div className="content">
           <h1>Welcome to Admin Page</h1>
           <div className="dashboard">
-            <div className="dashboard-item" onClick={() => console.log("Viewing Users")}>
+            <div
+              className="dashboard-item"
+              onClick={() => navigate("/view-users")}
+            >
               <span>View Users</span>
             </div>
-            <div className="dashboard-item" onClick={() => console.log("Editing Users")}>
-              <span>Edit Users</span>
+            <div
+              className="dashboard-item"
+              onClick={() => navigate("/edit-users")}
+            >
+              <span>Edit/Delete Users</span>
             </div>
-            <div className="dashboard-item" onClick={() => console.log("Deleting Users")}>
-              <span>Delete Users</span>
+            <div
+              className="dashboard-item"
+              onClick={() => navigate("/create-users")}
+            >
+              <span>Create Users</span>
             </div>
             <div className="dashboard-item">
               <input type="file" onChange={() => console.log("CSV Uploaded")} />
               <span>Upload CSV</span>
             </div>
-            <div className="dashboard-item" onClick={() => console.log("Tracking Page Visits")}>
+            <div
+              className="dashboard-item"
+              onClick={() => navigate("/app-activity")}
+            >
               <span>Track Application Activity</span>
             </div>
           </div>

frontend/src/components/ApplicationActivity/ApplicationActivity.js

+import React from "react";
+
+const ApplicationActivity = () => {
+  return (
+    <section>
+      <h2> Page to view application activity</h2>
+      <p>
+        {" "}
+        Here we will show login/logout activity as well as database changes
+      </p>
+    </section>
+  );
+};
+
+export default ApplicationActivity;

frontend/src/components/CreateUsers/CreateUsers.js

+import React from "react";
+
+const CreateUsers = () => {
+  return (
+    <section>
+      <h2>
+        {" "}
+        Create user's page. Here we will give option to create a single user or
+        do a file upload
+      </h2>
+    </section>
+  );
+};
+
+export default CreateUsers;

frontend/src/components/EditUsers/EditUsers.js

+import React from "react";
+
+const EditUsers = () => {
+  return (
+    <section>
+      <h2> Edit users page</h2>
+      <p>
+        {" "}
+        Need to first search users by name, then pick the user you want and go
+        to a page where you can edit their details
+      </p>
+      <p> I think that delete users should also be included in here too</p>
+    </section>
+  );
+};
+
+export default EditUsers;

frontend/src/components/Home/Home.js

@@ -107,24 +107,24 @@ function Home() {
       </div>
       <div className="selection-section">
         <div className="button-container">
-          <div className="button-wrapper">
+          {/* <div className="button-wrapper">
             <button className="action-button">
               <img src={logo} width={70} alt="Browse" className="icon" />
             </button>
             <span>Browse</span>
-          </div>
-          <div className="button-wrapper">
+          </div> */}
+          {/* <div className="button-wrapper">
             <button className="action-button">
               <img src={logo} alt="Search" className="icon" />
             </button>
             <span>Search</span>
-          </div>
-          <div className="button-wrapper">
+          </div> */}
+          {/* <div className="button-wrapper">
             <button className="action-button">
               <img src={logo} alt="Message" className="icon" />
             </button>
             <span>Message</span>
-          </div>
+          </div> */}
         </div>
       </div>
     </>

frontend/src/components/MyProfile/MyProfile.js

+import React from "react";
+
+const MyProfile = () => {
+  return (
+    <section>
+      <h2> MyProfile page</h2>
+
+      <p> Users can view and edit their profile info here</p>
+    </section>
+  );
+};
+
+export default MyProfile;

frontend/src/components/NavBar/Navbar.js

+import React from "react";
+import { Link } from "react-router-dom";
+import styles from "./NavbarStyles.module.css";
+
+const Navbar = () => {
+  return (
+    <nav className={styles.navbar}>
+      <ul className={styles.navList}>
+        <li>
+          <Link to="/home"> Home </Link>
+        </li>
+        <li>
+          <Link to="/search"> Search </Link>
+        </li>
+        <li>
+          <Link to="/admin"> Admin </Link>
+        </li>
+        <li>
+          <Link to="/my-profile"> My Profile </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;

frontend/src/components/NavBar/NavbarStyles.module.css

+/* Navbar container */
+.navbar {
+  width: 100%;
+  background: linear-gradient(to right, red, orange);
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Navbar links container */
+.navList {
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Navbar links */
+.navList li a {
+  margin: 0 80px; /* Increase margin to space out links */
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+  position: relative;
+  transition: color 0.3s;
+}
+
+/* Hover effect for navbar links */
+.navList li a:hover {
+  color: rgb(13, 28, 84); /* Changes text color on hover */
+}
+
+/* Underline effect on hover */
+.navList li a::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 2px;
+  left: 0;
+  bottom: -5px;
+  background-color: rgb(0, 47, 255); /* Underline color */
+  transition: width 0.3s;
+}
+
+.navList li a:hover::after {
+  width: 100%; /* Expands underline on hover */
+}

frontend/src/components/ViewUsers/ViewUsers.js

+import React from "react";
+
+const ViewUsers = () => {
+  return (
+    <section>
+      <h2> view users page</h2>
+    </section>
+  );
+};
+
+export default ViewUsers;