Skip to content

feat: create admin panel with live data #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jayshah2005 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

feat: create admin panel with live data #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f4c0c0
feat: create admin panel with dummy data
jayshah2005 Mar 15, 2026
e1396e1
fix: remove unreachable statements
jayshah2005 Mar 15, 2026
965617f
fix: remove unused imports
jayshah2005 Mar 15, 2026
9e4590b
feat: add displayButton variant to event-card
jayshah2005 Mar 30, 2026
4979528
feat: use firebase to display data in admin panel
jayshah2005 Mar 30, 2026
3e5cb22
chore: remove unused variables
jayshah2005 Mar 30, 2026
8c587e3
fix: make nowTimestamp a const
jayshah2005 Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions app/admin/events/eventsModel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
173 changes: 173 additions & 0 deletions app/admin/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
"use client";

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
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);

const [events, setEvents] = useState<EventItem[]>([]);
const nowTimestamp = 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>
<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>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>
<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>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>
<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>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>
<Button variant="link" size="sm">EDIT</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)}
</div>

{showModal && <EventModal showModal={showModal} setShowModal={setShowModal} />}
</div>
);
}
Loading
Loading