diff --git a/src/Pages/Events/EditEventPage.js b/src/Pages/Events/EditEventPage.js
index 9ce6b0cd3..36373d865 100644
--- a/src/Pages/Events/EditEventPage.js
+++ b/src/Pages/Events/EditEventPage.js
@@ -1,10 +1,11 @@
/* eslint-disable camelcase -- mirrors SCEvents JSON field names in state and payloads */
import React, { useMemo, useState, useEffect } from 'react';
-import { Link, useHistory, useParams } from 'react-router-dom';
-import { useSCE } from '../../Components/context/SceContext.js';
+import { Link, useHistory, useParams, Redirect } from 'react-router-dom';
+import { useSCE } from '../../Components/context/SceContext';
import { getEventByID, updateSCEvent } from '../../APIFunctions/SCEvents.js';
import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock.js';
import { membershipState } from '../../Enums';
+import config from '../../config/config.json';
/** Matches SCEvents `max_attendees` when there is no cap. */
const UNLIMITED_ATTENDEES = -1;
@@ -45,6 +46,7 @@ export default function EditEventPage() {
const { id } = useParams();
const { user } = useSCE();
const history = useHistory();
+ const isSCEventsEnabled = config.SCEvents?.ENABLED;
const [isLoading, setIsLoading] = useState(true);
const [fetchError, setFetchError] = useState('');
@@ -103,8 +105,12 @@ export default function EditEventPage() {
setEventAdmins(evt.admins || []);
}
+ if (!isSCEventsEnabled) {
+ return;
+ }
+
loadEvent();
- }, [id]);
+ }, [id, isSCEventsEnabled]);
function addQuestion() {
setQuestions((prev) => [...prev, newQuestionTemplate()]);
@@ -239,6 +245,10 @@ export default function EditEventPage() {
history.push('/events');
}
+ if (!isSCEventsEnabled) {
+ return
diff --git a/src/Pages/Events/EventAttendeesDashboard.js b/src/Pages/Events/EventAttendeesDashboard.js
new file mode 100644
index 000000000..bbef9d660
--- /dev/null
+++ b/src/Pages/Events/EventAttendeesDashboard.js
@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Redirect, useParams } from 'react-router-dom';
+import config from '../../config/config.json';
+import { getEventRegistrationByRequestId, getEventRegistrations } from '../../APIFunctions/SCEvents';
+import { useSCE } from '../../Components/context/SceContext';
+
+function formatDateTime(dateValue) {
+ if (!dateValue) return 'N/A';
+ const date = new Date(dateValue);
+ if (isNaN(date)) return 'N/A';
+ return date.toLocaleString();
+}
+
+function SummaryCard({ label, value }) {
+ return (
+
+ );
+}
+
+function AnswerValue({ value }) {
+ if (Array.isArray(value)) return
{value.join(', ') || 'N/A'};
+ if (value === null || value === undefined || value === '') return
N/A;
+ if (typeof value === 'object') return
{JSON.stringify(value)};
+ return
{String(value)};
+}
+
+export default function EventAttendeesDashboard() {
+ const { id } = useParams();
+ const { user, authenticated } = useSCE();
+ const isSCEventsEnabled = Boolean(config.SCEvents?.ENABLED);
+
+ const [isLoadingList, setIsLoadingList] = useState(true);
+ const [listError, setListError] = useState('');
+ const [attendees, setAttendees] = useState([]);
+ const [summary, setSummary] = useState({ total: 0, accepted: 0, pending: 0, rejected: 0 });
+
+ const [selectedRequestId, setSelectedRequestId] = useState('');
+ const [selectedAttendee, setSelectedAttendee] = useState(null);
+ const [isLoadingDetail, setIsLoadingDetail] = useState(false);
+ const [detailError, setDetailError] = useState('');
+ const [isDetailOpen, setIsDetailOpen] = useState(false);
+
+ useEffect(() => {
+ if (!authenticated || !user?.token || !id) return;
+
+ async function fetchRegistrations() {
+ setIsLoadingList(true);
+ setListError('');
+ const response = await getEventRegistrations(id, user.token, { limit: 100, offset: 0 });
+ if (response.error) {
+ setListError(response.responseData?.error || 'Failed to load attendees.');
+ setAttendees([]);
+ setSummary({ total: 0, accepted: 0, pending: 0, rejected: 0 });
+ } else {
+ setAttendees(Array.isArray(response.responseData?.attendees) ? response.responseData.attendees : []);
+ setSummary(response.responseData?.summary || { total: 0, accepted: 0, pending: 0, rejected: 0 });
+ }
+ setIsLoadingList(false);
+ }
+
+ fetchRegistrations();
+ }, [authenticated, id, user?.token]);
+
+ useEffect(() => {
+ if (!selectedRequestId || !user?.token) return;
+
+ async function fetchAttendeeDetail() {
+ setIsLoadingDetail(true);
+ setDetailError('');
+ const response = await getEventRegistrationByRequestId(id, selectedRequestId, user.token);
+ if (response.error) {
+ setDetailError(response.responseData?.error || 'Failed to load attendee details.');
+ setSelectedAttendee(null);
+ } else {
+ setSelectedAttendee(response.responseData);
+ }
+ setIsLoadingDetail(false);
+ }
+
+ fetchAttendeeDetail();
+ }, [id, selectedRequestId, user?.token]);
+
+ useEffect(() => {
+ if (selectedRequestId) setIsDetailOpen(true);
+ }, [selectedRequestId]);
+
+ function handleSelectAttendee(requestId) {
+ setSelectedRequestId(requestId);
+ setDetailError('');
+ }
+
+ function closeDetailPanel() {
+ setIsDetailOpen(false);
+ }
+
+ const selectedAnswers = useMemo(() => {
+ if (!selectedAttendee?.answers || typeof selectedAttendee.answers !== 'object') return [];
+ return Object.entries(selectedAttendee.answers);
+ }, [selectedAttendee]);
+
+ if (!isSCEventsEnabled) return
;
+ if (!authenticated) return
;
+
+ return (
+
+
+
+
+
Event Attendees Dashboard
+
Event ID: {id}
+
+
+ Back to Events
+
+
+
+
+
+
+
+
+
+
+ {isLoadingList &&
Loading attendees...
}
+ {!isLoadingList && listError &&
{listError}
}
+
+ {!isLoadingList && !listError && (
+
+
+
Attendees
+
Click an attendee to open details
+
+ {attendees.length === 0 ? (
+
No attendees found for this event yet.
+ ) : (
+
+ {attendees.map((attendee) => (
+
+ ))}
+
+ )}
+
+ )}
+
+
+ {isDetailOpen && (
+
+
event.stopPropagation()}
+ >
+
+
Attendee Detail
+
+
+
+ {!selectedRequestId &&
Select an attendee to view answers.
}
+ {isLoadingDetail &&
Loading attendee detail...
}
+ {!isLoadingDetail && detailError &&
{detailError}
}
+ {!isLoadingDetail && !detailError && selectedAttendee && (
+
+
+
Name: {selectedAttendee.registrant?.name || 'N/A'}
+
Email: {selectedAttendee.registrant?.email || 'N/A'}
+
Status: {selectedAttendee.status || 'N/A'}
+
Submitted: {formatDateTime(selectedAttendee.created_at)}
+
+
+
+
Registration Form Answers
+ {selectedAnswers.length === 0 ? (
+
No answers submitted.
+ ) : (
+ selectedAnswers.map(([fieldKey, value]) => (
+
+ ))
+ )}
+
+
+ )}
+
+
+ )}
+
+ );
+}
diff --git a/src/Routes.js b/src/Routes.js
index 3768c1e3c..12bdc66af 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -23,6 +23,7 @@ import EventsPage from './Pages/Events/Events.js';
import CreateEventPage from './Pages/Events/CreateEventPage.js';
import EventRegistration from './Pages/Events/EventsRegistation.js';
import EditEventPage from './Pages/Events/EditEventPage.js';
+import EventAttendeesDashboard from './Pages/Events/EventAttendeesDashboard.js';
// Declare an enum for permission check
export const allowedIf = {
@@ -184,7 +185,16 @@ export const officerOrAdminRoutes = [
pageName: 'Edit Event',
allowedIf: allowedIf.OFFICER_OR_ADMIN,
redirect: '/',
- inAdminNavbar: false
+ inAdminNavbar: true
+ },
+ {
+ Component: EventAttendeesDashboard,
+ path: '/events/:id/admin/attendees',
+ pageName: 'Event Attendees Dashboard',
+ allowedIf: allowedIf.OFFICER_OR_ADMIN,
+ redirect: '/',
+ inAdminNavbar: true,
+ hideFromShortcutSuggestions: true
},
{
Component: EventsPage,