Admin Settings & Form Config — frontend implementation

[adityapat24]

Goal

The admin shell, admin landing, and settings page are fully built. Admins can edit dates, toggle show-decision, and edit the form config from the UI. Mocks return success, real persistence comes later.

Tasks

Admin layout

• src/app/(admin)/layout.tsx: full admin shell with AdminSidebar on the left, header with UserMenu on the right, content area in the middle.
  • What this accomplishes: Every admin page has consistent navigation. Tickets 6 and 7 just drop their pages into the content slot.
• Placeholder admin gate (real requireAdmin() comes in the backend sprint).
  • What this accomplishes: Page renders for now but the security boundary is documented.

AdminSidebar

• Working links to /admin, /admin/settings, /admin/applicants, /admin/stats.
• Active route is visually highlighted.
• Mobile: collapses into a hamburger.
  • What this accomplishes: Admins can move between sections easily on any device.

Admin landing page

• /admin page: tile grid linking to Settings, Applicants, Stats with brief descriptions of each.
  • What this accomplishes: Admins who land at /admin see a navigation hub instead of an empty page.

Settings page

• /admin/settings: organized into three sections — "Dates," "Display," "Form Configuration."
• Three DateControl instances (one per date singleton) in the Dates section.
  • What this accomplishes: Admins control when registration opens, when it closes, and the RSVP confirm-by deadline from one screen.
• ShowDecisionToggle in the Display section.
  • What this accomplishes: Admins can hide or show decisions to applicants with a single switch.
• FormConfigEditor in the Form Configuration section.
  • What this accomplishes: Admins can add, edit, reorder, and delete application questions without a code change.

DateControl component

• shadcn date+time picker pre-populated from the mock GET response.
• "Save" button calls the right POST endpoint, shows loading state, toast on success/error.
  • What this accomplishes: Admins get clear feedback that their change was saved. Optimistic update so the UI feels instant.

ShowDecisionToggle component

• shadcn Switch component, label "Show decisions to applicants."
• Toggling calls POST /api/v1/show-decision. Optimistic update with rollback on error.
  • What this accomplishes: One-click control over whether applicants see admitted/waitlisted/declined or just "submitted."

FormConfigEditor component

• List of current questions with drag handles for reordering.
• "Add question" button opens a dialog to define a new question (ID, label, type, options if select/multi-select, required flag).
• Each existing question has "Edit" and "Delete" actions.
• "Save form configuration" button at the bottom persists all changes at once.
  • What this accomplishes: Admins manage the entire application without touching code. Drag-to-reorder is the natural mental model.

Styling

• Consistent shadcn styling across all controls.
• Looks good on desktop

Definition of done

• /admin and /admin/settings are fully styled and navigable.
• All three controls call their endpoints (which 501 for now) and handle response cases correctly.
• FormConfigEditor allows adding, editing, reordering, and deleting questions in local state.
• AdminSidebar is in place for Tickets 6 and 7 to consume.