From 0b947388f17892af6ebafbd2b453d066d6cf75ce Mon Sep 17 00:00:00 2001
From: Steven Le <stevenleusa79@yahoo.com>
Date: Fri, 1 May 2026 08:48:51 -0700
Subject: [PATCH 1/4] make event HC clearer, refactor shared functions, remove
 unused code

---
 src/Pages/Events/CalendarView.js              | 179 ++++--------
 .../Events/CreateEventFormQuestionBlock.js    |   2 -
 src/Pages/Events/CreateEventPage.js           | 142 ++--------
 src/Pages/Events/EditEventPage.js             | 140 ++--------
 src/Pages/Events/EventAttendeesDashboard.js   |   2 +-
 src/Pages/Events/EventIcons.js                | 108 +++++++
 src/Pages/Events/Events.js                    | 263 +-----------------
 src/Pages/Events/EventsRegistration.js        |  49 +---
 src/Pages/Events/eventUtils.js                |  58 ++++
 src/Pages/Events/useEventQuestions.js         | 118 ++++++++
 10 files changed, 385 insertions(+), 676 deletions(-)
 create mode 100644 src/Pages/Events/EventIcons.js
 create mode 100644 src/Pages/Events/eventUtils.js
 create mode 100644 src/Pages/Events/useEventQuestions.js

diff --git a/src/Pages/Events/CalendarView.js b/src/Pages/Events/CalendarView.js
index ef977b6ec..77a6ef570 100644
--- a/src/Pages/Events/CalendarView.js
+++ b/src/Pages/Events/CalendarView.js
@@ -1,9 +1,8 @@
-import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { getEventAttendanceSummary, getMyEventRegistrationState, joinWaitlistForSCEvent } from '../../APIFunctions/SCEvents';
 import { membershipState } from '../../Enums';
-
-// ─── tiny helpers ────────────────────────────────────────────────────────────
+import { calculateEventCapacity, getApiErrorMessage, toDateKey } from './eventUtils';
 
 const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const MONTHS = [
@@ -13,13 +12,6 @@ const MONTHS = [
 const currentYear = new Date().getFullYear();
 const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => currentYear + i);
 
-function toDateKey(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, '0');
-  const d = String(date.getDate()).padStart(2, '0');
-  return `${y}-${m}-${d}`;
-}
-
 function eventDateKey(event) {
   if (!event.date) return null;
   if (/^\d{4}-\d{2}-\d{2}$/.test(event.date)) return event.date;
@@ -159,12 +151,8 @@ function getBadgeText(event, isAdminView) {
   return '';
 }
 
-function getRegistrationStatus(event) {
-  return event?.registration_status || 'none';
-}
-
 function getRegistrationCta(event) {
-  const registrationStatus = getRegistrationStatus(event);
+  const registrationStatus = event?.registration_status || 'none';
 
   switch (registrationStatus) {
   case 'registered':
@@ -225,73 +213,15 @@ function canUserManageEvent(event, user) {
 
 // ─── icons ────────────────────────────────────────────────────────────────────
 
-function ChevronLeft() {
-  return (
-    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M15 18l-6-6 6-6" />
-    </svg>
-  );
-}
-
-function ChevronRight() {
-  return (
-    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M9 18l6-6-6-6" />
-    </svg>
-  );
-}
-
-function CalendarIcon() {
-  return (
-    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <rect x="3" y="4" width="18" height="17" rx="2" />
-      <path d="M8 2v4M16 2v4M3 10h18" />
-    </svg>
-  );
-}
-
-function PinIcon() {
-  return (
-    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M12 21s6-5.686 6-11a6 6 0 1 0-12 0c0 5.314 6 11 6 11Z" />
-      <circle cx="12" cy="10" r="2.5" />
-    </svg>
-  );
-}
-
-function ClockIcon() {
-  return (
-    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <circle cx="12" cy="12" r="9" />
-      <path d="M12 7v5l3 3" />
-    </svg>
-  );
-}
-
-function XIcon() {
-  return (
-    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-      <path d="M18 6L6 18M6 6l12 12" />
-    </svg>
-  );
-}
-
-function PlusIcon() {
-  return (
-    <svg
-      className="h-4 w-4"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M12 5v14M5 12h14" />
-    </svg>
-  );
-}
+import {
+  ChevronLeft,
+  ChevronRight,
+  CalendarIcon,
+  PinIcon,
+  ClockIcon,
+  XIcon,
+  PlusIcon
+} from './EventIcons';
 
 // ─── Event popup ──────────────────────────────────────────────────────────────
 
@@ -311,14 +241,10 @@ function EventPopup({ event, onClose, isAdminView, user }) {
   const [isCheckingRegistration, setIsCheckingRegistration] = useState(false);
   const eventId = event?.id || event?._id;
   const authToken = user?.token;
-  const maxAttendees = Number(event.max_attendees);
-  const hasCapacityLimit = Number.isFinite(maxAttendees) && maxAttendees > 0;
-  const remainingSpots =
-    hasCapacityLimit && typeof attendeeCount === 'number'
-      ? Math.max(maxAttendees - attendeeCount, 0)
-      : null;
+
+  const { maxAttendees, hasCapacityLimit, remainingSpots, isFull } = calculateEventCapacity(event, attendeeCount);
+
   const registrationCta = getRegistrationCta(event);
-  const isFull = hasCapacityLimit && typeof remainingSpots === 'number' && remainingSpots <= 0;
   const shouldShowWaitlistJoin =
     !canManageEvent &&
     event.status === 'published' &&
@@ -416,33 +342,24 @@ function EventPopup({ event, onClose, isAdminView, user }) {
     setWaitlistSubmitting(false);
 
     if (response.error) {
-      let msg = '';
-      const data = response.responseData;
-
-      if (data && typeof data === 'object' && data.error) {
-        msg = String(data.error);
-      } else if (typeof data === 'string' && data.trim()) {
-        msg = data.trim();
-      }
-
-      setWaitlistError(msg || 'Failed to join waitlist.');
+      setWaitlistError(getApiErrorMessage(response, { fallback: 'Failed to join waitlist.' }));
       return;
     }
 
     setWaitlistMessage('Joined waitlist successfully.');
   }
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70">
       <div
         ref={popupRef}
-        className="relative w-full max-w-sm rounded-xl border border-slate-400/35 bg-slate-900 shadow-lg"
+        className="relative w-full max-w-sm border shadow-lg rounded-xl border-slate-400/35 bg-slate-900"
         role="dialog"
         aria-modal="true"
         aria-label={event.name}
       >
         <div className={['h-1 w-full rounded-t-xl', colors.dot].join(' ')} />
 
-        <div className="flex items-start justify-between px-5 pb-3 pt-4">
+        <div className="flex items-start justify-between px-5 pt-4 pb-3">
           <div className="flex items-center gap-2">
             <span className={['h-2.5 w-2.5 shrink-0 rounded-full', colors.dot].join(' ')} />
             <span className={['text-xs font-semibold uppercase tracking-wider', colors.accent].join(' ')}>
@@ -451,7 +368,7 @@ function EventPopup({ event, onClose, isAdminView, user }) {
           </div>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-slate-400 transition hover:bg-slate-700/70 hover:text-white"
+            className="p-1 transition rounded-md text-slate-400 hover:bg-slate-700/70 hover:text-white"
             aria-label="Close"
           >
             <XIcon />
@@ -479,7 +396,7 @@ function EventPopup({ event, onClose, isAdminView, user }) {
           </div>
         </div>
 
-        <div className="space-y-3 border-t border-slate-700/70 px-5 py-4">
+        <div className="px-5 py-4 space-y-3 border-t border-slate-700/70">
           {event.date && (
             <div className="flex items-start gap-2.5 text-[15px] text-slate-200">
               <span className="mt-0.5 text-slate-400"><CalendarIcon /></span>
@@ -508,18 +425,18 @@ function EventPopup({ event, onClose, isAdminView, user }) {
           )}
         </div>
 
-        <div className="space-y-2 border-t border-slate-700/70 px-5 py-4">
+        <div className="px-5 py-4 space-y-2 border-t border-slate-700/70">
           {event.max_attendees > 0 && (
-            <p className="text-center text-xs text-slate-400">
-              {event.max_attendees} spot{event.max_attendees !== 1 ? 's' : ''} available
-              {event.waitlist_enabled && (
+            <p className="text-xs text-center text-slate-400">
+              {event.max_attendees} total spot{event.max_attendees !== 1 ? 's' : ''}
+              {canManageEvent && event.waitlist_enabled && (
                 <span className="ml-1 text-amber-300">· waitlist available</span>
               )}
             </p>
           )}
 
           {hasCapacityLimit && !canManageEvent && typeof remainingSpots === 'number' && (
-            <p className="text-center text-xs text-slate-400">
+            <p className="text-xs text-center text-slate-400">
               {remainingSpots} spot{remainingSpots !== 1 ? 's' : ''} left
               {event.waitlist_enabled && (
                 <span className="ml-1 text-amber-300">· waitlist available</span>
@@ -528,13 +445,13 @@ function EventPopup({ event, onClose, isAdminView, user }) {
           )}
 
           {hasCapacityLimit && !canManageEvent && attendanceLoading && (
-            <p className="text-center text-xs text-slate-400">
+            <p className="text-xs text-center text-slate-400">
               Loading live spots...
             </p>
           )}
 
           {hasCapacityLimit && !canManageEvent && attendanceLoaded && typeof remainingSpots !== 'number' && (
-            <p className="text-center text-xs text-slate-400">
+            <p className="text-xs text-center text-slate-400">
               Unable to load live spots
             </p>
           )}
@@ -602,11 +519,11 @@ function EventPopup({ event, onClose, isAdminView, user }) {
           )}
 
           {waitlistError && (
-            <p className="text-center text-xs text-red-300">{waitlistError}</p>
+            <p className="text-xs text-center text-red-300">{waitlistError}</p>
           )}
 
           {waitlistMessage && (
-            <p className="text-center text-xs text-emerald-300">{waitlistMessage}</p>
+            <p className="text-xs text-center text-emerald-300">{waitlistMessage}</p>
           )}
         </div>
       </div>
@@ -636,7 +553,7 @@ function EventRow({ event, onSelect, isAdminView }) {
       title={event.name}
     >
       <span className={['mt-1 h-1.5 w-1.5 shrink-0 rounded-full', colors.dot].join(' ')} />
-      <div className="min-w-0 flex-1 truncate">
+      <div className="flex-1 min-w-0 truncate">
         {timeLabel && (
           <span className="mr-1.5 font-semibold text-white/90">
             {timeLabel}
@@ -688,7 +605,7 @@ function CalCell({ date, isCurrentMonth, isToday, events, onSelectEvent, isAdmin
         isToday ? 'bg-cyan-500/[0.12]' : 'hover:bg-slate-700/35',
       ].join(' ')}
     >
-      <div className="mb-1 flex justify-start">
+      <div className="flex justify-start mb-1">
         <span
           className={[
             'flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-semibold',
@@ -732,7 +649,7 @@ function CalCell({ date, isCurrentMonth, isToday, events, onSelectEvent, isAdmin
 function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
   if (monthEvents.length === 0) {
     return (
-      <div className="px-4 py-8 text-center text-sm text-slate-400">
+      <div className="px-4 py-8 text-sm text-center text-slate-400">
         No events scheduled this month.
       </div>
     );
@@ -749,7 +666,7 @@ function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
   }, []);
 
   return (
-    <div className="space-y-3 px-3 pb-4 pt-2">
+    <div className="px-3 pt-2 pb-4 space-y-3">
       {groupedEvents.map(({ dateKey, events }) => {
         const [year, month, day] = dateKey.split('-');
         const date = new Date(Number(year), Number(month) - 1, Number(day));
@@ -786,8 +703,8 @@ function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
                       colors.border,
                     ].join(' ')}
                   >
-                    <div className="min-w-0 flex-1">
-                      <div className="whitespace-normal break-words text-sm font-semibold leading-snug">
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-semibold leading-snug break-words whitespace-normal">
                         {event.name || 'Untitled Event'}
                       </div>
                       <div className="pt-1 text-xs font-semibold text-white/85">
@@ -796,7 +713,7 @@ function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
                     </div>
 
                     <div className="min-w-[92px] text-right">
-                      <div className="whitespace-normal break-words text-xs opacity-85">
+                      <div className="text-xs break-words whitespace-normal opacity-85">
                         {event.location || '\u00A0'}
                       </div>
                       <div className="pt-1 text-[10px] uppercase tracking-wide opacity-80">
@@ -899,7 +816,7 @@ export default function CalendarView({
       )}
 
       <div className="flex h-full max-h-full flex-col overflow-hidden rounded-xl border border-slate-500/50 bg-slate-800/85 shadow-[0_0_0_1px_rgba(148,163,184,0.05)] sm:h-auto sm:max-h-none">
-        <div className="flex flex-wrap items-start justify-between gap-3 border-b border-slate-600/50 px-5 py-4">
+        <div className="flex flex-wrap items-start justify-between gap-3 px-5 py-4 border-b border-slate-600/50">
           <div className="space-y-3">
             <div className="flex flex-wrap items-center gap-3">
               <div className="relative w-28 sm:w-36">
@@ -916,8 +833,8 @@ export default function CalendarView({
                   ))}
                 </select>
 
-                <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-300">
-                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="absolute inset-y-0 flex items-center pointer-events-none right-3 text-slate-300">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                   </svg>
                 </div>
@@ -937,8 +854,8 @@ export default function CalendarView({
                   ))}
                 </select>
 
-                <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-300">
-                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <div className="absolute inset-y-0 flex items-center pointer-events-none right-3 text-slate-300">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                   </svg>
                 </div>
@@ -962,7 +879,7 @@ export default function CalendarView({
               <Link
                 to="/events/create"
                 aria-label="Create event"
-                className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+                className="inline-flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
               >
                 <PlusIcon />
               </Link>
@@ -971,21 +888,21 @@ export default function CalendarView({
             <button
               onClick={() => setCursor(new Date(year, month - 1, 1))}
               aria-label="Previous month"
-              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+              className="flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
             >
               <ChevronLeft />
             </button>
             <button
               onClick={() => setCursor(new Date(year, month + 1, 1))}
               aria-label="Next month"
-              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+              className="flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
             >
               <ChevronRight />
             </button>
           </div>
         </div>
 
-        <div className="min-h-0 flex-1 overflow-y-auto sm:hidden">
+        <div className="flex-1 min-h-0 overflow-y-auto sm:hidden">
           <MobileMonthAgenda
             monthEvents={monthEvents}
             onSelectEvent={setSelectedEvent}
@@ -1009,7 +926,7 @@ export default function CalendarView({
         </div>
 
         {isAdminView ? (
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-700/70 bg-slate-900/35 px-5 py-3">
+          <div className="flex flex-wrap items-center px-5 py-3 border-t gap-x-4 gap-y-1 border-slate-700/70 bg-slate-900/35">
             {[
               { label: 'Published', dot: 'bg-cyan-300' },
               { label: 'Private', dot: 'bg-violet-300' },
@@ -1023,7 +940,7 @@ export default function CalendarView({
             ))}
           </div>
         ) : (
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-700/70 bg-slate-900/35 px-5 py-3">
+          <div className="flex flex-wrap items-center px-5 py-3 border-t gap-x-4 gap-y-1 border-slate-700/70 bg-slate-900/35">
             {[
               { label: 'Open', dot: 'bg-cyan-300' },
               { label: 'Members only', dot: 'bg-violet-300' },
diff --git a/src/Pages/Events/CreateEventFormQuestionBlock.js b/src/Pages/Events/CreateEventFormQuestionBlock.js
index 808b27b63..1b12fb90e 100644
--- a/src/Pages/Events/CreateEventFormQuestionBlock.js
+++ b/src/Pages/Events/CreateEventFormQuestionBlock.js
@@ -1,6 +1,4 @@
 /* eslint-disable camelcase -- SCEvents registration question shape uses snake_case */
-import React from 'react';
-
 export default function CreateEventFormQuestionBlock({
   question,
   index,
diff --git a/src/Pages/Events/CreateEventPage.js b/src/Pages/Events/CreateEventPage.js
index 790340f99..a8b9027fe 100644
--- a/src/Pages/Events/CreateEventPage.js
+++ b/src/Pages/Events/CreateEventPage.js
@@ -1,24 +1,16 @@
 /* eslint-disable camelcase -- mirrors SCEvents JSON field names in state and payloads */
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useSCE } from '../../Components/context/SceContext';
 import { createSCEvent } from '../../APIFunctions/SCEvents';
 import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock';
 import { membershipState } from '../../Enums';
+import { useEventQuestions, toApiRegistrationForm } from './useEventQuestions';
+import { getApiErrorMessage } from './eventUtils';
 
 /** Matches SCEvents `max_attendees` when there is no cap. */
 const UNLIMITED_ATTENDEES = -1;
 
-function newQuestionTemplate() {
-  return {
-    id: crypto.randomUUID(),
-    type: 'textbox',
-    question: '',
-    required: false,
-    answer_details: { max_chars: 200 },
-  };
-}
-
 function defaultQuestions() {
   return [
     {
@@ -45,28 +37,6 @@ function defaultQuestions() {
   ];
 }
 
-function toApiRegistrationForm(questions) {
-  return questions.map((q) => {
-    const base = {
-      id: q.id,
-      type: q.type,
-      question: q.question,
-      required: !!q.required,
-    };
-    if (q.type === 'textbox' && q.answer_details?.max_chars) {
-      base.answer_details = { max_chars: q.answer_details.max_chars };
-    }
-    if (
-      (q.type === 'multiple_choice' || q.type === 'dropdown' || q.type === 'checkbox') &&
-      q.answer_options &&
-      q.answer_options.length
-    ) {
-      base.answer_options = q.answer_options;
-    }
-    return base;
-  });
-}
-
 export default function CreateEventPage() {
   const { user } = useSCE();
   const history = useHistory();
@@ -91,7 +61,18 @@ export default function CreateEventPage() {
   const [maxAttendees, setMaxAttendees] = useState(UNLIMITED_ATTENDEES);
   const [waitlistEnabled, setWaitlistEnabled] = useState(false);
   const [waitlistSize, setWaitlistSize] = useState(10);
-  const [questions, setQuestions] = useState(defaultQuestions);
+
+  const {
+    questions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    updateQuestionType,
+    updateAnswerOption,
+    addAnswerOption,
+    removeAnswerOption
+  } = useEventQuestions(defaultQuestions());
+
   const [submitError, setSubmitError] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
@@ -99,76 +80,6 @@ export default function CreateEventPage() {
 
   const adminId = useMemo(() => (user?._id != null ? String(user._id) : ''), [user]);
 
-  function addQuestion() {
-    setQuestions((prev) => [...prev, newQuestionTemplate()]);
-  }
-
-  function removeQuestion(id) {
-    setQuestions((prev) => prev.filter((q) => q.id !== id));
-  }
-
-  function updateQuestion(id, field, value) {
-    setQuestions((prev) =>
-      prev.map((q) => (q.id === id ? { ...q, [field]: value } : q)),
-    );
-  }
-
-  function updateQuestionType(id, newType) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== id) return q;
-        const base = {
-          id: q.id,
-          type: newType,
-          question: q.question,
-          required: q.required,
-        };
-        if (newType === 'textbox') {
-          return { ...base, answer_details: { max_chars: 200 } };
-        }
-        if (newType === 'multiple_choice' || newType === 'dropdown' || newType === 'checkbox') {
-          return { ...base, answer_options: ['Option 1', 'Option 2'] };
-        }
-        return base;
-      }),
-    );
-  }
-
-  function updateAnswerOption(questionId, optionIndex, value) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        const next = [...(q.answer_options || [])];
-        next[optionIndex] = value;
-        return { ...q, answer_options: next };
-      }),
-    );
-  }
-
-  function addAnswerOption(questionId) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        return {
-          ...q,
-          answer_options: [...(q.answer_options || []), 'New option'],
-        };
-      }),
-    );
-  }
-
-  function removeAnswerOption(questionId, optionIndex) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        return {
-          ...q,
-          answer_options: (q.answer_options || []).filter((_, i) => i !== optionIndex),
-        };
-      }),
-    );
-  }
-
   async function handleCreateEvent() {
     setSubmitError('');
     if (!eventName.trim()) {
@@ -185,6 +96,7 @@ export default function CreateEventPage() {
     }
     if (maxAttendees !== UNLIMITED_ATTENDEES && (maxAttendees === '' || maxAttendees <= 0)) {
       setSubmitError('Please enter a valid max attendees, or check "No limit".');
+      return;
     }
     if (waitlistEnabled && (!waitlistSize || Number(waitlistSize) <= 0)) {
       setSubmitError('Please enter a valid waitlist size.');
@@ -216,24 +128,10 @@ export default function CreateEventPage() {
     setSubmitting(false);
 
     if (result.error) {
-      let msg = '';
-      const data = result.responseData;
-      if (data && typeof data === 'object' && data.error) {
-        msg = String(data.error);
-      } else if (typeof data === 'string' && data.trim()) {
-        msg = data.trim();
-      }
-      if (!msg && result.statusCode) {
-        msg = `HTTP ${result.statusCode}`;
-      }
-      if (result.networkError) {
-        msg =
-          (msg || 'Network error') +
-          '. Is the SCEvents API running (e.g. Docker on port 8002)?';
-      } else if (!msg) {
-        msg = 'SCEvents returned an error.';
-      }
-      setSubmitError(msg);
+      setSubmitError(getApiErrorMessage(result, {
+        fallback: 'SCEvents returned an error.',
+        networkHint: 'Is the SCEvents API running (e.g. Docker on port 8002)?',
+      }));
       return;
     }
 
diff --git a/src/Pages/Events/EditEventPage.js b/src/Pages/Events/EditEventPage.js
index ff8c9881a..fbdd609af 100644
--- a/src/Pages/Events/EditEventPage.js
+++ b/src/Pages/Events/EditEventPage.js
@@ -1,46 +1,16 @@
 /* eslint-disable camelcase -- mirrors SCEvents JSON field names in state and payloads */
-import React, { useMemo, useState, useEffect } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { useSCE } from '../../Components/context/SceContext';
 import { getEventByID, updateSCEvent } from '../../APIFunctions/SCEvents';
 import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock';
 import { membershipState } from '../../Enums';
+import { toApiRegistrationForm, useEventQuestions } from './useEventQuestions';
+import { getApiErrorMessage } from './eventUtils';
 
 /** Matches SCEvents `max_attendees` when there is no cap. */
 const UNLIMITED_ATTENDEES = -1;
 
-function newQuestionTemplate() {
-  return {
-    id: crypto.randomUUID(),
-    type: 'textbox',
-    question: '',
-    required: false,
-    answer_details: { max_chars: 200 },
-  };
-}
-
-function toApiRegistrationForm(questions) {
-  return questions.map((q) => {
-    const base = {
-      id: q.id,
-      type: q.type,
-      question: q.question,
-      required: !!q.required,
-    };
-    if (q.type === 'textbox' && q.answer_details?.max_chars) {
-      base.answer_details = { max_chars: q.answer_details.max_chars };
-    }
-    if (
-      (q.type === 'multiple_choice' || q.type === 'dropdown') &&
-      q.answer_options &&
-      q.answer_options.length
-    ) {
-      base.answer_options = q.answer_options;
-    }
-    return base;
-  });
-}
-
 export default function EditEventPage() {
   const { id } = useParams();
   const { user } = useSCE();
@@ -60,8 +30,18 @@ export default function EditEventPage() {
   const [maxAttendees, setMaxAttendees] = useState(UNLIMITED_ATTENDEES);
   const [waitlistEnabled, setWaitlistEnabled] = useState(false);
   const [waitlistSize, setWaitlistSize] = useState(10);
-  const [questions, setQuestions] = useState([]);
   const [eventAdmins, setEventAdmins] = useState([]);
+  const {
+    questions,
+    setQuestions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    updateQuestionType,
+    updateAnswerOption,
+    addAnswerOption,
+    removeAnswerOption
+  } = useEventQuestions([]);
 
   const [submitError, setSubmitError] = useState('');
   const [submitting, setSubmitting] = useState(false);
@@ -106,76 +86,6 @@ export default function EditEventPage() {
     loadEvent();
   }, [id]);
 
-  function addQuestion() {
-    setQuestions((prev) => [...prev, newQuestionTemplate()]);
-  }
-
-  function removeQuestion(qId) {
-    setQuestions((prev) => prev.filter((q) => q.id !== qId));
-  }
-
-  function updateQuestion(qId, field, value) {
-    setQuestions((prev) =>
-      prev.map((q) => (q.id === qId ? { ...q, [field]: value } : q)),
-    );
-  }
-
-  function updateQuestionType(qId, newType) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== qId) return q;
-        const base = {
-          id: q.id,
-          type: newType,
-          question: q.question,
-          required: q.required,
-        };
-        if (newType === 'textbox') {
-          return { ...base, answer_details: { max_chars: 200 } };
-        }
-        if (newType === 'multiple_choice' || newType === 'dropdown') {
-          return { ...base, answer_options: ['Option 1', 'Option 2'] };
-        }
-        return base;
-      }),
-    );
-  }
-
-  function updateAnswerOption(questionId, optionIndex, value) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        const next = [...(q.answer_options || [])];
-        next[optionIndex] = value;
-        return { ...q, answer_options: next };
-      }),
-    );
-  }
-
-  function addAnswerOption(questionId) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        return {
-          ...q,
-          answer_options: [...(q.answer_options || []), 'New option'],
-        };
-      }),
-    );
-  }
-
-  function removeAnswerOption(questionId, optionIndex) {
-    setQuestions((prev) =>
-      prev.map((q) => {
-        if (q.id !== questionId) return q;
-        return {
-          ...q,
-          answer_options: (q.answer_options || []).filter((_, i) => i !== optionIndex),
-        };
-      }),
-    );
-  }
-
   async function handleUpdateEvent() {
     setSubmitError('');
     if (!eventName.trim()) {
@@ -215,24 +125,10 @@ export default function EditEventPage() {
     setSubmitting(false);
 
     if (result.error) {
-      let msg = '';
-      const data = result.responseData;
-      if (data && typeof data === 'object' && data.error) {
-        msg = String(data.error);
-      } else if (typeof data === 'string' && data.trim()) {
-        msg = data.trim();
-      }
-      if (!msg && result.statusCode) {
-        msg = `HTTP ${result.statusCode}`;
-      }
-      if (result.networkError) {
-        msg =
-          (msg || 'Network error') +
-          '. Is the SCEvents API running (e.g. Docker on port 8002)?';
-      } else if (!msg) {
-        msg = 'SCEvents returned an error.';
-      }
-      setSubmitError(msg);
+      setSubmitError(getApiErrorMessage(result, {
+        fallback: 'SCEvents returned an error.',
+        networkHint: 'Is the SCEvents API running (e.g. Docker on port 8002)?',
+      }));
       return;
     }
 
diff --git a/src/Pages/Events/EventAttendeesDashboard.js b/src/Pages/Events/EventAttendeesDashboard.js
index e5b7e13ca..ff578afe1 100644
--- a/src/Pages/Events/EventAttendeesDashboard.js
+++ b/src/Pages/Events/EventAttendeesDashboard.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, Redirect, useParams } from 'react-router-dom';
 import { getEventRegistrationByRequestId, getEventRegistrations } from '../../APIFunctions/SCEvents';
 import { useSCE } from '../../Components/context/SceContext';
diff --git a/src/Pages/Events/EventIcons.js b/src/Pages/Events/EventIcons.js
new file mode 100644
index 000000000..ca7a167cc
--- /dev/null
+++ b/src/Pages/Events/EventIcons.js
@@ -0,0 +1,108 @@
+export function ChevronLeft() {
+  return (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  );
+}
+
+export function ChevronRight() {
+  return (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M9 18l6-6-6-6" />
+    </svg>
+  );
+}
+
+export function CalendarIcon() {
+  return (
+    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <rect x="3" y="4" width="18" height="17" rx="2" />
+      <path d="M8 2v4M16 2v4M3 10h18" />
+    </svg>
+  );
+}
+
+export function PinIcon() {
+  return (
+    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 21s6-5.686 6-11a6 6 0 1 0-12 0c0 5.314 6 11 6 11Z" />
+      <circle cx="12" cy="10" r="2.5" />
+    </svg>
+  );
+}
+
+export function ClockIcon() {
+  return (
+    <svg className="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3 3" />
+    </svg>
+  );
+}
+
+export function XIcon() {
+  return (
+    <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+}
+
+export function PlusIcon() {
+  return (
+    <svg
+      className="h-4 w-4"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+export function ArrowLeftIcon() {
+  return (
+    <svg
+      className="h-5 w-5"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+    </svg>
+  );
+}
+
+export function PeopleIcon() {
+  return (
+    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106a7.5 7.5 0 013 5.438M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zm-15 5.25a3 3 0 116 0 3 3 0 01-6 0zm1.5 5.81a4.125 4.125 0 007.533 2.493" />
+    </svg>
+  );
+}
+
+export function EditIcon() {
+  return (
+    <svg
+      className="h-5 w-5 flex-shrink-0"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+    </svg>
+  );
+}
diff --git a/src/Pages/Events/Events.js b/src/Pages/Events/Events.js
index 945de1bcc..12948aa3f 100644
--- a/src/Pages/Events/Events.js
+++ b/src/Pages/Events/Events.js
@@ -1,147 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { getAllSCEvents, getEventAttendanceSummary } from '../../APIFunctions/SCEvents';
+import { useEffect, useState } from 'react';
+import { getAllSCEvents } from '../../APIFunctions/SCEvents';
 import { useSCE } from '../../Components/context/SceContext';
 import { membershipState } from '../../Enums';
 import CalendarView from './CalendarView';
-
-function CalendarIcon() {
-  return (
-    <svg
-      className="h-4 w-4 flex-shrink-0"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      aria-hidden="true"
-    >
-      <path strokeLinecap="round" strokeLinejoin="round" d="M8 2v4M16 2v4M3 10h18" />
-      <rect x="3" y="4" width="18" height="17" rx="2" />
-    </svg>
-  );
-}
-
-function PinIcon() {
-  return (
-    <svg
-      className="h-4 w-4 flex-shrink-0"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      aria-hidden="true"
-    >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 21s6-5.686 6-11a6 6 0 1 0-12 0c0 5.314 6 11 6 11Z"
-      />
-      <circle cx="12" cy="10" r="2.5" />
-    </svg>
-  );
-}
-
-function PeopleIcon() {
-  return (
-    <svg
-      className="h-4 w-4 flex-shrink-0"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-      <circle cx="9" cy="7" r="4" />
-      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
-      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
-    </svg>
-  );
-}
-
-function PlusIcon() {
-  return (
-    <svg
-      className="h-5 w-5 flex-shrink-0"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      aria-hidden="true"
-    >
-      <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14M5 12h14" />
-    </svg>
-  );
-}
-
-function EditIcon() {
-  return (
-    <svg
-      className="h-5 w-5 flex-shrink-0"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-    </svg>
-  );
-}
-
-function getUserAccessLevel(user) {
-  return user?.accessLevel ?? membershipState.NON_MEMBER;
-}
-
-function formatEventDate(date) {
-  if (!date) {
-    return '';
-  }
-
-  const [year, month, day] = date.split('-').map(Number);
-  if (!year || !month || !day) {
-    return date;
-  }
-
-  return new Date(year, month - 1, day).toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-  });
-}
-
-function formatEventTime(time) {
-  if (!time) {
-    return '';
-  }
-
-  const [hour, minute] = time.split(':').map(Number);
-  if (Number.isNaN(hour) || Number.isNaN(minute)) {
-    return time;
-  }
-
-  return new Date(2000, 0, 1, hour, minute).toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  });
-}
-
-function formatDateParam(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  return `${year}-${month}-${day}`;
-}
+import { toDateKey } from './eventUtils';
 
 function canUserSeeEvent(event, user) {
   const userId = user?._id != null ? String(user._id) : '';
-  const userAccess = getUserAccessLevel(user);
+  const userAccess = user?.accessLevel ?? membershipState.NON_MEMBER;
 
   const isGlobalAdmin = userAccess >= membershipState.ADMIN;
   const isEventAdmin = Array.isArray(event.admins) && userId
@@ -169,118 +35,6 @@ function canUserSeeEvent(event, user) {
   return false;
 }
 
-function EventCard({ event, user }) {
-  const [attendeeCount, setAttendeeCount] = useState(0);
-  const userAccess = getUserAccessLevel(user);
-  const isEventAdmin =
-    Array.isArray(event.admins) && user?._id
-      ? event.admins.includes(String(user._id))
-      : false;
-  const canViewAttendance =
-    isEventAdmin ||
-    ((!Array.isArray(event.admins) || event.admins.length === 0) &&
-      userAccess >= membershipState.ADMIN);
-
-  useEffect(() => {
-    let isCurrent = true;
-    setAttendeeCount(0);
-
-    async function fetchAttendanceSummary() {
-      const response = await getEventAttendanceSummary(event.id, user?.token);
-      if (isCurrent && !response.error && typeof response.responseData?.attendee_count === 'number') {
-        setAttendeeCount(response.responseData.attendee_count);
-      }
-    }
-
-    if (canViewAttendance && event.id && user?.token) {
-      fetchAttendanceSummary();
-    }
-
-    return () => {
-      isCurrent = false;
-    };
-  }, [canViewAttendance, event.id, user?.token]);
-
-  return (
-    <div className="group relative flex flex-col rounded-2xl border border-white/10 bg-white/5 p-6 shadow-md backdrop-blur-sm transition duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.07]">
-      <div className="flex items-start justify-between">
-        <h2 className="mb-4 pr-4 text-2xl font-bold text-white">
-          {event.name || 'Untitled Event'}
-        </h2>
-        {isEventAdmin && (
-          <Link
-            to={`/events/${event.id}/edit`}
-            className="rounded-lg p-2 text-gray-400 hover:bg-white/10 hover:text-emerald-400 transition-colors duration-200"
-            title="Edit Event"
-          >
-            <EditIcon />
-          </Link>
-        )}
-      </div>
-
-      <div className="mb-4 flex flex-wrap gap-2">
-        {event.status === 'draft' && (
-          <span className="rounded-full bg-yellow-500/15 px-3 py-1 text-xs font-medium text-yellow-200 border border-yellow-400/20">
-            Draft
-          </span>
-        )}
-        {event.visibility === 'private' && (
-          <span className="rounded-full bg-purple-500/15 px-3 py-1 text-xs font-medium text-purple-200 border border-purple-400/20">
-            Private
-          </span>
-        )}
-      </div>
-
-      <div className="mb-5 space-y-2 text-sm text-gray-300">
-        {(event.date || event.time) && (
-          <div className="flex items-center gap-2">
-            <span className="text-blue-300">
-              <CalendarIcon />
-            </span>
-            <span>{[formatEventDate(event.date), formatEventTime(event.time)].filter(Boolean).join(' · ')}</span>
-          </div>
-        )}
-
-        {event.location && (
-          <div className="flex items-center gap-2">
-            <span className="text-blue-300">
-              <PinIcon />
-            </span>
-            <span>{event.location}</span>
-          </div>
-        )}
-
-        {canViewAttendance && (
-          <div className="flex items-center gap-2">
-            <span className="text-emerald-300">
-              <PeopleIcon />
-            </span>
-            <span>
-              <span className="font-semibold text-emerald-300">{attendeeCount}</span>
-              {' people going'}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {event.description && (
-        <p className="text-base leading-7 text-gray-300">
-          {event.description}
-        </p>
-      )}
-
-      <div className="mt-auto pt-6">
-        <Link
-          to={`/events/${event.id}/register`}
-          className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all duration-300 hover:from-sky-400 hover:to-indigo-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-gray-900"
-        >
-          Register
-        </Link>
-      </div>
-    </div>
-  );
-}
-
 export default function EventsPage() {
   const { user } = useSCE();
   const [events, setEvents] = useState([]);
@@ -291,9 +45,8 @@ export default function EventsPage() {
     return new Date(today.getFullYear(), today.getMonth(), 1);
   });
 
-  const canCreateEvent = user?.accessLevel >= membershipState.OFFICER;
+  const isAdminView = user?.accessLevel >= membershipState.OFFICER;
   const visibleEvents = events.filter((event) => canUserSeeEvent(event, user));
-  const isAdminView = canCreateEvent;
   const pageContainerClass = isAdminView
     ? 'relative h-dvh overflow-hidden bg-gradient-to-r from-gray-800 to-gray-600 text-white'
     : 'relative h-[calc(100dvh-4rem)] overflow-hidden bg-gradient-to-r from-gray-800 to-gray-600 text-white';
@@ -307,8 +60,8 @@ export default function EventsPage() {
       setHasError(false);
 
       const token = window.localStorage.getItem('jwtToken');
-      const startDate = formatDateParam(new Date(cursor.getFullYear(), cursor.getMonth(), 1));
-      const endDate = formatDateParam(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0));
+      const startDate = toDateKey(new Date(cursor.getFullYear(), cursor.getMonth(), 1));
+      const endDate = toDateKey(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0));
       const response = await getAllSCEvents(token, { startDate, endDate });
 
       if (!response.error) {
@@ -350,7 +103,7 @@ export default function EventsPage() {
             events={visibleEvents}
             isAdminView={isAdminView}
             user={user}
-            canCreateEvent={canCreateEvent}
+            canCreateEvent={isAdminView}
             cursor={cursor}
             setCursor={setCursor}
           />
diff --git a/src/Pages/Events/EventsRegistration.js b/src/Pages/Events/EventsRegistration.js
index 90a31d816..75d3a438f 100644
--- a/src/Pages/Events/EventsRegistration.js
+++ b/src/Pages/Events/EventsRegistration.js
@@ -1,27 +1,10 @@
 /* eslint-disable camelcase -- mirrors SCEvents JSON field names in state and payloads */
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useSCE } from '../../Components/context/SceContext';
 import { getEventByID, getEventAttendanceSummary, registerForEvent } from '../../APIFunctions/SCEvents';
-
-function ArrowLeftIcon() {
-  return (
-    <svg
-      className="h-5 w-5"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      aria-hidden="true"
-    >
-      <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-    </svg>
-  );
-}
-
-function getRegistrationStatus(event) {
-  return event?.registration_status || 'none';
-}
+import { calculateEventCapacity, getApiErrorMessage } from './eventUtils';
+import { ArrowLeftIcon } from './EventIcons';
 
 function StatusPanel({ title, message, borderClass, textClass, onBack }) {
   return (
@@ -64,7 +47,7 @@ export default function EventRegistration() {
   const [submitting, setSubmitting] = useState(false);
   const [attendeeCount, setAttendeeCount] = useState(null);
   const [attendanceLoading, setAttendanceLoading] = useState(false);
-  const registrationStatus = getRegistrationStatus(event);
+  const registrationStatus = event?.registration_status || 'none';
   const goBackToEvents = () => history.push('/events');
 
   useEffect(() => {
@@ -166,27 +149,12 @@ export default function EventRegistration() {
     setSubmitting(false);
 
     if (result.error) {
-      let msg = '';
-      const data = result.responseData;
-
-      if (data && typeof data === 'object' && data.error) {
-        msg = String(data.error);
-      } else if (typeof data === 'string' && data.trim()) {
-        msg = data.trim();
-      }
+      let msg = getApiErrorMessage(result, { fallback: 'Failed to submit registration.' });
 
       if (msg.toLowerCase().includes('registration is closed')) {
         msg = 'This event is no longer accepting sign-ups, but more events are on the way 👀';
       }
 
-      if (!msg && result.statusCode) {
-        msg = `HTTP ${result.statusCode}`;
-      }
-
-      if (!msg) {
-        msg = 'Failed to submit registration.';
-      }
-
       setSubmitError(msg);
       return;
     }
@@ -280,12 +248,7 @@ export default function EventRegistration() {
     );
   }
 
-  const maxAttendees = Number(event.max_attendees);
-  const hasCapacityLimit = Number.isFinite(maxAttendees) && maxAttendees > 0;
-  const remainingSpots =
-    hasCapacityLimit && typeof attendeeCount === 'number'
-      ? Math.max(maxAttendees - attendeeCount, 0)
-      : null;
+  const { remainingSpots, hasCapacityLimit } = calculateEventCapacity(event, attendeeCount);
 
   return (
     <div className="relative min-h-screen overflow-hidden bg-gradient-to-r from-gray-800 to-gray-600 text-white">
diff --git a/src/Pages/Events/eventUtils.js b/src/Pages/Events/eventUtils.js
new file mode 100644
index 000000000..e41b4fe5a
--- /dev/null
+++ b/src/Pages/Events/eventUtils.js
@@ -0,0 +1,58 @@
+export function calculateEventCapacity(event, attendeeCount) {
+  const maxAttendees = Number(event?.max_attendees);
+  const hasCapacityLimit = Number.isFinite(maxAttendees) && maxAttendees > 0;
+
+  const remainingSpots =
+    hasCapacityLimit && typeof attendeeCount === 'number'
+      ? Math.max(maxAttendees - attendeeCount, 0)
+      : null;
+
+  const isFull = hasCapacityLimit && typeof remainingSpots === 'number' && remainingSpots <= 0;
+
+  return {
+    maxAttendees,
+    hasCapacityLimit,
+    remainingSpots,
+    isFull
+  };
+}
+
+export function toDateKey(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export function getApiErrorMessage(result, options = {}) {
+  const {
+    fallback = 'Request failed.',
+    networkHint = '',
+  } = options;
+
+  let msg = '';
+  const data = result?.responseData;
+
+  if (data && typeof data === 'object') {
+    if (data.error) {
+      msg = String(data.error);
+    } else if (data.message) {
+      msg = String(data.message);
+    }
+  } else if (typeof data === 'string' && data.trim()) {
+    msg = data.trim();
+  }
+
+  if (!msg && result?.statusCode) {
+    msg = `HTTP ${result.statusCode}`;
+  }
+
+  if (result?.networkError) {
+    msg = msg || 'Network error';
+    if (networkHint) {
+      msg = `${msg}. ${networkHint}`;
+    }
+  }
+
+  return msg || fallback;
+}
diff --git a/src/Pages/Events/useEventQuestions.js b/src/Pages/Events/useEventQuestions.js
new file mode 100644
index 000000000..4636f4399
--- /dev/null
+++ b/src/Pages/Events/useEventQuestions.js
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+
+export function newQuestionTemplate() {
+  return {
+    id: crypto.randomUUID(),
+    type: 'textbox',
+    question: '',
+    required: false,
+    answer_details: { max_chars: 200 },
+  };
+}
+
+export function toApiRegistrationForm(questions) {
+  return questions.map((q) => {
+    const base = {
+      id: q.id,
+      type: q.type,
+      question: q.question,
+      required: !!q.required,
+    };
+
+    if (q.type === 'textbox' && q.answer_details?.max_chars) {
+      base.answer_details = { max_chars: q.answer_details.max_chars };
+    }
+
+    if (['multiple_choice', 'dropdown', 'checkbox'].includes(q.type)) {
+      base.answer_options = Array.isArray(q.answer_options)
+        ? q.answer_options.map((opt) => String(opt).trim()).filter(Boolean)
+        : [];
+    }
+
+    return base;
+  });
+}
+
+export function useEventQuestions(initialQuestions = []) {
+  const [questions, setQuestions] = useState(initialQuestions);
+
+  function addQuestion() {
+    setQuestions((prev) => [...prev, newQuestionTemplate()]);
+  }
+
+  function removeQuestion(id) {
+    setQuestions((prev) => prev.filter((q) => q.id !== id));
+  }
+
+  function updateQuestion(id, field, value) {
+    setQuestions((prev) =>
+      prev.map((q) => (q.id === id ? { ...q, [field]: value } : q))
+    );
+  }
+
+  function updateQuestionType(id, newType) {
+    setQuestions((prev) =>
+      prev.map((q) => {
+        if (q.id !== id) return q;
+
+        const updated = { ...q, type: newType };
+
+        if (newType === 'textbox') {
+          updated.answer_details = { max_chars: 200 };
+          delete updated.answer_options;
+        } else if (['multiple_choice', 'dropdown', 'checkbox'].includes(newType)) {
+          if (!updated.answer_options) {
+            updated.answer_options = ['Option 1', 'Option 2'];
+          }
+          delete updated.answer_details;
+        }
+        return updated;
+      })
+    );
+  }
+
+  function updateAnswerOption(questionId, optionIndex, value) {
+    setQuestions((prev) =>
+      prev.map((q) => {
+        if (q.id !== questionId) return q;
+        const newOptions = [...(q.answer_options || [])];
+        newOptions[optionIndex] = value;
+        return { ...q, answer_options: newOptions };
+      })
+    );
+  }
+
+  function addAnswerOption(questionId) {
+    setQuestions((prev) =>
+      prev.map((q) => {
+        if (q.id !== questionId) return q;
+        const newOptions = [...(q.answer_options || [])];
+        newOptions.push(`Option ${newOptions.length + 1}`);
+        return { ...q, answer_options: newOptions };
+      })
+    );
+  }
+
+  function removeAnswerOption(questionId, optionIndex) {
+    setQuestions((prev) =>
+      prev.map((q) => {
+        if (q.id !== questionId) return q;
+        const newOptions = [...(q.answer_options || [])];
+        newOptions.splice(optionIndex, 1);
+        return { ...q, answer_options: newOptions };
+      })
+    );
+  }
+
+  return {
+    questions,
+    setQuestions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    updateQuestionType,
+    updateAnswerOption,
+    addAnswerOption,
+    removeAnswerOption
+  };
+}

From 35254e41a2f6ace115e12275cf282c70cd947be7 Mon Sep 17 00:00:00 2001
From: Steven Le <stevenleusa79@yahoo.com>
Date: Fri, 1 May 2026 09:18:28 -0700
Subject: [PATCH 2/4] refactor CalendarView.js

---
 src/Pages/Events/Calendar/CalCell.js          |  57 ++
 src/Pages/Events/Calendar/CalendarView.js     | 234 +++++
 src/Pages/Events/Calendar/DayLabels.js        |  16 +
 src/Pages/Events/Calendar/EventPopup.js       | 296 ++++++
 src/Pages/Events/Calendar/EventRow.js         |  40 +
 .../Events/Calendar/MobileMonthAgenda.js      |  86 ++
 .../Events/Calendar/calendarViewUtils.js      | 201 ++++
 src/Pages/Events/CalendarView.js              | 959 ------------------
 src/Pages/Events/Events.js                    |   2 +-
 9 files changed, 931 insertions(+), 960 deletions(-)
 create mode 100644 src/Pages/Events/Calendar/CalCell.js
 create mode 100644 src/Pages/Events/Calendar/CalendarView.js
 create mode 100644 src/Pages/Events/Calendar/DayLabels.js
 create mode 100644 src/Pages/Events/Calendar/EventPopup.js
 create mode 100644 src/Pages/Events/Calendar/EventRow.js
 create mode 100644 src/Pages/Events/Calendar/MobileMonthAgenda.js
 create mode 100644 src/Pages/Events/Calendar/calendarViewUtils.js
 delete mode 100644 src/Pages/Events/CalendarView.js

diff --git a/src/Pages/Events/Calendar/CalCell.js b/src/Pages/Events/Calendar/CalCell.js
new file mode 100644
index 000000000..d434200b0
--- /dev/null
+++ b/src/Pages/Events/Calendar/CalCell.js
@@ -0,0 +1,57 @@
+import EventRow from './EventRow';
+import { sortEventsForDay } from './calendarViewUtils';
+
+export default function CalCell({ date, isCurrentMonth, isToday, events, onSelectEvent, isAdminView }) {
+  const sortedEvents = sortEventsForDay(events);
+  const mobileRows = sortedEvents.slice(0, 2);
+  const desktopOnlyRows = sortedEvents.slice(2, 4);
+  const hiddenCount = Math.max(sortedEvents.length - 4, 0);
+
+  return (
+    <div
+      className={[
+        'min-h-[106px] sm:min-h-[124px] border-b border-r border-slate-700/60 p-1.5 transition-colors duration-150',
+        isCurrentMonth ? '' : 'opacity-30',
+        isToday ? 'bg-cyan-500/[0.12]' : 'hover:bg-slate-700/35',
+      ].join(' ')}
+    >
+      <div className="mb-1 flex justify-start">
+        <span
+          className={[
+            'flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-semibold',
+            isToday ? 'bg-cyan-400 text-slate-950' : isCurrentMonth ? 'text-slate-200' : 'text-slate-600',
+          ].join(' ')}
+        >
+          {date.getDate()}
+        </span>
+      </div>
+
+      <div className="flex flex-col gap-0.5">
+        {mobileRows.map((ev) => (
+          <EventRow
+            key={ev.id}
+            event={ev}
+            onSelect={onSelectEvent}
+            isAdminView={isAdminView}
+          />
+        ))}
+
+        {desktopOnlyRows.map((ev) => (
+          <div key={ev.id} className="hidden sm:block">
+            <EventRow
+              event={ev}
+              onSelect={onSelectEvent}
+              isAdminView={isAdminView}
+            />
+          </div>
+        ))}
+
+        {hiddenCount > 0 && (
+          <span className="pl-1 text-[10px] font-medium text-slate-400">
+            +{hiddenCount} more
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Pages/Events/Calendar/CalendarView.js b/src/Pages/Events/Calendar/CalendarView.js
new file mode 100644
index 000000000..29423b3f7
--- /dev/null
+++ b/src/Pages/Events/Calendar/CalendarView.js
@@ -0,0 +1,234 @@
+import { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { toDateKey } from '../eventUtils';
+import { ChevronLeft, ChevronRight, PlusIcon } from '../EventIcons';
+import { eventDateKey, MONTHS, sortEventsForDay, YEAR_RANGE } from './calendarViewUtils';
+import EventPopup from './EventPopup';
+import DayLabels from './DayLabels';
+import CalCell from './CalCell';
+import MobileMonthAgenda from './MobileMonthAgenda';
+
+export default function CalendarView({
+  events,
+  isAdminView = false,
+  user,
+  canCreateEvent = false,
+  cursor,
+  setCursor,
+}) {
+  const today = useMemo(() => new Date(), []);
+  const [selectedEvent, setSelectedEvent] = useState(null);
+
+  const eventsByDate = useMemo(() => {
+    const map = {};
+    events.forEach((ev) => {
+      const key = eventDateKey(ev);
+      if (!key) return;
+      if (!map[key]) map[key] = [];
+      map[key].push(ev);
+    });
+    Object.keys(map).forEach((key) => {
+      map[key] = sortEventsForDay(map[key]);
+    });
+    return map;
+  }, [events]);
+
+  const year = cursor.getFullYear();
+  const month = cursor.getMonth();
+
+  function handleMonthChange(e) {
+    const nextMonth = Number(e.target.value);
+    setCursor(new Date(year, nextMonth, 1));
+  }
+
+  function handleYearChange(e) {
+    const nextYear = Number(e.target.value);
+    setCursor(new Date(nextYear, month, 1));
+  }
+
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const totalCells = Math.ceil((firstDayOfMonth + daysInMonth) / 7) * 7;
+  const todayKey = toDateKey(today);
+
+  const cells = Array.from({ length: totalCells }, (_, i) => {
+    const dayOffset = i - firstDayOfMonth;
+    const date = new Date(year, month, dayOffset + 1);
+    const key = toDateKey(date);
+    return {
+      date,
+      key,
+      isCurrentMonth: date.getMonth() === month,
+      isToday: key === todayKey,
+      events: eventsByDate[key] || [],
+    };
+  });
+
+  const monthEventCount = cells
+    .filter((c) => c.isCurrentMonth)
+    .reduce((sum, c) => sum + c.events.length, 0);
+
+  const monthEvents = useMemo(() => {
+    return cells
+      .filter((c) => c.isCurrentMonth && c.events.length > 0)
+      .flatMap((c) =>
+        c.events.map((event) => ({
+          event,
+          dateKey: c.key,
+        }))
+      );
+  }, [cells]);
+
+  return (
+    <>
+      {selectedEvent && (
+        <EventPopup
+          event={selectedEvent}
+          onClose={() => setSelectedEvent(null)}
+          isAdminView={isAdminView}
+          user={user}
+        />
+      )}
+
+      <div className="flex h-full max-h-full flex-col overflow-hidden rounded-xl border border-slate-500/50 bg-slate-800/85 shadow-[0_0_0_1px_rgba(148,163,184,0.05)] sm:h-auto sm:max-h-none">
+        <div className="flex flex-wrap items-start justify-between gap-3 border-b border-slate-600/50 px-5 py-4">
+          <div className="space-y-3">
+            <div className="flex flex-wrap items-center gap-3">
+              <div className="relative w-28 sm:w-36">
+                <select
+                  value={month}
+                  onChange={handleMonthChange}
+                  aria-label="Select month"
+                  className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
+                >
+                  {MONTHS.map((monthName, index) => (
+                    <option key={monthName} value={index} className="bg-slate-900">
+                      {monthName}
+                    </option>
+                  ))}
+                </select>
+
+                <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-300">
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+              </div>
+
+              <div className="relative w-24">
+                <select
+                  value={year}
+                  onChange={handleYearChange}
+                  aria-label="Select year"
+                  className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
+                >
+                  {YEAR_RANGE.map((yearOption) => (
+                    <option key={yearOption} value={yearOption} className="bg-slate-900">
+                      {yearOption}
+                    </option>
+                  ))}
+                </select>
+
+                <div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-slate-300">
+                  <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+              </div>
+
+              <button
+                onClick={() => setCursor(new Date(today.getFullYear(), today.getMonth(), 1))}
+                className="h-10 rounded-lg border border-slate-400/40 bg-slate-800 px-4 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
+              >
+                Today
+              </button>
+            </div>
+
+            <p className="text-sm font-medium tracking-wide text-slate-300">
+              {monthEventCount} event{monthEventCount !== 1 ? 's' : ''} this month
+            </p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {canCreateEvent && (
+              <Link
+                to="/events/create"
+                aria-label="Create event"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+              >
+                <PlusIcon />
+              </Link>
+            )}
+
+            <button
+              onClick={() => setCursor(new Date(year, month - 1, 1))}
+              aria-label="Previous month"
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+            >
+              <ChevronLeft />
+            </button>
+            <button
+              onClick={() => setCursor(new Date(year, month + 1, 1))}
+              aria-label="Next month"
+              className="flex h-10 w-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
+            >
+              <ChevronRight />
+            </button>
+          </div>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto sm:hidden">
+          <MobileMonthAgenda
+            monthEvents={monthEvents}
+            onSelectEvent={setSelectedEvent}
+            isAdminView={isAdminView}
+          />
+        </div>
+
+        <div className="hidden sm:block">
+          <DayLabels />
+
+          <div className="grid grid-cols-7 [&>*:nth-child(7n)]:border-r-0">
+            {cells.map((cell) => (
+              <CalCell
+                key={cell.key}
+                {...cell}
+                onSelectEvent={setSelectedEvent}
+                isAdminView={isAdminView}
+              />
+            ))}
+          </div>
+        </div>
+
+        {isAdminView ? (
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-700/70 bg-slate-900/35 px-5 py-3">
+            {[
+              { label: 'Published', dot: 'bg-cyan-300' },
+              { label: 'Private', dot: 'bg-violet-300' },
+              { label: 'Draft', dot: 'bg-amber-300' },
+              { label: 'Closed', dot: 'bg-rose-300' },
+            ].map(({ label, dot }) => (
+              <span key={label} className="flex items-center gap-1.5 text-[12px] font-medium text-slate-300">
+                <span className={['h-2 w-2 rounded-full', dot].join(' ')} />
+                {label}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-slate-700/70 bg-slate-900/35 px-5 py-3">
+            {[
+              { label: 'Open', dot: 'bg-cyan-300' },
+              { label: 'Members only', dot: 'bg-violet-300' },
+              { label: 'Closed', dot: 'bg-rose-300' },
+            ].map(({ label, dot }) => (
+              <span key={label} className="flex items-center gap-1.5 text-[11px] font-medium text-slate-300">
+                <span className={['h-2.5 w-2.5 rounded-full', dot].join(' ')} />
+                {label}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/Pages/Events/Calendar/DayLabels.js b/src/Pages/Events/Calendar/DayLabels.js
new file mode 100644
index 000000000..6b6e83b19
--- /dev/null
+++ b/src/Pages/Events/Calendar/DayLabels.js
@@ -0,0 +1,16 @@
+import { DAYS } from './calendarViewUtils';
+
+export default function DayLabels() {
+  return (
+    <div className="grid grid-cols-7 border-b border-slate-700/70 bg-slate-900/35">
+      {DAYS.map((dayName) => (
+        <div
+          key={dayName}
+          className="py-2 text-center text-[10px] font-bold uppercase tracking-[0.22em] text-slate-400"
+        >
+          {dayName}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/Pages/Events/Calendar/EventPopup.js b/src/Pages/Events/Calendar/EventPopup.js
new file mode 100644
index 000000000..152296582
--- /dev/null
+++ b/src/Pages/Events/Calendar/EventPopup.js
@@ -0,0 +1,296 @@
+import { useState, useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { getEventAttendanceSummary, joinWaitlistForSCEvent } from '../../../APIFunctions/SCEvents';
+import { calculateEventCapacity, getApiErrorMessage } from '../eventUtils';
+import { CalendarIcon, PinIcon, ClockIcon, XIcon } from '../EventIcons';
+import {
+  canUserManageEvent,
+  formatDate,
+  formatTime,
+  getBadgeText,
+  getRegistrationCta,
+  pillColors,
+} from './calendarViewUtils';
+
+export default function EventPopup({ event, onClose, isAdminView, user }) {
+  const popupRef = useRef(null);
+  const colors = pillColors(event, isAdminView);
+  const badgeText = getBadgeText(event, isAdminView);
+  const [attendeeCount, setAttendeeCount] = useState(null);
+  const [attendanceLoading, setAttendanceLoading] = useState(false);
+  const [attendanceLoaded, setAttendanceLoaded] = useState(false);
+  const [waitlistSubmitting, setWaitlistSubmitting] = useState(false);
+  const [waitlistMessage, setWaitlistMessage] = useState('');
+  const [waitlistError, setWaitlistError] = useState('');
+  const canManageEvent = canUserManageEvent(event, user);
+  const eventId = event?.id || event?._id;
+  const authToken = user?.token;
+
+  const { hasCapacityLimit, remainingSpots, isFull } = calculateEventCapacity(event, attendeeCount);
+
+  const registrationCta = getRegistrationCta(event);
+  const shouldShowWaitlistJoin =
+    !canManageEvent &&
+    event.status === 'published' &&
+    !registrationCta.disabled &&
+    isFull &&
+    !!event.waitlist_enabled;
+
+  useEffect(() => {
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    function onClickOutside(e) {
+      if (popupRef.current && !popupRef.current.contains(e.target)) {
+        onClose();
+      }
+    }
+    const timer = setTimeout(() => document.addEventListener('mousedown', onClickOutside), 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', onClickOutside);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    let isCurrent = true;
+    setAttendeeCount(null);
+    setAttendanceLoaded(false);
+    setAttendanceLoading(false);
+
+    async function fetchAttendanceSummary() {
+      if (!eventId || !authToken) {
+        return;
+      }
+      setAttendanceLoading(true);
+      const response = await getEventAttendanceSummary(eventId, authToken);
+      if (isCurrent && !response.error && typeof response.responseData?.attendee_count === 'number') {
+        setAttendeeCount(response.responseData.attendee_count);
+      }
+      if (isCurrent) {
+        setAttendanceLoaded(true);
+        setAttendanceLoading(false);
+      }
+    }
+
+    fetchAttendanceSummary();
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [eventId, authToken]);
+
+  async function handleJoinWaitlist() {
+    setWaitlistError('');
+    setWaitlistMessage('');
+
+    if (!authToken) {
+      setWaitlistError('You must be logged in to join the waitlist.');
+      return;
+    }
+
+    if (!eventId) {
+      setWaitlistError('Missing event id.');
+      return;
+    }
+
+    setWaitlistSubmitting(true);
+    const response = await joinWaitlistForSCEvent(eventId, authToken);
+    setWaitlistSubmitting(false);
+
+    if (response.error) {
+      setWaitlistError(getApiErrorMessage(response, { fallback: 'Failed to join waitlist.' }));
+      return;
+    }
+
+    setWaitlistMessage('Joined waitlist successfully.');
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4">
+      <div
+        ref={popupRef}
+        className="relative w-full max-w-sm rounded-xl border border-slate-400/35 bg-slate-900 shadow-lg"
+        role="dialog"
+        aria-modal="true"
+        aria-label={event.name}
+      >
+        <div className={['h-1 w-full rounded-t-xl', colors.dot].join(' ')} />
+
+        <div className="flex items-start justify-between px-5 pb-3 pt-4">
+          <div className="flex items-center gap-2">
+            <span className={['h-2.5 w-2.5 shrink-0 rounded-full', colors.dot].join(' ')} />
+            <span className={['text-xs font-semibold uppercase tracking-wider', colors.accent].join(' ')}>
+              {event.category || event.type || 'Event'}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-slate-400 transition hover:bg-slate-700/70 hover:text-white"
+            aria-label="Close"
+          >
+            <XIcon />
+          </button>
+        </div>
+
+        <div className="px-5 pb-4">
+          <h3 className="text-lg font-bold leading-snug text-white">
+            {event.name || 'Untitled Event'}
+          </h3>
+
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {badgeText && (
+              <span
+                className={[
+                  'rounded-full border px-2 py-0.5 text-[10px] font-medium',
+                  colors.border,
+                  colors.bg,
+                  colors.text,
+                ].join(' ')}
+              >
+                {badgeText}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="space-y-3 border-t border-slate-700/70 px-5 py-4">
+          {event.date && (
+            <div className="flex items-start gap-2.5 text-[15px] text-slate-200">
+              <span className="mt-0.5 text-slate-400"><CalendarIcon /></span>
+              <span>{formatDate(event.date)}</span>
+            </div>
+          )}
+
+          {event.time && (
+            <div className="flex items-start gap-2.5 text-sm text-slate-200">
+              <span className="mt-0.5 text-slate-400"><ClockIcon /></span>
+              <span>{formatTime(event.time)}</span>
+            </div>
+          )}
+
+          {event.location && (
+            <div className="flex items-start gap-2.5 text-sm text-slate-200">
+              <span className="mt-0.5 text-slate-400"><PinIcon /></span>
+              <span>{event.location}</span>
+            </div>
+          )}
+
+          {event.description && (
+            <p className="pt-1 text-sm leading-relaxed text-slate-300">
+              {event.description}
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-2 border-t border-slate-700/70 px-5 py-4">
+          {event.max_attendees > 0 && (
+            <p className="text-center text-xs text-slate-400">
+              {event.max_attendees} total spot{event.max_attendees !== 1 ? 's' : ''}
+              {canManageEvent && event.waitlist_enabled && (
+                <span className="ml-1 text-amber-300">· waitlist available</span>
+              )}
+            </p>
+          )}
+
+          {hasCapacityLimit && !canManageEvent && typeof remainingSpots === 'number' && (
+            <p className="text-center text-xs text-slate-400">
+              {remainingSpots} spot{remainingSpots !== 1 ? 's' : ''} left
+              {event.waitlist_enabled && (
+                <span className="ml-1 text-amber-300">· waitlist available</span>
+              )}
+            </p>
+          )}
+
+          {hasCapacityLimit && !canManageEvent && attendanceLoading && (
+            <p className="text-center text-xs text-slate-400">
+              Loading live spots...
+            </p>
+          )}
+
+          {hasCapacityLimit && !canManageEvent && attendanceLoaded && typeof remainingSpots !== 'number' && (
+            <p className="text-center text-xs text-slate-400">
+              Unable to load live spots
+            </p>
+          )}
+
+          {canManageEvent && (
+            <div className="grid grid-cols-1 gap-2">
+              <Link
+                to={`/events/${event.id}/admin/attendees`}
+                className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-emerald-400 hover:to-teal-400"
+                onClick={onClose}
+              >
+                View attendees
+              </Link>
+              <Link
+                to={`/events/${event.id}/edit`}
+                className="inline-flex w-full items-center justify-center rounded-xl border border-slate-400/40 bg-slate-800 px-6 py-2.5 text-sm font-semibold text-white transition hover:border-slate-300 hover:bg-slate-700"
+                onClick={onClose}
+              >
+                Edit event
+              </Link>
+            </div>
+          )}
+
+          {!canManageEvent && event.status === 'closed' && (
+            <div className="inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl border border-slate-600/60 bg-slate-800/70 px-6 py-2.5 text-sm font-semibold text-slate-400">
+              Registration closed
+            </div>
+          )}
+
+          {!canManageEvent && event.status === 'draft' && (
+            <div className="inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl border border-yellow-400/20 bg-yellow-500/10 px-6 py-2.5 text-sm font-semibold text-yellow-300">
+              Not yet published
+            </div>
+          )}
+
+          {!canManageEvent && event.status === 'published' && registrationCta.disabled && (
+            <div
+              className={[
+                'inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl px-6 py-2.5 text-sm font-semibold',
+                registrationCta.className,
+              ].join(' ')}
+            >
+              {registrationCta.label}
+            </div>
+          )}
+
+          {shouldShowWaitlistJoin && (
+            <button
+              type="button"
+              onClick={handleJoinWaitlist}
+              disabled={waitlistSubmitting}
+              className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-amber-400 hover:to-orange-400 disabled:cursor-not-allowed disabled:opacity-70"
+            >
+              {waitlistSubmitting ? 'Joining waitlist...' : 'Join waitlist'}
+            </button>
+          )}
+
+          {!shouldShowWaitlistJoin && !canManageEvent && event.status === 'published' && !registrationCta.disabled && (
+            <Link
+              to={`/events/${event.id}/register`}
+              className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-sky-400 hover:to-indigo-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
+              onClick={onClose}
+            >
+              {registrationCta.label}
+            </Link>
+          )}
+
+          {waitlistError && (
+            <p className="text-center text-xs text-red-300">{waitlistError}</p>
+          )}
+
+          {waitlistMessage && (
+            <p className="text-center text-xs text-emerald-300">{waitlistMessage}</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Pages/Events/Calendar/EventRow.js b/src/Pages/Events/Calendar/EventRow.js
new file mode 100644
index 000000000..1589d2b06
--- /dev/null
+++ b/src/Pages/Events/Calendar/EventRow.js
@@ -0,0 +1,40 @@
+import { formatTime, getBadgeText, pillColors } from './calendarViewUtils';
+
+export default function EventRow({ event, onSelect, isAdminView }) {
+  const colors = pillColors(event, isAdminView);
+  const badgeText = getBadgeText(event, isAdminView);
+  const timeLabel = formatTime(event.time);
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(event)}
+      className={[
+        'flex w-full items-center gap-1.5 rounded border px-1.5 py-1',
+        'text-left text-[11px] font-medium leading-tight',
+        'transition-all duration-150 hover:border-white/30 hover:brightness-110',
+        colors.bg,
+        colors.text,
+        colors.border,
+      ].join(' ')}
+      title={event.name}
+    >
+      <span className={['mt-1 h-1.5 w-1.5 shrink-0 rounded-full', colors.dot].join(' ')} />
+      <div className="min-w-0 flex-1 truncate">
+        {timeLabel && (
+          <span className="mr-1.5 font-semibold text-white/90">
+            {timeLabel}
+          </span>
+        )}
+        <span className="truncate">
+          {event.name || 'Untitled'}
+        </span>
+      </div>
+      {badgeText && (
+        <span className="hidden rounded border border-current/30 px-1 py-0.5 text-[9px] uppercase tracking-wide opacity-75 sm:inline">
+          {badgeText}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/src/Pages/Events/Calendar/MobileMonthAgenda.js b/src/Pages/Events/Calendar/MobileMonthAgenda.js
new file mode 100644
index 000000000..228d524b2
--- /dev/null
+++ b/src/Pages/Events/Calendar/MobileMonthAgenda.js
@@ -0,0 +1,86 @@
+import { formatTime, getBadgeText, pillColors } from './calendarViewUtils';
+
+export default function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
+  if (monthEvents.length === 0) {
+    return (
+      <div className="px-4 py-8 text-center text-sm text-slate-400">
+        No events scheduled this month.
+      </div>
+    );
+  }
+
+  const groupedEvents = monthEvents.reduce((groups, item) => {
+    const lastGroup = groups[groups.length - 1];
+    if (!lastGroup || lastGroup.dateKey !== item.dateKey) {
+      groups.push({ dateKey: item.dateKey, events: [item.event] });
+      return groups;
+    }
+    lastGroup.events.push(item.event);
+    return groups;
+  }, []);
+
+  return (
+    <div className="space-y-3 px-3 pb-4 pt-2">
+      {groupedEvents.map(({ dateKey, events }) => {
+        const [year, month, day] = dateKey.split('-');
+        const date = new Date(Number(year), Number(month) - 1, Number(day));
+        const weekday = date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase();
+        const dayOfMonth = String(date.getDate());
+
+        return (
+          <div key={dateKey} className="flex items-start gap-2">
+            <div className="w-[44px] shrink-0 pt-1 text-center">
+              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                {weekday}
+              </div>
+              <div className="text-xl font-semibold leading-6 text-slate-100">
+                {dayOfMonth}
+              </div>
+            </div>
+
+            <div className="min-w-0 flex-1 space-y-1.5">
+              {events.map((event) => {
+                const colors = pillColors(event, isAdminView);
+                const badgeText = getBadgeText(event, isAdminView);
+                const timeLabel = formatTime(event.time) || 'All day';
+
+                return (
+                  <button
+                    key={`${dateKey}-${event.id || event._id || event.name}`}
+                    type="button"
+                    onClick={() => onSelectEvent(event)}
+                    className={[
+                      'flex w-full items-end justify-between gap-3 rounded-lg border px-3 py-2.5 text-left transition-all',
+                      'hover:border-white/30 hover:brightness-110',
+                      colors.bg,
+                      colors.text,
+                      colors.border,
+                    ].join(' ')}
+                  >
+                    <div className="min-w-0 flex-1">
+                      <div className="whitespace-normal break-words text-sm font-semibold leading-snug">
+                        {event.name || 'Untitled Event'}
+                      </div>
+                      <div className="pt-1 text-xs font-semibold text-white/85">
+                        {timeLabel}
+                      </div>
+                    </div>
+
+                    <div className="min-w-[92px] text-right">
+                      <div className="whitespace-normal break-words text-xs opacity-85">
+                        {event.location || '\u00A0'}
+                      </div>
+                      <div className="pt-1 text-[10px] uppercase tracking-wide opacity-80">
+                        {badgeText || '\u00A0'}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/Pages/Events/Calendar/calendarViewUtils.js b/src/Pages/Events/Calendar/calendarViewUtils.js
new file mode 100644
index 000000000..342ef0330
--- /dev/null
+++ b/src/Pages/Events/Calendar/calendarViewUtils.js
@@ -0,0 +1,201 @@
+import { membershipState } from '../../../Enums';
+import { toDateKey } from '../eventUtils';
+
+export const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+const currentYear = new Date().getFullYear();
+export const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => currentYear + i);
+
+export function eventDateKey(event) {
+  if (!event.date) return null;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(event.date)) return event.date;
+  const d = new Date(event.date);
+  if (isNaN(d)) return null;
+  return toDateKey(d);
+}
+
+function toTimeSortValue(event) {
+  if (!event?.time) return Number.POSITIVE_INFINITY;
+  const [hour, minute] = String(event.time).split(':').map(Number);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) return Number.POSITIVE_INFINITY;
+  return hour * 60 + minute;
+}
+
+export function sortEventsForDay(events) {
+  return [...events].sort((a, b) => {
+    const timeDelta = toTimeSortValue(a) - toTimeSortValue(b);
+    if (timeDelta !== 0) return timeDelta;
+    return String(a.name || '').localeCompare(String(b.name || ''));
+  });
+}
+
+export function formatDate(dateStr) {
+  if (!dateStr) return '';
+  const d = new Date(`${dateStr}T12:00:00`);
+  if (isNaN(d)) return dateStr;
+  return d.toLocaleDateString('en-US', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function formatTime(timeStr) {
+  if (!timeStr) return '';
+  const [hours, minutes] = String(timeStr).split(':');
+  if (hours == null || minutes == null) return timeStr;
+
+  const h = Number(hours);
+  const m = Number(minutes);
+  if (Number.isNaN(h) || Number.isNaN(m)) return timeStr;
+
+  return new Date(2000, 0, 1, h, m).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+export function pillColors(event, isAdminView) {
+  const status = event.status || 'draft';
+  const visibility = event.visibility || 'public';
+
+  if (isAdminView) {
+    if (status === 'draft') {
+      return {
+        bg: 'bg-amber-500/12',
+        text: 'text-amber-200',
+        border: 'border-amber-400/40',
+        dot: 'bg-amber-300',
+        accent: 'text-amber-300',
+      };
+    }
+
+    if (status === 'closed') {
+      return {
+        bg: 'bg-rose-500/12',
+        text: 'text-rose-200',
+        border: 'border-rose-400/40',
+        dot: 'bg-rose-300',
+        accent: 'text-rose-300',
+      };
+    }
+
+    if (visibility === 'private') {
+      return {
+        bg: 'bg-violet-500/12',
+        text: 'text-violet-200',
+        border: 'border-violet-400/40',
+        dot: 'bg-violet-300',
+        accent: 'text-violet-300',
+      };
+    }
+
+    return {
+      bg: 'bg-cyan-500/12',
+      text: 'text-cyan-100',
+      border: 'border-cyan-400/40',
+      dot: 'bg-cyan-300',
+      accent: 'text-cyan-300',
+    };
+  }
+
+  if (status === 'closed') {
+    return {
+      bg: 'bg-rose-500/16',
+      text: 'text-rose-200',
+      border: 'border-rose-400/30',
+      dot: 'bg-rose-300',
+      accent: 'text-rose-300',
+    };
+  }
+
+  if (visibility === 'private') {
+    return {
+      bg: 'bg-violet-500/16',
+      text: 'text-violet-200',
+      border: 'border-violet-400/30',
+      dot: 'bg-violet-300',
+      accent: 'text-violet-300',
+    };
+  }
+
+  return {
+    bg: 'bg-cyan-500/16',
+    text: 'text-cyan-100',
+    border: 'border-cyan-400/30',
+    dot: 'bg-cyan-300',
+    accent: 'text-cyan-300',
+  };
+}
+
+export function getBadgeText(event, isAdminView) {
+  const status = event.status || 'draft';
+  const visibility = event.visibility || 'public';
+
+  if (isAdminView) {
+    if (status === 'draft') return 'Draft';
+    if (status === 'closed') return 'Closed';
+    if (visibility === 'private') return 'Private';
+    return 'Published';
+  }
+
+  if (status === 'closed') return 'Closed';
+  if (visibility === 'private') return 'Members only';
+  return '';
+}
+
+export function getRegistrationCta(event) {
+  const registrationStatus = event?.registration_status || 'none';
+
+  switch (registrationStatus) {
+  case 'registered':
+    return {
+      label: 'Registered',
+      disabled: true,
+      className: 'border border-emerald-400/30 bg-emerald-500/10 text-emerald-200',
+    };
+  case 'pending':
+    return {
+      label: 'Pending',
+      disabled: true,
+      className: 'border border-amber-400/30 bg-amber-500/10 text-amber-200',
+    };
+  case 'waitlisted':
+    return {
+      label: 'On waitlist',
+      disabled: true,
+      className: 'border border-violet-400/30 bg-violet-500/10 text-violet-200',
+    };
+  case 'rejected':
+    return {
+      label: 'Unavailable',
+      disabled: true,
+      className: 'border border-slate-500/40 bg-slate-700/40 text-slate-300',
+    };
+  default:
+    return {
+      label: 'Register',
+      disabled: false,
+      className: '',
+    };
+  }
+}
+
+export function canUserManageEvent(event, user) {
+  const userId = user?._id != null ? String(user._id) : '';
+  const eventAdmins = Array.isArray(event.admins) ? event.admins.map((id) => String(id)) : [];
+
+  if (eventAdmins.length > 0 && userId && eventAdmins.includes(userId)) {
+    return true;
+  }
+
+  if (eventAdmins.length === 0 && (user?.accessLevel ?? 0) >= membershipState.ADMIN) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/src/Pages/Events/CalendarView.js b/src/Pages/Events/CalendarView.js
deleted file mode 100644
index 77a6ef570..000000000
--- a/src/Pages/Events/CalendarView.js
+++ /dev/null
@@ -1,959 +0,0 @@
-import { useState, useMemo, useEffect, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { getEventAttendanceSummary, getMyEventRegistrationState, joinWaitlistForSCEvent } from '../../APIFunctions/SCEvents';
-import { membershipState } from '../../Enums';
-import { calculateEventCapacity, getApiErrorMessage, toDateKey } from './eventUtils';
-
-const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-const MONTHS = [
-  'January', 'February', 'March', 'April', 'May', 'June',
-  'July', 'August', 'September', 'October', 'November', 'December',
-];
-const currentYear = new Date().getFullYear();
-const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => currentYear + i);
-
-function eventDateKey(event) {
-  if (!event.date) return null;
-  if (/^\d{4}-\d{2}-\d{2}$/.test(event.date)) return event.date;
-  const d = new Date(event.date);
-  if (isNaN(d)) return null;
-  return toDateKey(d);
-}
-
-function toTimeSortValue(event) {
-  if (!event?.time) return Number.POSITIVE_INFINITY;
-  const [hour, minute] = String(event.time).split(':').map(Number);
-  if (Number.isNaN(hour) || Number.isNaN(minute)) return Number.POSITIVE_INFINITY;
-  return hour * 60 + minute;
-}
-
-function sortEventsForDay(events) {
-  return [...events].sort((a, b) => {
-    const timeDelta = toTimeSortValue(a) - toTimeSortValue(b);
-    if (timeDelta !== 0) return timeDelta;
-    return String(a.name || '').localeCompare(String(b.name || ''));
-  });
-}
-
-function formatDate(dateStr) {
-  if (!dateStr) return '';
-  const d = new Date(`${dateStr}T12:00:00`);
-  if (isNaN(d)) return dateStr;
-  return d.toLocaleDateString('en-US', {
-    weekday: 'long',
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-  });
-}
-
-function formatTime(timeStr) {
-  if (!timeStr) return '';
-  const [hours, minutes] = String(timeStr).split(':');
-  if (hours == null || minutes == null) return timeStr;
-
-  const h = Number(hours);
-  const m = Number(minutes);
-  if (Number.isNaN(h) || Number.isNaN(m)) return timeStr;
-
-  return new Date(2000, 0, 1, h, m).toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-  });
-}
-
-function pillColors(event, isAdminView) {
-  const status = event.status || 'draft';
-  const visibility = event.visibility || 'public';
-
-  if (isAdminView) {
-    if (status === 'draft') {
-      return {
-        bg: 'bg-amber-500/12',
-        text: 'text-amber-200',
-        border: 'border-amber-400/40',
-        dot: 'bg-amber-300',
-        accent: 'text-amber-300',
-      };
-    }
-
-    if (status === 'closed') {
-      return {
-        bg: 'bg-rose-500/12',
-        text: 'text-rose-200',
-        border: 'border-rose-400/40',
-        dot: 'bg-rose-300',
-        accent: 'text-rose-300',
-      };
-    }
-
-    if (visibility === 'private') {
-      return {
-        bg: 'bg-violet-500/12',
-        text: 'text-violet-200',
-        border: 'border-violet-400/40',
-        dot: 'bg-violet-300',
-        accent: 'text-violet-300',
-      };
-    }
-
-    return {
-      bg: 'bg-cyan-500/12',
-      text: 'text-cyan-100',
-      border: 'border-cyan-400/40',
-      dot: 'bg-cyan-300',
-      accent: 'text-cyan-300',
-    };
-  }
-
-  if (status === 'closed') {
-    return {
-      bg: 'bg-rose-500/16',
-      text: 'text-rose-200',
-      border: 'border-rose-400/30',
-      dot: 'bg-rose-300',
-      accent: 'text-rose-300',
-    };
-  }
-
-  if (visibility === 'private') {
-    return {
-      bg: 'bg-violet-500/16',
-      text: 'text-violet-200',
-      border: 'border-violet-400/30',
-      dot: 'bg-violet-300',
-      accent: 'text-violet-300',
-    };
-  }
-
-  return {
-    bg: 'bg-cyan-500/16',
-    text: 'text-cyan-100',
-    border: 'border-cyan-400/30',
-    dot: 'bg-cyan-300',
-    accent: 'text-cyan-300',
-  };
-}
-
-function getBadgeText(event, isAdminView) {
-  const status = event.status || 'draft';
-  const visibility = event.visibility || 'public';
-
-  if (isAdminView) {
-    if (status === 'draft') return 'Draft';
-    if (status === 'closed') return 'Closed';
-    if (visibility === 'private') return 'Private';
-    return 'Published';
-  }
-
-  if (status === 'closed') return 'Closed';
-  if (visibility === 'private') return 'Members only';
-  return '';
-}
-
-function getRegistrationCta(event) {
-  const registrationStatus = event?.registration_status || 'none';
-
-  switch (registrationStatus) {
-  case 'registered':
-    return {
-      label: 'Registered',
-      disabled: true,
-      className: 'border border-emerald-400/30 bg-emerald-500/10 text-emerald-200',
-    };
-  case 'pending':
-    return {
-      label: 'Pending',
-      disabled: true,
-      className: 'border border-amber-400/30 bg-amber-500/10 text-amber-200',
-    };
-  case 'waitlisted':
-    return {
-      label: 'On waitlist',
-      disabled: true,
-      className: 'border border-violet-400/30 bg-violet-500/10 text-violet-200',
-    };
-  case 'rejected':
-    return {
-      label: 'Unavailable',
-      disabled: true,
-      className: 'border border-slate-500/40 bg-slate-700/40 text-slate-300',
-    };
-  default:
-    return {
-      label: 'Register',
-      disabled: false,
-      className: '',
-    };
-  }
-}
-
-/**
- * Checks if a user has permission to manage an event.
- * @param {Object} event The event object.
- * @param {Object} user The user object.
- * @returns {boolean} True if the user can manage the event.
- */
-function canUserManageEvent(event, user) {
-  const userId = user?._id != null ? String(user._id) : '';
-  const eventAdmins = Array.isArray(event.admins) ? event.admins.map((id) => String(id)) : [];
-
-  // 1. If user is explicitly listed as an admin for this event
-  if (eventAdmins.length > 0 && userId && eventAdmins.includes(userId)) {
-    return true;
-  }
-
-  // 2. If the event has no admins, allow users with level 3 (ADMIN) or higher to manage it
-  if (eventAdmins.length === 0 && (user?.accessLevel ?? 0) >= membershipState.ADMIN) {
-    return true;
-  }
-
-  return false;
-}
-
-// ─── icons ────────────────────────────────────────────────────────────────────
-
-import {
-  ChevronLeft,
-  ChevronRight,
-  CalendarIcon,
-  PinIcon,
-  ClockIcon,
-  XIcon,
-  PlusIcon
-} from './EventIcons';
-
-// ─── Event popup ──────────────────────────────────────────────────────────────
-
-function EventPopup({ event, onClose, isAdminView, user }) {
-  const popupRef = useRef(null);
-  const colors = pillColors(event, isAdminView);
-  const badgeText = getBadgeText(event, isAdminView);
-  const userId = user?._id != null ? String(user._id) : '';
-  const [attendeeCount, setAttendeeCount] = useState(null);
-  const [attendanceLoading, setAttendanceLoading] = useState(false);
-  const [attendanceLoaded, setAttendanceLoaded] = useState(false);
-  const [waitlistSubmitting, setWaitlistSubmitting] = useState(false);
-  const [waitlistMessage, setWaitlistMessage] = useState('');
-  const [waitlistError, setWaitlistError] = useState('');
-  const canManageEvent = canUserManageEvent(event, user);
-  const [hasRegistered, setHasRegistered] = useState(false);
-  const [isCheckingRegistration, setIsCheckingRegistration] = useState(false);
-  const eventId = event?.id || event?._id;
-  const authToken = user?.token;
-
-  const { maxAttendees, hasCapacityLimit, remainingSpots, isFull } = calculateEventCapacity(event, attendeeCount);
-
-  const registrationCta = getRegistrationCta(event);
-  const shouldShowWaitlistJoin =
-    !canManageEvent &&
-    event.status === 'published' &&
-    !registrationCta.disabled &&
-    isFull &&
-    !!event.waitlist_enabled;
-
-  useEffect(() => {
-    function onKey(e) {
-      if (e.key === 'Escape') onClose();
-    }
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  useEffect(() => {
-    async function fetchMyRegistrationState() {
-      if (!userId || canManageEvent || !user?.token || event.status !== 'published') {
-        setHasRegistered(false);
-        setIsCheckingRegistration(false);
-        return;
-      }
-
-      setIsCheckingRegistration(true);
-      const eventID = event?.id || event?._id;
-      const response = await getMyEventRegistrationState(eventID, user.token);
-      if (!response.error) {
-        setHasRegistered(Boolean(response.responseData?.registered));
-      } else {
-        setHasRegistered(false);
-      }
-      setIsCheckingRegistration(false);
-    }
-
-    fetchMyRegistrationState();
-  }, [canManageEvent, event, user?.token, userId]);
-
-  useEffect(() => {
-    function onClickOutside(e) {
-      if (popupRef.current && !popupRef.current.contains(e.target)) {
-        onClose();
-      }
-    }
-    const timer = setTimeout(() => document.addEventListener('mousedown', onClickOutside), 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('mousedown', onClickOutside);
-    };
-  }, [onClose]);
-
-  useEffect(() => {
-    let isCurrent = true;
-    setAttendeeCount(null);
-    setAttendanceLoaded(false);
-    setAttendanceLoading(false);
-
-    async function fetchAttendanceSummary() {
-      if (!eventId || !authToken) {
-        return;
-      }
-      setAttendanceLoading(true);
-      const response = await getEventAttendanceSummary(eventId, authToken);
-      if (isCurrent && !response.error && typeof response.responseData?.attendee_count === 'number') {
-        setAttendeeCount(response.responseData.attendee_count);
-      }
-      if (isCurrent) {
-        setAttendanceLoaded(true);
-        setAttendanceLoading(false);
-      }
-    }
-
-    fetchAttendanceSummary();
-
-    return () => {
-      isCurrent = false;
-    };
-  }, [eventId, authToken]);
-
-  async function handleJoinWaitlist() {
-    setWaitlistError('');
-    setWaitlistMessage('');
-
-    if (!authToken) {
-      setWaitlistError('You must be logged in to join the waitlist.');
-      return;
-    }
-
-    if (!eventId) {
-      setWaitlistError('Missing event id.');
-      return;
-    }
-
-    setWaitlistSubmitting(true);
-    const response = await joinWaitlistForSCEvent(eventId, authToken);
-    setWaitlistSubmitting(false);
-
-    if (response.error) {
-      setWaitlistError(getApiErrorMessage(response, { fallback: 'Failed to join waitlist.' }));
-      return;
-    }
-
-    setWaitlistMessage('Joined waitlist successfully.');
-  }
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/70">
-      <div
-        ref={popupRef}
-        className="relative w-full max-w-sm border shadow-lg rounded-xl border-slate-400/35 bg-slate-900"
-        role="dialog"
-        aria-modal="true"
-        aria-label={event.name}
-      >
-        <div className={['h-1 w-full rounded-t-xl', colors.dot].join(' ')} />
-
-        <div className="flex items-start justify-between px-5 pt-4 pb-3">
-          <div className="flex items-center gap-2">
-            <span className={['h-2.5 w-2.5 shrink-0 rounded-full', colors.dot].join(' ')} />
-            <span className={['text-xs font-semibold uppercase tracking-wider', colors.accent].join(' ')}>
-              {event.category || event.type || 'Event'}
-            </span>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1 transition rounded-md text-slate-400 hover:bg-slate-700/70 hover:text-white"
-            aria-label="Close"
-          >
-            <XIcon />
-          </button>
-        </div>
-
-        <div className="px-5 pb-4">
-          <h3 className="text-lg font-bold leading-snug text-white">
-            {event.name || 'Untitled Event'}
-          </h3>
-
-          <div className="mt-2 flex flex-wrap gap-1.5">
-            {badgeText && (
-              <span
-                className={[
-                  'rounded-full border px-2 py-0.5 text-[10px] font-medium',
-                  colors.border,
-                  colors.bg,
-                  colors.text,
-                ].join(' ')}
-              >
-                {badgeText}
-              </span>
-            )}
-          </div>
-        </div>
-
-        <div className="px-5 py-4 space-y-3 border-t border-slate-700/70">
-          {event.date && (
-            <div className="flex items-start gap-2.5 text-[15px] text-slate-200">
-              <span className="mt-0.5 text-slate-400"><CalendarIcon /></span>
-              <span>{formatDate(event.date)}</span>
-            </div>
-          )}
-
-          {event.time && (
-            <div className="flex items-start gap-2.5 text-sm text-slate-200">
-              <span className="mt-0.5 text-slate-400"><ClockIcon /></span>
-              <span>{formatTime(event.time)}</span>
-            </div>
-          )}
-
-          {event.location && (
-            <div className="flex items-start gap-2.5 text-sm text-slate-200">
-              <span className="mt-0.5 text-slate-400"><PinIcon /></span>
-              <span>{event.location}</span>
-            </div>
-          )}
-
-          {event.description && (
-            <p className="pt-1 text-sm leading-relaxed text-slate-300">
-              {event.description}
-            </p>
-          )}
-        </div>
-
-        <div className="px-5 py-4 space-y-2 border-t border-slate-700/70">
-          {event.max_attendees > 0 && (
-            <p className="text-xs text-center text-slate-400">
-              {event.max_attendees} total spot{event.max_attendees !== 1 ? 's' : ''}
-              {canManageEvent && event.waitlist_enabled && (
-                <span className="ml-1 text-amber-300">· waitlist available</span>
-              )}
-            </p>
-          )}
-
-          {hasCapacityLimit && !canManageEvent && typeof remainingSpots === 'number' && (
-            <p className="text-xs text-center text-slate-400">
-              {remainingSpots} spot{remainingSpots !== 1 ? 's' : ''} left
-              {event.waitlist_enabled && (
-                <span className="ml-1 text-amber-300">· waitlist available</span>
-              )}
-            </p>
-          )}
-
-          {hasCapacityLimit && !canManageEvent && attendanceLoading && (
-            <p className="text-xs text-center text-slate-400">
-              Loading live spots...
-            </p>
-          )}
-
-          {hasCapacityLimit && !canManageEvent && attendanceLoaded && typeof remainingSpots !== 'number' && (
-            <p className="text-xs text-center text-slate-400">
-              Unable to load live spots
-            </p>
-          )}
-          {canManageEvent && (
-            <div className="grid grid-cols-1 gap-2">
-              <Link
-                to={`/events/${event.id}/admin/attendees`}
-                className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-emerald-400 hover:to-teal-400"
-                onClick={onClose}
-              >
-                View attendees
-              </Link>
-              <Link
-                to={`/events/${event.id}/edit`}
-                className="inline-flex w-full items-center justify-center rounded-xl border border-slate-400/40 bg-slate-800 px-6 py-2.5 text-sm font-semibold text-white transition hover:border-slate-300 hover:bg-slate-700"
-                onClick={onClose}
-              >
-                Edit event
-              </Link>
-            </div>
-          )}
-
-          {!canManageEvent && event.status === 'closed' && (
-            <div className="inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl border border-slate-600/60 bg-slate-800/70 px-6 py-2.5 text-sm font-semibold text-slate-400">
-              Registration closed
-            </div>
-          )}
-
-          {!canManageEvent && event.status === 'draft' && (
-            <div className="inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl border border-yellow-400/20 bg-yellow-500/10 px-6 py-2.5 text-sm font-semibold text-yellow-300">
-              Not yet published
-            </div>
-          )}
-
-          {!canManageEvent && event.status === 'published' && registrationCta.disabled && (
-            <div
-              className={[
-                'inline-flex w-full cursor-not-allowed items-center justify-center rounded-xl px-6 py-2.5 text-sm font-semibold',
-                registrationCta.className,
-              ].join(' ')}
-            >
-              {registrationCta.label}
-            </div>
-          )}
-
-          {shouldShowWaitlistJoin && (
-            <button
-              type="button"
-              onClick={handleJoinWaitlist}
-              disabled={waitlistSubmitting}
-              className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-amber-400 hover:to-orange-400 disabled:cursor-not-allowed disabled:opacity-70"
-            >
-              {waitlistSubmitting ? 'Joining waitlist...' : 'Join waitlist'}
-            </button>
-          )}
-
-          {!shouldShowWaitlistJoin && !canManageEvent && event.status === 'published' && !registrationCta.disabled && (
-            <Link
-              to={`/events/${event.id}/register`}
-              className="inline-flex w-full items-center justify-center rounded-xl bg-gradient-to-r from-sky-500 to-indigo-500 px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:from-sky-400 hover:to-indigo-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
-              onClick={onClose}
-            >
-              {registrationCta.label}
-            </Link>
-          )}
-
-          {waitlistError && (
-            <p className="text-xs text-center text-red-300">{waitlistError}</p>
-          )}
-
-          {waitlistMessage && (
-            <p className="text-xs text-center text-emerald-300">{waitlistMessage}</p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Event pill ───────────────────────────────────────────────────────────────
-
-function EventRow({ event, onSelect, isAdminView }) {
-  const colors = pillColors(event, isAdminView);
-  const badgeText = getBadgeText(event, isAdminView);
-  const timeLabel = formatTime(event.time);
-
-  return (
-    <button
-      type="button"
-      onClick={() => onSelect(event)}
-      className={[
-        'flex w-full items-center gap-1.5 rounded border px-1.5 py-1',
-        'text-left text-[11px] font-medium leading-tight',
-        'transition-all duration-150 hover:border-white/30 hover:brightness-110',
-        colors.bg,
-        colors.text,
-        colors.border,
-      ].join(' ')}
-      title={event.name}
-    >
-      <span className={['mt-1 h-1.5 w-1.5 shrink-0 rounded-full', colors.dot].join(' ')} />
-      <div className="flex-1 min-w-0 truncate">
-        {timeLabel && (
-          <span className="mr-1.5 font-semibold text-white/90">
-            {timeLabel}
-          </span>
-        )}
-        <span className="truncate">
-          {event.name || 'Untitled'}
-        </span>
-      </div>
-      {badgeText && (
-        <span className="hidden rounded border border-current/30 px-1 py-0.5 text-[9px] uppercase tracking-wide opacity-75 sm:inline">
-          {badgeText}
-        </span>
-      )}
-    </button>
-  );
-}
-
-// ─── Day labels ───────────────────────────────────────────────────────────────
-
-function DayLabels() {
-  return (
-    <div className="grid grid-cols-7 border-b border-slate-700/70 bg-slate-900/35">
-      {DAYS.map((d) => (
-        <div
-          key={d}
-          className="py-2 text-center text-[10px] font-bold uppercase tracking-[0.22em] text-slate-400"
-        >
-          {d}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── Calendar cell ────────────────────────────────────────────────────────────
-
-function CalCell({ date, isCurrentMonth, isToday, events, onSelectEvent, isAdminView }) {
-  const sortedEvents = sortEventsForDay(events);
-  const mobileRows = sortedEvents.slice(0, 2);
-  const desktopOnlyRows = sortedEvents.slice(2, 4);
-  const hiddenCount = Math.max(sortedEvents.length - 4, 0);
-
-  return (
-    <div
-      className={[
-        'min-h-[106px] sm:min-h-[124px] border-b border-r border-slate-700/60 p-1.5 transition-colors duration-150',
-        isCurrentMonth ? '' : 'opacity-30',
-        isToday ? 'bg-cyan-500/[0.12]' : 'hover:bg-slate-700/35',
-      ].join(' ')}
-    >
-      <div className="flex justify-start mb-1">
-        <span
-          className={[
-            'flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-semibold',
-            isToday ? 'bg-cyan-400 text-slate-950' : isCurrentMonth ? 'text-slate-200' : 'text-slate-600',
-          ].join(' ')}
-        >
-          {date.getDate()}
-        </span>
-      </div>
-
-      <div className="flex flex-col gap-0.5">
-        {mobileRows.map((ev) => (
-          <EventRow
-            key={ev.id}
-            event={ev}
-            onSelect={onSelectEvent}
-            isAdminView={isAdminView}
-          />
-        ))}
-
-        {desktopOnlyRows.map((ev) => (
-          <div key={ev.id} className="hidden sm:block">
-            <EventRow
-              event={ev}
-              onSelect={onSelectEvent}
-              isAdminView={isAdminView}
-            />
-          </div>
-        ))}
-
-        {hiddenCount > 0 && (
-          <span className="pl-1 text-[10px] font-medium text-slate-400">
-            +{hiddenCount} more
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function MobileMonthAgenda({ monthEvents, onSelectEvent, isAdminView }) {
-  if (monthEvents.length === 0) {
-    return (
-      <div className="px-4 py-8 text-sm text-center text-slate-400">
-        No events scheduled this month.
-      </div>
-    );
-  }
-
-  const groupedEvents = monthEvents.reduce((groups, item) => {
-    const lastGroup = groups[groups.length - 1];
-    if (!lastGroup || lastGroup.dateKey !== item.dateKey) {
-      groups.push({ dateKey: item.dateKey, events: [item.event] });
-      return groups;
-    }
-    lastGroup.events.push(item.event);
-    return groups;
-  }, []);
-
-  return (
-    <div className="px-3 pt-2 pb-4 space-y-3">
-      {groupedEvents.map(({ dateKey, events }) => {
-        const [year, month, day] = dateKey.split('-');
-        const date = new Date(Number(year), Number(month) - 1, Number(day));
-        const weekday = date.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase();
-        const dayOfMonth = String(date.getDate());
-
-        return (
-          <div key={dateKey} className="flex items-start gap-2">
-            <div className="w-[44px] shrink-0 pt-1 text-center">
-              <div className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
-                {weekday}
-              </div>
-              <div className="text-xl font-semibold leading-6 text-slate-100">
-                {dayOfMonth}
-              </div>
-            </div>
-
-            <div className="min-w-0 flex-1 space-y-1.5">
-              {events.map((event) => {
-                const colors = pillColors(event, isAdminView);
-                const badgeText = getBadgeText(event, isAdminView);
-                const timeLabel = formatTime(event.time) || 'All day';
-
-                return (
-                  <button
-                    key={`${dateKey}-${event.id || event._id || event.name}`}
-                    type="button"
-                    onClick={() => onSelectEvent(event)}
-                    className={[
-                      'flex w-full items-end justify-between gap-3 rounded-lg border px-3 py-2.5 text-left transition-all',
-                      'hover:border-white/30 hover:brightness-110',
-                      colors.bg,
-                      colors.text,
-                      colors.border,
-                    ].join(' ')}
-                  >
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm font-semibold leading-snug break-words whitespace-normal">
-                        {event.name || 'Untitled Event'}
-                      </div>
-                      <div className="pt-1 text-xs font-semibold text-white/85">
-                        {timeLabel}
-                      </div>
-                    </div>
-
-                    <div className="min-w-[92px] text-right">
-                      <div className="text-xs break-words whitespace-normal opacity-85">
-                        {event.location || '\u00A0'}
-                      </div>
-                      <div className="pt-1 text-[10px] uppercase tracking-wide opacity-80">
-                        {badgeText || '\u00A0'}
-                      </div>
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// ─── Main export ──────────────────────────────────────────────────────────────
-
-export default function CalendarView({
-  events,
-  isAdminView = false,
-  user,
-  canCreateEvent = false,
-  cursor,
-  setCursor,
-}) {
-  const today = useMemo(() => new Date(), []);
-  const [selectedEvent, setSelectedEvent] = useState(null);
-
-  const eventsByDate = useMemo(() => {
-    const map = {};
-    events.forEach((ev) => {
-      const key = eventDateKey(ev);
-      if (!key) return;
-      if (!map[key]) map[key] = [];
-      map[key].push(ev);
-    });
-    Object.keys(map).forEach((key) => {
-      map[key] = sortEventsForDay(map[key]);
-    });
-    return map;
-  }, [events]);
-
-  const year = cursor.getFullYear();
-  const month = cursor.getMonth();
-
-  function handleMonthChange(e) {
-    const nextMonth = Number(e.target.value);
-    setCursor(new Date(year, nextMonth, 1));
-  }
-
-  function handleYearChange(e) {
-    const nextYear = Number(e.target.value);
-    setCursor(new Date(nextYear, month, 1));
-  }
-
-  const firstDayOfMonth = new Date(year, month, 1).getDay();
-  const daysInMonth = new Date(year, month + 1, 0).getDate();
-  const totalCells = Math.ceil((firstDayOfMonth + daysInMonth) / 7) * 7;
-  const todayKey = toDateKey(today);
-
-  const cells = Array.from({ length: totalCells }, (_, i) => {
-    const dayOffset = i - firstDayOfMonth;
-    const date = new Date(year, month, dayOffset + 1);
-    const key = toDateKey(date);
-    return {
-      date,
-      key,
-      isCurrentMonth: date.getMonth() === month,
-      isToday: key === todayKey,
-      events: eventsByDate[key] || [],
-    };
-  });
-
-  const monthEventCount = cells
-    .filter((c) => c.isCurrentMonth)
-    .reduce((sum, c) => sum + c.events.length, 0);
-
-  const monthEvents = useMemo(() => {
-    return cells
-      .filter((c) => c.isCurrentMonth && c.events.length > 0)
-      .flatMap((c) =>
-        c.events.map((event) => ({
-          event,
-          dateKey: c.key,
-        }))
-      );
-  }, [cells]);
-
-  return (
-    <>
-      {selectedEvent && (
-        <EventPopup
-          event={selectedEvent}
-          onClose={() => setSelectedEvent(null)}
-          isAdminView={isAdminView}
-          user={user}
-        />
-      )}
-
-      <div className="flex h-full max-h-full flex-col overflow-hidden rounded-xl border border-slate-500/50 bg-slate-800/85 shadow-[0_0_0_1px_rgba(148,163,184,0.05)] sm:h-auto sm:max-h-none">
-        <div className="flex flex-wrap items-start justify-between gap-3 px-5 py-4 border-b border-slate-600/50">
-          <div className="space-y-3">
-            <div className="flex flex-wrap items-center gap-3">
-              <div className="relative w-28 sm:w-36">
-                <select
-                  value={month}
-                  onChange={handleMonthChange}
-                  aria-label="Select month"
-                  className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                >
-                  {MONTHS.map((monthName, index) => (
-                    <option key={monthName} value={index} className="bg-slate-900">
-                      {monthName}
-                    </option>
-                  ))}
-                </select>
-
-                <div className="absolute inset-y-0 flex items-center pointer-events-none right-3 text-slate-300">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </div>
-              </div>
-
-              <div className="relative w-24">
-                <select
-                  value={year}
-                  onChange={handleYearChange}
-                  aria-label="Select year"
-                  className="h-10 w-full appearance-none rounded-lg border border-slate-400/40 bg-slate-800 px-4 pr-10 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
-                >
-                  {YEAR_RANGE.map((yearOption) => (
-                    <option key={yearOption} value={yearOption} className="bg-slate-900">
-                      {yearOption}
-                    </option>
-                  ))}
-                </select>
-
-                <div className="absolute inset-y-0 flex items-center pointer-events-none right-3 text-slate-300">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </div>
-              </div>
-
-              <button
-                onClick={() => setCursor(new Date(today.getFullYear(), today.getMonth(), 1))}
-                className="h-10 rounded-lg border border-slate-400/40 bg-slate-800 px-4 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-cyan-400"
-              >
-                Today
-              </button>
-            </div>
-
-            <p className="text-sm font-medium tracking-wide text-slate-300">
-              {monthEventCount} event{monthEventCount !== 1 ? 's' : ''} this month
-            </p>
-          </div>
-
-          <div className="flex items-center gap-2">
-            {canCreateEvent && (
-              <Link
-                to="/events/create"
-                aria-label="Create event"
-                className="inline-flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
-              >
-                <PlusIcon />
-              </Link>
-            )}
-
-            <button
-              onClick={() => setCursor(new Date(year, month - 1, 1))}
-              aria-label="Previous month"
-              className="flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
-            >
-              <ChevronLeft />
-            </button>
-            <button
-              onClick={() => setCursor(new Date(year, month + 1, 1))}
-              aria-label="Next month"
-              className="flex items-center justify-center w-10 h-10 transition border rounded-lg border-slate-400/40 bg-slate-800 text-slate-100 hover:border-slate-300 hover:bg-slate-700 hover:text-white"
-            >
-              <ChevronRight />
-            </button>
-          </div>
-        </div>
-
-        <div className="flex-1 min-h-0 overflow-y-auto sm:hidden">
-          <MobileMonthAgenda
-            monthEvents={monthEvents}
-            onSelectEvent={setSelectedEvent}
-            isAdminView={isAdminView}
-          />
-        </div>
-
-        <div className="hidden sm:block">
-          <DayLabels />
-
-          <div className="grid grid-cols-7 [&>*:nth-child(7n)]:border-r-0">
-            {cells.map((cell) => (
-              <CalCell
-                key={cell.key}
-                {...cell}
-                onSelectEvent={setSelectedEvent}
-                isAdminView={isAdminView}
-              />
-            ))}
-          </div>
-        </div>
-
-        {isAdminView ? (
-          <div className="flex flex-wrap items-center px-5 py-3 border-t gap-x-4 gap-y-1 border-slate-700/70 bg-slate-900/35">
-            {[
-              { label: 'Published', dot: 'bg-cyan-300' },
-              { label: 'Private', dot: 'bg-violet-300' },
-              { label: 'Draft', dot: 'bg-amber-300' },
-              { label: 'Closed', dot: 'bg-rose-300' },
-            ].map(({ label, dot }) => (
-              <span key={label} className="flex items-center gap-1.5 text-[12px] font-medium text-slate-300">
-                <span className={['h-2 w-2 rounded-full', dot].join(' ')} />
-                {label}
-              </span>
-            ))}
-          </div>
-        ) : (
-          <div className="flex flex-wrap items-center px-5 py-3 border-t gap-x-4 gap-y-1 border-slate-700/70 bg-slate-900/35">
-            {[
-              { label: 'Open', dot: 'bg-cyan-300' },
-              { label: 'Members only', dot: 'bg-violet-300' },
-              { label: 'Closed', dot: 'bg-rose-300' },
-            ].map(({ label, dot }) => (
-              <span key={label} className="flex items-center gap-1.5 text-[11px] font-medium text-slate-300">
-                <span className={['h-2.5 w-2.5 rounded-full', dot].join(' ')} />
-                {label}
-              </span>
-            ))}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
diff --git a/src/Pages/Events/Events.js b/src/Pages/Events/Events.js
index 12948aa3f..f22368fff 100644
--- a/src/Pages/Events/Events.js
+++ b/src/Pages/Events/Events.js
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { getAllSCEvents } from '../../APIFunctions/SCEvents';
 import { useSCE } from '../../Components/context/SceContext';
 import { membershipState } from '../../Enums';
-import CalendarView from './CalendarView';
+import CalendarView from './Calendar/CalendarView';
 import { toDateKey } from './eventUtils';
 
 function canUserSeeEvent(event, user) {

From 794c6f196ffa9bdbf4b13503f577671dc6aa1ad2 Mon Sep 17 00:00:00 2001
From: Steven Le <stevenleusa79@yahoo.com>
Date: Fri, 1 May 2026 09:24:13 -0700
Subject: [PATCH 3/4] share code between edit + create event forms

---
 src/Pages/Events/CreateEventPage.js | 312 ++++----------------------
 src/Pages/Events/EditEventPage.js   | 291 ++++--------------------
 src/Pages/Events/EventEditorForm.js | 336 ++++++++++++++++++++++++++++
 3 files changed, 434 insertions(+), 505 deletions(-)
 create mode 100644 src/Pages/Events/EventEditorForm.js

diff --git a/src/Pages/Events/CreateEventPage.js b/src/Pages/Events/CreateEventPage.js
index a8b9027fe..58f055ee1 100644
--- a/src/Pages/Events/CreateEventPage.js
+++ b/src/Pages/Events/CreateEventPage.js
@@ -3,10 +3,10 @@ import { useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useSCE } from '../../Components/context/SceContext';
 import { createSCEvent } from '../../APIFunctions/SCEvents';
-import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock';
 import { membershipState } from '../../Enums';
 import { useEventQuestions, toApiRegistrationForm } from './useEventQuestions';
 import { getApiErrorMessage } from './eventUtils';
+import EventEditorForm from './EventEditorForm';
 
 /** Matches SCEvents `max_attendees` when there is no cap. */
 const UNLIMITED_ATTENDEES = -1;
@@ -155,267 +155,53 @@ export default function CreateEventPage() {
   }
 
   return (
-    <div className="m-10 max-w-4xl px-4 sm:px-6">
-      <div className="mb-8 pt-8 pb-2">
-        <Link to="/events" className="btn btn-ghost normal-case text-base pl-0 mb-4 font-medium text-gray-400 hover:text-white hover:bg-transparent">
-          ← Back to Events
-        </Link>
-        <h1 className="pb-3 text-4xl font-extrabold leading-tight tracking-tight text-gray-900 md:text-5xl dark:text-white">
-          Create event
-        </h1>
-        <p className="text-sm text-gray-500 dark:text-gray-400">Event id: {eventId}</p>
-      </div>
-
-      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">Event details</h2>
-      <div className="p-6 mb-10 space-y-4 border border-gray-200 rounded-lg shadow-sm bg-white dark:bg-gray-800 dark:border-gray-700">
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Event name *</span>
-          </div>
-          <input
-            type="text"
-            className="w-full text-sm input input-bordered sm:text-base"
-            value={eventName}
-            onChange={(e) => setEventName(e.target.value)}
-            placeholder="Event name"
-          />
-        </label>
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Date *</span>
-            </div>
-            <input
-              type="date"
-              className="w-full input input-bordered"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-            />
-          </label>
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Time *</span>
-            </div>
-            <input
-              type="time"
-              className="w-full input input-bordered"
-              value={time}
-              onChange={(e) => setTime(e.target.value)}
-            />
-          </label>
-        </div>
-
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Location</span>
-          </div>
-          <input
-            type="text"
-            className="w-full text-sm input input-bordered sm:text-base"
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            placeholder="Location"
-          />
-        </label>
-
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Description</span>
-          </div>
-          <textarea
-            className="w-full min-h-24 textarea textarea-bordered"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder="Description"
-          />
-        </label>
-
-        <div>
-          <div className="label">
-            <span className="label-text">Max attendees</span>
-          </div>
-          <div className="flex items-center gap-4">
-            <input
-              type="number"
-              min="1"
-              className="max-w-xs input input-bordered"
-              value={maxAttendees === UNLIMITED_ATTENDEES ? '' : maxAttendees}
-              disabled={maxAttendees === UNLIMITED_ATTENDEES}
-              onChange={(e) => {
-                if (!e.target.value) {
-                  setMaxAttendees('');
-                  return;
-                }
-                const val = parseInt(e.target.value, 10);
-                if (!isNaN(val)) setMaxAttendees(val);
-              }}
-              placeholder="e.g. 50"
-            />
-            <label className="flex gap-2 items-center text-sm cursor-pointer label">
-              <input
-                type="checkbox"
-                className="checkbox checkbox-sm"
-                checked={maxAttendees === UNLIMITED_ATTENDEES}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setMaxAttendees(UNLIMITED_ATTENDEES);
-                  } else {
-                    setMaxAttendees('');
-                  }
-                }}
-              />
-              <span className="label-text font-medium">No limit</span>
-            </label>
-          </div>
-        </div>
-
-        <div>
-          <div className="label">
-            <span className="label-text">Waitlist</span>
-          </div>
-
-          <div className="flex items-center gap-4">
-            <div className="max-w-xs">
-              {waitlistEnabled ? (
-                <input
-                  type="number"
-                  min="1"
-                  className="w-full input input-bordered"
-                  value={waitlistSize}
-                  onChange={(e) => setWaitlistSize(e.target.value ? parseInt(e.target.value, 10) : '')}
-                  placeholder="e.g. 20"
-                />
-              ) : (
-                <input
-                  type="text"
-                  className="w-full input input-bordered"
-                  value=""
-                  disabled
-                  placeholder="e.g. 20"
-                />
-              )}
-            </div>
-
-            <label className="flex gap-2 items-center text-sm cursor-pointer label">
-              <input
-                type="checkbox"
-                className="checkbox checkbox-sm"
-                checked={waitlistEnabled}
-                onChange={(e) => setWaitlistEnabled(e.target.checked)}
-              />
-              <span className="label-text font-medium">Enable waitlist</span>
-            </label>
-          </div>
-
-          {waitlistEnabled && (
-            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              Maximum number of users allowed on the waitlist.
-            </p>
-          )}
-        </div>
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Publish status</span>
-            </div>
-            <select
-              className="w-full select select-bordered"
-              value={status}
-              onChange={(e) => setStatus(e.target.value)}
-            >
-              <option value="draft">Draft</option>
-              <option value="published">Published</option>
-              <option value="closed">Closed</option>
-            </select>
-          </label>
-
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Visibility</span>
-            </div>
-            <select
-              className="w-full select select-bordered"
-              value={visibility}
-              onChange={(e) => {
-                const nextVisibility = e.target.value;
-                setVisibility(nextVisibility);
-                if (nextVisibility !== 'private') {
-                  setMinimumVisibleRole('');
-                }
-              }}
-            >
-              <option value="public">Public</option>
-              <option value="private">Private</option>
-            </select>
-          </label>
-        </div>
-
-        {visibility === 'private' && (
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Minimum visible role</span>
-            </div>
-            <select
-              className="w-full max-w-xs select select-bordered"
-              value={minimumVisibleRole}
-              onChange={(e) => setMinimumVisibleRole(e.target.value)}
-            >
-              <option value="">Select role</option>
-              <option value="member">Member</option>
-              <option value="officer">Officer</option>
-              <option value="admin">Admin</option>
-            </select>
-          </label>
-        )}
-      </div>
-
-      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
-        Registration questions
-      </h2>
-      <div className="mb-6 space-y-3">
-        {questions.map((q, index) => (
-          <CreateEventFormQuestionBlock
-            key={q.id}
-            question={q}
-            index={index}
-            onUpdateField={updateQuestion}
-            onChangeType={updateQuestionType}
-            onRemove={removeQuestion}
-            onUpdateAnswerOption={updateAnswerOption}
-            onAddAnswerOption={addAnswerOption}
-            onRemoveAnswerOption={removeAnswerOption}
-          />
-        ))}
-        <button
-          type="button"
-          className="w-full border-2 border-dashed btn btn-outline border-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
-          onClick={addQuestion}
-        >
-          + Add question
-        </button>
-      </div>
-
-      {submitError && (
-        <div className="p-3 mb-4 text-sm text-red-700 bg-red-50 rounded-lg dark:bg-red-900/30 dark:text-red-200">
-          {submitError}
-        </div>
-      )}
-
-      <div className="flex flex-wrap gap-3 justify-start pt-6 border-t border-gray-200 dark:border-gray-700">
-        <button
-          type="button"
-          className="btn btn-primary"
-          disabled={submitting}
-          onClick={handleCreateEvent}
-        >
-          {submitting ? 'Creating…' : 'Create event'}
-        </button>
-        <Link to="/events" className="btn btn-ghost">
-          Cancel
-        </Link>
-      </div>
-    </div>
+    <EventEditorForm
+      meta={{
+        title: 'Create event',
+        eventIdLabel: eventId,
+        containerClassName: 'm-10 max-w-4xl px-4 sm:px-6',
+        submitLabel: 'Create event',
+        submittingLabel: 'Creating…',
+        onSubmit: handleCreateEvent,
+        submitting,
+        submitError,
+        unlimitedAttendeesValue: UNLIMITED_ATTENDEES,
+        maxAttendeesMode: 'create',
+      }}
+      form={{
+        eventName,
+        setEventName,
+        date,
+        setDate,
+        time,
+        setTime,
+        location,
+        setLocation,
+        description,
+        setDescription,
+        status,
+        setStatus,
+        visibility,
+        setVisibility,
+        minimumVisibleRole,
+        setMinimumVisibleRole,
+        maxAttendees,
+        setMaxAttendees,
+        waitlistEnabled,
+        setWaitlistEnabled,
+        waitlistSize,
+        setWaitlistSize,
+      }}
+      questionActions={{
+        questions,
+        addQuestion,
+        removeQuestion,
+        updateQuestion,
+        updateQuestionType,
+        updateAnswerOption,
+        addAnswerOption,
+        removeAnswerOption,
+      }}
+    />
   );
 }
diff --git a/src/Pages/Events/EditEventPage.js b/src/Pages/Events/EditEventPage.js
index fbdd609af..4b045650b 100644
--- a/src/Pages/Events/EditEventPage.js
+++ b/src/Pages/Events/EditEventPage.js
@@ -3,10 +3,10 @@ import { useMemo, useState, useEffect } from 'react';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { useSCE } from '../../Components/context/SceContext';
 import { getEventByID, updateSCEvent } from '../../APIFunctions/SCEvents';
-import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock';
 import { membershipState } from '../../Enums';
 import { toApiRegistrationForm, useEventQuestions } from './useEventQuestions';
 import { getApiErrorMessage } from './eventUtils';
+import EventEditorForm from './EventEditorForm';
 
 /** Matches SCEvents `max_attendees` when there is no cap. */
 const UNLIMITED_ATTENDEES = -1;
@@ -186,246 +186,53 @@ export default function EditEventPage() {
   }
 
   return (
-    <div className="mx-auto my-10 max-w-4xl px-4 sm:px-6">
-      <div className="mb-8 pt-8 pb-2">
-        <Link to="/events" className="btn btn-ghost normal-case text-base pl-0 mb-4 font-medium text-gray-400 hover:text-white hover:bg-transparent">
-          ← Back to Events
-        </Link>
-        <h1 className="pb-3 text-4xl font-extrabold leading-tight tracking-tight text-gray-900 md:text-5xl dark:text-white">
-          Edit event
-        </h1>
-        <p className="text-sm text-gray-500 dark:text-gray-400">Event id: {id}</p>
-      </div>
-
-      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">Event details</h2>
-      <div className="p-6 mb-10 space-y-4 border border-gray-200 rounded-lg shadow-sm bg-white dark:bg-gray-800 dark:border-gray-700">
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Event name *</span>
-          </div>
-          <input
-            type="text"
-            className="w-full text-sm input input-bordered sm:text-base"
-            value={eventName}
-            onChange={(e) => setEventName(e.target.value)}
-            placeholder="Event name"
-          />
-        </label>
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Date *</span>
-            </div>
-            <input
-              type="date"
-              className="w-full input input-bordered"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-            />
-          </label>
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Time *</span>
-            </div>
-            <input
-              type="time"
-              className="w-full input input-bordered"
-              value={time}
-              onChange={(e) => setTime(e.target.value)}
-            />
-          </label>
-        </div>
-
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Location</span>
-          </div>
-          <input
-            type="text"
-            className="w-full text-sm input input-bordered sm:text-base"
-            value={location}
-            onChange={(e) => setLocation(e.target.value)}
-            placeholder="Location"
-          />
-        </label>
-
-        <label className="w-full form-control">
-          <div className="label">
-            <span className="label-text">Description</span>
-          </div>
-          <textarea
-            className="w-full min-h-24 textarea textarea-bordered"
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder="Description"
-          />
-        </label>
-
-        <div>
-          <div className="label">
-            <span className="label-text">Max attendees</span>
-          </div>
-          <input
-            type="number"
-            min="1"
-            className="max-w-xs input input-bordered"
-            value={maxAttendees === UNLIMITED_ATTENDEES ? '' : maxAttendees}
-            onChange={(e) =>
-              setMaxAttendees(
-                e.target.value ? parseInt(e.target.value, 10) : UNLIMITED_ATTENDEES,
-              )
-            }
-            placeholder="No limit"
-          />
-        </div>
-
-        <div>
-          <div className="label">
-            <span className="label-text">Waitlist</span>
-          </div>
-
-          <div className="flex items-center gap-4">
-            <div className="max-w-xs">
-              {waitlistEnabled ? (
-                <input
-                  type="number"
-                  min="1"
-                  className="w-full input input-bordered"
-                  value={waitlistSize}
-                  onChange={(e) => setWaitlistSize(e.target.value ? parseInt(e.target.value, 10) : '')}
-                  placeholder="e.g. 20"
-                />
-              ) : (
-                <input
-                  type="text"
-                  className="w-full input input-bordered"
-                  value=""
-                  disabled
-                  placeholder="e.g. 20"
-                />
-              )}
-            </div>
-
-            <label className="flex gap-2 items-center text-sm cursor-pointer label">
-              <input
-                type="checkbox"
-                className="checkbox checkbox-sm"
-                checked={waitlistEnabled}
-                onChange={(e) => setWaitlistEnabled(e.target.checked)}
-              />
-              <span className="label-text font-medium">Enable waitlist</span>
-            </label>
-          </div>
-
-          {waitlistEnabled && (
-            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
-              Maximum number of users allowed on the waitlist.
-            </p>
-          )}
-        </div>
-
-        <div className="grid gap-4 sm:grid-cols-2">
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Publish status</span>
-            </div>
-            <select
-              className="w-full select select-bordered"
-              value={status}
-              onChange={(e) => setStatus(e.target.value)}
-            >
-              <option value="draft">Draft</option>
-              <option value="published">Published</option>
-              <option value="closed">Closed</option>
-            </select>
-          </label>
-
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Visibility</span>
-            </div>
-            <select
-              className="w-full select select-bordered"
-              value={visibility}
-              onChange={(e) => {
-                const nextVisibility = e.target.value;
-                setVisibility(nextVisibility);
-                if (nextVisibility !== 'private') {
-                  setMinimumVisibleRole('');
-                }
-              }}
-            >
-              <option value="public">Public</option>
-              <option value="private">Private</option>
-            </select>
-          </label>
-        </div>
-
-        {visibility === 'private' && (
-          <label className="w-full form-control">
-            <div className="label">
-              <span className="label-text">Minimum visible role</span>
-            </div>
-            <select
-              className="w-full max-w-xs select select-bordered"
-              value={minimumVisibleRole}
-              onChange={(e) => setMinimumVisibleRole(e.target.value)}
-            >
-              <option value="">Select role</option>
-              <option value="member">Member</option>
-              <option value="officer">Officer</option>
-              <option value="admin">Admin</option>
-            </select>
-          </label>
-        )}
-      </div>
-
-      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
-        Registration questions
-      </h2>
-      <div className="mb-6 space-y-3">
-        {questions.map((q, index) => (
-          <CreateEventFormQuestionBlock
-            key={q.id}
-            question={q}
-            index={index}
-            onUpdateField={updateQuestion}
-            onChangeType={updateQuestionType}
-            onRemove={removeQuestion}
-            onUpdateAnswerOption={updateAnswerOption}
-            onAddAnswerOption={addAnswerOption}
-            onRemoveAnswerOption={removeAnswerOption}
-          />
-        ))}
-        <button
-          type="button"
-          className="w-full border-2 border-dashed btn btn-outline border-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
-          onClick={addQuestion}
-        >
-          + Add question
-        </button>
-      </div>
-
-      {submitError && (
-        <div className="p-3 mb-4 text-sm text-red-700 bg-red-50 rounded-lg dark:bg-red-900/30 dark:text-red-200">
-          {submitError}
-        </div>
-      )}
-
-      <div className="flex flex-wrap gap-3 justify-start pt-6 border-t border-gray-200 dark:border-gray-700">
-        <button
-          type="button"
-          className="btn btn-primary"
-          disabled={submitting}
-          onClick={handleUpdateEvent}
-        >
-          {submitting ? 'Updating…' : 'Save changes'}
-        </button>
-        <Link to="/events" className="btn btn-ghost">
-          Cancel
-        </Link>
-      </div>
-    </div>
+    <EventEditorForm
+      meta={{
+        title: 'Edit event',
+        eventIdLabel: id,
+        containerClassName: 'mx-auto my-10 max-w-4xl px-4 sm:px-6',
+        submitLabel: 'Save changes',
+        submittingLabel: 'Updating…',
+        onSubmit: handleUpdateEvent,
+        submitting,
+        submitError,
+        unlimitedAttendeesValue: UNLIMITED_ATTENDEES,
+        maxAttendeesMode: 'edit',
+      }}
+      form={{
+        eventName,
+        setEventName,
+        date,
+        setDate,
+        time,
+        setTime,
+        location,
+        setLocation,
+        description,
+        setDescription,
+        status,
+        setStatus,
+        visibility,
+        setVisibility,
+        minimumVisibleRole,
+        setMinimumVisibleRole,
+        maxAttendees,
+        setMaxAttendees,
+        waitlistEnabled,
+        setWaitlistEnabled,
+        waitlistSize,
+        setWaitlistSize,
+      }}
+      questionActions={{
+        questions,
+        addQuestion,
+        removeQuestion,
+        updateQuestion,
+        updateQuestionType,
+        updateAnswerOption,
+        addAnswerOption,
+        removeAnswerOption,
+      }}
+    />
   );
 }
diff --git a/src/Pages/Events/EventEditorForm.js b/src/Pages/Events/EventEditorForm.js
new file mode 100644
index 000000000..fc2eebe66
--- /dev/null
+++ b/src/Pages/Events/EventEditorForm.js
@@ -0,0 +1,336 @@
+import { Link } from 'react-router-dom';
+import CreateEventFormQuestionBlock from './CreateEventFormQuestionBlock';
+
+export default function EventEditorForm({
+  meta,
+  form,
+  questionActions,
+}) {
+  const {
+    title,
+    eventIdLabel,
+    containerClassName,
+    submitLabel,
+    submittingLabel,
+    onSubmit,
+    submitting,
+    submitError,
+    unlimitedAttendeesValue,
+    maxAttendeesMode,
+  } = meta;
+
+  const {
+    eventName,
+    setEventName,
+    date,
+    setDate,
+    time,
+    setTime,
+    location,
+    setLocation,
+    description,
+    setDescription,
+    status,
+    setStatus,
+    visibility,
+    setVisibility,
+    minimumVisibleRole,
+    setMinimumVisibleRole,
+    maxAttendees,
+    setMaxAttendees,
+    waitlistEnabled,
+    setWaitlistEnabled,
+    waitlistSize,
+    setWaitlistSize,
+  } = form;
+
+  const {
+    questions,
+    addQuestion,
+    removeQuestion,
+    updateQuestion,
+    updateQuestionType,
+    updateAnswerOption,
+    addAnswerOption,
+    removeAnswerOption,
+  } = questionActions;
+
+  return (
+    <div className={containerClassName}>
+      <div className="mb-8 pb-2 pt-8">
+        <Link to="/events" className="btn btn-ghost mb-4 pl-0 text-base font-medium normal-case text-gray-400 hover:bg-transparent hover:text-white">
+          ← Back to Events
+        </Link>
+        <h1 className="pb-3 text-4xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white md:text-5xl">
+          {title}
+        </h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Event id: {eventIdLabel}</p>
+      </div>
+
+      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">Event details</h2>
+      <div className="mb-10 space-y-4 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+        <label className="form-control w-full">
+          <div className="label">
+            <span className="label-text">Event name *</span>
+          </div>
+          <input
+            type="text"
+            className="input input-bordered w-full text-sm sm:text-base"
+            value={eventName}
+            onChange={(e) => setEventName(e.target.value)}
+            placeholder="Event name"
+          />
+        </label>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="form-control w-full">
+            <div className="label">
+              <span className="label-text">Date *</span>
+            </div>
+            <input
+              type="date"
+              className="input input-bordered w-full"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+            />
+          </label>
+          <label className="form-control w-full">
+            <div className="label">
+              <span className="label-text">Time *</span>
+            </div>
+            <input
+              type="time"
+              className="input input-bordered w-full"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+            />
+          </label>
+        </div>
+
+        <label className="form-control w-full">
+          <div className="label">
+            <span className="label-text">Location</span>
+          </div>
+          <input
+            type="text"
+            className="input input-bordered w-full text-sm sm:text-base"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            placeholder="Location"
+          />
+        </label>
+
+        <label className="form-control w-full">
+          <div className="label">
+            <span className="label-text">Description</span>
+          </div>
+          <textarea
+            className="textarea textarea-bordered min-h-24 w-full"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Description"
+          />
+        </label>
+
+        <div>
+          <div className="label">
+            <span className="label-text">Max attendees</span>
+          </div>
+          {maxAttendeesMode === 'create' ? (
+            <div className="flex items-center gap-4">
+              <input
+                type="number"
+                min="1"
+                className="input input-bordered max-w-xs"
+                value={maxAttendees === unlimitedAttendeesValue ? '' : maxAttendees}
+                disabled={maxAttendees === unlimitedAttendeesValue}
+                onChange={(e) => {
+                  if (!e.target.value) {
+                    setMaxAttendees('');
+                    return;
+                  }
+                  const val = parseInt(e.target.value, 10);
+                  if (!isNaN(val)) setMaxAttendees(val);
+                }}
+                placeholder="e.g. 50"
+              />
+              <label className="label flex cursor-pointer items-center gap-2 text-sm">
+                <input
+                  type="checkbox"
+                  className="checkbox checkbox-sm"
+                  checked={maxAttendees === unlimitedAttendeesValue}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setMaxAttendees(unlimitedAttendeesValue);
+                    } else {
+                      setMaxAttendees('');
+                    }
+                  }}
+                />
+                <span className="label-text font-medium">No limit</span>
+              </label>
+            </div>
+          ) : (
+            <input
+              type="number"
+              min="1"
+              className="input input-bordered max-w-xs"
+              value={maxAttendees === unlimitedAttendeesValue ? '' : maxAttendees}
+              onChange={(e) =>
+                setMaxAttendees(
+                  e.target.value ? parseInt(e.target.value, 10) : unlimitedAttendeesValue,
+                )
+              }
+              placeholder="No limit"
+            />
+          )}
+        </div>
+
+        <div>
+          <div className="label">
+            <span className="label-text">Waitlist</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="max-w-xs">
+              {waitlistEnabled ? (
+                <input
+                  type="number"
+                  min="1"
+                  className="input input-bordered w-full"
+                  value={waitlistSize}
+                  onChange={(e) => setWaitlistSize(e.target.value ? parseInt(e.target.value, 10) : '')}
+                  placeholder="e.g. 20"
+                />
+              ) : (
+                <input
+                  type="text"
+                  className="input input-bordered w-full"
+                  value=""
+                  disabled
+                  placeholder="e.g. 20"
+                />
+              )}
+            </div>
+
+            <label className="label flex cursor-pointer items-center gap-2 text-sm">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-sm"
+                checked={waitlistEnabled}
+                onChange={(e) => setWaitlistEnabled(e.target.checked)}
+              />
+              <span className="label-text font-medium">Enable waitlist</span>
+            </label>
+          </div>
+
+          {waitlistEnabled && (
+            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+              Maximum number of users allowed on the waitlist.
+            </p>
+          )}
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          <label className="form-control w-full">
+            <div className="label">
+              <span className="label-text">Publish status</span>
+            </div>
+            <select
+              className="select select-bordered w-full"
+              value={status}
+              onChange={(e) => setStatus(e.target.value)}
+            >
+              <option value="draft">Draft</option>
+              <option value="published">Published</option>
+              <option value="closed">Closed</option>
+            </select>
+          </label>
+
+          <label className="form-control w-full">
+            <div className="label">
+              <span className="label-text">Visibility</span>
+            </div>
+            <select
+              className="select select-bordered w-full"
+              value={visibility}
+              onChange={(e) => {
+                const nextVisibility = e.target.value;
+                setVisibility(nextVisibility);
+                if (nextVisibility !== 'private') {
+                  setMinimumVisibleRole('');
+                }
+              }}
+            >
+              <option value="public">Public</option>
+              <option value="private">Private</option>
+            </select>
+          </label>
+        </div>
+
+        {visibility === 'private' && (
+          <label className="form-control w-full">
+            <div className="label">
+              <span className="label-text">Minimum visible role</span>
+            </div>
+            <select
+              className="select select-bordered w-full max-w-xs"
+              value={minimumVisibleRole}
+              onChange={(e) => setMinimumVisibleRole(e.target.value)}
+            >
+              <option value="">Select role</option>
+              <option value="member">Member</option>
+              <option value="officer">Officer</option>
+              <option value="admin">Admin</option>
+            </select>
+          </label>
+        )}
+      </div>
+
+      <h2 className="mb-3 text-xl font-semibold text-gray-900 dark:text-white">
+        Registration questions
+      </h2>
+      <div className="mb-6 space-y-3">
+        {questions.map((q, index) => (
+          <CreateEventFormQuestionBlock
+            key={q.id}
+            question={q}
+            index={index}
+            onUpdateField={updateQuestion}
+            onChangeType={updateQuestionType}
+            onRemove={removeQuestion}
+            onUpdateAnswerOption={updateAnswerOption}
+            onAddAnswerOption={addAnswerOption}
+            onRemoveAnswerOption={removeAnswerOption}
+          />
+        ))}
+        <button
+          type="button"
+          className="btn btn-outline w-full border-2 border-dashed border-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
+          onClick={addQuestion}
+        >
+          + Add question
+        </button>
+      </div>
+
+      {submitError && (
+        <div className="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-200">
+          {submitError}
+        </div>
+      )}
+
+      <div className="flex flex-wrap justify-start gap-3 border-t border-gray-200 pt-6 dark:border-gray-700">
+        <button
+          type="button"
+          className="btn btn-primary"
+          disabled={submitting}
+          onClick={onSubmit}
+        >
+          {submitting ? submittingLabel : submitLabel}
+        </button>
+        <Link to="/events" className="btn btn-ghost">
+          Cancel
+        </Link>
+      </div>
+    </div>
+  );
+}

From ee49ae3708bc3d6fd302922c7e776d612580e81c Mon Sep 17 00:00:00 2001
From: Steven Le <stevenleusa79@yahoo.com>
Date: Fri, 1 May 2026 09:28:03 -0700
Subject: [PATCH 4/4] fix lint

---
 src/Pages/Events/useEventQuestions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Pages/Events/useEventQuestions.js b/src/Pages/Events/useEventQuestions.js
index 4636f4399..cc42075e9 100644
--- a/src/Pages/Events/useEventQuestions.js
+++ b/src/Pages/Events/useEventQuestions.js
@@ -1,3 +1,4 @@
+/* eslint-disable camelcase -- SCEvents registration question shape uses snake_case */
 import { useState } from 'react';
 
 export function newQuestionTemplate() {