Merge pull request #31 from CSE2102-Spring25/develop-final

setting up develop-final branch with new pages and features

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import AllApplicantsPage from "./pages/AllApplicantsPage";
 import PetCreatePage from "./pages/PetCreatePage";
 import ApplicantDetailPage from "./pages/ApplicantDetailPage";
 import { JSX } from "react";
+import ApplicantsPage from "./pages/AllApplicantsPage";
 
 function ProtectedRoute({ children }: { children: JSX.Element }) {
   const isLoggedIn = localStorage.getItem("loggedIn") === "true";
@@ -50,6 +51,7 @@ export default function App() {
         <Route path="/pao/listings" element={<AdminRoute><PaoListingsPanel /></AdminRoute>} />
         <Route path="/pao/pets/:id/edit" element={<AdminRoute><PetEditPage /></AdminRoute>} />
         <Route path="/pao/pets/new" element={<AdminRoute><PetCreatePage /></AdminRoute>} />
+        <Route path="/pets/:id/applicants" element={<AdminRoute><ApplicantsPage /></AdminRoute>} />
         <Route path="/pao/applicants" element={<AdminRoute><AllApplicantsPage /></AdminRoute>} />
         <Route path="/pao/applicants/:id" element={
         <AdminRoute>

frontend/src/components/PAOLayout.tsx

@@ -16,8 +16,6 @@ export default function PAOLayout() {
         </div>
         {menuOpen && (
           <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <button onClick={() => navigate("/pao/dashboard")} style={menuBtn}>User Dashboard</button>
-            <button onClick={() => navigate("/pao/user/1")} style={menuBtn}>User Profile Page</button>
             <button onClick={() => navigate("/pao/pets/new")} style={menuBtn}>New Pet Listing</button>
             <button onClick={() => navigate("/pao/pets/1/edit")} style={menuBtn}>Edit Pet Listing</button>
             <button onClick={() => navigate("/pao/listings")} style={menuBtn}>PAO Admin Panel</button>

frontend/src/pages/AllApplicantsPage.tsx

@@ -1,75 +1,60 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 type Applicant = {
+  id: number;
   name: string;
+  location: string;
+  email: string;
   reason: string;
+  care: string;
+  home: string;
+  pet_id: number;
 };
 
-export default function ApplicantsPage() {
-  const { id } = useParams();
-  const navigate = useNavigate();
+export default function AllApplicantsPage() {
   const [applicants, setApplicants] = useState<Applicant[]>([]);
-  const [menuOpen, setMenuOpen] = useState(true);
+  const navigate = useNavigate();
 
   useEffect(() => {
-    fetch(`http://localhost:5000/api/pets/${id}/applicants`)
+    fetch("http://localhost:5000/api/applicants")
       .then(res => res.json())
       .then(data => setApplicants(data))
-      .catch(err => console.error("Failed to load applicants:", err));
-  }, [id]);
+      .catch(err => console.error("Error loading applicants:", err));
+  }, []);
 
   return (
-    <div style={{ display: "flex" }}>
-      {/* Sidebar */}
-      <div style={{
-        width: menuOpen ? "200px" : "50px",
-        background: "#333",
-        color: "white",
-        height: "100vh",
-        padding: "1rem",
-        transition: "width 0.3s"
-      }}>
-        <div
-          style={{ cursor: "pointer", fontSize: "1.5rem", marginBottom: "1rem" }}
-          onClick={() => setMenuOpen(!menuOpen)}
-        >
-          ☰
-        </div>
-        {menuOpen && (
-          <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-            <button onClick={() => navigate("/pao/pets/new")} style={menuBtn}>New Pet Listing</button>
-            <button onClick={() => navigate("/pao/listings")} style={menuBtn}>Edit Pet Listings</button>
-            <button onClick={() => navigate("/pao/applicants")} style={menuBtn}>Applicants</button>
+    <div style={{ padding: "2rem" }}>
+      <h1>All Adoption Applicants</h1>
+      <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+        {applicants.map(app => (
+          <div key={app.id} style={{
+            backgroundColor: "#6f655a",
+            padding: "1rem",
+            borderRadius: "8px",
+            color: "white",
+            width: "260px",
+            boxShadow: "4px 4px 10px rgba(0,0,0,0.2)"
+          }}>
+            <h3>{app.name}, {app.location}</h3>
+            <p><strong>Email:</strong> {app.email}</p>
+            <p><strong>Reason:</strong> {app.reason}</p>
+            <button
+              style={{
+                backgroundColor: "black",
+                color: "white",
+                border: "none",
+                padding: "0.5rem 1rem",
+                borderRadius: "6px",
+                cursor: "pointer"
+              }}
+              onClick={() => navigate(`/pao/applicants/${app.id}`)}
+            >
+              View Full Application
+            </button>
           </div>
-        )}
-      </div>
-
-      {/* Main View */}
-      <div style={{ flexGrow: 1, padding: "2rem" }}>
-        <h1>Applicants for Pet ID: {id}</h1>
-        {applicants.length === 0 ? (
-          <p>No applications yet.</p>
-        ) : (
-          <ul>
-            {applicants.map((app, idx) => (
-              <li key={idx}>
-                {app.name} — {app.reason}
-              </li>
-            ))}
-          </ul>
-        )}
+        ))}
       </div>
     </div>
   );
 }
-
-const menuBtn: React.CSSProperties = {
-  background: "#555",
-  border: "none",
-  color: "white",
-  padding: "0.5rem 1rem",
-  textAlign: "left",
-  cursor: "pointer",
-  borderRadius: "4px"
-};