From fb087630e1338250faaf761b5d53123f60c6647d Mon Sep 17 00:00:00 2001
From: Steven Le <stevenleusa79@yahoo.com>
Date: Fri, 1 May 2026 09:56:14 -0700
Subject: [PATCH] extract shared editor form for create + edit event

---
 src/Pages/Events/CreateEventPage.js | 312 ++++----------------------
 src/Pages/Events/EditEventPage.js   | 291 ++++--------------------
 src/Pages/Events/EventEditorForm.js | 336 ++++++++++++++++++++++++++++
 src/Pages/Events/Events.js          |   6 +-
 4 files changed, 437 insertions(+), 508 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>
+  );
+}
diff --git a/src/Pages/Events/Events.js b/src/Pages/Events/Events.js
index 12948aa3f..e9b0794a3 100644
--- a/src/Pages/Events/Events.js
+++ b/src/Pages/Events/Events.js
@@ -79,7 +79,7 @@ export default function EventsPage() {
   return (
     <div className={pageContainerClass}>
       {/* Ambient blobs — unchanged from original */}
-      <div className="pointer-events-none absolute inset-0">
+      <div className="absolute inset-0 pointer-events-none">
         <div className="absolute -top-24 left-[-8rem] h-[22rem] w-[22rem] rounded-full bg-sky-400/10 blur-3xl" />
         <div className="absolute right-[-8rem] top-[10rem] h-[24rem] w-[24rem] rounded-full bg-indigo-500/10 blur-3xl" />
       </div>
@@ -87,13 +87,13 @@ export default function EventsPage() {
       {/* ── Calendar area ── */}
       <div className={calendarContainerClass}>
         {isLoading && (
-          <div className="py-16 text-center text-lg text-gray-300">
+          <div className="py-16 text-lg text-center text-gray-300">
             Loading events...
           </div>
         )}
 
         {!isLoading && hasError && (
-          <div className="rounded-2xl border border-red-400/30 bg-red-500/10 p-6 text-center text-lg text-red-100">
+          <div className="p-6 text-lg text-center text-red-100 border rounded-2xl border-red-400/30 bg-red-500/10">
             Failed to load events. Please make sure SCEvents is running locally.
           </div>
         )}