From 2f4c0c073ec5a4912c02fb7c752ea2129aac04d8 Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 15 Mar 2026 12:46:19 -0400
Subject: [PATCH 1/7] feat: create admin panel with dummy data

---
 app/admin/events/[id]/page.tsx |   0
 app/admin/events/page.tsx      | 189 +++++++++++++++++++++++++
 app/admin/execs/page.tsx       | 252 +++++++++++++++++++++++++++++++++
 app/admin/layout.tsx           |  81 +++++++++++
 app/admin/page.tsx             |  67 ++++-----
 components/ui/modal.tsx        |  28 ++++
 6 files changed, 584 insertions(+), 33 deletions(-)
 create mode 100644 app/admin/events/[id]/page.tsx
 create mode 100644 app/admin/events/page.tsx
 create mode 100644 app/admin/execs/page.tsx
 create mode 100644 app/admin/layout.tsx
 create mode 100644 components/ui/modal.tsx

diff --git a/app/admin/events/[id]/page.tsx b/app/admin/events/[id]/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
new file mode 100644
index 0000000..c7e9214
--- /dev/null
+++ b/app/admin/events/page.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import Modal from "@/components/ui/modal";
+import { useState } from "react";
+
+export default function EventsManagementPage() {
+	const [showModal, setShowModal] = useState(false);
+	const [showPastEvents, setShowPastEvents] = useState(false);
+	// Dummy event data
+	const upcomingEvents = [
+		{ title: "Algorithm Workshop", date: "Oct 24, 2023", time: "5:00 PM", location: "ST 102", status: "Upcoming", type: "Upcoming" },
+		{ title: "Gaming Night", date: "Oct 28, 2023", time: "7:00 PM", location: "Union Hall", status: "Draft", type: "Upcoming" },
+		{ title: "Career Fair prep", date: "Nov 05, 2023", time: "10:00 AM", location: "Computer Lab 3", status: "Confirmed", type: "Upcoming" },
+	];
+	const recurringEvents = [
+		{ title: "Weekly Coding Session", date: "Every Friday", time: "4:00 PM", location: "ST 105", status: "Active", type: "Recurring" },
+		{ title: "Monthly Meetup", date: "First Monday", time: "6:00 PM", location: "Room 200", status: "Active", type: "Recurring" },
+	];
+	const pastEvents = [
+		{ title: "Welcome Day 2022", date: "Sep 05, 2022", time: "1:00 PM", location: "Field", status: "Completed", type: "Past" },
+		{ title: "Spring Hackathon", date: "Mar 12, 2023", time: "9:00 AM", location: "Gym", status: "Completed", type: "Past" },
+	];
+
+	return (
+		<div>
+			<h1 className="text-2xl font-bold mb-2">Events Management</h1>
+			<p className="text-neutral-500 mb-6">Plan, coordinate, and review club events</p>
+
+			<div className="flex items-center justify-between mb-6">
+				<Button variant="primary" onClick={() => setShowModal(true)}>+ New Event</Button>
+			</div>
+
+			<div className="mb-10">
+				<h2 className="text-xl font-bold mb-4">Upcoming Events</h2>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Event Title</TableHead>
+							<TableHead>Date</TableHead>
+							<TableHead>Time</TableHead>
+							<TableHead>Location</TableHead>
+							<TableHead>Status</TableHead>
+							<TableHead>Actions</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{upcomingEvents.map((event, idx) => (
+							<TableRow key={idx}>
+								<TableCell>{event.title}</TableCell>
+								<TableCell>{event.date}</TableCell>
+								<TableCell>{event.time}</TableCell>
+								<TableCell>{event.location}</TableCell>
+								<TableCell>
+									<span className={`px-2 py-1 rounded text-xs font-semibold ${
+										event.status === "Upcoming" ? "bg-blue-100 text-blue-700" :
+										event.status === "Draft" ? "bg-neutral-200 text-neutral-700" :
+										"bg-green-100 text-green-700"
+									}`}>
+										{event.status}
+									</span>
+								</TableCell>
+								<TableCell>
+									<Button variant="link" size="sm">EDIT</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+
+			<div className="mb-10">
+				<h2 className="text-xl font-bold mb-4">Recurring Events</h2>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Event Title</TableHead>
+							<TableHead>Date</TableHead>
+							<TableHead>Time</TableHead>
+							<TableHead>Location</TableHead>
+							<TableHead>Status</TableHead>
+							<TableHead>Actions</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{recurringEvents.map((event, idx) => (
+							<TableRow key={idx}>
+								<TableCell>{event.title}</TableCell>
+								<TableCell>{event.date}</TableCell>
+								<TableCell>{event.time}</TableCell>
+								<TableCell>{event.location}</TableCell>
+								<TableCell>
+									<span className="px-2 py-1 rounded text-xs font-semibold bg-purple-100 text-purple-700">
+										{event.status}
+									</span>
+								</TableCell>
+								<TableCell>
+									<Button variant="link" size="sm">EDIT</Button>
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
+
+			<div className="mb-10 border-t-2 border-black pt-6">
+				<button 
+					className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
+					onClick={() => setShowPastEvents(!showPastEvents)}
+				>
+					Past Events {showPastEvents ? "▲" : "▼"}
+				</button>
+				
+				{showPastEvents && (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Event Title</TableHead>
+								<TableHead>Date</TableHead>
+								<TableHead>Time</TableHead>
+								<TableHead>Location</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{pastEvents.map((event, idx) => (
+								<TableRow key={idx}>
+									<TableCell>{event.title}</TableCell>
+									<TableCell>{event.date}</TableCell>
+									<TableCell>{event.time}</TableCell>
+									<TableCell>{event.location}</TableCell>
+									<TableCell>
+										<span className="px-2 py-1 rounded text-xs font-semibold bg-neutral-200 text-neutral-700">
+											{event.status}
+										</span>
+									</TableCell>
+									<TableCell>
+										<Button variant="link" size="sm">EDIT</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				)}
+			</div>
+
+			<Modal open={showModal} onClose={() => setShowModal(false)} title="Add New Event">
+				<form>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Event Title</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. Intro to Python Workshop" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Description</label>
+						<textarea className="w-full rounded border px-3 py-2" placeholder="Describe the event goals and requirements..." />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Poster Photo URL</label>
+						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/poster.png" />
+					</div>
+					<div className="flex gap-4 mb-4">
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Date & Time</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="mm/dd/yyyy, --:-- --" />
+						</div>
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Location</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. MC 402 or Zoom Link" />
+						</div>
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Recurring</label>
+						<select className="w-full rounded border px-3 py-2">
+							<option>None</option>
+							<option>Weekly</option>
+							<option>Monthly</option>
+						</select>
+					</div>
+					<div className="flex gap-4">
+						<Button variant="primary" type="submit">Create Event</Button>
+						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>Cancel</Button>
+					</div>
+				</form>
+			</Modal>
+		</div>
+	);
+}
diff --git a/app/admin/execs/page.tsx b/app/admin/execs/page.tsx
new file mode 100644
index 0000000..4f6479f
--- /dev/null
+++ b/app/admin/execs/page.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import Modal from "@/components/ui/modal";
+import { useState } from "react";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
+
+const currentExecs = [
+	{ name: "Alex Rivera", role: "President", contact: "alex@brock.ca" },
+	{ name: "Jordan Smith", role: "Vice President", contact: "jordan@brock.ca" },
+	{ name: "Casey Chen", role: "Treasurer", contact: "casey@brock.ca" },
+	{ name: "Taylor Morgan", role: "Secretary", contact: "taylor@brock.ca" },
+];
+
+const pastExecs = [
+	{ name: "Morgan Lee", role: "President", contact: "morgan@brock.ca" },
+	{ name: "Sam Patel", role: "Vice President", contact: "sam@brock.ca" },
+	{ name: "Jamie Fox", role: "Treasurer", contact: "jamie@brock.ca" },
+];
+
+export default function ExecutivesManagementPage() {
+		       const [showModal, setShowModal] = useState(false);
+		       const [showPast, setShowPast] = useState(false);
+		       return (
+			       <>
+				       <div>
+					       <h1 className="text-2xl font-bold mb-2">Executive Management</h1>
+					       <p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
+
+					       <div className="flex items-center gap-4 mb-6">
+						       <Button variant="primary" onClick={() => setShowModal(true)}>
+							       Add Executive
+						       </Button>
+					       </div>
+
+					       <div className="mb-10">
+						       <h2 className="text-lg font-bold mb-4">Current Executive</h2>
+						       <Table>
+							       <TableHeader>
+								       <TableRow>
+									       <TableHead>Name</TableHead>
+									       <TableHead>Role</TableHead>
+									       <TableHead>Contact</TableHead>
+									       <TableHead>Edit</TableHead>
+								       </TableRow>
+							       </TableHeader>
+							       <TableBody>
+								       {currentExecs.map((exec, idx) => (
+									       <TableRow key={idx}>
+										       <TableCell>{exec.name}</TableCell>
+										       <TableCell>{exec.role}</TableCell>
+										       <TableCell>{exec.contact}</TableCell>
+										       <TableCell>
+											       <Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+										       </TableCell>
+									       </TableRow>
+								       ))}
+							       </TableBody>
+						       </Table>
+						       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
+					       </div>
+
+					       <div className="mb-10 border-t-2 border-black pt-6">
+							   <button 
+									className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
+									onClick={() => setShowPast(!showPast)}
+								>
+									{showPast ? "Hide" : "Show"} Past Executives {showPast ? "▲" : "▼"}
+								</button>
+						       {showPast && (
+							       <div className="mt-4">
+								       <h2 className="text-lg font-bold mb-4">Past Executives</h2>
+								       <Table>
+									       <TableHeader>
+										       <TableRow>
+											       <TableHead>Name</TableHead>
+											       <TableHead>Role</TableHead>
+											       <TableHead>Contact</TableHead>
+											       <TableHead>Edit</TableHead>
+										       </TableRow>
+									       </TableHeader>
+									       <TableBody>
+										       {pastExecs.map((exec, idx) => (
+											       <TableRow key={idx}>
+												       <TableCell>{exec.name}</TableCell>
+												       <TableCell>{exec.role}</TableCell>
+												       <TableCell>{exec.contact}</TableCell>
+												       <TableCell>
+														   <Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+												       </TableCell>
+											       </TableRow>
+										       ))}
+									       </TableBody>
+								       </Table>
+								       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
+							       </div>
+						       )}
+					       </div>
+				       </div>
+				       <Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
+					       {/* Modal form for editing/adding executive details */}
+					       <form>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Full Name</label>
+							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Role / Title</label>
+							       <select className="w-full rounded border px-3 py-2">
+								       <option>Select Role</option>
+								       <option>President</option>
+								       <option>Vice President</option>
+								       <option>Treasurer</option>
+								       <option>Secretary</option>
+							       </select>
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Email</label>
+							       <input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Social URL</label>
+							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
+							       <input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
+						       </div>
+						       <div className="flex gap-4">
+							       <Button variant="primary" type="submit">Save Executive Member</Button>
+							       <Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
+								       Cancel
+							       </Button>
+						       </div>
+					       </form>
+				       </Modal>
+			       </>
+		       );
+		       return (
+			       <>
+				       <div>
+					       <h1 className="text-2xl font-bold mb-2">Executive Management</h1>
+					       <p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
+
+					       <div className="flex items-center gap-4 mb-6">
+						       <Button variant="primary" onClick={() => setShowModal(true)}>
+							       Add Executive
+						       </Button>
+					       </div>
+
+					       <div className="mb-10">
+						       <h2 className="text-lg font-bold mb-4">Current Executive</h2>
+						       <Table>
+							       <TableHeader>
+								       <TableRow>
+									       <TableHead>Name</TableHead>
+									       <TableHead>Role</TableHead>
+									       <TableHead>Contact</TableHead>
+									       <TableHead>Edit</TableHead>
+								       </TableRow>
+							       </TableHeader>
+							       <TableBody>
+								       {currentExecs.map((exec, idx) => (
+									       <TableRow key={idx}>
+										       <TableCell>{exec.name}</TableCell>
+										       <TableCell>{exec.role}</TableCell>
+										       <TableCell>{exec.contact}</TableCell>
+										       <TableCell>
+											       <Button variant="secondary" size="sm" onClick={() => setShowModal(true)}>Edit</Button>
+										       </TableCell>
+									       </TableRow>
+								       ))}
+							       </TableBody>
+						       </Table>
+						       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
+					       </div>
+
+					       <div className="mb-10">
+						       <Button variant="secondary" onClick={() => setShowPast(!showPast)}>
+							       {showPast ? "Hide" : "Show"} Past Executives
+						       </Button>
+						       {showPast && (
+							       <div className="mt-4">
+								       <h2 className="text-lg font-bold mb-4">Past Executives</h2>
+								       <Table>
+									       <TableHeader>
+										       <TableRow>
+											       <TableHead>Name</TableHead>
+											       <TableHead>Role</TableHead>
+											       <TableHead>Contact</TableHead>
+											       <TableHead>Edit</TableHead>
+										       </TableRow>
+									       </TableHeader>
+									       <TableBody>
+										       {pastExecs.map((exec, idx) => (
+											       <TableRow key={idx}>
+												       <TableCell>{exec.name}</TableCell>
+												       <TableCell>{exec.role}</TableCell>
+												       <TableCell>{exec.contact}</TableCell>
+												       <TableCell>
+													       <Button variant="secondary" size="sm" onClick={() => setShowModal(true)}>Edit</Button>
+												       </TableCell>
+											       </TableRow>
+										       ))}
+									       </TableBody>
+								       </Table>
+								       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
+							       </div>
+						       )}
+					       </div>
+				       </div>
+				       <Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
+					       {/* Modal form for editing/adding executive details */}
+					       <form>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Full Name</label>
+							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Role / Title</label>
+							       <select className="w-full rounded border px-3 py-2">
+								       <option>Select Role</option>
+								       <option>President</option>
+								       <option>Vice President</option>
+								       <option>Treasurer</option>
+								       <option>Secretary</option>
+							       </select>
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Email</label>
+							       <input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Social URL</label>
+							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
+						       </div>
+						       <div className="mb-4">
+							       <label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
+							       <input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
+						       </div>
+						       <div className="flex gap-4">
+							       <Button variant="primary" type="submit">Save Executive Member</Button>
+							       <Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
+								       Cancel
+							       </Button>
+						       </div>
+					       </form>
+				       </Modal>
+			       </>
+		       );
+			}
+											       
\ No newline at end of file
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
new file mode 100644
index 0000000..e7fb254
--- /dev/null
+++ b/app/admin/layout.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { getFirebaseClient } from "@/lib/firebase";
+import { GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from "firebase/auth";
+import { useEffect, useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import Link from "next/link";
+
+const adminTabs = [
+  { name: "Dashboard", href: "/admin" },
+  { name: "Events Management", href: "/admin/events" },
+  { name: "Executives Management", href: "/admin/execs" },
+];
+
+export default function AdminLayout({ children }: { children: React.ReactNode }) {
+  const { auth } = getFirebaseClient();
+  const router = useRouter();
+  const pathname = usePathname();
+  const [loading, setLoading] = useState(true);
+  const [user, setUser] = useState<any>(null);
+
+  // Authentication logic: Redirect to login if not authenticated, otherwise show admin layout
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      if (!user) {
+        try {
+          const provider = new GoogleAuthProvider();
+          await signInWithPopup(auth, provider);
+        } catch (error) {
+          console.error("Login failed:", error);
+          router.push("/");
+        }
+      } else {
+        setUser(user);
+        setLoading(false);
+      }
+    });
+    return () => unsubscribe();
+  }, [auth, router]);
+
+  if (loading) {
+    return <div className="py-32 text-center text-lg font-bold">Authenticating...</div>;
+  }
+
+
+  // Admin layout with navigation tabs and content area
+  return (
+    <div className="pt-8">
+      <div className="mx-auto w-full max-w-[1060px] px-5">
+        <div className="flex items-center justify-between mb-8">
+          <nav className="flex gap-2">
+            {adminTabs.map((tab) => {
+              const isActive =
+                tab.href === "/admin"
+                  ? pathname === "/admin"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.name}
+                  href={tab.href}
+                  className={`px-4 py-2 rounded-[12px] font-semibold border-2 border-transparent transition-colors ${
+                    isActive ? "border-[#9A4440] text-[#9A4440] bg-[#fff1f0]" : "text-black hover:bg-neutral-100"
+                  }`}
+                >
+                  {tab.name}
+                </Link>
+              );
+            })}
+          </nav>
+          <div className="flex items-center gap-3">
+            {/* TODO: Add signout button */}
+            {/* Optionally add sign out button here */}
+          </div>
+        </div>
+        <div className="p-8">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 2f0878f..83bfaba 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,40 +1,41 @@
 "use client";
 
-import { getFirebaseClient } from "@/lib/firebase";
-import {
-  GoogleAuthProvider,
-  onAuthStateChanged,
-  signInWithPopup,
-} from "firebase/auth";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import Card from "@/components/ui/card";
+import { UpcomingEventsSection } from "@/components/sections/upcoming-events";
+import Link from "next/link";
 
 export default function AdminPage() {
-  const { auth } = getFirebaseClient();
-  const router = useRouter();
-  const [loading, setLoading] = useState(true);
+  return (
+    <div>
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">Admin Dashboard</h1>
+          <p className="text-neutral-500 mb-6">Welcome back!</p>
 
-  useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, async (user) => {
-        if (!user) {
-            try {
-                const provider = new GoogleAuthProvider();
-                await signInWithPopup(auth, provider);
-            } catch (error) {
-            console.error("Login failed:", error);
-            router.push("/"); // if login fails
-            }
-        } else {
-            setLoading(false);
-        }
-    });
+          <div className="grid grid-cols-1 md:grid-cols-2 mb-8 gap-6">
+            <Card>
+              <div className="flex flex-col items-start w-full">
+                <span className="text-xs font-semibold text-neutral-500 mb-2">WEBSITE VISITS</span>
+                <span className="text-2xl font-bold mb-1">2.4k</span>
+                <span className="text-green-600 text-sm font-medium">↑ +12% this month</span>
+              </div>
+            </Card>
+            <div className="flex flex-col gap-4 mb-10 h-full justify-center">
+            <Button asChild variant="primary" className="w-full md:w-auto">
+              <Link href="/admin/events">+ Create New Event</Link>
+            </Button>
+            <Button asChild variant="secondary" className="w-full md:w-auto">
+              <Link href="/admin/execs">+ Add New Executive</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
 
-    return () => unsubscribe();
-  }, [auth, router]);
-
-  if (loading) {
-    return <p>Authenticating...</p>;
-  }
-
-  return <h1>Admin Dashboard</h1>;
+      <div>
+        <h1 className="text-3xl font-bold mb-2">Upcoming Events</h1>
+        <p className="text-neutral-500 mb-6">Click to edit an event</p>
+        {/* Add an easily editable upcoming/recurring events section here. */}
+      </div>
+    </div>
+  );
 }
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
new file mode 100644
index 0000000..550453e
--- /dev/null
+++ b/components/ui/modal.tsx
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Button } from "./button";
+
+export default function Modal({ open, onClose, title, children }: {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}) {
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-1 flex items-center justify-center bg-black/30">
+      <div className="bg-white rounded-2xl border-2 border-black shadow-[4px_4px_0px_#9A4440] p-6 max-w-xl w-full max-h-[80vh] overflow-y-auto relative">
+        {title && <h2 className="text-lg font-bold mb-4">{title}</h2>}
+        <button
+          className="absolute top-4 right-4 text-black font-bold text-xl border-2 border-black rounded-full w-8 h-8 flex items-center justify-center bg-neutral-100 hover:bg-neutral-200"
+          onClick={() => onClose()}
+          aria-label="Close modal"
+        >
+          ×
+        </button>
+        <>{children}</>
+      </div>
+    </div>
+  );
+}

From e1396e1819d9eb6e879ac49421cd4b9694218015 Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 15 Mar 2026 13:00:06 -0400
Subject: [PATCH 2/7] fix: remove unreachable statements

---
 app/admin/execs/page.tsx | 344 +++++++++++++--------------------------
 1 file changed, 116 insertions(+), 228 deletions(-)

diff --git a/app/admin/execs/page.tsx b/app/admin/execs/page.tsx
index 4f6479f..f5e3573 100644
--- a/app/admin/execs/page.tsx
+++ b/app/admin/execs/page.tsx
@@ -19,234 +19,122 @@ const pastExecs = [
 ];
 
 export default function ExecutivesManagementPage() {
-		       const [showModal, setShowModal] = useState(false);
-		       const [showPast, setShowPast] = useState(false);
-		       return (
-			       <>
-				       <div>
-					       <h1 className="text-2xl font-bold mb-2">Executive Management</h1>
-					       <p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
+	const [showModal, setShowModal] = useState(false);
+	const [showPast, setShowPast] = useState(false);
+	
+	return (
+		<>
+			<div>
+				<h1 className="text-2xl font-bold mb-2">Executive Management</h1>
+				<p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
 
-					       <div className="flex items-center gap-4 mb-6">
-						       <Button variant="primary" onClick={() => setShowModal(true)}>
-							       Add Executive
-						       </Button>
-					       </div>
+				<div className="flex items-center gap-4 mb-6">
+					<Button variant="primary" onClick={() => setShowModal(true)}>
+						Add Executive
+					</Button>
+				</div>
 
-					       <div className="mb-10">
-						       <h2 className="text-lg font-bold mb-4">Current Executive</h2>
-						       <Table>
-							       <TableHeader>
-								       <TableRow>
-									       <TableHead>Name</TableHead>
-									       <TableHead>Role</TableHead>
-									       <TableHead>Contact</TableHead>
-									       <TableHead>Edit</TableHead>
-								       </TableRow>
-							       </TableHeader>
-							       <TableBody>
-								       {currentExecs.map((exec, idx) => (
-									       <TableRow key={idx}>
-										       <TableCell>{exec.name}</TableCell>
-										       <TableCell>{exec.role}</TableCell>
-										       <TableCell>{exec.contact}</TableCell>
-										       <TableCell>
-											       <Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
-										       </TableCell>
-									       </TableRow>
-								       ))}
-							       </TableBody>
-						       </Table>
-						       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
-					       </div>
+				<div className="mb-10">
+					<h2 className="text-lg font-bold mb-4">Current Executive</h2>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Name</TableHead>
+								<TableHead>Role</TableHead>
+								<TableHead>Contact</TableHead>
+								<TableHead>Edit</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{currentExecs.map((exec, idx) => (
+								<TableRow key={idx}>
+									<TableCell>{exec.name}</TableCell>
+									<TableCell>{exec.role}</TableCell>
+									<TableCell>{exec.contact}</TableCell>
+									<TableCell>
+										<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+					<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
+				</div>
 
-					       <div className="mb-10 border-t-2 border-black pt-6">
-							   <button 
-									className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
-									onClick={() => setShowPast(!showPast)}
-								>
-									{showPast ? "Hide" : "Show"} Past Executives {showPast ? "▲" : "▼"}
-								</button>
-						       {showPast && (
-							       <div className="mt-4">
-								       <h2 className="text-lg font-bold mb-4">Past Executives</h2>
-								       <Table>
-									       <TableHeader>
-										       <TableRow>
-											       <TableHead>Name</TableHead>
-											       <TableHead>Role</TableHead>
-											       <TableHead>Contact</TableHead>
-											       <TableHead>Edit</TableHead>
-										       </TableRow>
-									       </TableHeader>
-									       <TableBody>
-										       {pastExecs.map((exec, idx) => (
-											       <TableRow key={idx}>
-												       <TableCell>{exec.name}</TableCell>
-												       <TableCell>{exec.role}</TableCell>
-												       <TableCell>{exec.contact}</TableCell>
-												       <TableCell>
-														   <Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
-												       </TableCell>
-											       </TableRow>
-										       ))}
-									       </TableBody>
-								       </Table>
-								       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
-							       </div>
-						       )}
-					       </div>
-				       </div>
-				       <Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
-					       {/* Modal form for editing/adding executive details */}
-					       <form>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Full Name</label>
-							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Role / Title</label>
-							       <select className="w-full rounded border px-3 py-2">
-								       <option>Select Role</option>
-								       <option>President</option>
-								       <option>Vice President</option>
-								       <option>Treasurer</option>
-								       <option>Secretary</option>
-							       </select>
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Email</label>
-							       <input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Social URL</label>
-							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
-							       <input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
-						       </div>
-						       <div className="flex gap-4">
-							       <Button variant="primary" type="submit">Save Executive Member</Button>
-							       <Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
-								       Cancel
-							       </Button>
-						       </div>
-					       </form>
-				       </Modal>
-			       </>
-		       );
-		       return (
-			       <>
-				       <div>
-					       <h1 className="text-2xl font-bold mb-2">Executive Management</h1>
-					       <p className="text-neutral-500 mb-6">Central dashboard to oversee the executive team, update roles, and add new executive members for the Brock Computer Science Club.</p>
-
-					       <div className="flex items-center gap-4 mb-6">
-						       <Button variant="primary" onClick={() => setShowModal(true)}>
-							       Add Executive
-						       </Button>
-					       </div>
-
-					       <div className="mb-10">
-						       <h2 className="text-lg font-bold mb-4">Current Executive</h2>
-						       <Table>
-							       <TableHeader>
-								       <TableRow>
-									       <TableHead>Name</TableHead>
-									       <TableHead>Role</TableHead>
-									       <TableHead>Contact</TableHead>
-									       <TableHead>Edit</TableHead>
-								       </TableRow>
-							       </TableHeader>
-							       <TableBody>
-								       {currentExecs.map((exec, idx) => (
-									       <TableRow key={idx}>
-										       <TableCell>{exec.name}</TableCell>
-										       <TableCell>{exec.role}</TableCell>
-										       <TableCell>{exec.contact}</TableCell>
-										       <TableCell>
-											       <Button variant="secondary" size="sm" onClick={() => setShowModal(true)}>Edit</Button>
-										       </TableCell>
-									       </TableRow>
-								       ))}
-							       </TableBody>
-						       </Table>
-						       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{currentExecs.length} active members</div>
-					       </div>
-
-					       <div className="mb-10">
-						       <Button variant="secondary" onClick={() => setShowPast(!showPast)}>
-							       {showPast ? "Hide" : "Show"} Past Executives
-						       </Button>
-						       {showPast && (
-							       <div className="mt-4">
-								       <h2 className="text-lg font-bold mb-4">Past Executives</h2>
-								       <Table>
-									       <TableHeader>
-										       <TableRow>
-											       <TableHead>Name</TableHead>
-											       <TableHead>Role</TableHead>
-											       <TableHead>Contact</TableHead>
-											       <TableHead>Edit</TableHead>
-										       </TableRow>
-									       </TableHeader>
-									       <TableBody>
-										       {pastExecs.map((exec, idx) => (
-											       <TableRow key={idx}>
-												       <TableCell>{exec.name}</TableCell>
-												       <TableCell>{exec.role}</TableCell>
-												       <TableCell>{exec.contact}</TableCell>
-												       <TableCell>
-													       <Button variant="secondary" size="sm" onClick={() => setShowModal(true)}>Edit</Button>
-												       </TableCell>
-											       </TableRow>
-										       ))}
-									       </TableBody>
-								       </Table>
-								       <div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
-							       </div>
-						       )}
-					       </div>
-				       </div>
-				       <Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
-					       {/* Modal form for editing/adding executive details */}
-					       <form>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Full Name</label>
-							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Role / Title</label>
-							       <select className="w-full rounded border px-3 py-2">
-								       <option>Select Role</option>
-								       <option>President</option>
-								       <option>Vice President</option>
-								       <option>Treasurer</option>
-								       <option>Secretary</option>
-							       </select>
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Email</label>
-							       <input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Social URL</label>
-							       <input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
-						       </div>
-						       <div className="mb-4">
-							       <label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
-							       <input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
-						       </div>
-						       <div className="flex gap-4">
-							       <Button variant="primary" type="submit">Save Executive Member</Button>
-							       <Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
-								       Cancel
-							       </Button>
-						       </div>
-					       </form>
-				       </Modal>
-			       </>
-		       );
-			}
-											       
\ No newline at end of file
+				<div className="mb-10 border-t-2 border-black pt-6">
+					<button 
+						className="flex items-center gap-2 text-xl font-bold mb-4 hover:opacity-80 transition-opacity"
+						onClick={() => setShowPast(!showPast)}
+					>
+						{showPast ? "Hide" : "Show"} Past Executives {showPast ? "▲" : "▼"}
+					</button>
+					{showPast && (
+						<div className="mt-4">
+							<h2 className="text-lg font-bold mb-4">Past Executives</h2>
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Name</TableHead>
+										<TableHead>Role</TableHead>
+										<TableHead>Contact</TableHead>
+										<TableHead>Edit</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{pastExecs.map((exec, idx) => (
+										<TableRow key={idx}>
+											<TableCell>{exec.name}</TableCell>
+											<TableCell>{exec.role}</TableCell>
+											<TableCell>{exec.contact}</TableCell>
+											<TableCell>
+												<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+							<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
+						</div>
+					)}
+				</div>
+			</div>
+			<Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
+				{/* Modal form for editing/adding executive details */}
+				<form>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Full Name</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="John Doe" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Role / Title</label>
+						<select className="w-full rounded border px-3 py-2">
+							<option>Select Role</option>
+							<option>President</option>
+							<option>Vice President</option>
+							<option>Treasurer</option>
+							<option>Secretary</option>
+						</select>
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Email</label>
+						<input type="email" className="w-full rounded border px-3 py-2" placeholder="edu@brock.ca" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Social URL</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="Linkedin or Portfolio" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Profile Photo URL</label>
+						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/photo.png" />
+					</div>
+					<div className="flex gap-4">
+						<Button variant="primary" type="submit">Save Executive Member</Button>
+						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>
+							Cancel
+						</Button>
+					</div>
+				</form>
+			</Modal>
+		</>
+	);
+}
\ No newline at end of file

From 965617f6221da3b97a4df4b579fd4c52a62f2f74 Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 15 Mar 2026 13:03:41 -0400
Subject: [PATCH 3/7] fix: remove unused imports

---
 app/admin/page.tsx      | 1 -
 components/ui/modal.tsx | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 83bfaba..80a7bb6 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -2,7 +2,6 @@
 
 import { Button } from "@/components/ui/button";
 import Card from "@/components/ui/card";
-import { UpcomingEventsSection } from "@/components/sections/upcoming-events";
 import Link from "next/link";
 
 export default function AdminPage() {
diff --git a/components/ui/modal.tsx b/components/ui/modal.tsx
index 550453e..f736975 100644
--- a/components/ui/modal.tsx
+++ b/components/ui/modal.tsx
@@ -1,6 +1,3 @@
-import { useState } from "react";
-import { Button } from "./button";
-
 export default function Modal({ open, onClose, title, children }: {
   open: boolean;
   onClose: () => void;

From 9e4590bc8ede192a9ff3ed1feb4b7f7952ae8a4d Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 29 Mar 2026 21:15:04 -0400
Subject: [PATCH 4/7] feat: add displayButton variant to event-card

---
 app/admin/layout.tsx                 | 1 -
 app/events/components/event-card.tsx | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index e7fb254..ff10df5 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -42,7 +42,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
     return <div className="py-32 text-center text-lg font-bold">Authenticating...</div>;
   }
 
-
   // Admin layout with navigation tabs and content area
   return (
     <div className="pt-8">
diff --git a/app/events/components/event-card.tsx b/app/events/components/event-card.tsx
index 6644083..a360718 100644
--- a/app/events/components/event-card.tsx
+++ b/app/events/components/event-card.tsx
@@ -67,10 +67,12 @@ export function EventCard({
   event,
   variant,
   nowTimestamp,
+  displayButton = true,
 }: {
   event: EventItem;
   variant: EventVariant;
   nowTimestamp?: number;
+  displayButton?: boolean;
 }) {
   const hasImage = Boolean(event.image?.url);
   const imageSrc = event.image?.url || EMPTY_IMAGE;
@@ -222,7 +224,7 @@ export function EventCard({
               </Badge>
             </div>
 
-            <div
+            {displayButton && <div
               className={
                 variant === "upcoming"
                   ? "mt-2.5"
@@ -236,7 +238,7 @@ export function EventCard({
                   {variant === "ongoing" ? "Happening Now" : "Learn More"}
                 </Link>
               </Button>
-            </div>
+            </div>}
           </div>
         )}
       </div>

From 4979528665c58e750606ada8948e9966545d26bf Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 29 Mar 2026 21:17:10 -0400
Subject: [PATCH 5/7] feat: use firebase to display data in admin panel

---
 app/admin/events/[id]/page.tsx   |   0
 app/admin/events/eventsModel.tsx |  45 ++++++++++
 app/admin/events/page.tsx        | 138 ++++++++++++++-----------------
 app/admin/execs/page.tsx         | 107 ++++++++++++++++++------
 app/admin/page.tsx               |  65 ++++++++++++++-
 lib/firebase/realtime.ts         |   2 +-
 6 files changed, 255 insertions(+), 102 deletions(-)
 delete mode 100644 app/admin/events/[id]/page.tsx
 create mode 100644 app/admin/events/eventsModel.tsx

diff --git a/app/admin/events/[id]/page.tsx b/app/admin/events/[id]/page.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/app/admin/events/eventsModel.tsx b/app/admin/events/eventsModel.tsx
new file mode 100644
index 0000000..b32fad6
--- /dev/null
+++ b/app/admin/events/eventsModel.tsx
@@ -0,0 +1,45 @@
+import { Button } from "@/components/ui/button";
+import Modal from "@/components/ui/modal";
+
+export default function EventModal({ showModal, setShowModal } : { showModal: boolean; setShowModal: (value: boolean) => void }) {
+    return (
+        <Modal open={showModal} onClose={() => setShowModal(false)} title="Add New Event">
+				<form>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Event Title</label>
+						<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. Intro to Python Workshop" />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Description</label>
+						<textarea className="w-full rounded border px-3 py-2" placeholder="Describe the event goals and requirements..." />
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Poster Photo URL</label>
+						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/poster.png" />
+					</div>
+					<div className="flex gap-4 mb-4">
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Date & Time</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="mm/dd/yyyy, --:-- --" />
+						</div>
+						<div className="flex-1">
+							<label className="block text-sm font-semibold mb-1">Location</label>
+							<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. MC 402 or Zoom Link" />
+						</div>
+					</div>
+					<div className="mb-4">
+						<label className="block text-sm font-semibold mb-1">Recurring</label>
+						<select className="w-full rounded border px-3 py-2">
+							<option>None</option>
+							<option>Weekly</option>
+							<option>Monthly</option>
+						</select>
+					</div>
+					<div className="flex gap-4">
+						<Button variant="primary" type="submit">Create Event</Button>
+						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>Cancel</Button>
+					</div>
+				</form>
+		</Modal>
+    );
+}
\ No newline at end of file
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
index c7e9214..e392f72 100644
--- a/app/admin/events/page.tsx
+++ b/app/admin/events/page.tsx
@@ -2,27 +2,70 @@
 
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
 import { Button } from "@/components/ui/button";
-import Modal from "@/components/ui/modal";
-import { useState } from "react";
+import EventModal from "./eventsModel";
+import { useEffect, useMemo, useState } from "react";
+import { EventRecord, fetchAllEvents, WithKey } from "@/lib/firebase";
+import { classifyEventsByTiming } from "@/lib/events/classify";
 
 export default function EventsManagementPage() {
+	type EventItem = WithKey<EventRecord>;
+	
 	const [showModal, setShowModal] = useState(false);
 	const [showPastEvents, setShowPastEvents] = useState(false);
-	// Dummy event data
-	const upcomingEvents = [
-		{ title: "Algorithm Workshop", date: "Oct 24, 2023", time: "5:00 PM", location: "ST 102", status: "Upcoming", type: "Upcoming" },
-		{ title: "Gaming Night", date: "Oct 28, 2023", time: "7:00 PM", location: "Union Hall", status: "Draft", type: "Upcoming" },
-		{ title: "Career Fair prep", date: "Nov 05, 2023", time: "10:00 AM", location: "Computer Lab 3", status: "Confirmed", type: "Upcoming" },
-	];
-	const recurringEvents = [
-		{ title: "Weekly Coding Session", date: "Every Friday", time: "4:00 PM", location: "ST 105", status: "Active", type: "Recurring" },
-		{ title: "Monthly Meetup", date: "First Monday", time: "6:00 PM", location: "Room 200", status: "Active", type: "Recurring" },
-	];
-	const pastEvents = [
-		{ title: "Welcome Day 2022", date: "Sep 05, 2022", time: "1:00 PM", location: "Field", status: "Completed", type: "Past" },
-		{ title: "Spring Hackathon", date: "Mar 12, 2023", time: "9:00 AM", location: "Gym", status: "Completed", type: "Past" },
-	];
 
+	const [events, setEvents] = useState<EventItem[]>([]);
+	const [nowTimestamp, setNowTimestamp] = useState(() => Date.now());
+
+	useEffect(() => {
+	let active = true;
+
+	const load = async () => {
+			try {
+			const allEvents = await fetchAllEvents();
+			if (!active) {
+				return;
+			}
+			setEvents(allEvents);
+			} catch {
+			if (!active) {
+				return;
+			}
+			console.error("Error loading events:");
+			}
+		};
+		
+		void load();
+			return () => {
+			active = false;
+		};
+	}, []);
+
+	const { upcoming, recurring, past } = useMemo(
+		() => {
+				let ongoing, upcoming, past;
+				({ ongoing, upcoming, past } = classifyEventsByTiming(events, nowTimestamp));
+
+				upcoming = upcoming.concat(ongoing);
+				let recurring = upcoming.filter(event => event.schedule?.recurrence);
+				upcoming = upcoming.filter(event => !event.schedule?.recurrence);
+			
+
+			return { upcoming, recurring, past };
+		},
+		[events, nowTimestamp]
+	);
+
+	const adaptEventForDisplay = (event: EventItem) => ({
+		title: event.title,
+		date: event.schedule?.startDate,
+		time: event.schedule?.startTime,
+		location: event.location?.split(",")[0],
+	});
+
+	const upcomingEvents = upcoming.map((event) => adaptEventForDisplay(event));
+	const recurringEvents = recurring.map((event) => adaptEventForDisplay(event));
+	const pastEvents = past.map((event) => adaptEventForDisplay(event));
+	
 	return (
 		<div>
 			<h1 className="text-2xl font-bold mb-2">Events Management</h1>
@@ -41,7 +84,6 @@ export default function EventsManagementPage() {
 							<TableHead>Date</TableHead>
 							<TableHead>Time</TableHead>
 							<TableHead>Location</TableHead>
-							<TableHead>Status</TableHead>
 							<TableHead>Actions</TableHead>
 						</TableRow>
 					</TableHeader>
@@ -52,15 +94,6 @@ export default function EventsManagementPage() {
 								<TableCell>{event.date}</TableCell>
 								<TableCell>{event.time}</TableCell>
 								<TableCell>{event.location}</TableCell>
-								<TableCell>
-									<span className={`px-2 py-1 rounded text-xs font-semibold ${
-										event.status === "Upcoming" ? "bg-blue-100 text-blue-700" :
-										event.status === "Draft" ? "bg-neutral-200 text-neutral-700" :
-										"bg-green-100 text-green-700"
-									}`}>
-										{event.status}
-									</span>
-								</TableCell>
 								<TableCell>
 									<Button variant="link" size="sm">EDIT</Button>
 								</TableCell>
@@ -79,7 +112,6 @@ export default function EventsManagementPage() {
 							<TableHead>Date</TableHead>
 							<TableHead>Time</TableHead>
 							<TableHead>Location</TableHead>
-							<TableHead>Status</TableHead>
 							<TableHead>Actions</TableHead>
 						</TableRow>
 					</TableHeader>
@@ -90,11 +122,6 @@ export default function EventsManagementPage() {
 								<TableCell>{event.date}</TableCell>
 								<TableCell>{event.time}</TableCell>
 								<TableCell>{event.location}</TableCell>
-								<TableCell>
-									<span className="px-2 py-1 rounded text-xs font-semibold bg-purple-100 text-purple-700">
-										{event.status}
-									</span>
-								</TableCell>
 								<TableCell>
 									<Button variant="link" size="sm">EDIT</Button>
 								</TableCell>
@@ -120,7 +147,6 @@ export default function EventsManagementPage() {
 								<TableHead>Date</TableHead>
 								<TableHead>Time</TableHead>
 								<TableHead>Location</TableHead>
-								<TableHead>Status</TableHead>
 								<TableHead>Actions</TableHead>
 							</TableRow>
 						</TableHeader>
@@ -131,11 +157,6 @@ export default function EventsManagementPage() {
 									<TableCell>{event.date}</TableCell>
 									<TableCell>{event.time}</TableCell>
 									<TableCell>{event.location}</TableCell>
-									<TableCell>
-										<span className="px-2 py-1 rounded text-xs font-semibold bg-neutral-200 text-neutral-700">
-											{event.status}
-										</span>
-									</TableCell>
 									<TableCell>
 										<Button variant="link" size="sm">EDIT</Button>
 									</TableCell>
@@ -146,44 +167,7 @@ export default function EventsManagementPage() {
 				)}
 			</div>
 
-			<Modal open={showModal} onClose={() => setShowModal(false)} title="Add New Event">
-				<form>
-					<div className="mb-4">
-						<label className="block text-sm font-semibold mb-1">Event Title</label>
-						<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. Intro to Python Workshop" />
-					</div>
-					<div className="mb-4">
-						<label className="block text-sm font-semibold mb-1">Description</label>
-						<textarea className="w-full rounded border px-3 py-2" placeholder="Describe the event goals and requirements..." />
-					</div>
-					<div className="mb-4">
-						<label className="block text-sm font-semibold mb-1">Poster Photo URL</label>
-						<input type="url" className="w-full rounded border px-3 py-2" placeholder="https://example.com/poster.png" />
-					</div>
-					<div className="flex gap-4 mb-4">
-						<div className="flex-1">
-							<label className="block text-sm font-semibold mb-1">Date & Time</label>
-							<input type="text" className="w-full rounded border px-3 py-2" placeholder="mm/dd/yyyy, --:-- --" />
-						</div>
-						<div className="flex-1">
-							<label className="block text-sm font-semibold mb-1">Location</label>
-							<input type="text" className="w-full rounded border px-3 py-2" placeholder="e.g. MC 402 or Zoom Link" />
-						</div>
-					</div>
-					<div className="mb-4">
-						<label className="block text-sm font-semibold mb-1">Recurring</label>
-						<select className="w-full rounded border px-3 py-2">
-							<option>None</option>
-							<option>Weekly</option>
-							<option>Monthly</option>
-						</select>
-					</div>
-					<div className="flex gap-4">
-						<Button variant="primary" type="submit">Create Event</Button>
-						<Button variant="secondary" type="button" onClick={() => setShowModal(false)}>Cancel</Button>
-					</div>
-				</form>
-			</Modal>
+			{showModal && <EventModal showModal={showModal} setShowModal={setShowModal} />}
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/app/admin/execs/page.tsx b/app/admin/execs/page.tsx
index f5e3573..5c4a974 100644
--- a/app/admin/execs/page.tsx
+++ b/app/admin/execs/page.tsx
@@ -2,25 +2,91 @@
 
 import { Button } from "@/components/ui/button";
 import Modal from "@/components/ui/modal";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
+import { ExecRecord, fetchCurrentExecs, fetchPreviousExecs, WithKey } from "@/lib/firebase";
 
-const currentExecs = [
-	{ name: "Alex Rivera", role: "President", contact: "alex@brock.ca" },
-	{ name: "Jordan Smith", role: "Vice President", contact: "jordan@brock.ca" },
-	{ name: "Casey Chen", role: "Treasurer", contact: "casey@brock.ca" },
-	{ name: "Taylor Morgan", role: "Secretary", contact: "taylor@brock.ca" },
-];
+type TeamMember = WithKey<ExecRecord>;
 
-const pastExecs = [
-	{ name: "Morgan Lee", role: "President", contact: "morgan@brock.ca" },
-	{ name: "Sam Patel", role: "Vice President", contact: "sam@brock.ca" },
-	{ name: "Jamie Fox", role: "Treasurer", contact: "jamie@brock.ca" },
-];
+const UNKNOWN_ROLE_PRIORITY = Number.MAX_SAFE_INTEGER;
+
+const ROLE_PRIORITY: Record<string, number> = {
+  president: 1,
+  "vice president": 2,
+  "co-president": 3,
+  treasurer: 4,
+  executive: 5,
+};
+
+const getRolePriority = (title?: string): number => {
+  const normalizedTitle = title?.trim().toLowerCase() ?? "";
+  return ROLE_PRIORITY[normalizedTitle] ?? UNKNOWN_ROLE_PRIORITY;
+};
+
+const sortCurrentExecsByRoleThenDatabaseOrder = (members: TeamMember[]): TeamMember[] => {
+  const orderByKey = new Map<string, number>();
+  members.forEach((member, index) => {
+    orderByKey.set(member.$key, index);
+  });
+
+  return [...members].sort((a, b) => {
+    const byRole = getRolePriority(a.title) - getRolePriority(b.title);
+    if (byRole !== 0) {
+      return byRole;
+    }
+
+    const aOrder = orderByKey.get(a.$key) ?? 0;
+    const bOrder = orderByKey.get(b.$key) ?? 0;
+    return aOrder - bOrder;
+  });
+};
 
 export default function ExecutivesManagementPage() {
-	const [showModal, setShowModal] = useState(false);
-	const [showPast, setShowPast] = useState(false);
+	  const [currentExecs, setCurrentExecs] = useState<TeamMember[]>([]);
+	  const [previousExecs, setPreviousExecs] = useState<TeamMember[]>([]);
+	  const [loading, setLoading] = useState(true);
+	  const [error, setError] = useState<string | null>(null);
+	  const [showModal, setShowModal] = useState(false);
+	  const [showPast, setShowPast] = useState(false);
+	
+	  useEffect(() => {
+		let active = true;
+	
+		const loadTeam = async () => {
+		  setLoading(true);
+		  setError(null);
+	
+		  try {
+			const [current, previous] = await Promise.all([
+			  fetchCurrentExecs(),
+			  fetchPreviousExecs(),
+			]);
+	
+			if (!active) {
+			  return;
+			}
+	
+			setCurrentExecs(sortCurrentExecsByRoleThenDatabaseOrder(current));
+			setPreviousExecs(previous);
+		  } catch {
+			if (!active) {
+			  return;
+			}
+			setError("Could not load team members right now.");
+		  } finally {
+			if (active) {
+			  setLoading(false);
+			}
+		  }
+		};
+	
+		void loadTeam();
+	
+		return () => {
+		  active = false;
+		};
+	  }, []);
+	
 	
 	return (
 		<>
@@ -41,7 +107,6 @@ export default function ExecutivesManagementPage() {
 							<TableRow>
 								<TableHead>Name</TableHead>
 								<TableHead>Role</TableHead>
-								<TableHead>Contact</TableHead>
 								<TableHead>Edit</TableHead>
 							</TableRow>
 						</TableHeader>
@@ -49,8 +114,7 @@ export default function ExecutivesManagementPage() {
 							{currentExecs.map((exec, idx) => (
 								<TableRow key={idx}>
 									<TableCell>{exec.name}</TableCell>
-									<TableCell>{exec.role}</TableCell>
-									<TableCell>{exec.contact}</TableCell>
+									<TableCell>{exec.title}</TableCell>
 									<TableCell>
 										<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
 									</TableCell>
@@ -76,16 +140,14 @@ export default function ExecutivesManagementPage() {
 									<TableRow>
 										<TableHead>Name</TableHead>
 										<TableHead>Role</TableHead>
-										<TableHead>Contact</TableHead>
 										<TableHead>Edit</TableHead>
 									</TableRow>
 								</TableHeader>
 								<TableBody>
-									{pastExecs.map((exec, idx) => (
+									{previousExecs.map((exec, idx) => (
 										<TableRow key={idx}>
 											<TableCell>{exec.name}</TableCell>
-											<TableCell>{exec.role}</TableCell>
-											<TableCell>{exec.contact}</TableCell>
+											<TableCell>{exec.title}</TableCell>
 											<TableCell>
 												<Button variant="link" size="sm" onClick={() => setShowModal(true)}>EDIT</Button>
 											</TableCell>
@@ -93,13 +155,12 @@ export default function ExecutivesManagementPage() {
 									))}
 								</TableBody>
 							</Table>
-							<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{pastExecs.length} past members</div>
+							<div className="mt-2 text-right text-xs text-neutral-500 font-semibold">{previousExecs.length} past members</div>
 						</div>
 					)}
 				</div>
 			</div>
 			<Modal open={showModal} onClose={() => setShowModal(false)} title="Edit Executive">
-				{/* Modal form for editing/adding executive details */}
 				<form>
 					<div className="mb-4">
 						<label className="block text-sm font-semibold mb-1">Full Name</label>
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 80a7bb6..fca7186 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -2,9 +2,58 @@
 
 import { Button } from "@/components/ui/button";
 import Card from "@/components/ui/card";
+import { EventCard } from "../events/components/event-card";
+import { EventRecord, fetchFutureEvents, WithKey } from "@/lib/firebase";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
 export default function AdminPage() {
+
+  type EventItem = WithKey<EventRecord>;
+    
+    const [showModal, setShowModal] = useState(false);
+    const [showPastEvents, setShowPastEvents] = useState(false);
+
+    const [futureEvents, setFutureEvents] = useState<EventItem[]>([]);
+    const [nowTimestamp, setNowTimestamp] = useState(() => Date.now());
+
+    useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+        try {
+        const futureEventsRaw = await fetchFutureEvents();
+        if (!active) {
+          return;
+        }
+        setFutureEvents(futureEventsRaw);
+        } catch {
+        if (!active) {
+          return;
+        }
+        console.error("Error loading events:");
+        }
+      };
+      
+      void load();
+        return () => {
+        active = false;
+      };
+  }, []);
+
+  const adaptEventForDisplay = (event: EventItem) => ({
+		title: event.title,
+		date: event.schedule?.startDate,
+		time: event.schedule?.startTime,
+		location: event.location?.split(",")[0],  
+    description: event.description,
+    image: event.image,
+	});
+
+  const events = futureEvents.map(adaptEventForDisplay);
+
+  console.log(events)
+
   return (
     <div>
         <div className="mb-8">
@@ -33,7 +82,21 @@ export default function AdminPage() {
       <div>
         <h1 className="text-3xl font-bold mb-2">Upcoming Events</h1>
         <p className="text-neutral-500 mb-6">Click to edit an event</p>
-        {/* Add an easily editable upcoming/recurring events section here. */}
+        {events.length === 0 ? (
+          <div className="text-center text-neutral-500 py-20">No upcoming events found.</div>
+        ) : (
+          <div className="grid gap-6">
+            {futureEvents.map((event, index) => (
+               <EventCard
+                event={event}
+                key={event.$key}
+                nowTimestamp={nowTimestamp}
+                variant="upcoming"
+                displayButton={false}
+              />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/lib/firebase/realtime.ts b/lib/firebase/realtime.ts
index be99000..6963105 100644
--- a/lib/firebase/realtime.ts
+++ b/lib/firebase/realtime.ts
@@ -128,4 +128,4 @@ export const fetchAllDscCards = async (): Promise<WithKey<DscCardRecord>[]> =>
   fetchList<DscCardRecord>('/dsc');
 
 export const fetchAllFoodItems = async (): Promise<WithKey<FoodRecord>[]> =>
-  fetchList<FoodRecord>('/food', [orderByChild('section')]);
+  fetchList<FoodRecord>('/food', [orderByChild('section')]);
\ No newline at end of file

From 3e5cb22b28b0cb178b102f246ff737fa70af0646 Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 29 Mar 2026 21:22:40 -0400
Subject: [PATCH 6/7] chore: remove unused variables

---
 app/admin/execs/page.tsx | 10 +---------
 app/admin/layout.tsx     |  2 --
 app/admin/page.tsx       | 27 +++++++++++----------------
 3 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/app/admin/execs/page.tsx b/app/admin/execs/page.tsx
index 5c4a974..7671856 100644
--- a/app/admin/execs/page.tsx
+++ b/app/admin/execs/page.tsx
@@ -44,8 +44,6 @@ const sortCurrentExecsByRoleThenDatabaseOrder = (members: TeamMember[]): TeamMem
 export default function ExecutivesManagementPage() {
 	  const [currentExecs, setCurrentExecs] = useState<TeamMember[]>([]);
 	  const [previousExecs, setPreviousExecs] = useState<TeamMember[]>([]);
-	  const [loading, setLoading] = useState(true);
-	  const [error, setError] = useState<string | null>(null);
 	  const [showModal, setShowModal] = useState(false);
 	  const [showPast, setShowPast] = useState(false);
 	
@@ -53,8 +51,6 @@ export default function ExecutivesManagementPage() {
 		let active = true;
 	
 		const loadTeam = async () => {
-		  setLoading(true);
-		  setError(null);
 	
 		  try {
 			const [current, previous] = await Promise.all([
@@ -72,11 +68,7 @@ export default function ExecutivesManagementPage() {
 			if (!active) {
 			  return;
 			}
-			setError("Could not load team members right now.");
-		  } finally {
-			if (active) {
-			  setLoading(false);
-			}
+			console.log("Could not load team members right now.");
 		  }
 		};
 	
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index ff10df5..9ea9dad 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -17,7 +17,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
   const router = useRouter();
   const pathname = usePathname();
   const [loading, setLoading] = useState(true);
-  const [user, setUser] = useState<any>(null);
 
   // Authentication logic: Redirect to login if not authenticated, otherwise show admin layout
   useEffect(() => {
@@ -31,7 +30,6 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
           router.push("/");
         }
       } else {
-        setUser(user);
         setLoading(false);
       }
     });
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index fca7186..cd54915 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -10,18 +10,15 @@ import { useEffect, useState } from "react";
 export default function AdminPage() {
 
   type EventItem = WithKey<EventRecord>;
-    
-    const [showModal, setShowModal] = useState(false);
-    const [showPastEvents, setShowPastEvents] = useState(false);
 
-    const [futureEvents, setFutureEvents] = useState<EventItem[]>([]);
-    const [nowTimestamp, setNowTimestamp] = useState(() => Date.now());
+  const [futureEvents, setFutureEvents] = useState<EventItem[]>([]);
+  const nowTimestamp = Date.now();
 
-    useEffect(() => {
-    let active = true;
+  useEffect(() => {
+  let active = true;
 
-    const load = async () => {
-        try {
+  const load = async () => {
+      try {
         const futureEventsRaw = await fetchFutureEvents();
         if (!active) {
           return;
@@ -42,18 +39,16 @@ export default function AdminPage() {
   }, []);
 
   const adaptEventForDisplay = (event: EventItem) => ({
-		title: event.title,
-		date: event.schedule?.startDate,
-		time: event.schedule?.startTime,
-		location: event.location?.split(",")[0],  
+    title: event.title,
+    date: event.schedule?.startDate,
+    time: event.schedule?.startTime,
+    location: event.location?.split(",")[0],  
     description: event.description,
     image: event.image,
-	});
+  });
 
   const events = futureEvents.map(adaptEventForDisplay);
 
-  console.log(events)
-
   return (
     <div>
         <div className="mb-8">

From 8c587e3b80c2e8af72ce2d66125c946a2f40b494 Mon Sep 17 00:00:00 2001
From: jayshah2005 <jayshah3616@gmail.com>
Date: Sun, 29 Mar 2026 21:25:29 -0400
Subject: [PATCH 7/7] fix: make nowTimestamp a const

---
 app/admin/events/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
index e392f72..957d799 100644
--- a/app/admin/events/page.tsx
+++ b/app/admin/events/page.tsx
@@ -14,7 +14,7 @@ export default function EventsManagementPage() {
 	const [showPastEvents, setShowPastEvents] = useState(false);
 
 	const [events, setEvents] = useState<EventItem[]>([]);
-	const [nowTimestamp, setNowTimestamp] = useState(() => Date.now());
+	const nowTimestamp = Date.now();
 
 	useEffect(() => {
 	let active = true;