commit 3d381944d2acc598546a9cd126cbe559cece9407
Author: joshua <joshua@crosscode.co.za>
Date:   Thu Jul 23 15:26:47 2026 +0200

    Initial commit
    
    Next.js + Express event management app for Hope Family Church.

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..176d8f6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# dependencies
+node_modules/
+
+# env files (never commit real secrets — .env.example files are fine)
+.env
+.env.*
+!.env.example
+
+# IDE
+.idea/
+.vscode/
+
+# next.js
+.next/
+out/
+
+# build output
+dist/
+build/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log
+
+# typescript
+*.tsbuildinfo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# misc scratch / generated files
+temp/
+backend/public/uploads/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..94d9844
--- /dev/null
+++ b/README.md
@@ -0,0 +1,198 @@
+# Hope Events Platform
+
+Hope Events is a full-stack event management platform that allows users to browse events, register for them, make payments, and manage their tickets.
+
+## Project Structure
+
+The project is divided into two main parts:
+
+- Backend: Node.js + Express + Prisma + PostgreSQL
+- Frontend: Next.js (React) + Tailwind CSS
+
+### Backend
+
+The backend provides a RESTful API for managing users, events, registrations, payments, uploads, and tickets. It includes:
+
+- JWT-based authentication and role-based authorization
+- Event and registration management
+- Payment integration with Yoco (checkout + webhooks)
+- Ticket generation (PDF + QR) and email delivery
+- Static uploads for event images
+
+Documentation: see Backend API Documentation and Backend README for environment setup and endpoints.
+- Backend API Documentation: ./backend/API_DOCUMENTATION.md
+- Backend README: ./backend/README.md
+
+### Frontend
+
+The frontend is a Next.js app that provides:
+
+- User authentication (login, register)
+- Browse/search events and view details
+- Register for events and pay via Yoco
+- Manage and view tickets
+
+Documentation: see Frontend README for environment and scripts.
+- Frontend README: ./frontend/README.md
+
+## Getting Started (Local Development)
+
+### Prerequisites
+
+- Node.js 18+ (recommended)
+- npm or yarn
+- PostgreSQL database
+
+### 1) Install dependencies
+
+- Backend
+  - cd backend
+  - npm install
+
+- Frontend
+  - cd ../frontend
+  - npm install
+
+### 2) Configure environment variables
+
+- Backend: create backend/.env and set required variables (see backend/README.md). At minimum:
+  - DATABASE_URL
+  - JWT_SECRET
+  - PORT (optional; defaults to 3000 if not set)
+  - YOCO_SECRET_KEY (for payments)
+  - YOCO_WEBHOOK_SECRET (to verify webhooks)
+  - EMAIL_HOST, EMAIL_PORT, EMAIL_USER, EMAIL_PASS, EMAIL_FROM (for ticket emails)
+  - FRONTEND_URL or APP_BASE_URL (used in email links)
+
+- Frontend: create frontend/.env.local and set
+  - NEXT_PUBLIC_API_URL=http://localhost:<backend-port>
+  Example for default backend: NEXT_PUBLIC_API_URL=http://localhost:5000
+
+- Organisation name, logo, brand colour, and notification emails are configured via the admin panel (Admin → Site Settings) and do not need to be set in .env files.
+
+### 3) Run the apps
+
+- Start backend (development):
+  - cd backend
+  - npm run dev
+  - By default runs at http://localhost:3000 (or the PORT you set)
+
+- Start frontend (development):
+  - cd ../frontend
+  - npm run dev
+  - Next.js dev server runs at http://localhost:3000 by default; if it conflicts with backend, it will pick another port (e.g., 3001). Ensure NEXT_PUBLIC_API_URL points to the backend port.
+
+## Deployment
+
+### Backend Deployment
+
+1. Provision a PostgreSQL database and set DATABASE_URL.
+2. Set all required environment variables (see backend/README.md).
+3. Run Prisma migrations (if applicable).
+4. Start the server with: npm start (or a process manager like PM2).
+5. Expose the webhook endpoint /api/webhooks/yoco publicly and configure the YOCO webhook to point to it.
+6. Ensure the uploads directory public/uploads exists and is writable.
+
+### Frontend Deployment
+
+1. Build the frontend:
+   - cd frontend
+   - npm run build
+2. Run with npm start (Next.js) on your server, or deploy to a platform like Vercel.
+3. Ensure NEXT_PUBLIC_API_URL points to the public URL of your backend (including port if not 80/443).
+
+### Ports and URLs
+
+- Backend default port is 3000 unless overridden by PORT.
+- Frontend dev server commonly uses 3000; set NEXT_PUBLIC_API_URL to avoid clashes (e.g., backend 3000, frontend 3001).
+
+## Useful Links
+
+- Backend API Documentation: ./backend/API_DOCUMENTATION.md
+- Backend README: ./backend/README.md
+- Frontend README: ./frontend/README.md
+
+## Recent Changes
+
+### Sold-out handling, tiered stock warnings & UI polish
+
+**Backend**
+- `GET /api/events` now computes and returns `isSoldOut: boolean` per event — true when every option with a stock limit (`stockLimit > 0`) is fully sold out. Events with only unlimited options are never sold out.
+- `POST /api/settings/test-smtp` error responses now include a `raw` field (the original error message) alongside the human-readable `message`. Error code 530 (Microsoft "Client not authenticated to send mail") is now correctly mapped to the authentication-failure message.
+
+**Frontend**
+- **Event listing** (`/events`): `EventCard` shows a disabled "Sold Out" button (red tint) when `isSoldOut` is true, replacing the Register button. Free events now show "Register" without the "- R0.00" suffix.
+- **Event detail page** (`/events/[id]`): computes sold-out state from returned option `availableCount`; shows a disabled "Sold Out" button instead of the Register link. Options with price `0` display "Free" instead of "R0.00".
+- **Registration page** (`/register/[eventId]`): shows a red "This event is sold out" banner and replaces the Register button with a disabled "Sold Out" button when all limited options are exhausted.
+- **Tiered low-stock threshold**: the "X remaining" badge now uses capacity-based percentages — ≤ 50 tickets: 20 %; 51–200: 15 %; 201–1,000: 10 %; 1,000+: 5 %. Changed from `Math.ceil` to `Math.round` to prevent rounding-up inflation of the threshold. Fixed a React rendering bug where `stockLimit && stockLimit > 0 && ...` evaluated to the number `0` (which React renders as visible text) instead of a boolean — this caused "00" to appear next to options with unlimited stock (`stockLimit = 0`).
+- **Event image upload**: the EventForm (used in the create modal) now shows a file upload button with inline preview alongside the URL input field. Files are uploaded to `POST /api/uploads/event-image` and the returned URL is set automatically.
+- **Attachments during event creation**: step 6 ("Attachments") of the supervisor create-event wizard now lets you stage files. They are uploaded to `POST /api/events/:id/attachments` immediately after the event record is created, so attachments no longer require a separate edit session.
+- **SMTP test details**: on failure the "Test connection" result now shows a collapsible "Show technical details" section exposing the raw SMTP error alongside the friendly message. `ApiError` in `src/lib/api.ts` now carries a `data` field with the full JSON response body.
+
+
+
+### Variants, stock limits, early-bird pricing & cancellation guard
+
+**Backend**
+- **`OptionVariant` model**: event options can now have sub-variants (sizes, colours, ticket types — e.g. Adult/Child/VIP under a single "Ticket" option). Variants have an optional `price` override and their own `stockLimit`.
+- **Stock limits**: `stockLimit` added to `EventOption` and `EarlyBirdTier`. A value of `0` means unlimited. All stock counts exclude cancelled registrations.
+- **Early-bird concurrency handling**: once a Yoco checkout has been issued at an early-bird price, that price is honoured even if another user simultaneously exhausts the tier's stock. Stock-based forfeiture only applies at registration time (via `resolveOptionPrice`). Deadline expiry at payment time forfeits the price; stock races after the checkout is issued do not.
+- **Early-bird stock forfeiture**: if a tier's deadline passes after registration but before payment, `refreshPricingForRegistration` (called before every Yoco checkout) re-evaluates the tier and updates `priceSnapshot`. If prices changed, `POST /api/payments/yoco-checkout` returns `{ priceUpdated: true, newTotal }` (HTTP 200) so the frontend can show a warning before retrying.
+- **`priceSnapshot` / `appliedTierId`** on `RegistrationOption`: price and tier are snapshotted at registration creation. `computeRegistrationTotalDue` uses `priceSnapshot` as authoritative when present (legacy rows without a snapshot fall back to deadline-only re-evaluation).
+- **Cancelled registration tickets**: `GET /api/tickets/mytickets` now excludes tickets from cancelled registrations at the database level.
+- **Cancellation payment guard**: `DELETE /api/registrations/:id` blocks non-admins from cancelling a registration that has positive payments. Admins can cancel at any time.
+- **Variant CRUD**: `POST /api/events/options/:id/variants`, `PUT /api/events/variants/:id`, `DELETE /api/events/variants/:id`.
+- **Testing mode** (`NODE_ENV=testing`): behaves like development (permissive CORS, all debug routes) but validates required env vars (`DATABASE_URL`, `JWT_SECRET`) at startup and enables rate limiting.
+
+**Frontend**
+- **Register page** (`/register/[eventId]`): variant picker — when an option has variants, shows each variant with its own qty control, stock badge (sold out / X remaining at ≤ 15 %), and price. Submission payload includes `variantId`. Early-bird notice shown when any active tier is present.
+- **Event detail page** (`/events/[id]`): ticket section shows variant breakdown with "From R…" pricing, early-bird strikethrough, and sold-out/nearly-out badges.
+- **User dashboard**: "Cancel registration" button appears in the registration modal when no payments have been made. Inline confirmation before the API call.
+- **Pay page**: if the backend returns `priceUpdated: true`, an amber warning banner shows the new total and a dismiss button before the user can retry.
+- **Supervisor events page** (`/dashboard/supervisor/events`): 6-step create/edit modal — "Basic Details", "Items & Pricing", "Sections", "Form", "Visibility", "Attachments". In create mode, step tabs are not clickable (linear navigation only); in edit mode any step can be jumped to. Options in "Items & Pricing" are collapsible cards; Variants and Early-bird tiers are expandable sub-sections within each option. `/dashboard/supervisor/sections` now redirects to the Events page.
+- **Legal pages**: Terms of Use updated with early-bird pricing terms, partial payment terms, and self-cancellation policy. Privacy Policy updated with data anonymisation details.
+
+
+
+### Site settings & first-time setup wizard
+- **Admin → Site Settings** (`/dashboard/admin/settings`): organisation details, branding (colour + logo), notification emails, **SMTP email delivery**, and **legal page content** are stored in the database and editable at runtime.
+- **Setup wizard** (`/setup`): on a fresh deployment (empty database) the platform automatically shows a wizard — organisation details, admin account creation, and branding. No manual DB seeding required.
+- **`/api/settings`** (public): exposes public settings (org details, legal keys) for navbar and legal pages.
+- **`/api/setup`** (public, one-time): creates the first admin account; blocked once any user exists.
+- **Settings cache** (`settingsCache.js`): in-process 60-second cache with transparent AES-256-GCM decryption for sensitive keys.
+- **SMTP via admin panel**: host, port, TLS, from address, username, and password are all configurable without touching `.env`. Password is stored AES-256-GCM encrypted (key derived from `JWT_SECRET`).
+- **Legal pages dynamic**: Terms of Use and Privacy Policy populate org name, contact email, website URL, operator name, Information Officer details, and effective date from the settings DB.
+- **`ORG_NAME`, `ORG_TAGLINE`, `EMAIL_HEADER_COLOR`, `REGISTRATIONS_EMAIL`, SMTP vars** no longer required in `.env` — all managed via the admin panel (env vars still work as fallbacks).
+
+### Admin dashboard improvements
+- **User management** (`/dashboard/admin/users`): filtering (role, active status, text search) is now server-side so page size is always consistent; per-page selector (10/25/50/100); "Delete data" button anonymises a user's personal information via `POST /api/users/:id/anonymize`.
+- **Registrations** (`/dashboard/admin/registrations`): event dropdown, status, and fuzzy text filters; expandable rows showing ticket options and form responses loaded on demand.
+
+### Forms page (`/dashboard/supervisor/forms`, `/dashboard/admin/forms`)
+- **Print** opens a clean popup window (no site chrome) with one form response per A4 page — event name, attendee details, registration ID, and answers in a two-column grid.
+- **User filter** replaced raw "User ID" text input with a searchable name/email/phone dropdown.
+- **Event filter** includes "Include past events" and "Include inactive events" checkboxes.
+- Filters in a responsive grid; dropdowns constrained to `max-w-xs`.
+
+### Ticket printing
+- **At-the-door individual print**: individual ticket print now generates a proper A6 ticket with QR code, event title, date, type, holder name, and ID — no longer just a UUID.
+- **Staff event-tickets page**: A4 print layout matches at-the-door (2 columns × 4 rows, 8 tickets per page).
+
+### Form builder & events
+- **Form builder**: up/down reorder buttons; type badge (Text/Number/Date/etc.); separate quick-add buttons for Statement and Heading fields.
+- **Early-bird tiers**: no manual order number — tiers ordered by list position; labelled Deadline and Price inputs.
+
+### Bulk messaging dropdowns
+- Attendee selection dropdown constrained to `max-w-xs` / `w-64` panel on email-attendees and whatsapp-attendees pages.
+
+### Backend
+- `GET /api/users` supports server-side `?search=`, `?role=`, `?isActive=` filtering.
+- `POST /api/users/:id/anonymize` — erases personal data (admin only).
+- `GET|PUT /api/settings`, `GET /api/settings/needs-setup`, `POST /api/setup` — settings and setup endpoints.
+- `POST /api/uploads/logo` — logo upload (admin, or unauthenticated during first-time setup).
+- `backend/src/utils/encryption.js` — AES-256-GCM encrypt/decrypt; key derived from `JWT_SECRET` via scrypt.
+- SMTP transporter rebuilt dynamically when settings cache detects a config change — no restart required after updating SMTP settings.
+
+## License
+
+This project is licensed under the MIT License.
\ No newline at end of file
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..fec5d1e
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,53 @@
+# ─── Database ────────────────────────────────────────────────────────────────
+DATABASE_URL="postgresql://username:password@localhost:5432/hope_events"
+
+# ─── Auth ─────────────────────────────────────────────────────────────────────
+JWT_SECRET=your_jwt_secret_here_minimum_32_characters
+
+# ─── Server ───────────────────────────────────────────────────────────────────
+PORT=5000
+NODE_ENV=development
+
+# ─── CORS ─────────────────────────────────────────────────────────────────────
+# Comma-separated list of allowed frontend origins
+FRONTEND_URL=http://localhost:3000
+
+# ─── Email (SMTP) — optional fallbacks ───────────────────────────────────────
+# Preferred: configure SMTP via Admin → Site Settings (stored AES-256 encrypted).
+# These env vars are used as fallbacks if no SMTP settings are saved in the DB.
+# EMAIL_HOST=smtp.example.com
+# EMAIL_PORT=587
+# EMAIL_USER=your_email@example.com
+# EMAIL_PASS=your_email_password
+# EMAIL_FROM=no-reply@example.com
+
+# ─── Payments (Yoco) ──────────────────────────────────────────────────────────
+YOCO_SECRET_KEY=your_yoco_secret_key
+YOCO_WEBHOOK_SECRET=your_yoco_webhook_secret
+
+# ─── Public URLs ──────────────────────────────────────────────────────────────
+# Used to build links in emails (password reset, activation, etc.)
+APP_BASE_URL=https://your-frontend-domain.com
+# Used to serve ticket PDFs to WhatsApp (must be publicly reachable)
+BACKEND_URL=https://your-backend-domain.com
+
+# ─── WhatsApp (WAWP) — optional, preferred stored via Admin → Site Settings ───
+# These are env-var fallbacks. Use the admin panel to manage them at runtime.
+WAWP_ACCESS_TOKEN=your_wawp_access_token
+WAWP_INSTANCE_ID=your_wawp_instance_id
+
+# ─── Background workers ───────────────────────────────────────────────────────
+DAILY_SUMMARY_ENABLED=true
+SCHEDULED_EMAILS_ENABLED=true
+SCHEDULED_EMAILS_INTERVAL_MS=30000
+
+# ─── Note ─────────────────────────────────────────────────────────────────────
+# The following are managed via Admin → Site Settings and stored in the database:
+#   - Organisation name, tagline, contact details, branding colour, logo
+#   - Registration notification emails
+#   - SMTP settings (username and password stored AES-256-GCM encrypted, key
+#     derived from JWT_SECRET — do not change JWT_SECRET after saving SMTP creds)
+#   - Legal page content (operator name, Information Officer, website URL, etc.)
+# The first-time setup wizard handles initial configuration on fresh deployments.
+# You no longer need ORG_NAME, ORG_TAGLINE, EMAIL_HEADER_COLOR, REGISTRATIONS_EMAIL,
+# or SMTP vars in this file (they still work as fallbacks if the DB entry is absent).
\ No newline at end of file
diff --git a/backend/API_DOCUMENTATION.md b/backend/API_DOCUMENTATION.md
new file mode 100644
index 0000000..89f23af
--- /dev/null
+++ b/backend/API_DOCUMENTATION.md
@@ -0,0 +1,525 @@
+# Hope Events — API Documentation
+
+Full interactive docs (with request/response examples) are available at `GET /docs?token=<admin-jwt>` on the running backend.
+
+All authenticated requests require:
+```
+Authorization: Bearer <jwt>
+```
+
+Tokens are issued by `POST /api/users/login`.
+
+---
+
+## Table of Contents
+
+- [Users](#users)
+- [Events](#events)
+- [Event Options & Variants](#event-options--variants)
+- [Event Attachments](#event-attachments)
+- [Registrations](#registrations)
+- [Payments](#payments)
+- [Tickets](#tickets)
+- [Broadcasts (Email)](#broadcasts-email)
+- [WhatsApp Broadcasts](#whatsapp-broadcasts)
+- [Scheduled Messages](#scheduled-messages)
+- [Automations](#automations)
+- [Reports](#reports)
+- [Uploads](#uploads)
+- [Sections](#sections)
+- [Banner](#banner)
+- [Forms](#forms)
+- [Yoco Transactions](#yoco-transactions)
+- [WhatsApp Admin](#whatsapp-admin)
+- [Webhooks](#webhooks)
+- [Settings](#settings)
+- [Setup](#setup)
+- [Static Files](#static-files)
+
+---
+
+## Users
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/users` | public | Register new account |
+| POST | `/api/users/login` | public | Login, returns JWT |
+| POST | `/api/users/forgot` | public | Request password reset email |
+| POST | `/api/users/reset` | public | Reset password with token |
+| POST | `/api/users/activate` | public | Activate account from email link |
+| GET | `/api/users/profile` | user+ | Own profile |
+| PUT | `/api/users/profile` | user+ | Update own profile |
+| POST | `/api/users/revoke-sessions` | user+ | Revoke own sessions |
+| POST | `/api/users/close-account` | user+ | Deactivate own account |
+| GET | `/api/users` | supervisor+ | List users — supports `?search=`, `?role=`, `?isActive=true\|false`, `?page=`, `?limit=` |
+| GET | `/api/users/:id` | admin | Get user by ID |
+| PUT | `/api/users/:id` | admin | Update user (name, email, role, isActive, phoneNumber) |
+| DELETE | `/api/users/:id` | admin | Deactivate user (`isActive: false`) |
+| POST | `/api/users/:id/revoke-sessions` | admin | Revoke all sessions for a user |
+| POST | `/api/users/:id/anonymize` | admin | Erase personal data — sets name to "Deleted User", clears email/phone, deactivates account |
+
+### POST /api/users
+```json
+{
+  "name": "Jane Smith",
+  "email": "jane@example.com",
+  "password": "securepass123",
+  "phoneNumber": "+27821234567"
+}
+```
+Returns: `{ _id, name, email, role, token }`
+
+### POST /api/users/login
+```json
+{ "email": "jane@example.com", "password": "securepass123" }
+```
+Returns: `{ _id, name, email, role, token }`
+
+### PUT /api/users/profile
+```json
+{ "name": "Jane Doe", "phoneNumber": "+27829999999", "notificationPreference": "email" }
+```
+`notificationPreference`: `"email"` | `"whatsapp"` | `"both"`
+
+---
+
+## Events
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/events` | public | Active, public, upcoming events. Includes `isSoldOut: boolean` per event. |
+| GET | `/api/events/all` | staff+ | All events including hidden/past (`?includePast=true`, `?includeInactive=true`) |
+| GET | `/api/events/admin/all` | admin | Admin view of all events |
+| GET | `/api/events/:id` | public | Full event detail — options, variants, earlyBirdTiers, attachments, form, availableCount per option/variant |
+| GET | `/api/events/by-alias/:redirectUrl` | public | Get event by URL alias |
+| POST | `/api/events` | supervisor+ | Create event |
+| PUT | `/api/events/:id` | supervisor+ | Update event |
+| DELETE | `/api/events/:id` | admin | Delete event |
+| POST | `/api/events/:id/email-attendees` | supervisor+ | Bulk email attendees (`dryRun: true` to preview) |
+| POST | `/api/events/:id/email-attendees/schedule` | supervisor+ | Schedule bulk email |
+| POST | `/api/events/:id/whatsapp-attendees` | supervisor+ | Bulk WhatsApp to attendees (`dryRun: true` to preview) |
+| POST | `/api/events/:id/whatsapp-attendees/schedule` | supervisor+ | Schedule bulk WhatsApp |
+| GET | `/api/events/attachments/status` | admin | Attachment manifest sync status |
+| POST | `/api/events/attachments/sync` | admin | Re-sync attachment manifests to DB |
+
+### isSoldOut logic (`GET /api/events`)
+`isSoldOut` is `true` when every option on the event that has `stockLimit > 0` has sold out its full allocation (computed from non-cancelled `RegistrationOption` quantities). Events with no limited options are never marked sold out.
+
+### POST /api/events
+```json
+{
+  "title": "Family Camp 2025",
+  "description": "Annual family camp at the farm.",
+  "startDate": "2025-07-10T08:00:00.000Z",
+  "endDate": "2025-07-14T17:00:00.000Z",
+  "registrationDeadline": "2025-07-01T00:00:00.000Z",
+  "goLiveAt": "2025-05-01T00:00:00.000Z",
+  "price": 450,
+  "picture": "/uploads/events/camp.jpg",
+  "redirectUrl": "camp2025",
+  "isHidden": false,
+  "requiresAuth": true,
+  "form": {
+    "isRequired": true,
+    "fields": [
+      { "type": "text", "label": "Dietary requirements", "isRequired": false, "order": 0 }
+    ]
+  }
+}
+```
+
+---
+
+## Event Options & Variants
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/events/:id/options` | supervisor+ | Add option to event |
+| PUT | `/api/events/options/:id` | supervisor+ | Update option (name, price, stockLimit, variants, earlyBirdTiers) |
+| DELETE | `/api/events/options/:id` | admin | Delete option (fails if registrations exist) |
+| POST | `/api/events/options/:id/variants` | supervisor+ | Add variant to option |
+| PUT | `/api/events/variants/:id` | supervisor+ | Update variant |
+| DELETE | `/api/events/variants/:id` | admin | Delete variant |
+
+### POST /api/events/:id/options
+```json
+{
+  "name": "Adult",
+  "price": 450,
+  "isMainTicket": false,
+  "stockLimit": 100
+}
+```
+
+### PUT /api/events/options/:id — with variants and early-bird tiers
+```json
+{
+  "name": "Adult",
+  "price": 450,
+  "stockLimit": 100,
+  "variants": [
+    { "name": "Standard", "price": null, "stockLimit": 60, "order": 0 },
+    { "name": "VIP", "price": 600, "stockLimit": 40, "order": 1 }
+  ],
+  "earlyBirdTiers": [
+    { "deadline": "2025-06-01T00:00:00.000Z", "price": 350, "stockLimit": 30, "order": 0, "variantId": null }
+  ]
+}
+```
+
+`stockLimit: 0` means unlimited. Early-bird tiers can be option-level (`variantId: null`) or variant-level (`variantId: "<uuid>"`).
+
+---
+
+## Event Attachments
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/events/:id/attachments` | public | List attachments for event |
+| POST | `/api/events/:id/attachments` | supervisor+ | Upload attachment (`multipart/form-data`, field `file`) |
+| DELETE | `/api/events/:eventId/attachments/:id` | supervisor+ | Delete attachment |
+
+Accepted file types: `.pdf`, `.doc`, `.docx`, `.xls`, `.xlsx`, `.ppt`, `.pptx`, `.txt`, `.csv`, `.zip`. Max 10 MB.
+
+---
+
+## Registrations
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/registrations` | optional | Create registration |
+| GET | `/api/registrations/myregistrations` | user+ | Own registrations |
+| GET | `/api/registrations/:id` | optional | Get registration by ID |
+| PUT | `/api/registrations/:id/options` | user+ | Update selected options |
+| DELETE | `/api/registrations/:id` | user+ | Cancel registration (blocked if positive payments exist unless admin) |
+| GET | `/api/registrations/:id/forms/draft` | optional | Get form draft |
+| PUT | `/api/registrations/:id/forms/draft` | optional | Save form draft |
+| POST | `/api/registrations/:id/forms/responses` | optional | Submit form responses |
+| PUT | `/api/registrations/:id/forms/responses` | supervisor+ | Replace form responses |
+| GET | `/api/registrations` | staff+ | All registrations |
+| PUT | `/api/registrations/:id` | staff+ | Update registration status |
+| GET | `/api/registrations/event/:eventId` | staff+ | Registrations for an event |
+| POST | `/api/registrations/manual` | supervisor+ | Manual registration |
+
+### POST /api/registrations
+```json
+{
+  "eventId": "ev-uuid-...",
+  "options": [
+    { "eventOptionId": "opt-uuid-...", "quantity": 2 },
+    { "eventOptionId": "opt-uuid-...", "quantity": 1, "variantId": "variant-uuid-..." }
+  ]
+}
+```
+For unauthenticated (guest) registration on events with `requiresAuth: false`:
+```json
+{
+  "eventId": "ev-uuid-...",
+  "options": [...],
+  "guestName": "Jane Smith",
+  "guestEmail": "jane@example.com",
+  "guestPhone": "+27821234567"
+}
+```
+
+### Cancellation rules
+
+| Actor | Condition | Result |
+|-------|-----------|--------|
+| Owner | No positive payments | 200 — status set to `cancelled` |
+| Owner | Any positive payment exists | 403 — must contact organisation |
+| Admin | Any state | 200 — always allowed |
+| Anyone | Already cancelled | 400 |
+
+---
+
+## Payments
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/payments` | supervisor+ | Record manual payment (cash/EFT) |
+| POST | `/api/payments/yoco-checkout` | user+ | Initiate Yoco checkout; re-evaluates early-bird pricing first — returns `{ priceUpdated: true, newTotal }` if prices changed |
+| GET | `/api/payments/mypayments` | user+ | Own payments |
+| GET | `/api/payments/:id` | user+ | Payment by ID |
+| GET | `/api/payments/registration/:registrationId` | user+ | Payments for a registration |
+| GET | `/api/payments` | supervisor+ | All payments |
+| GET | `/api/payments/event/:eventId` | staff+ | Payments for an event |
+| PUT | `/api/payments/assign-donation` | supervisor+ | Assign a donation payment to a registration |
+| POST | `/api/payments/refund` | supervisor+ | Create refund record |
+| GET | `/api/payments/admin/stats` | admin | Payment statistics |
+
+### POST /api/payments (manual)
+```json
+{
+  "registrationId": "reg-uuid-...",
+  "amount": 450,
+  "method": "cash",
+  "note": "Paid at the door"
+}
+```
+
+### POST /api/payments/yoco-checkout
+```json
+{
+  "registrationId": "reg-uuid-...",
+  "successUrl": "https://events.yourchurch.org/payment/success",
+  "cancelUrl": "https://events.yourchurch.org/payment/cancel",
+  "failureUrl": "https://events.yourchurch.org/payment/failure"
+}
+```
+Returns: `{ redirectUrl }` or `{ priceUpdated: true, newTotal, message }` if early-bird prices changed.
+
+---
+
+## Tickets
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/tickets/mytickets` | user+ | Own tickets (excludes cancelled registrations) |
+| GET | `/api/tickets/:id` | user+ | Ticket by ID |
+| POST | `/api/tickets/email` | user+ | Email own tickets as PDF |
+| POST | `/api/tickets/send-to` | staff+ | Send tickets to a specific user |
+| GET | `/api/tickets/scan-preview/:qrCode` | staff+ | Preview scan (no mark) |
+| GET | `/api/tickets/qr/:qrCode` | staff+ | Ticket by QR code |
+| POST | `/api/tickets/scan/:qrCode` | staff+ | Scan/redeem ticket |
+| GET | `/api/tickets/event/:eventId` | staff+ | All tickets for an event |
+| GET | `/api/tickets/scans/recent` | staff+ | Recent scan activity |
+| GET | `/api/tickets/scans/stats` | staff+ | Scan statistics |
+| POST | `/api/tickets/generate` | supervisor+ | Generate tickets for a registration |
+| GET | `/api/tickets` | supervisor+ | All tickets |
+| PUT | `/api/tickets/email-sent` | admin | Bulk mark tickets as emailed |
+
+---
+
+## Broadcasts (Email)
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/broadcasts/preview` | supervisor+ | Dry-run — returns recipient count and sample |
+| POST | `/api/broadcasts/send` | supervisor+ | Send email broadcast immediately |
+| POST | `/api/broadcasts/schedule` | supervisor+ | Schedule email broadcast |
+
+### POST /api/broadcasts/send
+```json
+{
+  "subject": "Camp 2025 — Final reminder",
+  "body": "Hi {{name}}, just a reminder that camp starts tomorrow at 08:00.",
+  "userIds": ["user-uuid-1", "user-uuid-2"],
+  "extraEmails": ["extra@example.com"]
+}
+```
+
+Dynamic placeholders: `{{name}}`, `{{event.title}}`, `{{event.start}}`, `{{event.link}}`, `{{balance}}`, `{{promo.title}}`, `{{promo.link}}`
+
+---
+
+## WhatsApp Broadcasts
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/whatsapp-broadcasts/preview` | supervisor+ | Dry-run |
+| POST | `/api/whatsapp-broadcasts/send` | supervisor+ | Send WhatsApp broadcast immediately |
+| POST | `/api/whatsapp-broadcasts/schedule` | supervisor+ | Schedule WhatsApp broadcast |
+
+---
+
+## Scheduled Messages
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/scheduled-emails` | supervisor+ | List all queued/scheduled jobs |
+| PATCH | `/api/scheduled-emails/:id` | supervisor+ | Edit scheduled job (reschedule, update content) |
+| DELETE | `/api/scheduled-emails/:id` | supervisor+ | Cancel a queued job |
+
+---
+
+## Automations
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/automations/schedule` | supervisor+ | Schedule event lifecycle automations (pre-event reminder, thank-you, promo, etc.) |
+
+---
+
+## Reports
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/reports/pdf` | user+ | Generate and download PDF attendance/payment report |
+| POST | `/api/reports/email` | user+ | Email PDF report to current user |
+
+---
+
+## Uploads
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/uploads/event-image` | supervisor+ | Upload event cover image (`multipart/form-data`, field `image`). Returns `{ url }`. Max 5 MB. Formats: jpg, jpeg, png, webp, gif. |
+| POST | `/api/uploads/logo` | admin (or unauthenticated during setup) | Upload site logo (`multipart/form-data`, field `image`). Returns `{ url }`. Max 2 MB. Formats: jpg, jpeg, png, webp, svg. |
+
+---
+
+## Sections
+
+Groups of event options shown as labelled sections on the registration page (e.g. "Tickets", "Add-ons", "Accommodation").
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/sections` | staff+ | List sections |
+| POST | `/api/sections` | supervisor+ | Create section |
+| PUT | `/api/sections/:id` | supervisor+ | Update section |
+| DELETE | `/api/sections/:id` | admin | Delete section |
+
+### POST /api/sections
+```json
+{
+  "eventId": "ev-uuid-...",
+  "name": "Accommodation",
+  "allowedOptionIds": ["opt-uuid-1", "opt-uuid-2"]
+}
+```
+
+---
+
+## Banner
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/banner` | public | Get current site-wide banner (text, colour, active flag) |
+| POST | `/api/banner` | supervisor+ | Set site banner |
+
+### POST /api/banner
+```json
+{
+  "text": "Camp registrations close Friday!",
+  "color": "#f59e0b",
+  "isActive": true
+}
+```
+
+---
+
+## Forms
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/forms/responses` | staff+ | List all submitted form responses across all events; supports filtering |
+
+---
+
+## Yoco Transactions
+
+Raw webhook events from Yoco. Used for reconciling payments that weren't matched automatically.
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/yoco-transactions` | supervisor+ | All Yoco webhook transactions |
+| GET | `/api/yoco-transactions/unreconciled` | supervisor+ | Transactions not yet matched to a payment |
+| POST | `/api/yoco-transactions/:id/reconcile` | supervisor+ | Manually link transaction to a registration |
+| POST | `/api/yoco-transactions/:id/ignore` | supervisor+ | Mark transaction as intentionally ignored |
+
+---
+
+## WhatsApp Admin
+
+Manages the WAWP WhatsApp API instance. Credentials are stored in `AppSetting` (preferred) or `.env` (fallback).
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/whatsapp/config` | admin | Get current WAWP credentials |
+| POST | `/api/whatsapp/config` | admin | Save WAWP credentials to DB |
+| GET | `/api/whatsapp/status` | admin | WAWP session status |
+| GET | `/api/whatsapp/qr` | admin | QR code for WhatsApp device linking |
+| POST | `/api/whatsapp/create-instance` | admin | Create a new WAWP instance |
+| POST | `/api/whatsapp/delete-instance` | admin | Delete WAWP instance |
+| POST | `/api/whatsapp/request-code` | admin | Request pairing code (alternative to QR) |
+| POST | `/api/whatsapp/logout` | admin | Logout current WAWP session |
+| POST | `/api/whatsapp/start` | admin | Start WAWP instance |
+| POST | `/api/whatsapp/restart` | admin | Restart WAWP instance |
+
+---
+
+## Webhooks
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/webhooks/yoco` | HMAC-verified | Yoco payment webhook — verifies `X-Yoco-Signature`, creates `Payment` + `YocoTransaction`, updates registration status, generates tickets |
+| POST | `/api/webhooks/whatsapp` | — | WAWP inbound event webhook |
+
+---
+
+## Settings
+
+Runtime configuration stored in the `AppSetting` table. Sensitive values (SMTP credentials, WAWP token) are stored AES-256-GCM encrypted.
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/api/settings` | public | Public settings (org name, tagline, colour, logo, legal keys) |
+| GET | `/api/settings/all` | admin | All settings — `smtp_pass` masked as `••••••••`, `smtp_user` decrypted |
+| GET | `/api/settings/needs-setup` | public | `{ needsSetup: bool }` — true until setup wizard completes |
+| PUT | `/api/settings` | admin | Upsert settings; `smtp_user`/`smtp_pass` encrypted before storage; sending `••••••••` for `smtp_pass` keeps existing value |
+| POST | `/api/settings/test-smtp` | admin | Test SMTP with provided credentials; sends real test email to admin on success. The admin JWT returned by `POST /api/setup/register` also qualifies during the setup wizard. |
+
+### POST /api/settings/test-smtp
+```json
+{
+  "host": "smtp.office365.com",
+  "port": 587,
+  "secure": false,
+  "user": "noreply@yourchurch.org",
+  "pass": "app-password-here",
+  "from": "noreply@yourchurch.org"
+}
+```
+
+**Success (200):**
+```json
+{ "message": "SMTP connection verified — a test email has been sent to admin@yourchurch.org" }
+```
+
+**Failure (400):**
+```json
+{
+  "message": "Authentication failed — check your SMTP username and password.",
+  "raw": "530 5.7.57 Client not authenticated to send mail. [JN3P275CA0121...]"
+}
+```
+
+The `message` field is always a human-readable sentence. The `raw` field is included on errors only and contains the original SMTP error for debugging. Error code 530 (Microsoft "Client not authenticated") maps to the authentication-failure message.
+
+---
+
+## Setup
+
+One-time first-run wizard. Both endpoints are blocked once any user exists and setup is complete.
+
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/api/setup/register` | public (one-time) | Create the first admin account; returns a short-lived setup JWT |
+| POST | `/api/setup` | setup token or admin | Save initial site settings (org name, branding, SMTP) |
+
+---
+
+## Static Files
+
+| Path | Description |
+|------|-------------|
+| `/uploads/events/*` | Event cover images |
+| `/uploads/branding/*` | Site logo |
+| `/uploads/event-files/*` | Event attachments (PDFs, docs, etc.) |
+| `/uploads/tickets-temp/*` | Temporarily hosted ticket PDFs for WhatsApp delivery (auto-deleted after 5 min) |
+
+---
+
+## Auth error responses
+
+| Status | Body | Meaning |
+|--------|------|---------|
+| 401 | `{ message: "Not authorised, no token" }` | Missing or malformed `Authorization` header |
+| 401 | `{ message: "Not authorised, token failed" }` | Invalid or expired JWT |
+| 401 | `{ message: "Session has been revoked" }` | Token version mismatch (sessions revoked) |
+| 403 | `{ message: "Not authorised as an admin" }` | Insufficient role |
+
+---
+
+*For full interactive docs with expandable examples visit `GET /docs?token=<admin-jwt>` on the running backend.*
\ No newline at end of file
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 0000000..ab865aa
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,528 @@
+# Hope Events — Backend API
+
+Node.js + Express REST API for the Hope Events platform used by Hope Family Church (`events.hopehenley.co.za`).
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Tech Stack](#tech-stack)
+3. [Prerequisites](#prerequisites)
+4. [Installation](#installation)
+5. [Environment Variables](#environment-variables)
+6. [Database](#database)
+7. [Running the Server](#running-the-server)
+8. [Authentication & Roles](#authentication--roles)
+9. [API Reference](#api-reference)
+10. [Background Workers](#background-workers)
+11. [Notification System](#notification-system)
+12. [WhatsApp Integration](#whatsapp-integration)
+13. [File Uploads](#file-uploads)
+14. [Payments (Yoco)](#payments-yoco)
+15. [Deployment](#deployment)
+
+---
+
+## Overview
+
+Full-stack event management backend handling:
+- User registration, authentication (JWT), and role-based access control
+- Event creation, management, and public listings
+- Attendee registration with optional payment tiers and early-bird pricing
+- Yoco checkout integration with webhook reconciliation
+- Ticket generation (PDF + QR code) and email/WhatsApp delivery
+- Scheduled bulk messaging (email + WhatsApp) for attendees and broadcast lists
+- Admin WhatsApp instance management via WAWP
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Runtime | Node.js 18+ |
+| Framework | Express 4 |
+| Database | PostgreSQL (via Prisma ORM 5) |
+| Auth | JWT (`jsonwebtoken`), `bcryptjs` |
+| Email | Nodemailer (any SMTP — configured via Admin → Site Settings, AES-256 encrypted in DB) |
+| WhatsApp | WAWP REST API (`api.wawp.net/v2`) |
+| PDF/QR | PDFKit, QRCode |
+| File Uploads | Multer |
+| Payments | Yoco |
+
+---
+
+## Prerequisites
+
+- Node.js 18+
+- PostgreSQL 14+ (hosted at `database.crosscode.co.za` for production)
+- npm
+
+---
+
+## Installation
+
+```bash
+cd backend
+npm install           # installs deps and runs `prisma generate`
+```
+
+---
+
+## Environment Variables
+
+Create `backend/.env` from `.env.example`. The only variables you must set are:
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `DATABASE_URL` | Yes | PostgreSQL connection string |
+| `JWT_SECRET` | Yes | Secret key for JWTs (32+ random characters). Also used to derive the AES-256 encryption key for sensitive settings (SMTP credentials) stored in the DB — must be set before saving SMTP settings. |
+| `FRONTEND_URL` | Yes | Comma-separated allowed CORS origins |
+| `YOCO_SECRET_KEY` | Yes | Yoco secret API key |
+| `YOCO_WEBHOOK_SECRET` | Yes | Yoco webhook HMAC secret |
+| `APP_BASE_URL` | — | Public frontend URL — used in email links (fallback if not set via admin panel) |
+| `BACKEND_URL` | — | Public backend URL — used to serve ticket PDFs over WhatsApp |
+| `PORT` | — | Port to listen on (default `3000`) |
+| `NODE_ENV` | — | `production` or `development` |
+| `WAWP_ACCESS_TOKEN` | — | WAWP fallback token (preferred: set via Admin → Site Settings) |
+| `WAWP_INSTANCE_ID` | — | WAWP fallback instance ID (preferred: set via Admin → Site Settings) |
+| `DAILY_SUMMARY_ENABLED` | — | `false` to disable daily summaries (default `true`) |
+| `SCHEDULED_EMAILS_ENABLED` | — | `false` to disable scheduled-send worker (default `true`) |
+| `SCHEDULED_EMAILS_INTERVAL_MS` | — | Polling interval in ms (default `30000`) |
+| `SMTP_HOST` / `EMAIL_HOST` | — | Fallback SMTP host (preferred: set via Admin → Site Settings) |
+| `SMTP_PORT` / `EMAIL_PORT` | — | Fallback SMTP port |
+| `SMTP_USER` / `EMAIL_USER` | — | Fallback SMTP username |
+| `SMTP_PASS` / `EMAIL_PASS` | — | Fallback SMTP password |
+| `MAIL_FROM` / `EMAIL_FROM` | — | Fallback from address |
+
+> **Organisation name, branding colour, logo, registration notification email, SMTP settings, and legal page content** are now managed through the admin panel at **Admin → Site Settings** and stored in the database. You no longer need `ORG_NAME`, `ORG_TAGLINE`, `EMAIL_HEADER_COLOR`, `REGISTRATIONS_EMAIL`, or SMTP vars in `.env` (they still work as fallbacks). On a fresh deployment these are set via the first-time setup wizard.
+>
+> **SMTP credentials** (`smtp_user`, `smtp_pass`) are stored **AES-256-GCM encrypted** in the database. The encryption key is derived from `JWT_SECRET`. Do not change `JWT_SECRET` after saving SMTP credentials — the stored values will become unreadable.
+
+---
+
+## Database
+
+### Schema summary
+
+| Model | Purpose |
+|-------|---------|
+| `User` | Accounts with roles (`admin`, `supervisor`, `staff`, `user`) |
+| `Event` | Events with dates, pricing, options, attachments |
+| `EventOption` | Ticket types / items per event; `stockLimit` (0 = unlimited), `isMainTicket` flag |
+| `EarlyBirdTier` | Time-limited discounted prices; linked to an `EventOption` (option-level) or an `OptionVariant` (variant-level via nullable `variantId`); `stockLimit` (0 = unlimited) |
+| `OptionVariant` | Sub-items per option (size, colour, ticket type); optional `price` override; own `stockLimit` |
+| `Registration` | A user's registration for an event; `status`: pending/confirmed/partial_paid/paid/cancelled |
+| `RegistrationOption` | Which options (and quantities) a registration includes; `priceSnapshot`, `appliedTierId`, `variantId` |
+| `Payment` | Payment records (Yoco, manual, donation, refund) |
+| `Ticket` | QR-code tickets linked to registration options |
+| `TicketUsage` | Scan log for each ticket redemption |
+| `PasswordReset` | One-time tokens for password reset flow |
+| `EventAttachment` | Files attached to events (PDFs, images) |
+| `EventForm` / `EventFormField` | Per-event custom forms |
+| `FormResponse` / `FormAnswer` | Submitted form data from attendees |
+| `FormDraft` | Auto-saved in-progress form data |
+| `YocoTransaction` | Raw webhook events from Yoco for reconciliation |
+| `Section` / `SectionOption` | Grouping of event options into sections |
+| `AppSetting` | Key-value store for runtime config — WAWP credentials, org name, branding, notification emails, SMTP settings (credentials stored AES-256-GCM encrypted), legal page content |
+
+### Migrations
+
+```bash
+# Apply pending migrations (production)
+npm run prisma:deploy
+
+# Check migration status
+npm run prisma:status
+
+# Regenerate Prisma client after schema changes
+npm run prisma:generate
+```
+
+---
+
+## Running the Server
+
+```bash
+# Development (auto-reload)
+npm run dev
+
+# Production
+npm start
+```
+
+Visit `/` for the status page. Visit `/docs?token=<admin-jwt>` for full API documentation (admin only).
+
+---
+
+## Authentication & Roles
+
+All protected routes require a `Bearer` token in the `Authorization` header:
+
+```
+Authorization: Bearer <jwt>
+```
+
+Tokens are issued on `POST /api/users/login`. Token version is stored per-user; revoking sessions increments the version and invalidates all existing tokens for that user.
+
+### Role Hierarchy
+
+| Role | Description |
+|------|-------------|
+| `admin` | Full access — user management, delete operations, WhatsApp admin, payment stats |
+| `supervisor` | Event/registration/payment management, bulk messaging, reports |
+| `staff` | Read access to registrations, payments, tickets; ticket scanning |
+| `user` | Own profile, own registrations, own tickets |
+
+### Middleware
+
+| Middleware | Applied when |
+|-----------|-------------|
+| `protect` | Any authenticated route |
+| `admin` | Admin-only actions |
+| `supervisor` | Supervisor + admin |
+| `staff` | Staff + supervisor + admin |
+| `optionalAuth` | Routes that work for guests but enrich responses if authenticated |
+| `loginLimiter` | Rate-limits login to 15 req/min per IP |
+
+---
+
+## API Reference
+
+Full interactive API docs available at `GET /docs` (requires admin JWT — pass via `?token=<jwt>` query param or `Authorization: Bearer` header).
+
+### Quick reference by domain
+
+#### Users — `/api/users`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/` | public | Register a new account |
+| POST | `/login` | public | Login, returns JWT |
+| POST | `/forgot` | public | Request password reset email |
+| POST | `/reset` | public | Reset password with token |
+| POST | `/activate` | public | Activate account from email link |
+| GET | `/profile` | user+ | Get own profile |
+| PUT | `/profile` | user+ | Update own profile |
+| POST | `/revoke-sessions` | user+ | Revoke own sessions |
+| POST | `/close-account` | user+ | Deactivate own account |
+| GET | `/` | supervisor+ | List all users (paginated); supports `?search=`, `?role=`, `?isActive=true\|false`, `?page=`, `?limit=` |
+| GET | `/:id` | admin | Get user by ID |
+| PUT | `/:id` | admin | Update user |
+| DELETE | `/:id` | admin | Deactivate user (sets `isActive: false`) |
+| POST | `/:id/revoke-sessions` | admin | Revoke all sessions for a user |
+| POST | `/:id/anonymize` | admin | Erase personal data — sets name to "Deleted User", clears email/phone, deactivates account, revokes all sessions |
+
+#### Events — `/api/events`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | public | List public/active upcoming events; response includes `isSoldOut: boolean` per event |
+| GET | `/all` | staff+ | All events including hidden/past |
+| GET | `/admin/all` | admin | All events (admin view) |
+| GET | `/attachments/status` | admin | Attachment manifest sync status |
+| POST | `/attachments/sync` | admin | Re-sync attachment manifests to DB |
+| GET | `/:id` | public | Get event by ID |
+| GET | `/by-alias/:redirectUrl` | public | Get event by redirect alias |
+| POST | `/` | supervisor+ | Create event |
+| PUT | `/:id` | supervisor+ | Update event |
+| DELETE | `/:id` | admin | Delete event |
+| GET | `/:id/attachments` | public | List event file attachments |
+| POST | `/:id/attachments` | supervisor+ | Upload attachment |
+| DELETE | `/:eventId/attachments/:id` | supervisor+ | Delete attachment |
+| POST | `/:id/email-attendees` | supervisor+ | Bulk email attendees (supports `dryRun`) |
+| POST | `/:id/email-attendees/schedule` | supervisor+ | Schedule bulk email |
+| POST | `/:id/whatsapp-attendees` | supervisor+ | Bulk WhatsApp to attendees (supports `dryRun`) |
+| POST | `/:id/whatsapp-attendees/schedule` | supervisor+ | Schedule bulk WhatsApp |
+| POST | `/:id/options` | supervisor+ | Add event option |
+| PUT | `/options/:id` | supervisor+ | Update event option |
+| DELETE | `/options/:id` | admin | Delete event option |
+
+#### Registrations — `/api/registrations`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/` | optional | Create registration |
+| GET | `/myregistrations` | user+ | Own registrations |
+| PUT | `/:id/options` | user+ | Update registration options |
+| DELETE | `/:id` | user+ | Cancel registration |
+| GET | `/:id` | optional | Get registration by ID |
+| GET | `/:id/forms/draft` | optional | Get form draft |
+| PUT | `/:id/forms/draft` | optional | Save form draft |
+| POST | `/:id/forms/responses` | optional | Submit form responses |
+| PUT | `/:id/forms/responses` | supervisor+ | Replace form responses |
+| GET | `/` | staff+ | List all registrations |
+| PUT | `/:id` | staff+ | Update registration status |
+| GET | `/event/:eventId` | staff+ | Registrations for an event |
+| POST | `/manual` | supervisor+ | Manual registration |
+
+#### Payments — `/api/payments`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/` | supervisor+ | Record manual payment |
+| POST | `/yoco-checkout` | user+ | Initiate Yoco checkout |
+| GET | `/mypayments` | user+ | Own payments |
+| GET | `/:id` | user+ | Payment by ID |
+| GET | `/registration/:registrationId` | user+ | Payments for a registration |
+| GET | `/` | supervisor+ | All payments |
+| GET | `/event/:eventId` | staff+ | Payments for an event |
+| PUT | `/assign-donation` | supervisor+ | Assign donation to registration |
+| POST | `/refund` | supervisor+ | Create refund |
+| GET | `/admin/stats` | admin | Payment statistics |
+
+#### Tickets — `/api/tickets`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/mytickets` | user+ | Own tickets |
+| GET | `/:id` | user+ | Ticket by ID |
+| POST | `/email` | user+ | Email own tickets |
+| POST | `/send-to` | staff+ | Send tickets to a specific user |
+| GET | `/scan-preview/:qrCode` | staff+ | Preview scan (no mark) |
+| GET | `/qr/:qrCode` | staff+ | Ticket by QR code |
+| POST | `/scan/:qrCode` | staff+ | Scan/redeem ticket |
+| GET | `/event/:eventId` | staff+ | All tickets for event |
+| GET | `/scans/recent` | staff+ | Recent scan activity |
+| GET | `/scans/stats` | staff+ | Scan statistics |
+| POST | `/generate` | supervisor+ | Generate tickets for registration |
+| GET | `/` | supervisor+ | All tickets |
+| PUT | `/email-sent` | admin | Bulk mark tickets as emailed |
+
+#### Webhooks — `/api/webhooks`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/yoco` | HMAC | Yoco payment webhook |
+| POST | `/whatsapp` | — | WAWP inbound webhook |
+
+#### Broadcasts — `/api/broadcasts` (email)
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/preview` | supervisor+ | Dry-run, returns recipient count/sample |
+| POST | `/send` | supervisor+ | Send email broadcast |
+| POST | `/schedule` | supervisor+ | Schedule email broadcast |
+
+#### WhatsApp Broadcasts — `/api/whatsapp-broadcasts`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/preview` | supervisor+ | Dry-run |
+| POST | `/send` | supervisor+ | Send WA broadcast |
+| POST | `/schedule` | supervisor+ | Schedule WA broadcast |
+
+#### Scheduled Messages — `/api/scheduled-emails`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | supervisor+ | List all scheduled jobs |
+| PATCH | `/:id` | supervisor+ | Edit a queued job |
+| DELETE | `/:id` | supervisor+ | Cancel a queued job |
+
+#### Automations — `/api/automations`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/schedule` | supervisor+ | Schedule event lifecycle automations |
+
+#### Reports — `/api/reports`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/pdf` | user+ | Generate and download PDF report |
+| POST | `/email` | user+ | Email PDF report to current user |
+
+#### Settings — `/api/settings`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | public | Public settings (org name, colour, logo, legal keys, etc.) |
+| GET | `/all` | admin | All settings — `smtp_pass` returned masked (`••••••••`), `smtp_user` decrypted |
+| GET | `/needs-setup` | public | `{ needsSetup: bool }` — true until setup wizard completes |
+| PUT | `/` | admin | Upsert settings; `smtp_user` and `smtp_pass` are AES-256-GCM encrypted before storage; sending `••••••••` for `smtp_pass` is a no-op (keeps existing value) |
+| POST | `/test-smtp` | admin | Test SMTP connection with provided credentials; success returns `{ message }`, failure returns `{ message, raw }` where `message` is human-readable and `raw` is the original SMTP error. The short-lived admin JWT returned by `POST /api/setup/register` also qualifies during the setup wizard. |
+
+#### Setup — `/api/setup`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/register` | public (one-time) | Step 2 of setup wizard — creates the first admin account and returns a short-lived JWT setup token; blocked once any user exists |
+| POST | `/` | setup token or admin | Final step of setup wizard — saves initial site settings (SMTP, org name, branding); requires setup token from `/register` |
+
+#### Uploads — `/api/uploads`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/event-image` | supervisor+ | Upload event cover image (`image` field) |
+| POST | `/logo` | admin (or no-auth during setup) | Upload site logo (`image` field) |
+
+#### Sections — `/api/sections`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | staff+ | List sections |
+| POST | `/` | supervisor+ | Create section |
+| PUT | `/:id` | supervisor+ | Update section |
+| DELETE | `/:id` | admin | Delete section |
+
+#### Banner — `/api/banner`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | public | Get current site banner |
+| POST | `/` | supervisor+ | Set site banner |
+
+#### Forms — `/api/forms`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/responses` | staff+ | List all form responses |
+
+#### Yoco Transactions — `/api/yoco-transactions`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| GET | `/` | supervisor+ | All Yoco webhook transactions |
+| GET | `/unreconciled` | supervisor+ | Unmatched transactions |
+| POST | `/:id/reconcile` | supervisor+ | Manually reconcile transaction |
+| POST | `/:id/ignore` | supervisor+ | Mark transaction as ignored |
+
+#### WhatsApp Admin — `/api/whatsapp`
+| Method | Path | Auth | Description |
+|--------|------|------|-------------|
+| POST | `/webhook` | public | WAWP inbound event |
+| GET | `/config` | admin | Get WAWP credentials |
+| POST | `/config` | admin | Save WAWP credentials to DB |
+| POST | `/create-instance` | admin | Create WAWP instance |
+| POST | `/delete-instance` | admin | Delete WAWP instance |
+| GET | `/status` | admin | WAWP session status |
+| GET | `/qr` | admin | QR code for WhatsApp linking |
+| POST | `/request-code` | admin | Request pairing code |
+| POST | `/logout` | admin | Logout WAWP session |
+| POST | `/start` | admin | Start WAWP instance |
+| POST | `/restart` | admin | Restart WAWP instance |
+
+#### Static Files
+| Path | Description |
+|------|-------------|
+| `/uploads/*` | Served uploaded files (images, PDFs) |
+
+---
+
+## Background Workers
+
+All workers start automatically with `npm start`.
+
+### Scheduled Emails Worker
+Polls every 30 s (configurable via `SCHEDULED_EMAILS_INTERVAL_MS`) for due jobs. Handles attendee emails, attendee WhatsApp, email broadcasts, and WhatsApp broadcasts. Disable with `SCHEDULED_EMAILS_ENABLED=false`.
+
+### Daily Event Summaries
+Runs at 07:00 local time. Sends summary emails to supervisors about that day's events. Disable with `DAILY_SUMMARY_ENABLED=false`.
+
+### Temp File Cleanup
+Runs at 03:00 local time. Removes files older than 7 days from `public/uploads/tickets-temp/`.
+
+### Attachment Manifest Sync
+Runs once on startup. Imports on-disk attachment manifests not yet in the database.
+
+---
+
+## Notification System
+
+Outbound notifications are routed through `src/utils/notify.js`:
+
+- `shouldEmail(user)` — true if preference is `email` or `both`
+- `canWhatsApp(user)` — true if preference is `whatsapp` or `both` and user has a phone number
+- `waText(user, message)` — sends a WhatsApp text
+- `waPdf(user, pdfPath, caption)` — copies PDF to temp, sends URL to WAWP, cleans up after 5 min
+
+**Automated notifications**: login, account deletion, ticket delivery, payment confirmation, password reset, daily summaries.
+
+**Dynamic placeholders** in bulk messages: `{{name}}`, `{{event.title}}`, `{{event.start}}`, `{{event.link}}`, `{{balance}}`, `{{promo.title}}`, `{{promo.link}}`.
+
+---
+
+## WhatsApp Integration
+
+WAWP API (`api.wawp.net/v2`). All calls go through `src/utils/whatsapp.js`.
+
+Credentials are stored in `AppSetting` (`WAWP_ACCESS_TOKEN`, `WAWP_INSTANCE_ID`), with `.env` as fallback. Cached in memory for 30 s.
+
+"Session not found" recovery: stale session is deleted and a new one is created automatically, saving the new `instance_id` to `AppSetting`.
+
+Admin UI: `/dashboard/admin/whatsapp`.
+
+---
+
+## File Uploads
+
+- Event images: `POST /api/uploads/event-image` (field `image`), saved to `public/uploads/`
+- Event attachments: `POST /api/events/:id/attachments` (field `file`)
+- Ticket PDFs: generated on demand, temporarily in `public/uploads/tickets-temp/`, auto-deleted after 5 min
+
+Files are served from `/uploads/*`.
+
+---
+
+## Pricing & Cancellation Rules
+
+### Cancellation
+
+`DELETE /api/registrations/:id`
+
+| Actor | Condition | Result |
+|-------|-----------|--------|
+| Owner (user) | No positive payments recorded | 200 — status set to `cancelled` |
+| Owner (user) | Any positive payment exists | 403 — must contact organisation |
+| Admin | Any state | 200 — always allowed |
+| Anyone | Already cancelled | 400 |
+
+Cancelled registrations are excluded from all stock-limit counts (option, variant, and tier stock).
+
+### Early-bird pricing — two-phase evaluation
+
+Prices are evaluated in two phases:
+
+**Phase 1 — Registration time** (`resolveOptionPrice` in `src/utils/pricing.js`)
+- Selects the cheapest applicable tier, checking **both** the deadline **and** the stock limit.
+- Result stored as `priceSnapshot` and `appliedTierId` on each `RegistrationOption`.
+- Tier sort order: cheapest first; earliest deadline breaks ties.
+
+**Phase 2 — Payment time** (`refreshPricingForRegistration` in `src/utils/pricing.js`)
+- Called automatically before any Yoco checkout is created or any manual payment is recorded.
+- Re-runs `resolveOptionPrice` for every `RegistrationOption` that has an `appliedTierId`.
+- If a tier has since expired **or its stock has been exhausted**, `priceSnapshot` and `appliedTierId` are updated in the DB to reflect the next applicable tier or the base price.
+- If prices changed, `POST /api/payments/yoco-checkout` returns HTTP 200 with `{ priceUpdated: true, newTotal, message }` instead of proceeding to Yoco. The frontend must present the updated total before the user can retry.
+- For manual payments (`POST /api/payments`) prices are refreshed silently — no blocking response.
+
+**`computeRegistrationTotalDue`** (also in `src/utils/pricing.js`)
+- Uses `priceSnapshot` as the authoritative price when it is set on a `RegistrationOption`.
+- Falls back to `getEffectiveUnitPrice` (deadline-only re-evaluation) for legacy rows without a snapshot.
+
+### Variant + tier interaction
+
+Early-bird tiers can be defined at either the **option level** (no `variantId`) or the **variant level** (`variantId` set). Both are stored as `EarlyBirdTier` records on the `EventOption`.
+
+| Variant state | Effective price |
+|---------------|-----------------|
+| No variant selected | Option-level tiers are evaluated via `resolveOptionPrice` |
+| Variant selected, variant has its own tier(s) | Variant-level tiers are evaluated first via `resolveVariantTierPrice` |
+| Variant selected, no variant-level tier | Variant's own `price` is used (or option price if `variant.price` is null) |
+
+The resolution priority at registration/payment time is: **variant tier → variant price → option tier → option base price**.
+
+---
+
+## Payments (Yoco)
+
+1. Frontend calls `POST /api/payments/yoco-checkout`
+2. Backend calls `refreshPricingForRegistration` — if any early-bird price changed, returns `{ priceUpdated: true, newTotal }` (HTTP 200) and does **not** create a checkout. Frontend shows warning; user retries.
+3. On the retry (or first attempt when prices are current), backend creates a Yoco checkout and returns `{ redirectUrl }`.
+4. User pays on Yoco's hosted page.
+5. Yoco sends webhook to `POST /api/webhooks/yoco`.
+6. Backend verifies HMAC, creates `Payment` + `YocoTransaction`, updates registration status, generates tickets.
+7. Unmatched transactions visible at `/api/yoco-transactions/unreconciled`.
+
+---
+
+## Deployment
+
+### PM2 (recommended)
+```bash
+npm install -g pm2
+pm2 start src/index.js --name hope-events-api
+pm2 save && pm2 startup
+```
+
+### Checklist
+- [ ] `DATABASE_URL` points to production DB
+- [ ] `JWT_SECRET` is long (32+ chars) and secret
+- [ ] `FRONTEND_URL` lists only production origins
+- [ ] `NODE_ENV=production`
+- [ ] Yoco webhook registered and HTTPS
+- [ ] WAWP credentials saved via admin panel
+- [ ] SMTP credentials correct
\ No newline at end of file
diff --git a/backend/data/banner.json b/backend/data/banner.json
new file mode 100644
index 0000000..66f1acb
--- /dev/null
+++ b/backend/data/banner.json
@@ -0,0 +1,6 @@
+{
+  "message": "",
+  "type": "info",
+  "liveFrom": null,
+  "liveTill": null
+}
\ No newline at end of file
diff --git a/backend/data/scheduled-emails.json b/backend/data/scheduled-emails.json
new file mode 100644
index 0000000..5d591f6
--- /dev/null
+++ b/backend/data/scheduled-emails.json
@@ -0,0 +1,3 @@
+{
+  "jobs": []
+}
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
new file mode 100644
index 0000000..4a17698
--- /dev/null
+++ b/backend/package-lock.json
@@ -0,0 +1,2260 @@
+{
+  "name": "event-management-backend",
+  "version": "1.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "event-management-backend",
+      "version": "1.2",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/client": "^5.4.2",
+        "axios": "^1.11.0",
+        "bcryptjs": "^2.4.3",
+        "cors": "^2.8.5",
+        "dotenv": "^16.3.1",
+        "express": "^4.18.2",
+        "jsonwebtoken": "^9.0.2",
+        "multer": "^2.0.2",
+        "node-fetch": "^2.7.0",
+        "nodemailer": "^7.0.5",
+        "pdfkit": "^0.17.1",
+        "qrcode": "^1.5.4",
+        "raw-body": "^3.0.0",
+        "uuid": "^9.0.1"
+      },
+      "devDependencies": {
+        "nodemon": "^3.0.1",
+        "prisma": "^5.4.2"
+      }
+    },
+    "node_modules/@prisma/client": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.22.0.tgz",
+      "integrity": "sha512-M0SVXfyHnQREBKxCgyo7sffrKttwE6R8PMq330MIUF0pTwjUhLbW84pFDlf06B27XyCR++VtjugEnIHdr07SVA==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.22.0.tgz",
+      "integrity": "sha512-AUt44v3YJeggO2ZU5BkXI7M4hu9BF2zzH2iF2V5pyXT/lRTyWiElZ7It+bRH1EshoMRxHgpYg4VB6rCM+mG5jQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.22.0.tgz",
+      "integrity": "sha512-UNjfslWhAt06kVL3CjkuYpHAWSO6L4kDCVPegV6itt7nD1kSJavd3vhgAEhjglLJJKEdJ7oIqDJ+yHk6qO8gPA==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/fetch-engine": "5.22.0",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2.tgz",
+      "integrity": "sha512-2PTmxFR2yHW/eB3uqWtcgRcgAbG1rwG9ZriSvQw+nnb7c4uCr3RAcGMb6/zfE88SKlC1Nj2ziUvc96Z379mHgQ==",
+      "devOptional": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.22.0.tgz",
+      "integrity": "sha512-bkrD/Mc2fSvkQBV5EpoFcZ87AvOgDxbG99488a5cexp5Ccny+UM6MAe/UFkUC0wLYD9+9befNOqGiIJhhq+HbA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0",
+        "@prisma/engines-version": "5.22.0-44.605197351a3c8bdd595af2d2a9bc3025bca48ea2",
+        "@prisma/get-platform": "5.22.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.22.0.tgz",
+      "integrity": "sha512-pHhpQdr1UPFpt+zFfnPazhulaZYCUqeIcPpJViYoq9R+D/yw4fjE+CtnsnKzPYm0ddUbeXUzjGVGIRVgPDCk4Q==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/debug": "5.22.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
+      "license": "MIT"
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.7.1",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fontkit": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz",
+      "integrity": "sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.5.12",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "dfa": "^1.2.0",
+        "fast-deep-equal": "^3.1.3",
+        "restructure": "^3.0.0",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.4.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jpeg-exif": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz",
+      "integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ==",
+      "license": "MIT"
+    },
+    "node_modules/jsonwebtoken": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz",
+      "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/jwa": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
+      "integrity": "sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal-constant-time": "^1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "license": "MIT",
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/linebreak": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-1.1.0.tgz",
+      "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/multer": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.0.2.tgz",
+      "integrity": "sha512-u7f2xaZ/UG8oLXHvtF/oWTRvT44p9ecwBBqTwgJVq0+4BW1g8OW01TyMEGWBHbyMOYVHXslaut7qEQ1meATXgw==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.6.0",
+        "concat-stream": "^2.0.0",
+        "mkdirp": "^0.5.6",
+        "object-assign": "^4.1.1",
+        "type-is": "^1.6.18",
+        "xtend": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemailer": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.5.tgz",
+      "integrity": "sha512-nsrh2lO3j4GkLLXoeEksAMgAOqxOv6QumNRVQTJwKH4nuiww6iC2y7GyANs9kRAxCexg3+lTWM3PZ91iLlVjfg==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/nodemon": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.10.tgz",
+      "integrity": "sha512-WDjw3pJ0/0jMFmyNDp3gvY2YizjLmmOUQo6DEBY+JgdvW/yQ9mEeSw6H5ythl5Ny2ytb7f9C2nIbjSxMNzbJXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "debug": "^4",
+        "ignore-by-default": "^1.0.1",
+        "minimatch": "^3.1.2",
+        "pstree.remy": "^1.1.8",
+        "semver": "^7.5.3",
+        "simple-update-notifier": "^2.0.0",
+        "supports-color": "^5.5.0",
+        "touch": "^3.1.0",
+        "undefsafe": "^2.0.5"
+      },
+      "bin": {
+        "nodemon": "bin/nodemon.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
+      }
+    },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "license": "MIT"
+    },
+    "node_modules/pdfkit": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.17.1.tgz",
+      "integrity": "sha512-Kkf1I9no14O/uo593DYph5u3QwiMfby7JsBSErN1WqeyTgCBNJE3K4pXBn3TgkdKUIVu+buSl4bYUNC+8Up4xg==",
+      "license": "MIT",
+      "dependencies": {
+        "crypto-js": "^4.2.0",
+        "fontkit": "^2.0.4",
+        "jpeg-exif": "^1.1.4",
+        "linebreak": "^1.1.0",
+        "png-js": "^1.0.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/png-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
+      "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
+    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/prisma": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.22.0.tgz",
+      "integrity": "sha512-vtpjW3XuYCSnMsNVBjLMNkTj6OZbudcPPTPYHqX0CJfpcdWciI1dM8uHETwmDxxiqEwCIE6WvXucWUetJgfu/A==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@prisma/engines": "5.22.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.0.tgz",
+      "integrity": "sha512-RmkhL8CAyCRPXCE28MMH0z2PNWQBNk2Q09ZdxM9IOOXwxwZbN+qbWaatPkdkWIKL2ZVDImrN/pK5HTRz2PcS4g==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.6.3",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
+    "node_modules/restructure": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
+      "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
+      "license": "MIT"
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz",
+      "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
+      "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    }
+  }
+}
diff --git a/backend/package.json b/backend/package.json
new file mode 100644
index 0000000..7e494e6
--- /dev/null
+++ b/backend/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "event-management-backend",
+  "version": "1.0",
+  "description": "Event Management System Backend",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js",
+    "dev": "nodemon src/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "prisma generate",
+    "prisma:generate": "prisma generate",
+    "prisma:deploy": "prisma migrate deploy && prisma generate",
+    "prisma:status": "prisma migrate status",
+    "prisma:reset": "prisma migrate reset --force",
+    "migrate:env-to-db": "node scripts/migrate-env-to-db.js",
+    "migrate:env-to-db:dry": "node scripts/migrate-env-to-db.js --dry-run"
+  },
+  "dependencies": {
+    "@prisma/client": "^5.4.2",
+    "axios": "^1.11.0",
+    "bcryptjs": "^2.4.3",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "jsonwebtoken": "^9.0.2",
+    "multer": "^2.0.2",
+    "node-fetch": "^2.7.0",
+    "nodemailer": "^7.0.5",
+    "pdfkit": "^0.17.1",
+    "qrcode": "^1.5.4",
+    "raw-body": "^3.0.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1",
+    "prisma": "^5.4.2"
+  }
+}
diff --git a/backend/prisma/migrations/20260221095332_init/migration.sql b/backend/prisma/migrations/20260221095332_init/migration.sql
new file mode 100644
index 0000000..96556e1
--- /dev/null
+++ b/backend/prisma/migrations/20260221095332_init/migration.sql
@@ -0,0 +1,342 @@
+-- CreateEnum
+CREATE TYPE "UserRole" AS ENUM ('admin', 'supervisor', 'staff', 'user');
+
+-- CreateEnum
+CREATE TYPE "RegistrationStatus" AS ENUM ('pending', 'confirmed', 'partial_paid', 'paid', 'cancelled');
+
+-- CreateEnum
+CREATE TYPE "FormFieldType" AS ENUM ('yes_no', 'text', 'date', 'numeric', 'statement', 'paragraph');
+
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "phoneNumber" TEXT,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "role" "UserRole" NOT NULL DEFAULT 'user',
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Event" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "description" TEXT,
+    "startDate" TIMESTAMP(3) NOT NULL,
+    "endDate" TIMESTAMP(3) NOT NULL,
+    "registrationDeadline" TIMESTAMP(3),
+    "goLiveAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "price" DOUBLE PRECISION NOT NULL,
+    "picture" TEXT,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "createdById" TEXT,
+    "redirectUrl" TEXT,
+
+    CONSTRAINT "Event_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventOption" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "price" DOUBLE PRECISION NOT NULL,
+    "isMainTicket" BOOLEAN NOT NULL,
+
+    CONSTRAINT "EventOption_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EarlyBirdTier" (
+    "id" TEXT NOT NULL,
+    "eventOptionId" TEXT NOT NULL,
+    "deadline" TIMESTAMP(3) NOT NULL,
+    "price" DOUBLE PRECISION NOT NULL,
+    "order" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "EarlyBirdTier_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Registration" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "status" "RegistrationStatus" NOT NULL DEFAULT 'pending',
+    "checkoutId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Registration_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "RegistrationOption" (
+    "id" TEXT NOT NULL,
+    "registrationId" TEXT NOT NULL,
+    "eventOptionId" TEXT NOT NULL,
+    "quantity" INTEGER NOT NULL DEFAULT 1,
+
+    CONSTRAINT "RegistrationOption_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Payment" (
+    "id" TEXT NOT NULL,
+    "amount" DOUBLE PRECISION NOT NULL,
+    "method" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "registrationId" TEXT,
+    "eventId" TEXT,
+    "isDonation" BOOLEAN NOT NULL DEFAULT false,
+    "externalId" TEXT,
+    "status" TEXT,
+    "originalPaymentId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Payment_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Ticket" (
+    "id" TEXT NOT NULL,
+    "qrCode" TEXT NOT NULL,
+    "registrationOptionId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "isUsed" BOOLEAN NOT NULL DEFAULT false,
+    "emailSent" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Ticket_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TicketUsage" (
+    "id" TEXT NOT NULL,
+    "ticketId" TEXT NOT NULL,
+    "scannedById" TEXT NOT NULL,
+    "scannedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "TicketUsage_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PasswordReset" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "used" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "PasswordReset_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventAttachment" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "originalName" TEXT NOT NULL,
+    "filename" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "size" INTEGER NOT NULL,
+    "url" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EventAttachment_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventForm" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "isRequired" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "EventForm_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventFormField" (
+    "id" TEXT NOT NULL,
+    "formId" TEXT NOT NULL,
+    "type" "FormFieldType" NOT NULL,
+    "label" TEXT NOT NULL,
+    "isRequired" BOOLEAN NOT NULL DEFAULT false,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "helpText" TEXT,
+    "options" JSONB,
+
+    CONSTRAINT "EventFormField_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FormResponse" (
+    "id" TEXT NOT NULL,
+    "registrationId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "FormResponse_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FormAnswer" (
+    "id" TEXT NOT NULL,
+    "responseId" TEXT NOT NULL,
+    "fieldId" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+
+    CONSTRAINT "FormAnswer_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FormDraft" (
+    "id" TEXT NOT NULL,
+    "registrationId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "data" JSONB NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "FormDraft_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "YocoTransaction" (
+    "id" TEXT NOT NULL,
+    "externalId" TEXT NOT NULL,
+    "amount" INTEGER,
+    "currency" TEXT,
+    "createdDate" TIMESTAMP(3),
+    "checkoutId" TEXT,
+    "methodType" TEXT,
+    "reconciled" BOOLEAN NOT NULL DEFAULT false,
+    "ignored" BOOLEAN NOT NULL DEFAULT false,
+    "paymentId" TEXT,
+    "raw" JSONB,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "YocoTransaction_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Event_redirectUrl_key" ON "Event"("redirectUrl");
+
+-- CreateIndex
+CREATE INDEX "Event_createdById_idx" ON "Event"("createdById");
+
+-- CreateIndex
+CREATE INDEX "EarlyBirdTier_eventOptionId_deadline_idx" ON "EarlyBirdTier"("eventOptionId", "deadline");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Registration_checkoutId_key" ON "Registration"("checkoutId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Payment_externalId_key" ON "Payment"("externalId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Ticket_qrCode_key" ON "Ticket"("qrCode");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordReset_token_key" ON "PasswordReset"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "EventForm_eventId_key" ON "EventForm"("eventId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "FormDraft_registrationId_userId_key" ON "FormDraft"("registrationId", "userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "YocoTransaction_externalId_key" ON "YocoTransaction"("externalId");
+
+-- AddForeignKey
+ALTER TABLE "Event" ADD CONSTRAINT "Event_createdById_fkey" FOREIGN KEY ("createdById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventOption" ADD CONSTRAINT "EventOption_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EarlyBirdTier" ADD CONSTRAINT "EarlyBirdTier_eventOptionId_fkey" FOREIGN KEY ("eventOptionId") REFERENCES "EventOption"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Registration" ADD CONSTRAINT "Registration_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Registration" ADD CONSTRAINT "Registration_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "RegistrationOption" ADD CONSTRAINT "RegistrationOption_registrationId_fkey" FOREIGN KEY ("registrationId") REFERENCES "Registration"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "RegistrationOption" ADD CONSTRAINT "RegistrationOption_eventOptionId_fkey" FOREIGN KEY ("eventOptionId") REFERENCES "EventOption"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Payment" ADD CONSTRAINT "Payment_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Payment" ADD CONSTRAINT "Payment_registrationId_fkey" FOREIGN KEY ("registrationId") REFERENCES "Registration"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Payment" ADD CONSTRAINT "Payment_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Payment" ADD CONSTRAINT "Payment_originalPaymentId_fkey" FOREIGN KEY ("originalPaymentId") REFERENCES "Payment"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Ticket" ADD CONSTRAINT "Ticket_registrationOptionId_fkey" FOREIGN KEY ("registrationOptionId") REFERENCES "RegistrationOption"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Ticket" ADD CONSTRAINT "Ticket_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Ticket" ADD CONSTRAINT "Ticket_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TicketUsage" ADD CONSTRAINT "TicketUsage_ticketId_fkey" FOREIGN KEY ("ticketId") REFERENCES "Ticket"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "TicketUsage" ADD CONSTRAINT "TicketUsage_scannedById_fkey" FOREIGN KEY ("scannedById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PasswordReset" ADD CONSTRAINT "PasswordReset_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventAttachment" ADD CONSTRAINT "EventAttachment_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventForm" ADD CONSTRAINT "EventForm_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventFormField" ADD CONSTRAINT "EventFormField_formId_fkey" FOREIGN KEY ("formId") REFERENCES "EventForm"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormResponse" ADD CONSTRAINT "FormResponse_registrationId_fkey" FOREIGN KEY ("registrationId") REFERENCES "Registration"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormAnswer" ADD CONSTRAINT "FormAnswer_responseId_fkey" FOREIGN KEY ("responseId") REFERENCES "FormResponse"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormAnswer" ADD CONSTRAINT "FormAnswer_fieldId_fkey" FOREIGN KEY ("fieldId") REFERENCES "EventFormField"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormDraft" ADD CONSTRAINT "FormDraft_registrationId_fkey" FOREIGN KEY ("registrationId") REFERENCES "Registration"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "FormDraft" ADD CONSTRAINT "FormDraft_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "YocoTransaction" ADD CONSTRAINT "YocoTransaction_paymentId_fkey" FOREIGN KEY ("paymentId") REFERENCES "Payment"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260223084934_add_sections/migration.sql b/backend/prisma/migrations/20260223084934_add_sections/migration.sql
new file mode 100644
index 0000000..ab10ad7
--- /dev/null
+++ b/backend/prisma/migrations/20260223084934_add_sections/migration.sql
@@ -0,0 +1,34 @@
+-- CreateTable
+CREATE TABLE "Section" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Section_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "SectionOption" (
+    "id" TEXT NOT NULL,
+    "sectionId" TEXT NOT NULL,
+    "eventOptionId" TEXT NOT NULL,
+
+    CONSTRAINT "SectionOption_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "Section_eventId_idx" ON "Section"("eventId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "SectionOption_sectionId_eventOptionId_key" ON "SectionOption"("sectionId", "eventOptionId");
+
+-- AddForeignKey
+ALTER TABLE "Section" ADD CONSTRAINT "Section_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "SectionOption" ADD CONSTRAINT "SectionOption_sectionId_fkey" FOREIGN KEY ("sectionId") REFERENCES "Section"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "SectionOption" ADD CONSTRAINT "SectionOption_eventOptionId_fkey" FOREIGN KEY ("eventOptionId") REFERENCES "EventOption"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260318105548_failed_atempts/migration.sql b/backend/prisma/migrations/20260318105548_failed_atempts/migration.sql
new file mode 100644
index 0000000..4c0b1b5
--- /dev/null
+++ b/backend/prisma/migrations/20260318105548_failed_atempts/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "failedAttempts" INTEGER NOT NULL DEFAULT 0,
+ADD COLUMN     "lockUntil" TIMESTAMP(3);
diff --git a/backend/prisma/migrations/20260407120000_add_token_version/migration.sql b/backend/prisma/migrations/20260407120000_add_token_version/migration.sql
new file mode 100644
index 0000000..5385689
--- /dev/null
+++ b/backend/prisma/migrations/20260407120000_add_token_version/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable: add tokenVersion for JWT revocation
+ALTER TABLE "User" ADD COLUMN "tokenVersion" INTEGER NOT NULL DEFAULT 0;
\ No newline at end of file
diff --git a/backend/prisma/migrations/20260407130000_task6_schema/migration.sql b/backend/prisma/migrations/20260407130000_task6_schema/migration.sql
new file mode 100644
index 0000000..405d71d
--- /dev/null
+++ b/backend/prisma/migrations/20260407130000_task6_schema/migration.sql
@@ -0,0 +1,9 @@
+-- Add isHidden and requiresAuth to Event
+ALTER TABLE "Event" ADD COLUMN "isHidden"     BOOLEAN NOT NULL DEFAULT false;
+ALTER TABLE "Event" ADD COLUMN "requiresAuth" BOOLEAN NOT NULL DEFAULT true;
+
+-- Add quantity to Ticket (1 ticket per option, not per qty unit)
+ALTER TABLE "Ticket" ADD COLUMN "quantity" INTEGER NOT NULL DEFAULT 1;
+
+-- Add quantityRedeemed to TicketUsage (for partial redemption)
+ALTER TABLE "TicketUsage" ADD COLUMN "quantityRedeemed" INTEGER NOT NULL DEFAULT 1;
\ No newline at end of file
diff --git a/backend/prisma/migrations/20260409085416_unique_phone/migration.sql b/backend/prisma/migrations/20260409085416_unique_phone/migration.sql
new file mode 100644
index 0000000..b762664
--- /dev/null
+++ b/backend/prisma/migrations/20260409085416_unique_phone/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[phoneNumber]` on the table `User` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "User_phoneNumber_key" ON "User"("phoneNumber");
diff --git a/backend/prisma/migrations/20260410100648_add_scan_indexes/migration.sql b/backend/prisma/migrations/20260410100648_add_scan_indexes/migration.sql
new file mode 100644
index 0000000..7c1f580
--- /dev/null
+++ b/backend/prisma/migrations/20260410100648_add_scan_indexes/migration.sql
@@ -0,0 +1,14 @@
+-- CreateIndex
+CREATE INDEX "Ticket_eventId_idx" ON "Ticket"("eventId");
+
+-- CreateIndex
+CREATE INDEX "Ticket_userId_idx" ON "Ticket"("userId");
+
+-- CreateIndex
+CREATE INDEX "TicketUsage_ticketId_idx" ON "TicketUsage"("ticketId");
+
+-- CreateIndex
+CREATE INDEX "TicketUsage_scannedAt_idx" ON "TicketUsage"("scannedAt");
+
+-- CreateIndex
+CREATE INDEX "TicketUsage_scannedById_scannedAt_idx" ON "TicketUsage"("scannedById", "scannedAt");
diff --git a/backend/prisma/migrations/20260410115035_add_missing_fk_indexes/migration.sql b/backend/prisma/migrations/20260410115035_add_missing_fk_indexes/migration.sql
new file mode 100644
index 0000000..955db05
--- /dev/null
+++ b/backend/prisma/migrations/20260410115035_add_missing_fk_indexes/migration.sql
@@ -0,0 +1,56 @@
+-- CreateIndex
+CREATE INDEX "EventAttachment_eventId_idx" ON "EventAttachment"("eventId");
+
+-- CreateIndex
+CREATE INDEX "EventFormField_formId_idx" ON "EventFormField"("formId");
+
+-- CreateIndex
+CREATE INDEX "EventOption_eventId_idx" ON "EventOption"("eventId");
+
+-- CreateIndex
+CREATE INDEX "FormAnswer_responseId_idx" ON "FormAnswer"("responseId");
+
+-- CreateIndex
+CREATE INDEX "FormAnswer_fieldId_idx" ON "FormAnswer"("fieldId");
+
+-- CreateIndex
+CREATE INDEX "FormResponse_registrationId_idx" ON "FormResponse"("registrationId");
+
+-- CreateIndex
+CREATE INDEX "PasswordReset_userId_idx" ON "PasswordReset"("userId");
+
+-- CreateIndex
+CREATE INDEX "Payment_userId_idx" ON "Payment"("userId");
+
+-- CreateIndex
+CREATE INDEX "Payment_registrationId_idx" ON "Payment"("registrationId");
+
+-- CreateIndex
+CREATE INDEX "Payment_eventId_idx" ON "Payment"("eventId");
+
+-- CreateIndex
+CREATE INDEX "Payment_createdAt_idx" ON "Payment"("createdAt");
+
+-- CreateIndex
+CREATE INDEX "Registration_userId_idx" ON "Registration"("userId");
+
+-- CreateIndex
+CREATE INDEX "Registration_eventId_idx" ON "Registration"("eventId");
+
+-- CreateIndex
+CREATE INDEX "Registration_userId_status_idx" ON "Registration"("userId", "status");
+
+-- CreateIndex
+CREATE INDEX "Registration_eventId_status_idx" ON "Registration"("eventId", "status");
+
+-- CreateIndex
+CREATE INDEX "RegistrationOption_registrationId_idx" ON "RegistrationOption"("registrationId");
+
+-- CreateIndex
+CREATE INDEX "RegistrationOption_eventOptionId_idx" ON "RegistrationOption"("eventOptionId");
+
+-- CreateIndex
+CREATE INDEX "Ticket_registrationOptionId_idx" ON "Ticket"("registrationOptionId");
+
+-- CreateIndex
+CREATE INDEX "YocoTransaction_paymentId_idx" ON "YocoTransaction"("paymentId");
diff --git a/backend/prisma/migrations/20260412150501_notification_preference/migration.sql b/backend/prisma/migrations/20260412150501_notification_preference/migration.sql
new file mode 100644
index 0000000..a4fa33c
--- /dev/null
+++ b/backend/prisma/migrations/20260412150501_notification_preference/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "NotificationPreference" AS ENUM ('email', 'whatsapp', 'both');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "notificationPreference" "NotificationPreference" NOT NULL DEFAULT 'email';
diff --git a/backend/prisma/migrations/20260413064828_add_app_setting/migration.sql b/backend/prisma/migrations/20260413064828_add_app_setting/migration.sql
new file mode 100644
index 0000000..2b8e8a3
--- /dev/null
+++ b/backend/prisma/migrations/20260413064828_add_app_setting/migration.sql
@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "AppSetting" (
+    "key" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "AppSetting_pkey" PRIMARY KEY ("key")
+);
diff --git a/backend/prisma/migrations/20260416000000_add_variants_stock_limits/migration.sql b/backend/prisma/migrations/20260416000000_add_variants_stock_limits/migration.sql
new file mode 100644
index 0000000..e248019
--- /dev/null
+++ b/backend/prisma/migrations/20260416000000_add_variants_stock_limits/migration.sql
@@ -0,0 +1,37 @@
+-- Add stockLimit to EventOption
+ALTER TABLE "EventOption" ADD COLUMN "stockLimit" INTEGER NOT NULL DEFAULT 0;
+
+-- Add stockLimit to EarlyBirdTier
+ALTER TABLE "EarlyBirdTier" ADD COLUMN "stockLimit" INTEGER NOT NULL DEFAULT 0;
+
+-- CreateTable OptionVariant
+CREATE TABLE "OptionVariant" (
+    "id" TEXT NOT NULL,
+    "eventOptionId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "price" DOUBLE PRECISION,
+    "stockLimit" INTEGER NOT NULL DEFAULT 0,
+    "order" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "OptionVariant_pkey" PRIMARY KEY ("id")
+);
+
+-- Add new columns to RegistrationOption
+ALTER TABLE "RegistrationOption" ADD COLUMN "variantId" TEXT;
+ALTER TABLE "RegistrationOption" ADD COLUMN "appliedTierId" TEXT;
+ALTER TABLE "RegistrationOption" ADD COLUMN "priceSnapshot" DOUBLE PRECISION;
+
+-- CreateIndex
+CREATE INDEX "OptionVariant_eventOptionId_idx" ON "OptionVariant"("eventOptionId");
+CREATE INDEX "RegistrationOption_variantId_idx" ON "RegistrationOption"("variantId");
+CREATE INDEX "RegistrationOption_appliedTierId_idx" ON "RegistrationOption"("appliedTierId");
+
+-- AddForeignKey
+ALTER TABLE "OptionVariant" ADD CONSTRAINT "OptionVariant_eventOptionId_fkey"
+    FOREIGN KEY ("eventOptionId") REFERENCES "EventOption"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+ALTER TABLE "RegistrationOption" ADD CONSTRAINT "RegistrationOption_variantId_fkey"
+    FOREIGN KEY ("variantId") REFERENCES "OptionVariant"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+ALTER TABLE "RegistrationOption" ADD CONSTRAINT "RegistrationOption_appliedTierId_fkey"
+    FOREIGN KEY ("appliedTierId") REFERENCES "EarlyBirdTier"("id") ON DELETE SET NULL ON UPDATE CASCADE;
\ No newline at end of file
diff --git a/backend/prisma/migrations/20260417080718_add_variant_early_bird_tiers/migration.sql b/backend/prisma/migrations/20260417080718_add_variant_early_bird_tiers/migration.sql
new file mode 100644
index 0000000..17a706c
--- /dev/null
+++ b/backend/prisma/migrations/20260417080718_add_variant_early_bird_tiers/migration.sql
@@ -0,0 +1,8 @@
+-- AlterTable
+ALTER TABLE "EarlyBirdTier" ADD COLUMN     "variantId" TEXT;
+
+-- CreateIndex
+CREATE INDEX "EarlyBirdTier_variantId_idx" ON "EarlyBirdTier"("variantId");
+
+-- AddForeignKey
+ALTER TABLE "EarlyBirdTier" ADD CONSTRAINT "EarlyBirdTier_variantId_fkey" FOREIGN KEY ("variantId") REFERENCES "OptionVariant"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260421072250_add_church_models/migration.sql b/backend/prisma/migrations/20260421072250_add_church_models/migration.sql
new file mode 100644
index 0000000..ad8dd44
--- /dev/null
+++ b/backend/prisma/migrations/20260421072250_add_church_models/migration.sql
@@ -0,0 +1,213 @@
+-- CreateTable
+CREATE TABLE "Ministry" (
+    "id" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "description" TEXT,
+    "image" TEXT,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "leaderId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Ministry_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TeamMember" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "bio" TEXT,
+    "photo" TEXT,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "email" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "TeamMember_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ContentBlock" (
+    "id" TEXT NOT NULL,
+    "page" TEXT NOT NULL,
+    "key" TEXT NOT NULL,
+    "value" TEXT NOT NULL,
+    "type" TEXT NOT NULL DEFAULT 'text',
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ContentBlock_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ChurchDocument" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "description" TEXT,
+    "fileUrl" TEXT NOT NULL,
+    "category" TEXT NOT NULL DEFAULT 'other',
+    "isPublic" BOOLEAN NOT NULL DEFAULT true,
+    "uploadedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ChurchDocument_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FellowshipGroup" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "leader" TEXT,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "order" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "FellowshipGroup_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ChurchMember" (
+    "id" TEXT NOT NULL,
+    "status" TEXT NOT NULL DEFAULT 'pending',
+    "mainName" TEXT NOT NULL,
+    "mainEmail" TEXT NOT NULL,
+    "mainPhone" TEXT,
+    "mainBirthday" TIMESTAMP(3),
+    "mainOccupation" TEXT,
+    "mainEmploymentStatus" TEXT,
+    "mainDateOfSalvation" TIMESTAMP(3),
+    "mainDateOfWaterBaptism" TIMESTAMP(3),
+    "mainHolySpiritBaptism" BOOLEAN NOT NULL DEFAULT false,
+    "spouseName" TEXT,
+    "spouseEmail" TEXT,
+    "spousePhone" TEXT,
+    "spouseBirthday" TIMESTAMP(3),
+    "spouseOccupation" TEXT,
+    "spouseEmploymentStatus" TEXT,
+    "spouseDateOfSalvation" TIMESTAMP(3),
+    "spouseDateOfWaterBaptism" TIMESTAMP(3),
+    "spouseHolySpiritBaptism" BOOLEAN,
+    "homeAddress" TEXT,
+    "inFellowshipGroup" BOOLEAN NOT NULL DEFAULT false,
+    "fellowshipGroupId" TEXT,
+    "membershipConfirmed" BOOLEAN NOT NULL DEFAULT false,
+    "notes" TEXT,
+    "appliedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "approvedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ChurchMember_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ChurchChild" (
+    "id" TEXT NOT NULL,
+    "memberId" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "birthday" TIMESTAMP(3),
+
+    CONSTRAINT "ChurchChild_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MinistryInterest" (
+    "id" TEXT NOT NULL,
+    "memberId" TEXT NOT NULL,
+    "ministryId" TEXT NOT NULL,
+    "forSpouse" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "MinistryInterest_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Donation" (
+    "id" TEXT NOT NULL,
+    "donorName" TEXT,
+    "donorEmail" TEXT,
+    "donorPhone" TEXT,
+    "amount" DOUBLE PRECISION NOT NULL,
+    "method" TEXT NOT NULL,
+    "reference" TEXT,
+    "note" TEXT,
+    "isAnonymous" BOOLEAN NOT NULL DEFAULT false,
+    "linkedMemberId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Donation_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Ministry_slug_key" ON "Ministry"("slug");
+
+-- CreateIndex
+CREATE INDEX "Ministry_isActive_order_idx" ON "Ministry"("isActive", "order");
+
+-- CreateIndex
+CREATE INDEX "Ministry_leaderId_idx" ON "Ministry"("leaderId");
+
+-- CreateIndex
+CREATE INDEX "TeamMember_isActive_order_idx" ON "TeamMember"("isActive", "order");
+
+-- CreateIndex
+CREATE INDEX "ContentBlock_page_idx" ON "ContentBlock"("page");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ContentBlock_page_key_key" ON "ContentBlock"("page", "key");
+
+-- CreateIndex
+CREATE INDEX "FellowshipGroup_isActive_order_idx" ON "FellowshipGroup"("isActive", "order");
+
+-- CreateIndex
+CREATE INDEX "ChurchMember_status_idx" ON "ChurchMember"("status");
+
+-- CreateIndex
+CREATE INDEX "ChurchMember_mainEmail_idx" ON "ChurchMember"("mainEmail");
+
+-- CreateIndex
+CREATE INDEX "ChurchMember_fellowshipGroupId_idx" ON "ChurchMember"("fellowshipGroupId");
+
+-- CreateIndex
+CREATE INDEX "ChurchChild_memberId_idx" ON "ChurchChild"("memberId");
+
+-- CreateIndex
+CREATE INDEX "MinistryInterest_memberId_idx" ON "MinistryInterest"("memberId");
+
+-- CreateIndex
+CREATE INDEX "MinistryInterest_ministryId_idx" ON "MinistryInterest"("ministryId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "MinistryInterest_memberId_ministryId_forSpouse_key" ON "MinistryInterest"("memberId", "ministryId", "forSpouse");
+
+-- CreateIndex
+CREATE INDEX "Donation_linkedMemberId_idx" ON "Donation"("linkedMemberId");
+
+-- CreateIndex
+CREATE INDEX "Donation_createdAt_idx" ON "Donation"("createdAt");
+
+-- CreateIndex
+CREATE INDEX "Donation_method_idx" ON "Donation"("method");
+
+-- AddForeignKey
+ALTER TABLE "Ministry" ADD CONSTRAINT "Ministry_leaderId_fkey" FOREIGN KEY ("leaderId") REFERENCES "TeamMember"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ChurchMember" ADD CONSTRAINT "ChurchMember_fellowshipGroupId_fkey" FOREIGN KEY ("fellowshipGroupId") REFERENCES "FellowshipGroup"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ChurchChild" ADD CONSTRAINT "ChurchChild_memberId_fkey" FOREIGN KEY ("memberId") REFERENCES "ChurchMember"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "MinistryInterest" ADD CONSTRAINT "MinistryInterest_memberId_fkey" FOREIGN KEY ("memberId") REFERENCES "ChurchMember"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "MinistryInterest" ADD CONSTRAINT "MinistryInterest_ministryId_fkey" FOREIGN KEY ("ministryId") REFERENCES "Ministry"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Donation" ADD CONSTRAINT "Donation_linkedMemberId_fkey" FOREIGN KEY ("linkedMemberId") REFERENCES "ChurchMember"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260720095151_add_cashup_and_costs/migration.sql b/backend/prisma/migrations/20260720095151_add_cashup_and_costs/migration.sql
new file mode 100644
index 0000000..ab6b7a1
--- /dev/null
+++ b/backend/prisma/migrations/20260720095151_add_cashup_and_costs/migration.sql
@@ -0,0 +1,158 @@
+/*
+  Warnings:
+
+  - You are about to drop the `ChurchChild` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `ChurchDocument` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `ChurchMember` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `ContentBlock` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `Donation` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `FellowshipGroup` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `Ministry` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `MinistryInterest` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `TeamMember` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- CreateEnum
+CREATE TYPE "CashupStatus" AS ENUM ('open', 'closed');
+
+-- CreateEnum
+CREATE TYPE "CashupAction" AS ENUM ('closed', 'quick_closed', 'reopened');
+
+-- CreateEnum
+CREATE TYPE "EventCostType" AS ENUM ('once_off', 'per_item');
+
+-- DropForeignKey
+ALTER TABLE "ChurchChild" DROP CONSTRAINT "ChurchChild_memberId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "ChurchMember" DROP CONSTRAINT "ChurchMember_fellowshipGroupId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Donation" DROP CONSTRAINT "Donation_linkedMemberId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Ministry" DROP CONSTRAINT "Ministry_leaderId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "MinistryInterest" DROP CONSTRAINT "MinistryInterest_memberId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "MinistryInterest" DROP CONSTRAINT "MinistryInterest_ministryId_fkey";
+
+-- AlterTable
+ALTER TABLE "Event" ADD COLUMN     "cashupDraft" JSONB,
+ADD COLUMN     "cashupStatus" "CashupStatus" NOT NULL DEFAULT 'open',
+ADD COLUMN     "closedAt" TIMESTAMP(3),
+ADD COLUMN     "closedById" TEXT,
+ADD COLUMN     "reopenedAt" TIMESTAMP(3),
+ADD COLUMN     "reopenedById" TEXT;
+
+-- DropTable
+DROP TABLE "ChurchChild";
+
+-- DropTable
+DROP TABLE "ChurchDocument";
+
+-- DropTable
+DROP TABLE "ChurchMember";
+
+-- DropTable
+DROP TABLE "ContentBlock";
+
+-- DropTable
+DROP TABLE "Donation";
+
+-- DropTable
+DROP TABLE "FellowshipGroup";
+
+-- DropTable
+DROP TABLE "Ministry";
+
+-- DropTable
+DROP TABLE "MinistryInterest";
+
+-- DropTable
+DROP TABLE "TeamMember";
+
+-- CreateTable
+CREATE TABLE "EventCost" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "eventOptionId" TEXT,
+    "label" TEXT NOT NULL,
+    "costType" "EventCostType" NOT NULL,
+    "amount" DOUBLE PRECISION NOT NULL,
+    "notes" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "EventCost_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventCashup" (
+    "id" TEXT NOT NULL,
+    "eventId" TEXT NOT NULL,
+    "action" "CashupAction" NOT NULL,
+    "donationsWrittenOff" DOUBLE PRECISION NOT NULL DEFAULT 0,
+    "totalCosts" DOUBLE PRECISION NOT NULL DEFAULT 0,
+    "totalExpectedRevenue" DOUBLE PRECISION NOT NULL DEFAULT 0,
+    "totalActualRevenue" DOUBLE PRECISION,
+    "notes" TEXT,
+    "performedById" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EventCashup_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventCashupLine" (
+    "id" TEXT NOT NULL,
+    "cashupId" TEXT NOT NULL,
+    "method" TEXT NOT NULL,
+    "expectedAmount" DOUBLE PRECISION NOT NULL DEFAULT 0,
+    "actualAmount" DOUBLE PRECISION,
+    "variance" DOUBLE PRECISION,
+    "notes" TEXT,
+
+    CONSTRAINT "EventCashupLine_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "EventCost_eventId_idx" ON "EventCost"("eventId");
+
+-- CreateIndex
+CREATE INDEX "EventCost_eventOptionId_idx" ON "EventCost"("eventOptionId");
+
+-- CreateIndex
+CREATE INDEX "EventCashup_eventId_createdAt_idx" ON "EventCashup"("eventId", "createdAt");
+
+-- CreateIndex
+CREATE INDEX "EventCashupLine_cashupId_idx" ON "EventCashupLine"("cashupId");
+
+-- CreateIndex
+CREATE INDEX "Event_closedById_idx" ON "Event"("closedById");
+
+-- CreateIndex
+CREATE INDEX "Event_reopenedById_idx" ON "Event"("reopenedById");
+
+-- AddForeignKey
+ALTER TABLE "Event" ADD CONSTRAINT "Event_closedById_fkey" FOREIGN KEY ("closedById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Event" ADD CONSTRAINT "Event_reopenedById_fkey" FOREIGN KEY ("reopenedById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCost" ADD CONSTRAINT "EventCost_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCost" ADD CONSTRAINT "EventCost_eventOptionId_fkey" FOREIGN KEY ("eventOptionId") REFERENCES "EventOption"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCashup" ADD CONSTRAINT "EventCashup_eventId_fkey" FOREIGN KEY ("eventId") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCashup" ADD CONSTRAINT "EventCashup_performedById_fkey" FOREIGN KEY ("performedById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCashupLine" ADD CONSTRAINT "EventCashupLine_cashupId_fkey" FOREIGN KEY ("cashupId") REFERENCES "EventCashup"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260720133203_cashup_denominations_and_cost_method/migration.sql b/backend/prisma/migrations/20260720133203_cashup_denominations_and_cost_method/migration.sql
new file mode 100644
index 0000000..96a7890
--- /dev/null
+++ b/backend/prisma/migrations/20260720133203_cashup_denominations_and_cost_method/migration.sql
@@ -0,0 +1,21 @@
+-- AlterTable: rename donationsWrittenOff -> unallocatedDonationsTotal, preserving existing values
+ALTER TABLE "EventCashup" RENAME COLUMN "donationsWrittenOff" TO "unallocatedDonationsTotal";
+
+-- AlterTable
+ALTER TABLE "EventCost" ADD COLUMN     "paidFromMethod" TEXT;
+
+-- CreateTable
+CREATE TABLE "EventCashupDenomination" (
+    "id" TEXT NOT NULL,
+    "lineId" TEXT NOT NULL,
+    "value" DOUBLE PRECISION NOT NULL,
+    "count" INTEGER NOT NULL,
+
+    CONSTRAINT "EventCashupDenomination_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "EventCashupDenomination_lineId_idx" ON "EventCashupDenomination"("lineId");
+
+-- AddForeignKey
+ALTER TABLE "EventCashupDenomination" ADD CONSTRAINT "EventCashupDenomination_lineId_fkey" FOREIGN KEY ("lineId") REFERENCES "EventCashupLine"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/20260722084228_add_event_notify_recipients/migration.sql b/backend/prisma/migrations/20260722084228_add_event_notify_recipients/migration.sql
new file mode 100644
index 0000000..bdd6675
--- /dev/null
+++ b/backend/prisma/migrations/20260722084228_add_event_notify_recipients/migration.sql
@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "_EventNotifyRecipients" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_EventNotifyRecipients_AB_unique" ON "_EventNotifyRecipients"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_EventNotifyRecipients_B_index" ON "_EventNotifyRecipients"("B");
+
+-- AddForeignKey
+ALTER TABLE "_EventNotifyRecipients" ADD CONSTRAINT "_EventNotifyRecipients_A_fkey" FOREIGN KEY ("A") REFERENCES "Event"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_EventNotifyRecipients" ADD CONSTRAINT "_EventNotifyRecipients_B_fkey" FOREIGN KEY ("B") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/backend/prisma/migrations/migration_lock.toml b/backend/prisma/migrations/migration_lock.toml
new file mode 100644
index 0000000..fbffa92
--- /dev/null
+++ b/backend/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
\ No newline at end of file
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
new file mode 100644
index 0000000..daab2b6
--- /dev/null
+++ b/backend/prisma/schema.prisma
@@ -0,0 +1,636 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+enum UserRole {
+  admin
+  supervisor
+  staff
+  user
+}
+
+enum NotificationPreference {
+  email
+  whatsapp
+  both
+}
+
+enum RegistrationStatus {
+  pending
+  confirmed
+  partial_paid
+  paid
+  cancelled
+}
+
+enum CashupStatus {
+  open
+  closed
+}
+
+enum CashupAction {
+  closed
+  quick_closed
+  reopened
+}
+
+enum EventCostType {
+  once_off
+  per_item
+}
+
+model User {
+  id                     String                 @id @default(uuid())
+  name                   String
+  email                  String                 @unique
+  password               String
+  createdAt              DateTime               @default(now())
+  isActive               Boolean                @default(true)
+  phoneNumber            String?                @unique
+  updatedAt              DateTime               @updatedAt
+  role                   UserRole               @default(user)
+  failedAttempts         Int                    @default(0)
+  lockUntil              DateTime?
+  tokenVersion           Int                    @default(0)
+  notificationPreference NotificationPreference @default(email)
+  registrations          Registration[]
+  payments               Payment[]
+  tickets                Ticket[]
+  ticketScans            TicketUsage[]
+  passwordResets         PasswordReset[]
+
+  Event     Event[]
+  FormDraft FormDraft[]
+
+  eventsClosed     Event[]       @relation("EventClosedBy")
+  eventsReopened   Event[]       @relation("EventReopenedBy")
+  cashupsPerformed EventCashup[]
+  notifyForEvents  Event[]       @relation("EventNotifyRecipients")
+}
+
+model Event {
+  id                   String            @id @default(uuid())
+  title                String
+  description          String?
+  startDate            DateTime
+  endDate              DateTime
+  registrationDeadline DateTime?
+  goLiveAt             DateTime          @default(now())
+  price                Float
+  picture              String?
+  isActive             Boolean           @default(true)
+  isHidden             Boolean           @default(false)
+  requiresAuth         Boolean           @default(true)
+  createdAt            DateTime          @default(now())
+  updatedAt            DateTime          @updatedAt
+  createdById          String?
+  createdBy            User?             @relation(fields: [createdById], references: [id], onDelete: SetNull)
+  redirectUrl          String?           @unique
+  eventOptions         EventOption[]
+  registrations        Registration[]
+  payments             Payment[]
+  tickets              Ticket[]
+  attachments          EventAttachment[]
+  form                 EventForm?
+  Section              Section[]
+
+  cashupStatus CashupStatus  @default(open)
+  cashupDraft  Json?
+  closedAt     DateTime?
+  closedById   String?
+  closedBy     User?         @relation("EventClosedBy", fields: [closedById], references: [id], onDelete: SetNull)
+  reopenedAt   DateTime?
+  reopenedById String?
+  reopenedBy   User?         @relation("EventReopenedBy", fields: [reopenedById], references: [id], onDelete: SetNull)
+  costs        EventCost[]
+  cashups      EventCashup[]
+
+  // Users who should receive registration/payment/daily-summary notifications for this
+  // event. Falls back to `createdBy` when empty (see backend/src/utils/notifications.js).
+  notifyRecipients User[] @relation("EventNotifyRecipients")
+
+  @@index([createdById])
+  @@index([closedById])
+  @@index([reopenedById])
+}
+
+model EventOption {
+  id                  String               @id @default(uuid())
+  eventId             String
+  name                String
+  price               Float
+  isMainTicket        Boolean
+  stockLimit          Int                  @default(0)
+  event               Event                @relation(fields: [eventId], references: [id], onDelete: Restrict)
+  registrationOptions RegistrationOption[]
+  earlyBirdTiers      EarlyBirdTier[]
+  SectionOption       SectionOption[]
+  variants            OptionVariant[]
+  costs               EventCost[]
+
+  @@index([eventId])
+}
+
+model EarlyBirdTier {
+  id                  String               @id @default(uuid())
+  eventOptionId       String
+  variantId           String?
+  deadline            DateTime
+  price               Float
+  order               Int                  @default(0)
+  stockLimit          Int                  @default(0)
+  eventOption         EventOption          @relation(fields: [eventOptionId], references: [id], onDelete: Cascade)
+  variant             OptionVariant?       @relation(fields: [variantId], references: [id], onDelete: Cascade)
+  registrationOptions RegistrationOption[]
+
+  @@index([eventOptionId, deadline])
+  @@index([variantId])
+}
+
+model OptionVariant {
+  id                  String               @id @default(uuid())
+  eventOptionId       String
+  name                String
+  price               Float?
+  stockLimit          Int                  @default(0)
+  order               Int                  @default(0)
+  eventOption         EventOption          @relation(fields: [eventOptionId], references: [id], onDelete: Cascade)
+  registrationOptions RegistrationOption[]
+  earlyBirdTiers      EarlyBirdTier[]
+
+  @@index([eventOptionId])
+}
+
+model Registration {
+  id                  String               @id @default(uuid())
+  userId              String
+  eventId             String
+  status              RegistrationStatus   @default(pending)
+  checkoutId          String?              @unique
+  createdAt           DateTime             @default(now())
+  updatedAt           DateTime             @updatedAt
+  user                User                 @relation(fields: [userId], references: [id], onDelete: Restrict)
+  event               Event                @relation(fields: [eventId], references: [id], onDelete: Restrict)
+  registrationOptions RegistrationOption[]
+  payments            Payment[]
+  formResponses       FormResponse[]
+  formDrafts          FormDraft[]
+
+  @@index([userId])
+  @@index([eventId])
+  @@index([userId, status])
+  @@index([eventId, status])
+}
+
+model RegistrationOption {
+  id             String         @id @default(uuid())
+  registrationId String
+  eventOptionId  String
+  quantity       Int            @default(1)
+  variantId      String?
+  appliedTierId  String?
+  priceSnapshot  Float?
+  registration   Registration   @relation(fields: [registrationId], references: [id], onDelete: Restrict)
+  eventOption    EventOption    @relation(fields: [eventOptionId], references: [id], onDelete: Restrict)
+  variant        OptionVariant? @relation(fields: [variantId], references: [id], onDelete: SetNull)
+  appliedTier    EarlyBirdTier? @relation(fields: [appliedTierId], references: [id], onDelete: SetNull)
+  tickets        Ticket[]
+
+  @@index([registrationId])
+  @@index([eventOptionId])
+  @@index([variantId])
+  @@index([appliedTierId])
+}
+
+model Payment {
+  id                String            @id @default(uuid())
+  amount            Float
+  method            String
+  userId            String
+  registrationId    String?
+  eventId           String?
+  isDonation        Boolean           @default(false)
+  externalId        String?           @unique
+  status            String?
+  originalPaymentId String?
+  createdAt         DateTime          @default(now())
+  user              User              @relation(fields: [userId], references: [id], onDelete: Restrict)
+  registration      Registration?     @relation(fields: [registrationId], references: [id], onDelete: SetNull)
+  event             Event?            @relation(fields: [eventId], references: [id], onDelete: SetNull)
+  originalPayment   Payment?          @relation("SplitPayments", fields: [originalPaymentId], references: [id], onDelete: SetNull)
+  splitPayments     Payment[]         @relation("SplitPayments")
+  YocoTransaction   YocoTransaction[]
+
+  @@index([userId])
+  @@index([registrationId])
+  @@index([eventId])
+  @@index([createdAt])
+}
+
+model Ticket {
+  id                   String             @id @default(uuid())
+  qrCode               String             @unique
+  registrationOptionId String
+  userId               String
+  eventId              String
+  quantity             Int                @default(1)
+  isUsed               Boolean            @default(false)
+  emailSent            Boolean            @default(false)
+  createdAt            DateTime           @default(now())
+  updatedAt            DateTime           @updatedAt
+  registrationOption   RegistrationOption @relation(fields: [registrationOptionId], references: [id], onDelete: Restrict)
+  user                 User               @relation(fields: [userId], references: [id], onDelete: Restrict)
+  event                Event              @relation(fields: [eventId], references: [id], onDelete: Restrict)
+  usages               TicketUsage[]
+
+  @@index([eventId])
+  @@index([userId])
+  @@index([registrationOptionId])
+}
+
+model TicketUsage {
+  id               String   @id @default(uuid())
+  ticketId         String
+  scannedById      String
+  scannedAt        DateTime @default(now())
+  quantityRedeemed Int      @default(1)
+  ticket           Ticket   @relation(fields: [ticketId], references: [id], onDelete: Restrict)
+  scannedBy        User     @relation(fields: [scannedById], references: [id], onDelete: Restrict)
+
+  @@index([ticketId])
+  @@index([scannedAt])
+  @@index([scannedById, scannedAt])
+}
+
+model PasswordReset {
+  id        String   @id @default(uuid())
+  userId    String
+  token     String   @unique
+  expiresAt DateTime
+  used      Boolean  @default(false)
+  createdAt DateTime @default(now())
+  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([userId])
+}
+
+model EventAttachment {
+  id           String   @id @default(uuid())
+  eventId      String
+  originalName String
+  filename     String
+  mimeType     String
+  size         Int
+  url          String
+  createdAt    DateTime @default(now())
+  event        Event    @relation(fields: [eventId], references: [id], onDelete: Cascade)
+
+  @@index([eventId])
+}
+
+// Event registration forms
+enum FormFieldType {
+  yes_no
+  text
+  date
+  numeric
+  statement
+  paragraph
+}
+
+model EventForm {
+  id         String           @id @default(uuid())
+  eventId    String           @unique
+  isRequired Boolean          @default(false)
+  createdAt  DateTime         @default(now())
+  updatedAt  DateTime         @updatedAt
+  event      Event            @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  fields     EventFormField[]
+}
+
+model EventFormField {
+  id         String        @id @default(uuid())
+  formId     String
+  type       FormFieldType
+  label      String
+  isRequired Boolean       @default(false)
+  order      Int           @default(0)
+  helpText   String?
+  options    Json?
+  form       EventForm     @relation(fields: [formId], references: [id], onDelete: Cascade)
+  answers    FormAnswer[]
+
+  @@index([formId])
+}
+
+model FormResponse {
+  id             String       @id @default(uuid())
+  registrationId String
+  createdAt      DateTime     @default(now())
+  registration   Registration @relation(fields: [registrationId], references: [id], onDelete: Cascade)
+  answers        FormAnswer[]
+
+  @@index([registrationId])
+}
+
+model FormAnswer {
+  id         String         @id @default(uuid())
+  responseId String
+  fieldId    String
+  value      String
+  response   FormResponse   @relation(fields: [responseId], references: [id], onDelete: Cascade)
+  field      EventFormField @relation(fields: [fieldId], references: [id], onDelete: Cascade)
+
+  @@index([responseId])
+  @@index([fieldId])
+}
+
+// Draft storage for in-progress attendee forms
+model FormDraft {
+  id             String       @id @default(uuid())
+  registrationId String
+  userId         String
+  data           Json
+  createdAt      DateTime     @default(now())
+  updatedAt      DateTime     @updatedAt
+  registration   Registration @relation(fields: [registrationId], references: [id], onDelete: Cascade)
+  user           User         @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([registrationId, userId])
+}
+
+// Stores all webhook events from Yoco. If a Payment is created (registration or donation),
+// the record is marked reconciled and linked via paymentId. Otherwise, remains unreconciled.
+model YocoTransaction {
+  id          String    @id @default(uuid())
+  externalId  String    @unique // Yoco payment/event id
+  amount      Int?
+  currency    String?
+  createdDate DateTime?
+  checkoutId  String?
+  methodType  String? // paymentMethodDetails.type (e.g., card)
+  reconciled  Boolean   @default(false)
+  ignored     Boolean   @default(false)
+  paymentId   String?
+  payment     Payment?  @relation(fields: [paymentId], references: [id], onDelete: SetNull)
+  raw         Json?
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+
+  @@index([paymentId])
+}
+
+model Section {
+  id        String   @id @default(uuid())
+  eventId   String
+  name      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  event          Event           @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  allowedOptions SectionOption[]
+
+  @@index([eventId])
+}
+
+model SectionOption {
+  id            String @id @default(uuid())
+  sectionId     String
+  eventOptionId String
+
+  section     Section     @relation(fields: [sectionId], references: [id], onDelete: Cascade)
+  eventOption EventOption @relation(fields: [eventOptionId], references: [id], onDelete: Cascade)
+
+  @@unique([sectionId, eventOptionId])
+}
+
+model AppSetting {
+  key       String   @id
+  value     String
+  updatedAt DateTime @updatedAt
+}
+
+model EventCost {
+  id             String        @id @default(uuid())
+  eventId        String
+  event          Event         @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  eventOptionId  String?
+  eventOption    EventOption?  @relation(fields: [eventOptionId], references: [id], onDelete: Cascade)
+  label          String
+  costType       EventCostType
+  amount         Float
+  paidFromMethod String? // 'cash' | 'card' | 'eft' | 'other' | null — null = not paid from event takings
+  notes          String?
+  createdAt      DateTime      @default(now())
+  updatedAt      DateTime      @updatedAt
+
+  @@index([eventId])
+  @@index([eventOptionId])
+}
+
+// Append-only audit trail: one row per close / quick-close / reopen. Never updated or deleted.
+model EventCashup {
+  id                        String            @id @default(uuid())
+  eventId                   String
+  event                     Event             @relation(fields: [eventId], references: [id], onDelete: Cascade)
+  action                    CashupAction
+  unallocatedDonationsTotal Float             @default(0)
+  totalCosts                Float             @default(0)
+  totalExpectedRevenue      Float             @default(0)
+  totalActualRevenue        Float?
+  notes                     String?
+  performedById             String?
+  performedBy               User?             @relation(fields: [performedById], references: [id], onDelete: SetNull)
+  createdAt                 DateTime          @default(now())
+  lines                     EventCashupLine[]
+
+  @@index([eventId, createdAt])
+}
+
+model EventCashupLine {
+  id             String                    @id @default(uuid())
+  cashupId       String
+  cashup         EventCashup               @relation(fields: [cashupId], references: [id], onDelete: Cascade)
+  method         String
+  expectedAmount Float                     @default(0)
+  actualAmount   Float?
+  variance       Float?
+  notes          String?
+  denominations  EventCashupDenomination[]
+
+  @@index([cashupId])
+}
+
+model EventCashupDenomination {
+  id     String          @id @default(uuid())
+  lineId String
+  line   EventCashupLine @relation(fields: [lineId], references: [id], onDelete: Cascade)
+  value  Float
+  count  Int
+
+  @@index([lineId])
+}
+
+// ─── Church Website Models (disabled — kept for reference, not active Prisma models) ──
+//
+// model Ministry {
+//   id          String             @id @default(uuid())
+//   slug        String             @unique
+//   title       String
+//   description String?
+//   image       String?
+//   isActive    Boolean            @default(true)
+//   order       Int                @default(0)
+//   leaderId    String?
+//   leader      TeamMember?        @relation(fields: [leaderId], references: [id], onDelete: SetNull)
+//   interests   MinistryInterest[]
+//   createdAt   DateTime           @default(now())
+//   updatedAt   DateTime           @updatedAt
+//
+//   @@index([isActive, order])
+//   @@index([leaderId])
+// }
+//
+// model TeamMember {
+//   id         String      @id @default(uuid())
+//   name       String
+//   title      String
+//   bio        String?
+//   photo      String?
+//   order      Int         @default(0)
+//   isActive   Boolean     @default(true)
+//   email      String?
+//   createdAt  DateTime    @default(now())
+//   updatedAt  DateTime    @updatedAt
+//   ministries Ministry[]
+//
+//   @@index([isActive, order])
+// }
+//
+// model ContentBlock {
+//   id        String   @id @default(uuid())
+//   page      String
+//   key       String
+//   value     String
+//   type      String   @default("text")
+//   updatedAt DateTime @updatedAt
+//
+//   @@unique([page, key])
+//   @@index([page])
+// }
+//
+// model ChurchDocument {
+//   id          String   @id @default(uuid())
+//   title       String
+//   description String?
+//   fileUrl     String
+//   category    String   @default("other")
+//   isPublic    Boolean  @default(true)
+//   uploadedAt  DateTime @default(now())
+//   updatedAt   DateTime @updatedAt
+// }
+//
+// model FellowshipGroup {
+//   id          String        @id @default(uuid())
+//   name        String
+//   description String?
+//   leader      String?
+//   isActive    Boolean       @default(true)
+//   order       Int           @default(0)
+//   members     ChurchMember[]
+//   createdAt   DateTime      @default(now())
+//   updatedAt   DateTime      @updatedAt
+//
+//   @@index([isActive, order])
+// }
+//
+// model ChurchMember {
+//   id                       String             @id @default(uuid())
+//   status                   String             @default("pending")
+//   mainName                 String
+//   mainEmail                String
+//   mainPhone                String?
+//   mainBirthday             DateTime?
+//   mainOccupation           String?
+//   mainEmploymentStatus     String?
+//   mainDateOfSalvation      DateTime?
+//   mainDateOfWaterBaptism   DateTime?
+//   mainHolySpiritBaptism    Boolean            @default(false)
+//   spouseName               String?
+//   spouseEmail              String?
+//   spousePhone              String?
+//   spouseBirthday           DateTime?
+//   spouseOccupation         String?
+//   spouseEmploymentStatus   String?
+//   spouseDateOfSalvation    DateTime?
+//   spouseDateOfWaterBaptism DateTime?
+//   spouseHolySpiritBaptism  Boolean?
+//   homeAddress              String?
+//   inFellowshipGroup        Boolean            @default(false)
+//   fellowshipGroupId        String?
+//   fellowshipGroup          FellowshipGroup?   @relation(fields: [fellowshipGroupId], references: [id], onDelete: SetNull)
+//   membershipConfirmed      Boolean            @default(false)
+//   notes                    String?
+//   appliedAt                DateTime           @default(now())
+//   approvedAt               DateTime?
+//   createdAt                DateTime           @default(now())
+//   updatedAt                DateTime           @updatedAt
+//   children                 ChurchChild[]
+//   ministryInterests        MinistryInterest[]
+//   donations                Donation[]
+//
+//   @@index([status])
+//   @@index([mainEmail])
+//   @@index([fellowshipGroupId])
+// }
+//
+// model ChurchChild {
+//   id        String       @id @default(uuid())
+//   memberId  String
+//   name      String
+//   birthday  DateTime?
+//   member    ChurchMember @relation(fields: [memberId], references: [id], onDelete: Cascade)
+//
+//   @@index([memberId])
+// }
+//
+// model MinistryInterest {
+//   id         String       @id @default(uuid())
+//   memberId   String
+//   ministryId String
+//   forSpouse  Boolean      @default(false)
+//   member     ChurchMember @relation(fields: [memberId], references: [id], onDelete: Cascade)
+//   ministry   Ministry     @relation(fields: [ministryId], references: [id], onDelete: Cascade)
+//
+//   @@unique([memberId, ministryId, forSpouse])
+//   @@index([memberId])
+//   @@index([ministryId])
+// }
+//
+// model Donation {
+//   id              String        @id @default(uuid())
+//   donorName       String?
+//   donorEmail      String?
+//   donorPhone      String?
+//   amount          Float
+//   method          String
+//   reference       String?
+//   note            String?
+//   isAnonymous     Boolean       @default(false)
+//   linkedMemberId  String?
+//   linkedMember    ChurchMember? @relation(fields: [linkedMemberId], references: [id], onDelete: SetNull)
+//   createdAt       DateTime      @default(now())
+//   updatedAt       DateTime      @updatedAt
+//
+//   @@index([linkedMemberId])
+//   @@index([createdAt])
+//   @@index([method])
+// }
diff --git a/backend/scripts/migrate-env-to-db.js b/backend/scripts/migrate-env-to-db.js
new file mode 100644
index 0000000..bb6d450
--- /dev/null
+++ b/backend/scripts/migrate-env-to-db.js
@@ -0,0 +1,197 @@
+/**
+ * migrate-env-to-db.js
+ *
+ * Reads settings from environment variables (.env) and writes them into the
+ * AppSetting table — only for keys that are NOT already set in the database.
+ *
+ * Safe to run on a live site: it never overwrites an existing DB value.
+ * Sensitive keys (smtp_user, smtp_pass) are AES-256-GCM encrypted before storage.
+ *
+ * Usage:
+ *   cd backend
+ *   node scripts/migrate-env-to-db.js
+ *
+ * Add --dry-run to preview what would be written without touching the DB.
+ * Add --force   to overwrite existing DB values (use with caution on live data).
+ */
+
+'use strict';
+
+const path   = require('path');
+const fs     = require('fs');
+const dotenv = require('dotenv');
+
+// Load .env from the backend root
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
+
+const { PrismaClient } = require('@prisma/client');
+const crypto = require('crypto');
+
+const DRY_RUN = process.argv.includes('--dry-run');
+const FORCE   = process.argv.includes('--force');
+
+// ─── Encryption (mirrors backend/src/utils/encryption.js) ────────────────────
+
+const SENTINEL = 'enc:';
+
+const ENCRYPTION_KEY = (() => {
+  const secret = process.env.JWT_SECRET || 'default-unsafe-key-CHANGE-IN-PRODUCTION';
+  if (!process.env.JWT_SECRET) {
+    console.warn('[warn] JWT_SECRET is not set — encrypted values will use an insecure fallback key.');
+  }
+  return crypto.scryptSync(secret, 'hope-events-settings-aes256gcm-v1', 32);
+})();
+
+function encrypt(plaintext) {
+  if (!plaintext) return plaintext;
+  if (plaintext.startsWith(SENTINEL)) return plaintext;
+  const iv      = crypto.randomBytes(12);
+  const cipher  = crypto.createCipheriv('aes-256-gcm', ENCRYPTION_KEY, iv);
+  const enc     = Buffer.concat([cipher.update(plaintext, 'utf8'), cipher.final()]);
+  const tag     = cipher.getAuthTag();
+  return `${SENTINEL}${iv.toString('hex')}:${tag.toString('hex')}:${enc.toString('hex')}`;
+}
+
+const ENCRYPTED_KEYS = new Set(['smtp_user', 'smtp_pass']);
+
+// ─── Mapping: env var(s) → DB key ────────────────────────────────────────────
+// Each entry: { key: DB key, envVars: [...candidates in priority order], encrypt?: bool }
+// The first non-empty env var found wins.
+
+const MAPPINGS = [
+  // Organisation
+  { key: 'org_name',               envVars: ['ORG_NAME']                                          },
+  { key: 'org_tagline',            envVars: ['ORG_TAGLINE']                                       },
+  { key: 'org_email',              envVars: ['EMAIL_FROM', 'EMAIL_USER', 'SMTP_FROM', 'SMTP_USER'] },
+
+  // Branding
+  { key: 'accent_color',           envVars: ['EMAIL_HEADER_COLOR', 'BRAND_COLOR']                 },
+
+  // Notifications
+  { key: 'reg_notification_emails',envVars: ['REGISTRATIONS_EMAIL']                               },
+
+  // SMTP
+  { key: 'smtp_host',              envVars: ['SMTP_HOST',   'EMAIL_HOST']                         },
+  { key: 'smtp_port',              envVars: ['SMTP_PORT',   'EMAIL_PORT']                         },
+  { key: 'smtp_secure',            envVars: ['SMTP_SECURE', 'EMAIL_SECURE']                       },
+  { key: 'smtp_from',              envVars: ['MAIL_FROM',   'EMAIL_FROM']                         },
+  { key: 'smtp_user',              envVars: ['SMTP_USER',   'EMAIL_USER'],  encrypt: true         },
+  { key: 'smtp_pass',              envVars: ['SMTP_PASS',   'EMAIL_PASS'],  encrypt: true         },
+
+  // App URLs (used in email templates)
+  { key: 'app_base_url',           envVars: ['FRONTEND_URL', 'APP_BASE_URL']                      },
+];
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  const prisma = new PrismaClient();
+
+  console.log(`\n${'─'.repeat(60)}`);
+  console.log('  Hope Events — .env → DB settings migration');
+  if (DRY_RUN) console.log('  MODE: DRY RUN (no changes will be made)');
+  if (FORCE)   console.log('  MODE: FORCE (will overwrite existing DB values)');
+  console.log(`${'─'.repeat(60)}\n`);
+
+  try {
+    // Fetch all existing DB settings once
+    const existing = await prisma.appSetting.findMany();
+    const dbMap = new Map(existing.map(r => [r.key, r.value]));
+
+    console.log(`Found ${dbMap.size} existing setting(s) in the database.\n`);
+
+    const toWrite   = [];
+    const skipped   = [];
+    const noEnvVal  = [];
+
+    for (const { key, envVars, encrypt: shouldEncrypt } of MAPPINGS) {
+      // Find first non-empty env var value
+      let rawValue = '';
+      let sourceVar = '';
+      for (const v of envVars) {
+        if (process.env[v] && process.env[v].trim()) {
+          rawValue  = process.env[v].trim();
+          sourceVar = v;
+          break;
+        }
+      }
+
+      if (!rawValue) {
+        noEnvVal.push({ key, envVars });
+        continue;
+      }
+
+      const dbHasValue = dbMap.has(key) && dbMap.get(key) !== '';
+
+      if (dbHasValue && !FORCE) {
+        skipped.push({ key, reason: 'already set in DB (use --force to overwrite)' });
+        continue;
+      }
+
+      const storedValue = (shouldEncrypt || ENCRYPTED_KEYS.has(key))
+        ? encrypt(rawValue)
+        : rawValue;
+
+      toWrite.push({ key, rawValue, storedValue, sourceVar, encrypted: !!(shouldEncrypt || ENCRYPTED_KEYS.has(key)), overwriting: dbHasValue });
+    }
+
+    // ── Report what will be written ───────────────────────────────────────
+    if (toWrite.length === 0) {
+      console.log('Nothing to write.\n');
+    } else {
+      console.log(`Will write ${toWrite.length} setting(s):\n`);
+      for (const { key, rawValue, sourceVar, encrypted, overwriting } of toWrite) {
+        const display  = encrypted ? '(encrypted)' : `"${rawValue}"`;
+        const flag     = overwriting ? ' [OVERWRITING]' : '';
+        console.log(`  ✓ ${key.padEnd(28)} ← ${sourceVar} = ${display}${flag}`);
+      }
+      console.log('');
+    }
+
+    if (skipped.length > 0) {
+      console.log(`Skipped ${skipped.length} setting(s) (already in DB):\n`);
+      for (const { key, reason } of skipped) {
+        console.log(`  · ${key.padEnd(28)}  ${reason}`);
+      }
+      console.log('');
+    }
+
+    if (noEnvVal.length > 0) {
+      console.log(`No env value found for ${noEnvVal.length} setting(s) (nothing to migrate):\n`);
+      for (const { key, envVars: vars } of noEnvVal) {
+        console.log(`  - ${key.padEnd(28)}  checked: ${vars.join(', ')}`);
+      }
+      console.log('');
+    }
+
+    // ── Write ─────────────────────────────────────────────────────────────
+    if (DRY_RUN) {
+      console.log('Dry run complete — no changes made.\n');
+      return;
+    }
+
+    if (toWrite.length === 0) {
+      console.log('Nothing to do — all settings are already configured in the DB.\n');
+      return;
+    }
+
+    const ops = toWrite.map(({ key, storedValue }) =>
+      prisma.appSetting.upsert({
+        where:  { key },
+        update: { value: storedValue },
+        create: { key,  value: storedValue },
+      })
+    );
+
+    await prisma.$transaction(ops);
+
+    console.log(`\n✓ Successfully wrote ${toWrite.length} setting(s) to the database.\n`);
+  } finally {
+    await prisma.$disconnect();
+  }
+}
+
+main().catch(err => {
+  console.error('\n[error]', err.message || err);
+  process.exit(1);
+});
\ No newline at end of file
diff --git a/backend/scripts/seed-users.js b/backend/scripts/seed-users.js
new file mode 100644
index 0000000..e490f67
--- /dev/null
+++ b/backend/scripts/seed-users.js
@@ -0,0 +1,134 @@
+/**
+ * Seed script: inserts 75 demo users (mix of roles, ~25 inactive)
+ * Run: node scripts/seed-users.js
+ */
+
+const { PrismaClient } = require('@prisma/client');
+const bcrypt = require('bcryptjs');
+
+const prisma = new PrismaClient();
+
+const firstNames = [
+  'Liam', 'Olivia', 'Noah', 'Emma', 'James', 'Ava', 'Elijah', 'Sophia',
+  'Lucas', 'Isabella', 'Mason', 'Mia', 'Logan', 'Charlotte', 'Ethan',
+  'Amelia', 'Aiden', 'Harper', 'Jackson', 'Evelyn', 'Thabo', 'Zanele',
+  'Sipho', 'Nomsa', 'Lebo', 'Thandeka', 'Kagiso', 'Palesa', 'Bongani',
+  'Ayanda', 'Pieter', 'Anri', 'Francois', 'Elizma', 'Hendrik', 'Marius',
+  'Chloé', 'Dylan', 'Amber', 'Caleb', 'Zoe', 'Hunter', 'Lily', 'Owen',
+  'Grace', 'Ryan', 'Chloe', 'Nathan', 'Stella', 'Connor', 'Hazel',
+  'Miles', 'Violet', 'Eli', 'Aurora', 'Isaiah', 'Luna', 'Nolan',
+  'Scarlett', 'Wyatt', 'Penelope', 'Sebastian', 'Layla', 'Asher',
+  'Riley', 'Oliver', 'Zoey', 'Ezra', 'Nora', 'Micah', 'Hannah',
+  'Jonah', 'Leah', 'Aaron', 'Aubrey', 'Charles',
+];
+
+const lastNames = [
+  'Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller',
+  'Davis', 'Wilson', 'Moore', 'Taylor', 'Anderson', 'Thomas', 'Jackson',
+  'White', 'Harris', 'Martin', 'Thompson', 'Robinson', 'Lewis',
+  'Dlamini', 'Nkosi', 'Mokoena', 'Ndlovu', 'Mthembu', 'Zulu', 'Nxumalo',
+  'du Plessis', 'van der Berg', 'Botha', 'Steyn', 'Fourie', 'Pretorius',
+  'Venter', 'Coetzee', 'van Niekerk', 'Lombard', 'Janse van Rensburg',
+  'Walker', 'Hall', 'Allen', 'Young', 'Hernandez', 'King', 'Wright',
+  'Scott', 'Green', 'Baker', 'Adams', 'Nelson', 'Carter', 'Mitchell',
+  'Perez', 'Roberts', 'Turner', 'Phillips', 'Campbell', 'Parker', 'Evans',
+  'Edwards', 'Collins', 'Stewart', 'Morris', 'Reed', 'Cook', 'Morgan',
+];
+
+function pick(arr) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function randomPhone() {
+  // SA mobile format: 07x/08x xxxxxxx
+  const prefixes = ['071', '072', '073', '074', '076', '078', '079', '081', '082', '083', '084'];
+  return `${pick(prefixes)}${String(Math.floor(Math.random() * 9000000) + 1000000)}`;
+}
+
+async function main() {
+  const passwordHash = await bcrypt.hash('Demo@1234', 10);
+
+  // Role distribution: ~55 user, ~15 staff, ~5 supervisor
+  const rolePool = [
+    ...Array(55).fill('user'),
+    ...Array(15).fill('staff'),
+    ...Array(5).fill('supervisor'),
+  ];
+
+  const notifPool = ['email', 'email', 'email', 'whatsapp', 'both'];
+
+  const usedEmails = new Set();
+  const usedPhones = new Set();
+  const users = [];
+
+  // Build 75 user records
+  while (users.length < 75) {
+    const first = pick(firstNames);
+    const last = pick(lastNames);
+    const tag = Math.floor(Math.random() * 999) + 1;
+    const email = `${first.toLowerCase().replace(/ /g, '')}.${last.toLowerCase().replace(/ /g, '').replace(/'/g, '')}${tag}@demo.church`;
+
+    if (usedEmails.has(email)) continue;
+    usedEmails.add(email);
+
+    // ~60% of users have a phone number
+    let phone = null;
+    if (Math.random() < 0.6) {
+      let attempt = randomPhone();
+      let tries = 0;
+      while (usedPhones.has(attempt) && tries < 20) {
+        attempt = randomPhone();
+        tries++;
+      }
+      if (!usedPhones.has(attempt)) {
+        usedPhones.add(attempt);
+        phone = attempt;
+      }
+    }
+
+    users.push({
+      name: `${first} ${last}`,
+      email,
+      password: passwordHash,
+      role: pick(rolePool),
+      isActive: true, // will override 25 below
+      phoneNumber: phone,
+      notificationPreference: pick(notifPool),
+    });
+  }
+
+  // Mark exactly 25 as inactive (spread across the list)
+  const inactiveIndexes = new Set();
+  while (inactiveIndexes.size < 25) {
+    inactiveIndexes.add(Math.floor(Math.random() * 75));
+  }
+  inactiveIndexes.forEach(i => { users[i].isActive = false; });
+
+  console.log(`Inserting ${users.length} users…`);
+  console.log(`  Active: ${users.filter(u => u.isActive).length}`);
+  console.log(`  Inactive: ${users.filter(u => !u.isActive).length}`);
+  console.log(`  Roles: user=${users.filter(u => u.role === 'user').length}, staff=${users.filter(u => u.role === 'staff').length}, supervisor=${users.filter(u => u.role === 'supervisor').length}`);
+
+  let created = 0;
+  let skipped = 0;
+
+  for (const user of users) {
+    try {
+      await prisma.user.create({ data: user });
+      created++;
+    } catch (err) {
+      if (err.code === 'P2002') {
+        skipped++;
+      } else {
+        throw err;
+      }
+    }
+  }
+
+  console.log(`Done. Created: ${created}, Skipped (duplicate): ${skipped}`);
+  console.log('Default password for all demo users: Demo@1234');
+}
+
+main()
+  .catch(err => { console.error(err); process.exit(1); })
+  .finally(() => prisma.$disconnect());
\ No newline at end of file
diff --git a/backend/src/config/auth.js b/backend/src/config/auth.js
new file mode 100644
index 0000000..401e33c
--- /dev/null
+++ b/backend/src/config/auth.js
@@ -0,0 +1,25 @@
+const jwt = require('jsonwebtoken');
+const bcrypt = require('bcryptjs');
+
+const generateToken = (userId, role, tokenVersion = 0) => {
+  return jwt.sign(
+    { id: userId, role, tokenVersion },
+    process.env.JWT_SECRET,
+    { expiresIn: '30d' }
+  );
+};
+
+const hashPassword = async (password) => {
+  const salt = await bcrypt.genSalt(10);
+  return await bcrypt.hash(password, salt);
+};
+
+const comparePassword = async (enteredPassword, storedPassword) => {
+  return await bcrypt.compare(enteredPassword, storedPassword);
+};
+
+module.exports = {
+  generateToken,
+  hashPassword,
+  comparePassword,
+};
\ No newline at end of file
diff --git a/backend/src/config/db.js b/backend/src/config/db.js
new file mode 100644
index 0000000..bd664f0
--- /dev/null
+++ b/backend/src/config/db.js
@@ -0,0 +1,5 @@
+const { PrismaClient } = require('@prisma/client');
+
+const prisma = new PrismaClient();
+
+module.exports = prisma;
\ No newline at end of file
diff --git a/backend/src/controllers/automationController.js b/backend/src/controllers/automationController.js
new file mode 100644
index 0000000..2c74e8d
--- /dev/null
+++ b/backend/src/controllers/automationController.js
@@ -0,0 +1,52 @@
+const { addJob } = require('../utils/scheduledEmails');
+const { v4: uuidv4 } = require('uuid');
+
+// @desc    Schedule multiple automation emails for an event
+// @route   POST /api/automations/schedule
+// @access  Private/Supervisor or Admin
+async function scheduleAutomations(req, res) {
+  try {
+    const { eventId, jobs } = req.body || {};
+    if (!eventId || typeof eventId !== 'string') {
+      return res.status(400).json({ message: 'eventId is required' });
+    }
+    if (!Array.isArray(jobs) || jobs.length === 0) {
+      return res.status(400).json({ message: 'jobs must be a non-empty array' });
+    }
+
+    const created = [];
+    for (const j of jobs) {
+      if (!j || !j.scheduledAt || !j.subject || !(j.html || j.text)) continue;
+      const when = new Date(j.scheduledAt);
+      if (isNaN(when.getTime())) continue;
+      const payload = {
+        subject: String(j.subject),
+        html: j.html ? String(j.html) : undefined,
+        text: (!j.html && j.text) ? String(j.text) : (j.text ? String(j.text) : undefined),
+        template: 'custom',
+        filter: { status: undefined, attendeeIds: undefined },
+      };
+      if (j.promoEventId && typeof j.promoEventId === 'string') {
+        payload.promoEventId = j.promoEventId;
+      }
+      const rec = addJob({
+        id: uuidv4(),
+        eventId,
+        createdById: req.user?.id || null,
+        scheduledAt: when.toISOString(),
+        payload,
+      });
+      created.push(rec);
+    }
+
+    if (created.length === 0) {
+      return res.status(400).json({ message: 'No valid jobs to schedule' });
+    }
+
+    return res.status(201).json({ message: `Scheduled ${created.length} automation job(s)`, jobs: created });
+  } catch (error) {
+    return res.status(400).json({ message: error?.message || String(error) });
+  }
+}
+
+module.exports = { scheduleAutomations };
diff --git a/backend/src/controllers/bannerController.js b/backend/src/controllers/bannerController.js
new file mode 100644
index 0000000..b1f5ead
--- /dev/null
+++ b/backend/src/controllers/bannerController.js
@@ -0,0 +1,44 @@
+const fs = require('fs');
+const path = require('path');
+
+const BANNER_FILE = path.join(__dirname, '../../data/banner.json');
+
+function readBanner() {
+  try {
+    const raw = fs.readFileSync(BANNER_FILE, 'utf8');
+    return JSON.parse(raw);
+  } catch {
+    return { message: '', type: 'info', liveFrom: null, liveTill: null };
+  }
+}
+
+function writeBanner(data) {
+  fs.writeFileSync(BANNER_FILE, JSON.stringify(data, null, 2), 'utf8');
+}
+
+// @desc  Get the current banner
+// @route GET /api/banner
+// @access Public
+const getBanner = (req, res) => {
+  res.json(readBanner());
+};
+
+// @desc  Set the banner
+// @route POST /api/banner
+// @access Supervisor / Admin
+const setBanner = (req, res) => {
+  const { message, type, liveFrom, liveTill } = req.body;
+
+  const allowed = ['info', 'warning', 'success', 'danger'];
+  const banner = {
+    message: typeof message === 'string' ? message.trim() : '',
+    type: allowed.includes(type) ? type : 'info',
+    liveFrom: liveFrom || null,
+    liveTill: liveTill || null,
+  };
+
+  writeBanner(banner);
+  res.json(banner);
+};
+
+module.exports = { getBanner, setBanner };
\ No newline at end of file
diff --git a/backend/src/controllers/broadcastController.js b/backend/src/controllers/broadcastController.js
new file mode 100644
index 0000000..c01f621
--- /dev/null
+++ b/backend/src/controllers/broadcastController.js
@@ -0,0 +1,215 @@
+const prisma = require('../config/db');
+
+// Escape user-controlled strings before inserting them into HTML
+function escapeHtml(str) {
+  return String(str || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+}
+
+// Utilities shared with attendees emailing
+function fmtDate(d) {
+  try { return new Date(d).toLocaleString(); } catch { return String(d); }
+}
+
+function getFrontendBaseUrl() {
+  const base = process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001';
+  return String(base).replace(/\/$/, '');
+}
+
+function buildEventContext(event) {
+  if (!event) return { eventTitle: '', eventStart: '', eventLink: '', eventLinkHtml: '' };
+  const eventTitle = event.title || '';
+  const eventStart = event.startDate ? fmtDate(event.startDate) : '';
+  const eventLink = `${getFrontendBaseUrl()}/events/${encodeURIComponent(event.id)}`;
+  const eventLinkHtml = `<a href="${eventLink}">${eventLink}</a>`;
+  return { eventTitle, eventStart, eventLink, eventLinkHtml };
+}
+
+function replacePlaceholders(str, ctx) {
+  if (!str) return str;
+  return String(str)
+    .replace(/\{\{\s*name\s*\}\}/g, ctx.name || '')
+    .replace(/\{\{\s*event\.title\s*\}\}/g, ctx.eventTitle || '')
+    .replace(/\{\{\s*event\.start\s*\}\}/g, ctx.eventStart || '')
+    .replace(/\{\{\s*event\.(link|url)\s*\}\}/g, (ctx.eventLinkHtml || ctx.eventLink || ''));
+}
+
+function parseFreeformEmails(lines) {
+  // Supports formats:
+  //  - email@example.com
+  //  - Name <email@example.com>
+  //  - "Name" <email@example.com>
+  const recipients = [];
+  const input = Array.isArray(lines) ? lines : String(lines || '').split(/\r?\n/);
+  for (const raw of input) {
+    const s = String(raw || '').trim();
+    if (!s) continue;
+    let name = '';
+    let email = '';
+    const m = s.match(/^(.*?)<\s*([^>\s]+@[^>\s]+)\s*>\s*$/);
+    if (m) {
+      name = m[1].trim().replace(/^"|"$/g, '').trim();
+      email = m[2].trim();
+    } else {
+      // If it just looks like an email, accept it
+      const em = s.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/) ? s : '';
+      if (em) email = em; else continue;
+    }
+    recipients.push({ email, name });
+  }
+  return recipients;
+}
+
+// @desc    Preview broadcast recipients and sample
+// @route   POST /api/broadcasts/preview
+// @access  Private/Supervisor or Admin
+const previewBroadcast = async (req, res) => {
+  try {
+    const { userIds, emails, eventId } = req.body || {};
+
+    // Resolve users
+    const ids = Array.isArray(userIds) ? userIds.filter(x => typeof x === 'string' && x) : [];
+    let users = [];
+    if (ids.length) {
+      users = await prisma.user.findMany({ where: { id: { in: ids } }, select: { id: true, name: true, email: true } });
+    }
+
+    // Parse freeform emails
+    const extra = parseFreeformEmails(emails);
+
+    // Merge and de-duplicate by email
+    const map = new Map();
+    for (const u of users) {
+      const email = String(u.email || '').trim();
+      if (!email) continue;
+      if (!map.has(email)) map.set(email, { email, name: u.name || '' });
+    }
+    for (const r of extra) {
+      const email = String(r.email || '').trim();
+      if (!email) continue;
+      if (!map.has(email)) map.set(email, { email, name: r.name || '' });
+    }
+    const recipients = Array.from(map.values());
+
+    // Optionally resolve event info for link/title placeholder
+    let event = null;
+    if (eventId && typeof eventId === 'string') {
+      event = await prisma.event.findUnique({ where: { id: eventId } });
+    }
+    const eventCtx = buildEventContext(event);
+
+    return res.json({ matched: recipients.length, recipients: recipients.slice(0, 20), event: event ? { id: event.id, title: event.title } : null, placeholders: ['{{name}}','{{event.title}}','{{event.start}}','{{event.link}}'] });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Send broadcast now
+// @route   POST /api/broadcasts/send
+// @access  Private/Supervisor or Admin
+const sendBroadcast = async (req, res) => {
+  try {
+    const { subject, html, text, userIds, emails, eventId } = req.body || {};
+    if (!subject || !(html || text)) {
+      return res.status(400).json({ message: 'Subject and message (html or text) are required' });
+    }
+
+    // Resolve recipients similar to preview
+    const ids = Array.isArray(userIds) ? userIds.filter(x => typeof x === 'string' && x) : [];
+    let users = [];
+    if (ids.length) {
+      users = await prisma.user.findMany({ where: { id: { in: ids } }, select: { id: true, name: true, email: true } });
+    }
+    const extra = parseFreeformEmails(emails);
+
+    const map = new Map();
+    for (const u of users) {
+      const email = String(u.email || '').trim();
+      if (!email) continue;
+      if (!map.has(email)) map.set(email, { email, name: u.name || '' });
+    }
+    for (const r of extra) {
+      const email = String(r.email || '').trim();
+      if (!email) continue;
+      if (!map.has(email)) map.set(email, { email, name: r.name || '' });
+    }
+    const recipients = Array.from(map.values());
+    if (recipients.length === 0) {
+      return res.status(400).json({ message: 'No valid recipients' });
+    }
+
+    // Resolve event
+    let event = null;
+    if (eventId && typeof eventId === 'string') {
+      event = await prisma.event.findUnique({ where: { id: eventId } });
+    }
+    const eventCtx = buildEventContext(event);
+
+    const { sendMail } = require('../utils/email');
+
+    // Send all emails in parallel instead of sequentially — critical for large recipient lists
+    const results = await Promise.allSettled(recipients.map(async rcpt => {
+      const ctxBase = {
+        name: rcpt.name || '',
+        eventTitle: eventCtx.eventTitle,
+        eventStart: eventCtx.eventStart,
+        eventLink: eventCtx.eventLink,
+      };
+      const ctxForHtml = html ? {
+        name: escapeHtml(rcpt.name || ''),
+        eventTitle: escapeHtml(eventCtx.eventTitle),
+        eventStart: escapeHtml(eventCtx.eventStart),
+        eventLink: escapeHtml(eventCtx.eventLink),
+        eventLinkHtml: eventCtx.eventLinkHtml,
+      } : ctxBase;
+      const finalSubject = replacePlaceholders(subject, ctxBase);
+      const finalHtml = html ? replacePlaceholders(html, ctxForHtml) : undefined;
+      const finalText = (!html ? replacePlaceholders(text || '', ctxBase) : undefined);
+      await sendMail({ to: rcpt.email, subject: finalSubject, html: finalHtml, text: finalText });
+    }));
+
+    const sent = results.filter(r => r.status === 'fulfilled').length;
+    results.forEach((r, i) => {
+      if (r.status === 'rejected') {
+        try { console.warn('[broadcast] failed to send to', recipients[i]?.email, r.reason?.message || r.reason); } catch {}
+      }
+    });
+
+    return res.json({ matched: recipients.length, sent });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Schedule a broadcast
+// @route   POST /api/broadcasts/schedule
+// @access  Private/Supervisor or Admin
+const scheduleBroadcast = async (req, res) => {
+  try {
+    const { scheduledAt, subject, html, text, userIds, emails, eventId } = req.body || {};
+    if (!scheduledAt) return res.status(400).json({ message: 'scheduledAt is required' });
+    const when = new Date(scheduledAt);
+    if (isNaN(when.getTime())) return res.status(400).json({ message: 'scheduledAt must be a valid ISO date-time' });
+    if (!subject || !(html || text)) return res.status(400).json({ message: 'Subject and message (html or text) are required' });
+
+    const payload = { subject, html, text, userIds, emails, eventId };
+
+    const { addJob } = require('../utils/scheduledEmails');
+    const created = addJob({
+      broadcast: true,
+      scheduledAt: when.toISOString(),
+      createdById: req.user?.id || null,
+      payload,
+    });
+
+    return res.status(201).json({ message: 'Broadcast scheduled', job: created });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+module.exports = { previewBroadcast, sendBroadcast, scheduleBroadcast };
diff --git a/backend/src/controllers/cashupController.js b/backend/src/controllers/cashupController.js
new file mode 100644
index 0000000..48d8641
--- /dev/null
+++ b/backend/src/controllers/cashupController.js
@@ -0,0 +1,186 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const { ALL_METHODS, assertEventOpen, computeEventFinancials } = require('../utils/cashupUtils');
+
+// @desc    Cashup preview for an event: live expected/actual numbers, costs, donations-to-profit, and history
+// @route   GET /api/cashups/event/:eventId
+// @access  Private/Supervisor
+const getEventCashup = async (req, res) => {
+  try {
+    const financials = await computeEventFinancials(req.params.eventId);
+    res.json(financials);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Save in-progress reconciliation entries without closing the event
+// @route   PUT /api/cashups/event/:eventId/draft
+// @access  Private/Admin
+const saveEventCashupDraft = async (req, res) => {
+  try {
+    const { eventId } = req.params;
+    const { lines, notes } = req.body;
+
+    await assertEventOpen(eventId, res);
+
+    await prisma.event.update({
+      where: { id: eventId },
+      data: { cashupDraft: { lines: Array.isArray(lines) ? lines : [], notes: notes || null, savedAt: new Date().toISOString() } }
+    });
+
+    res.json({ message: 'Draft saved' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Close an event, optionally with a full per-method cashup
+// @route   POST /api/cashups/event/:eventId/close
+// @access  Private/Admin
+const closeEvent = async (req, res) => {
+  try {
+    const { eventId } = req.params;
+    const { lines, notes } = req.body;
+
+    await assertEventOpen(eventId, res);
+
+    const financials = await computeEventFinancials(eventId);
+    const isFullCashup = Array.isArray(lines) && lines.length > 0;
+
+    const cashupLines = isFullCashup
+      ? lines
+        .filter(l => l && ALL_METHODS.includes(l.method))
+        .map(l => {
+          const expected = financials.expectedCashByMethod[l.method] || 0;
+          const denominations = l.method === 'cash' && Array.isArray(l.denominations)
+            ? l.denominations
+              .map(d => ({ value: parseFloat(d.value), count: parseInt(d.count, 10) || 0 }))
+              .filter(d => d.value > 0 && d.count > 0)
+            : [];
+          const actual = denominations.length > 0
+            ? denominations.reduce((sum, d) => sum + d.value * d.count, 0)
+            : (l.actualAmount !== undefined && l.actualAmount !== null && l.actualAmount !== '' ? parseFloat(l.actualAmount) : null);
+          return {
+            id: uuidv4(),
+            method: l.method,
+            expectedAmount: expected,
+            actualAmount: actual,
+            variance: actual !== null ? actual - expected : null,
+            notes: l.notes || null,
+            denominations: denominations.length > 0 ? { create: denominations } : undefined
+          };
+        })
+      : [];
+
+    const totalActualRevenue = isFullCashup
+      ? cashupLines.reduce((sum, l) => sum + (l.actualAmount !== null ? l.actualAmount : 0), 0)
+      : null;
+    const totalExpectedRevenue = ALL_METHODS.reduce((sum, m) => sum + financials.expectedCashByMethod[m], 0);
+
+    const cashup = await prisma.eventCashup.create({
+      data: {
+        id: uuidv4(),
+        eventId,
+        action: isFullCashup ? 'closed' : 'quick_closed',
+        unallocatedDonationsTotal: financials.unallocatedDonationsTotal,
+        totalCosts: financials.totalCosts,
+        totalExpectedRevenue,
+        totalActualRevenue,
+        notes: notes || null,
+        performedById: req.user.id,
+        lines: { create: cashupLines }
+      },
+      include: { lines: { include: { denominations: true } }, performedBy: { select: { id: true, name: true, email: true } } }
+    });
+
+    await prisma.event.update({
+      where: { id: eventId },
+      data: { cashupStatus: 'closed', cashupDraft: null, closedAt: new Date(), closedById: req.user.id }
+    });
+
+    res.status(201).json(cashup);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Reopen a closed event (admin only)
+// @route   POST /api/cashups/event/:eventId/reopen
+// @access  Private/Admin
+const reopenEvent = async (req, res) => {
+  try {
+    const { eventId } = req.params;
+    const { notes } = req.body;
+
+    const event = await prisma.event.findUnique({ where: { id: eventId } });
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+    if (event.cashupStatus !== 'closed') {
+      res.status(400);
+      throw new Error('Event is not closed');
+    }
+
+    const auditRow = await prisma.eventCashup.create({
+      data: {
+        id: uuidv4(),
+        eventId,
+        action: 'reopened',
+        notes: notes || null,
+        performedById: req.user.id
+      },
+      include: { performedBy: { select: { id: true, name: true, email: true } } }
+    });
+
+    await prisma.event.update({
+      where: { id: eventId },
+      data: { cashupStatus: 'open', reopenedAt: new Date(), reopenedById: req.user.id }
+    });
+
+    res.status(201).json(auditRow);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Flat audit log of every close/quick-close/reopen, optionally filtered
+// @route   GET /api/cashups/audit
+// @access  Private/Supervisor
+const getCashupAudit = async (req, res) => {
+  try {
+    const { eventId, from, to } = req.query;
+
+    const where = {};
+    if (eventId) where.eventId = eventId;
+    if (from || to) {
+      where.createdAt = {};
+      if (from) where.createdAt.gte = new Date(from);
+      if (to) where.createdAt.lte = new Date(to);
+    }
+
+    const rows = await prisma.eventCashup.findMany({
+      where,
+      include: {
+        event: { select: { id: true, title: true } },
+        performedBy: { select: { id: true, name: true, email: true } },
+        lines: { include: { denominations: true } }
+      },
+      orderBy: { createdAt: 'desc' }
+    });
+
+    res.json(rows);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+module.exports = {
+  getEventCashup,
+  saveEventCashupDraft,
+  closeEvent,
+  reopenEvent,
+  getCashupAudit
+};
diff --git a/backend/src/controllers/costController.js b/backend/src/controllers/costController.js
new file mode 100644
index 0000000..2d0dd44
--- /dev/null
+++ b/backend/src/controllers/costController.js
@@ -0,0 +1,177 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const { assertEventOpen, ALL_METHODS } = require('../utils/cashupUtils');
+
+function normalizePaidFromMethod(value) {
+  if (value === undefined) return undefined;
+  if (value === null || value === '') return null;
+  if (!ALL_METHODS.includes(value)) {
+    throw new Error("paidFromMethod must be one of 'cash', 'card', 'eft', 'other', or null");
+  }
+  return value;
+}
+
+// @desc    List costs for an event
+// @route   GET /api/events/:eventId/costs
+// @access  Private/Supervisor
+const getEventCosts = async (req, res) => {
+  try {
+    const costs = await prisma.eventCost.findMany({
+      where: { eventId: req.params.eventId },
+      include: { eventOption: { select: { id: true, name: true } } },
+      orderBy: { createdAt: 'asc' }
+    });
+    res.json(costs);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Create a cost for an event
+// @route   POST /api/events/:eventId/costs
+// @access  Private/Supervisor
+const createEventCost = async (req, res) => {
+  try {
+    const { eventId } = req.params;
+    const { label, costType, amount, eventOptionId, notes, paidFromMethod } = req.body;
+
+    await assertEventOpen(eventId, res);
+
+    if (!label || !String(label).trim()) {
+      res.status(400);
+      throw new Error('Label is required');
+    }
+    if (costType !== 'once_off' && costType !== 'per_item') {
+      res.status(400);
+      throw new Error("costType must be 'once_off' or 'per_item'");
+    }
+    const amt = parseFloat(amount);
+    if (!(amt >= 0)) {
+      res.status(400);
+      throw new Error('Amount must be a non-negative number');
+    }
+    if (costType === 'per_item' && !eventOptionId) {
+      res.status(400);
+      throw new Error('eventOptionId is required for per-item costs');
+    }
+    if (costType === 'per_item') {
+      const option = await prisma.eventOption.findUnique({ where: { id: eventOptionId } });
+      if (!option || option.eventId !== eventId) {
+        res.status(404);
+        throw new Error('Ticket type not found for this event');
+      }
+    }
+
+    const cost = await prisma.eventCost.create({
+      data: {
+        id: uuidv4(),
+        eventId,
+        label: String(label).trim(),
+        costType,
+        amount: amt,
+        eventOptionId: costType === 'per_item' ? eventOptionId : null,
+        paidFromMethod: normalizePaidFromMethod(paidFromMethod) ?? null,
+        notes: notes || null
+      },
+      include: { eventOption: { select: { id: true, name: true } } }
+    });
+
+    res.status(201).json(cost);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Update a cost
+// @route   PUT /api/costs/:id
+// @access  Private/Supervisor
+const updateEventCost = async (req, res) => {
+  try {
+    const existing = await prisma.eventCost.findUnique({ where: { id: req.params.id } });
+    if (!existing) {
+      res.status(404);
+      throw new Error('Cost not found');
+    }
+
+    await assertEventOpen(existing.eventId, res);
+
+    const { label, costType, amount, eventOptionId, notes, paidFromMethod } = req.body;
+    const nextCostType = costType !== undefined ? costType : existing.costType;
+    if (nextCostType !== 'once_off' && nextCostType !== 'per_item') {
+      res.status(400);
+      throw new Error("costType must be 'once_off' or 'per_item'");
+    }
+
+    const nextEventOptionId = nextCostType === 'per_item'
+      ? (eventOptionId !== undefined ? eventOptionId : existing.eventOptionId)
+      : null;
+    if (nextCostType === 'per_item') {
+      if (!nextEventOptionId) {
+        res.status(400);
+        throw new Error('eventOptionId is required for per-item costs');
+      }
+      const option = await prisma.eventOption.findUnique({ where: { id: nextEventOptionId } });
+      if (!option || option.eventId !== existing.eventId) {
+        res.status(404);
+        throw new Error('Ticket type not found for this event');
+      }
+    }
+
+    let nextAmount = existing.amount;
+    if (amount !== undefined) {
+      const amt = parseFloat(amount);
+      if (!(amt >= 0)) {
+        res.status(400);
+        throw new Error('Amount must be a non-negative number');
+      }
+      nextAmount = amt;
+    }
+
+    const nextPaidFromMethod = normalizePaidFromMethod(paidFromMethod);
+
+    const cost = await prisma.eventCost.update({
+      where: { id: req.params.id },
+      data: {
+        label: label !== undefined ? String(label).trim() : existing.label,
+        costType: nextCostType,
+        amount: nextAmount,
+        eventOptionId: nextEventOptionId,
+        paidFromMethod: nextPaidFromMethod !== undefined ? nextPaidFromMethod : existing.paidFromMethod,
+        notes: notes !== undefined ? notes : existing.notes
+      },
+      include: { eventOption: { select: { id: true, name: true } } }
+    });
+
+    res.json(cost);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Delete a cost
+// @route   DELETE /api/costs/:id
+// @access  Private/Supervisor
+const deleteEventCost = async (req, res) => {
+  try {
+    const existing = await prisma.eventCost.findUnique({ where: { id: req.params.id } });
+    if (!existing) {
+      res.status(404);
+      throw new Error('Cost not found');
+    }
+
+    await assertEventOpen(existing.eventId, res);
+
+    await prisma.eventCost.delete({ where: { id: req.params.id } });
+    res.json({ message: 'Cost deleted' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+module.exports = {
+  getEventCosts,
+  createEventCost,
+  updateEventCost,
+  deleteEventCost
+};
diff --git a/backend/src/controllers/eventController.js b/backend/src/controllers/eventController.js
new file mode 100644
index 0000000..b6ed3ce
--- /dev/null
+++ b/backend/src/controllers/eventController.js
@@ -0,0 +1,1691 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const { assertEventOpen } = require('../utils/cashupUtils');
+
+// Helper to convert stored picture path/URL to an absolute, externally reachable URL based on the incoming request
+function toAbsoluteUrl(req, url) {
+  if (!url) return url;
+  try {
+    const raw = String(url).trim();
+    if (!raw) return null;
+    // If already absolute
+    if (raw.startsWith('http://') || raw.startsWith('https://')) {
+      const u = new URL(raw);
+      // Rewrite localhost to the actual request host
+      if (['localhost', '127.0.0.1', '::1'].includes(u.hostname)) {
+        const origin = `${req.protocol}://${req.get('host')}`;
+        const base = new URL(origin);
+        u.protocol = base.protocol;
+        u.hostname = base.hostname;
+        u.port = base.port;
+        return u.toString();
+      }
+      return raw; // keep as-is if already absolute and not localhost
+    }
+    // Relative path like /uploads/... => prefix with request origin
+    if (raw.startsWith('/')) {
+      return `${req.protocol}://${req.get('host')}${raw}`;
+    }
+    // Any other case, return as-is
+    return raw;
+  } catch {
+    return url;
+  }
+}
+
+// @desc    Create a new event
+// @route   POST /api/events
+// @access  Private/Admin
+const createEvent = async (req, res) => {
+  try {
+    const { title, description, startDate, endDate, registrationDeadline, goLiveAt, price, picture, redirectUrl, isHidden, requiresAuth } = req.body;
+
+    const data = {
+      id: uuidv4(),
+      title,
+      description,
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+      registrationDeadline: registrationDeadline ? new Date(registrationDeadline) : null,
+      goLiveAt: goLiveAt ? new Date(goLiveAt) : undefined,
+      price: parseFloat(price),
+      picture,
+      updatedAt: new Date(),
+      createdById: req.user?.id || undefined,
+      redirectUrl,
+      isHidden: isHidden === true || isHidden === 'true',
+      requiresAuth: requiresAuth === false || requiresAuth === 'false' ? false : true,
+    };
+
+    try {
+      const event = await prisma.event.create({ data });
+
+      // Automatically create a main ticket (event option) with the event price
+      try {
+        if (prisma && prisma.eventOption && typeof prisma.eventOption.create === 'function') {
+          await prisma.eventOption.create({
+            data: {
+              id: uuidv4(),
+              eventId: event.id,
+              name: 'Main Ticket',
+              price: event.price || 0,
+              isMainTicket: true,
+            }
+          });
+        }
+      } catch (e) {
+        // Non-fatal: event is created even if option creation fails
+        try { console.warn('[createEvent] Failed to auto-create main ticket option:', e?.message || e); } catch {}
+      }
+
+      // Create form if provided
+      try {
+        const formInput = req.body?.form;
+        if (formInput && prisma && prisma.eventForm) {
+          const createdForm = await prisma.eventForm.create({
+            data: {
+              id: uuidv4(),
+              eventId: event.id,
+              isRequired: !!formInput.isRequired,
+            }
+          });
+          const fields = Array.isArray(formInput.fields) ? formInput.fields : [];
+          for (let i = 0; i < fields.length; i++) {
+            const f = fields[i];
+            if (!f || !f.type || !f.label) continue;
+            await prisma.eventFormField.create({
+              data: {
+                id: uuidv4(),
+                formId: createdForm.id,
+                type: f.type,
+                label: String(f.label),
+                isRequired: !!f.isRequired,
+                order: typeof f.order === 'number' ? f.order : i,
+                helpText: f.helpText || null,
+                options: f.options || undefined,
+              }
+            });
+          }
+        }
+      } catch (e) {
+        const msg = String(e?.message || e || '');
+        try { console.error('[createEvent] Failed to save form/fields:', msg); } catch {}
+        return res.status(400).json({ message: 'Failed to save event form/fields', detail: msg, hint: 'Ensure Prisma migrations are applied and Prisma Client is regenerated, then restart the server.' });
+      }
+
+      return res.status(201).json(event);
+    } catch (err) {
+      // Gracefully handle environments where migration isn't applied yet
+      const msg = String(err?.message || '');
+      if (msg.includes('Unknown argument `registrationDeadline`')) {
+        // @ts-ignore delete field and retry
+        delete data.registrationDeadline;
+        const event = await prisma.event.create({ data });
+        return res.status(201).json(event);
+      }
+      if (msg.includes('Unknown argument `goLiveAt`')) {
+        // @ts-ignore delete field and retry
+        delete data.goLiveAt;
+        const event = await prisma.event.create({ data });
+        return res.status(201).json(event);
+      }
+      if (msg.includes('Unknown argument `createdById`')) {
+        // @ts-ignore delete field and retry
+        delete data.createdById;
+        const event = await prisma.event.create({ data });
+        return res.status(201).json(event);
+      }
+      if (msg.includes('Unknown argument `redirectUrl`')) {
+        // @ts-ignore delete field and retry
+        delete data.redirectUrl;
+        const event = await prisma.event.create({ data });
+        return res.status(201).json(event);
+      }
+      throw err;
+    }
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get all events
+// @route   GET /api/events
+// @access  Public
+const getEvents = async (req, res) => {
+  try {
+    let events;
+    // Determine if Prisma Client supports EarlyBirdTier relation (i.e., migration+generate applied)
+    const canIncludeTiers = !!(prisma && prisma.earlyBirdTier && typeof prisma.earlyBirdTier.findMany === 'function');
+    const eventOptionsInclude = canIncludeTiers ? { include: { earlyBirdTiers: true } } : true;
+    try {
+      events = await prisma.event.findMany({
+        where: {
+          isActive: true,
+          isHidden: false,
+          goLiveAt: { lte: new Date() },
+          endDate: { gte: new Date() }
+        },
+        include: { eventOptions: eventOptionsInclude }
+      });
+    } catch (e) {
+      // Fallback if goLiveAt/isHidden not available yet (pre-migration)
+      events = await prisma.event.findMany({
+        where: {
+          isActive: true,
+          endDate: { gte: new Date() }
+        },
+        include: { eventOptions: eventOptionsInclude }
+      });
+    }
+
+    // Compute isSoldOut per event: true when every option that has a stock limit
+    // is fully sold out. Events with no limited options are never sold out.
+    const withStock = await Promise.all(events.map(async ev => {
+      try {
+        const limitedOpts = (ev.eventOptions || []).filter(o => (o.stockLimit || 0) > 0);
+        let isSoldOut = false;
+        if (limitedOpts.length > 0) {
+          const soldCounts = await Promise.all(limitedOpts.map(opt =>
+            prisma.registrationOption.aggregate({
+              where: { eventOptionId: opt.id, registration: { status: { not: 'cancelled' } } },
+              _sum: { quantity: true },
+            }).then(r => r._sum?.quantity || 0)
+          ));
+          isSoldOut = limitedOpts.every((opt, i) => soldCounts[i] >= opt.stockLimit);
+        }
+        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut };
+      } catch {
+        return { ...ev, picture: toAbsoluteUrl(req, ev.picture), isSoldOut: false };
+      }
+    }));
+
+    res.json(withStock);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get all events (including inactive)
+// @route   GET /api/events/all
+// @access  Private/Admin
+const getAllEvents = async (req, res) => {
+  try {
+    const canIncludeTiers = !!(prisma && prisma.earlyBirdTier && typeof prisma.earlyBirdTier.findMany === 'function');
+    const events = await prisma.event.findMany({
+      include: {
+        eventOptions: canIncludeTiers ? { include: { earlyBirdTiers: true } } : true
+      }
+    });
+
+    const mapped = events.map(ev => ({
+      ...ev,
+      picture: toAbsoluteUrl(req, ev.picture),
+    }));
+
+    res.json(mapped);
+  } catch (error) {
+    // If prisma client doesn't support the relation include (rare), retry without it
+    const events = await prisma.event.findMany({ include: { eventOptions: true } });
+    const mapped = events.map(ev => ({ ...ev, picture: toAbsoluteUrl(req, ev.picture) }));
+    res.json(mapped);
+  }
+};
+
+// @desc    Get all events for staff/supervisor/admin (always includes hidden; optional past/inactive)
+// @route   GET /api/events/all
+// @access  Private
+const getEventsAll = async (req, res) => {
+  try {
+    const includePast = req.query.includePast === 'true';
+    const includeInactive = req.query.includeInactive === 'true';
+
+    const where = {};
+    if (!includeInactive) where.isActive = true;
+    if (!includePast) where.endDate = { gte: new Date() };
+
+    const canIncludeTiers = !!(prisma && prisma.earlyBirdTier && typeof prisma.earlyBirdTier.findMany === 'function');
+    const canIncludeVariants = !!(prisma && prisma.optionVariant && typeof prisma.optionVariant.findMany === 'function');
+    const optionInclude = canIncludeTiers
+      ? { earlyBirdTiers: true, ...(canIncludeVariants ? { variants: { orderBy: { order: 'asc' } } } : {}) }
+      : undefined;
+    const events = await prisma.event.findMany({
+      where,
+      include: {
+        eventOptions: optionInclude ? { include: optionInclude } : true,
+        form: { include: { fields: true } }
+      },
+      orderBy: { startDate: 'asc' }
+    });
+
+    const mapped = events.map(ev => ({
+      ...ev,
+      picture: toAbsoluteUrl(req, ev.picture),
+    }));
+
+    res.json(mapped);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get event by ID
+// @route   GET /api/events/:id
+// @access  Public
+const getEventById = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    // Determine if Prisma Client supports EarlyBirdTier / OptionVariant
+    const canIncludeTiers = !!(prisma && prisma.earlyBirdTier && typeof prisma.earlyBirdTier.findMany === 'function');
+    const canIncludeVariants = !!(prisma && prisma.optionVariant && typeof prisma.optionVariant.findMany === 'function');
+    const optionInclude = canIncludeTiers
+      ? { earlyBirdTiers: true, ...(canIncludeVariants ? { variants: { orderBy: { order: 'asc' } } } : {}) }
+      : undefined;
+    const includeObj = { eventOptions: optionInclude ? { include: optionInclude } : true };
+
+    // Staff/supervisor/admin need the creator + notify-recipient list to populate the
+    // event edit screen's Notifications step; public callers don't need this.
+    const isStaffOrHigherForNotify = !!(req.user && ['admin', 'supervisor', 'staff'].includes(req.user.role));
+    if (isStaffOrHigherForNotify) {
+      includeObj.createdBy = { select: { id: true, name: true, email: true } };
+      includeObj.notifyRecipients = { select: { id: true, name: true, email: true, role: true } };
+    }
+
+    let event;
+
+    // Try to include attachments via Prisma if the client has the model
+    const canUsePrismaAttachments = (prisma && prisma.eventAttachment && typeof prisma.eventAttachment.findMany === 'function');
+    if (canUsePrismaAttachments) {
+      try {
+        // @ts-ignore - runtime guard ensures this exists
+        includeObj.attachments = true;
+        event = await prisma.event.findUnique({ where: { id: eventId }, include: includeObj });
+      } catch (e) {
+        // If relation/table does not exist (migration not deployed), fall back to fetching without attachments
+        try {
+          event = await prisma.event.findUnique({ where: { id: eventId }, include: { eventOptions: true, ...(isStaffOrHigherForNotify ? { createdBy: includeObj.createdBy, notifyRecipients: includeObj.notifyRecipients } : {}) } });
+        } catch (e2) {
+          // Notify-recipients relation not migrated yet either — fall back further
+          event = await prisma.event.findUnique({ where: { id: eventId }, include: { eventOptions: true } });
+        }
+        // And we will source attachments from the filesystem manifest below
+      }
+    } else {
+      // No model available on the Prisma client; fetch without attachments
+      try {
+        event = await prisma.event.findUnique({ where: { id: eventId }, include: { eventOptions: true, ...(isStaffOrHigherForNotify ? { createdBy: includeObj.createdBy, notifyRecipients: includeObj.notifyRecipients } : {}) } });
+      } catch (e) {
+        event = await prisma.event.findUnique({ where: { id: eventId }, include: { eventOptions: true } });
+      }
+    }
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    // Public gating: hide inactive or not-yet-live events from everyone except staff/supervisor/admin,
+    // who need to load inactive events for cashup, editing, etc.
+    const isStaffOrHigher = !!(req.user && ['admin', 'supervisor', 'staff'].includes(req.user.role));
+    if (!isStaffOrHigher) {
+      if (event.isActive === false) {
+        res.status(404);
+        throw new Error('Event not found');
+      }
+      // goLiveAt may not exist on older schemas — tolerate that read failing without
+      // affecting the isActive gate above.
+      let goLiveAt = null;
+      try { goLiveAt = event.goLiveAt ? new Date(event.goLiveAt) : null; } catch (e) {}
+      if (goLiveAt && new Date() < goLiveAt) {
+        res.status(404);
+        throw new Error('Event not found');
+      }
+    }
+
+    // Resolve attachments
+    let attachments = [];
+    if (event.attachments && Array.isArray(event.attachments)) {
+      attachments = event.attachments;
+    } else {
+      // Fall back to manifest on disk if DB attachments are not available
+      try {
+        const uploadDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+        const manifestPath = path.join(uploadDir, `${eventId}.attachments.json`);
+        if (fs.existsSync(manifestPath)) {
+          const raw = fs.readFileSync(manifestPath, 'utf-8');
+          const list = JSON.parse(raw) || [];
+          attachments = list;
+        }
+      } catch {}
+    }
+
+    // Try include form definition if available
+    let form = null;
+    try {
+      if (prisma && prisma.eventForm && typeof prisma.eventForm.findUnique === 'function') {
+        const f = await prisma.eventForm.findUnique({
+          where: { eventId: eventId },
+          include: { fields: true },
+        });
+        if (f) {
+          form = {
+            id: f.id,
+            isRequired: !!f.isRequired,
+            fields: (f.fields || []).sort((a,b) => (a.order||0)-(b.order||0)).map(fl => ({
+              id: fl.id,
+              type: fl.type,
+              label: fl.label,
+              isRequired: !!fl.isRequired,
+              order: fl.order || 0,
+              helpText: fl.helpText || null,
+              options: fl.options || null,
+            }))
+          };
+        }
+      }
+    } catch {}
+
+    // Compute availableCount per option and variant
+    let eventOptionsWithStock = event.eventOptions || [];
+    try {
+      if (canIncludeVariants) {
+        eventOptionsWithStock = await Promise.all((event.eventOptions || []).map(async opt => {
+          // Total sold quantity for this option (all non-cancelled)
+          const soldAgg = await prisma.registrationOption.aggregate({
+            where: { eventOptionId: opt.id, registration: { status: { not: 'cancelled' } } },
+            _sum: { quantity: true }
+          });
+          const soldCount = soldAgg._sum?.quantity || 0;
+          const availableCount = opt.stockLimit > 0 ? Math.max(0, opt.stockLimit - soldCount) : null;
+
+          // Per-variant stock
+          const variantsWithStock = await Promise.all((opt.variants || []).map(async v => {
+            if (!v.stockLimit) return { ...v, soldCount: 0, availableCount: null };
+            const vAgg = await prisma.registrationOption.aggregate({
+              where: { variantId: v.id, registration: { status: { not: 'cancelled' } } },
+              _sum: { quantity: true }
+            });
+            const vSold = vAgg._sum?.quantity || 0;
+            return { ...v, soldCount: vSold, availableCount: Math.max(0, v.stockLimit - vSold) };
+          }));
+
+          return { ...opt, soldCount, availableCount, variants: variantsWithStock };
+        }));
+      }
+    } catch (e) {
+      // Non-fatal: fall back to options without stock info
+    }
+
+    const mapped = {
+      ...event,
+      eventOptions: eventOptionsWithStock,
+      picture: toAbsoluteUrl(req, event.picture),
+      attachments: (attachments || []).map(att => ({
+        ...att,
+        url: toAbsoluteUrl(req, att.url)
+      })),
+      form,
+    };
+    res.json(mapped);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// @desc    Update event
+// @route   PUT /api/events/:id
+// @access  Private/Admin
+const updateEvent = async (req, res) => {
+  try {
+    const event = await prisma.event.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    // A closed (cashed-up) event's pricing/structure must not change under the reconciled
+    // totals — same rule already enforced for payments/costs. Admin can reopen first.
+    await assertEventOpen(req.params.id, res);
+
+    const { title, description, startDate, endDate, registrationDeadline, goLiveAt, price, picture, isActive, redirectUrl, isHidden, requiresAuth } = req.body;
+
+    const data = {
+      title: title || event.title,
+      description: description !== undefined ? description : event.description,
+      startDate: startDate ? new Date(startDate) : event.startDate,
+      endDate: endDate ? new Date(endDate) : event.endDate,
+      registrationDeadline: registrationDeadline !== undefined ? (registrationDeadline ? new Date(registrationDeadline) : null) : event.registrationDeadline,
+      goLiveAt: goLiveAt !== undefined ? (goLiveAt ? new Date(goLiveAt) : new Date()) : (event.goLiveAt || undefined),
+      price: price ? parseFloat(price) : event.price,
+      picture: picture !== undefined ? picture : event.picture,
+      isActive: isActive !== undefined ? isActive : event.isActive,
+      isHidden: isHidden !== undefined ? (isHidden === true || isHidden === 'true') : (event.isHidden ?? false),
+      requiresAuth: requiresAuth !== undefined ? !(requiresAuth === false || requiresAuth === 'false') : (event.requiresAuth ?? true),
+      updatedAt: new Date(),
+      redirectUrl: redirectUrl !== undefined ? redirectUrl : event.redirectUrl,
+    };
+
+    try {
+      const updatedEvent = await prisma.event.update({ where: { id: req.params.id }, data });
+
+
+      // Upsert form if provided
+      try {
+        const formInput = req.body?.form;
+        if (formInput && prisma && prisma.eventForm) {
+          // find existing form
+          let existing = null;
+          try { existing = await prisma.eventForm.findUnique({ where: { eventId: updatedEvent.id } }); } catch {}
+          if (!existing) {
+            existing = await prisma.eventForm.create({ data: { id: uuidv4(), eventId: updatedEvent.id, isRequired: !!formInput.isRequired } });
+          } else {
+            await prisma.eventForm.update({ where: { id: existing.id }, data: { isRequired: !!formInput.isRequired } });
+          }
+          const formId = existing.id;
+          // Replace fields: simple approach — delete all and recreate
+          try { await prisma.eventFormField.deleteMany({ where: { formId } }); } catch {}
+          const fields = Array.isArray(formInput.fields) ? formInput.fields : [];
+          for (let i = 0; i < fields.length; i++) {
+            const f = fields[i];
+            if (!f || !f.type || !f.label) continue;
+            await prisma.eventFormField.create({
+              data: {
+                id: uuidv4(),
+                formId,
+                type: f.type,
+                label: String(f.label),
+                isRequired: !!f.isRequired,
+                order: typeof f.order === 'number' ? f.order : i,
+                helpText: f.helpText || null,
+                options: f.options || undefined,
+              }
+            });
+          }
+        }
+      } catch (e) {
+        const msg = String(e?.message || e || '');
+        try { console.error('[updateEvent] Failed to save form/fields:', msg); } catch {}
+        return res.status(400).json({ message: 'Failed to save event form/fields', detail: msg, hint: 'Ensure Prisma migrations are applied and Prisma Client is regenerated, then restart the server.' });
+      }
+
+      return res.json(updatedEvent);
+    } catch (err) {
+      const msg = String(err?.message || '');
+      if (msg.includes('Unknown argument `registrationDeadline`')) {
+        // @ts-ignore
+        delete data.registrationDeadline;
+        const updatedEvent = await prisma.event.update({ where: { id: req.params.id }, data });
+        return res.json(updatedEvent);
+      }
+      if (msg.includes('Unknown argument `goLiveAt`')) {
+        // @ts-ignore
+        delete data.goLiveAt;
+        const updatedEvent = await prisma.event.update({ where: { id: req.params.id }, data });
+        return res.json(updatedEvent);
+      }
+      throw err;
+    }
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get the list of users who receive registration/payment/daily-summary
+//          notifications for this event. Lightweight — selects only id/name/email/role,
+//          skipping the option/stock computation that GET /api/events/:id does, so the
+//          Notifications step in the event editor loads instantly.
+// @route   GET /api/events/:id/notify-recipients
+// @access  Private/Supervisor
+const getEventNotifyRecipients = async (req, res) => {
+  try {
+    const event = await prisma.event.findUnique({
+      where: { id: req.params.id },
+      select: { notifyRecipients: { select: { id: true, name: true, email: true, role: true } } },
+    });
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+    res.json(event.notifyRecipients);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// @desc    Set the list of users who receive registration/payment/daily-summary
+//          notifications for this event. Empty list falls back to the event creator.
+// @route   PUT /api/events/:id/notify-recipients
+// @access  Private/Supervisor
+const updateEventNotifyRecipients = async (req, res) => {
+  try {
+    const { userIds } = req.body;
+    if (!Array.isArray(userIds)) {
+      res.status(400);
+      throw new Error('userIds must be an array');
+    }
+
+    const event = await prisma.event.findUnique({ where: { id: req.params.id } });
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    const updated = await prisma.event.update({
+      where: { id: req.params.id },
+      data: { notifyRecipients: { set: userIds.map(id => ({ id })) } },
+      include: { notifyRecipients: { select: { id: true, name: true, email: true, role: true } } },
+    });
+
+    res.json(updated.notifyRecipients);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// @desc    Delete event (set inactive)
+// @route   DELETE /api/events/:id
+// @access  Private/Admin
+const deleteEvent = async (req, res) => {
+  try {
+    const event = await prisma.event.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    // Instead of deleting, we set isActive to false
+    await prisma.event.update({
+      where: { id: req.params.id },
+      data: {
+        isActive: false,
+        updatedAt: new Date()
+      }
+    });
+
+    res.json({ message: 'Event deactivated' });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Create event option
+// @route   POST /api/events/:id/options
+// @access  Private/Admin
+const createEventOption = async (req, res) => {
+  try {
+    const event = await prisma.event.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    await assertEventOpen(req.params.id, res);
+
+    const { name, price, isMainTicket, stockLimit } = req.body;
+
+    const eventOption = await prisma.eventOption.create({
+      data: {
+        id: uuidv4(),
+        eventId: req.params.id,
+        name,
+        price: parseFloat(price),
+        isMainTicket: isMainTicket || false,
+        stockLimit: stockLimit ? parseInt(stockLimit, 10) : 0,
+      }
+    });
+
+    res.status(201).json(eventOption);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Update event option
+// @route   PUT /api/events/options/:id
+// @access  Private/Admin
+const updateEventOption = async (req, res) => {
+  try {
+    const eventOption = await prisma.eventOption.findUnique({
+      where: { id: req.params.id },
+      include: { earlyBirdTiers: true }
+    });
+
+    if (!eventOption) {
+      res.status(404);
+      throw new Error('Event option not found');
+    }
+
+    await assertEventOpen(eventOption.eventId, res);
+
+    const { name, price, isMainTicket, stockLimit, earlyBirdTiers, variants } = req.body;
+
+    const updatedEventOption = await prisma.eventOption.update({
+      where: { id: req.params.id },
+      data: {
+        name: name !== undefined ? name : eventOption.name,
+        price: price !== undefined ? parseFloat(price) : eventOption.price,
+        isMainTicket: isMainTicket !== undefined ? isMainTicket : eventOption.isMainTicket,
+        stockLimit: stockLimit !== undefined ? parseInt(stockLimit, 10) : eventOption.stockLimit,
+      }
+    });
+
+    // If earlyBirdTiers provided, replace all tiers for this option (including per-variant ones)
+    if (Array.isArray(earlyBirdTiers)) {
+      try { await prisma.earlyBirdTier.deleteMany({ where: { eventOptionId: updatedEventOption.id } }); } catch {}
+      for (let i = 0; i < earlyBirdTiers.length; i++) {
+        const t = earlyBirdTiers[i];
+        if (!t || !t.deadline || (t.price === undefined || t.price === null)) continue;
+        const deadline = new Date(t.deadline);
+        const p = parseFloat(t.price);
+        if (!(deadline instanceof Date) || isNaN(deadline.getTime()) || !(p >= 0)) continue;
+        await prisma.earlyBirdTier.create({
+          data: {
+            id: require('uuid').v4(),
+            eventOptionId: updatedEventOption.id,
+            variantId: t.variantId || null,
+            deadline,
+            price: p,
+            order: typeof t.order === 'number' ? t.order : i,
+            stockLimit: t.stockLimit ? parseInt(t.stockLimit, 10) : 0,
+          }
+        });
+      }
+    }
+
+    // If variants array provided, upsert variants
+    if (Array.isArray(variants)) {
+      const incomingIds = variants.filter(v => v.id).map(v => v.id);
+      // Delete variants not in the new list (only if they have no registrations)
+      const existingVariants = await prisma.optionVariant.findMany({ where: { eventOptionId: updatedEventOption.id } });
+      for (const ev of existingVariants) {
+        if (!incomingIds.includes(ev.id)) {
+          const usageCount = await prisma.registrationOption.count({ where: { variantId: ev.id } });
+          if (usageCount === 0) {
+            await prisma.optionVariant.delete({ where: { id: ev.id } });
+          }
+        }
+      }
+      // Upsert incoming variants
+      for (let i = 0; i < variants.length; i++) {
+        const v = variants[i];
+        if (!v.name) continue;
+        const variantPrice = v.price !== undefined && v.price !== null && v.price !== '' ? parseFloat(v.price) : null;
+        const variantStockLimit = v.stockLimit !== undefined ? parseInt(v.stockLimit, 10) : 0;
+        if (v.id) {
+          await prisma.optionVariant.update({
+            where: { id: v.id },
+            data: { name: v.name, price: variantPrice, stockLimit: variantStockLimit, order: i }
+          });
+        } else {
+          await prisma.optionVariant.create({
+            data: {
+              id: require('uuid').v4(),
+              eventOptionId: updatedEventOption.id,
+              name: v.name,
+              price: variantPrice,
+              stockLimit: variantStockLimit,
+              order: i,
+            }
+          });
+        }
+      }
+    }
+
+    const refreshed = await prisma.eventOption.findUnique({
+      where: { id: updatedEventOption.id },
+      include: { earlyBirdTiers: true, variants: { orderBy: { order: 'asc' } } }
+    });
+
+    res.json(refreshed);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Delete event option
+// @route   DELETE /api/events/options/:id
+// @access  Private/Admin
+const deleteEventOption = async (req, res) => {
+  try {
+    const eventOption = await prisma.eventOption.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!eventOption) {
+      res.status(404);
+      throw new Error('Event option not found');
+    }
+
+    await assertEventOpen(eventOption.eventId, res);
+
+    // If deleting a main ticket, ensure at least one other main ticket exists for the same event
+    if (eventOption.isMainTicket) {
+      const otherMainCount = await prisma.eventOption.count({
+        where: {
+          eventId: eventOption.eventId,
+          isMainTicket: true,
+          NOT: { id: eventOption.id },
+        }
+      });
+      if (otherMainCount === 0) {
+        res.status(400);
+        throw new Error('Cannot delete the only main ticket option');
+      }
+    }
+
+    // Check if there are any registrations using this option
+    const registrationOptions = await prisma.registrationOption.findMany({
+      where: { eventOptionId: req.params.id }
+    });
+
+    if (registrationOptions.length > 0) {
+      res.status(400);
+      throw new Error('Cannot delete event option that has registrations');
+    }
+
+    await prisma.eventOption.delete({
+      where: { id: req.params.id }
+    });
+
+    res.json({ message: 'Event option removed' });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Create a variant for an event option
+// @route   POST /api/events/options/:id/variants
+// @access  Private/Supervisor
+const createOptionVariant = async (req, res) => {
+  try {
+    const eventOption = await prisma.eventOption.findUnique({ where: { id: req.params.id } });
+    if (!eventOption) { res.status(404); throw new Error('Event option not found'); }
+    await assertEventOpen(eventOption.eventId, res);
+    const { name, price, stockLimit, order } = req.body;
+    if (!name) { res.status(400); throw new Error('Variant name is required'); }
+    const variant = await prisma.optionVariant.create({
+      data: {
+        id: uuidv4(),
+        eventOptionId: req.params.id,
+        name,
+        price: price !== undefined && price !== null && price !== '' ? parseFloat(price) : null,
+        stockLimit: stockLimit ? parseInt(stockLimit, 10) : 0,
+        order: order !== undefined ? parseInt(order, 10) : 0,
+      }
+    });
+    res.status(201).json(variant);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// @desc    Update a variant
+// @route   PUT /api/events/variants/:id
+// @access  Private/Supervisor
+const updateOptionVariant = async (req, res) => {
+  try {
+    const variant = await prisma.optionVariant.findUnique({ where: { id: req.params.id }, include: { eventOption: { select: { eventId: true } } } });
+    if (!variant) { res.status(404); throw new Error('Variant not found'); }
+    await assertEventOpen(variant.eventOption.eventId, res);
+    const { name, price, stockLimit, order } = req.body;
+    const updated = await prisma.optionVariant.update({
+      where: { id: req.params.id },
+      data: {
+        name: name !== undefined ? name : variant.name,
+        price: price !== undefined ? (price === null || price === '' ? null : parseFloat(price)) : variant.price,
+        stockLimit: stockLimit !== undefined ? parseInt(stockLimit, 10) : variant.stockLimit,
+        order: order !== undefined ? parseInt(order, 10) : variant.order,
+      }
+    });
+    res.json(updated);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// @desc    Delete a variant
+// @route   DELETE /api/events/variants/:id
+// @access  Private/Admin
+const deleteOptionVariant = async (req, res) => {
+  try {
+    const variant = await prisma.optionVariant.findUnique({ where: { id: req.params.id }, include: { eventOption: { select: { eventId: true } } } });
+    if (!variant) { res.status(404); throw new Error('Variant not found'); }
+    await assertEventOpen(variant.eventOption.eventId, res);
+    const usageCount = await prisma.registrationOption.count({ where: { variantId: req.params.id } });
+    if (usageCount > 0) { res.status(400); throw new Error('Cannot delete variant with existing registrations'); }
+    await prisma.optionVariant.delete({ where: { id: req.params.id } });
+    res.json({ message: 'Variant deleted' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: error.message });
+  }
+};
+
+// File upload setup for attachments (PDFs/docs)
+const attachmentsStorage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    const uploadPath = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+    try {
+      if (!fs.existsSync(uploadPath)) fs.mkdirSync(uploadPath, { recursive: true });
+      cb(null, uploadPath);
+    } catch (err) {
+      cb(err);
+    }
+  },
+  filename: function (req, file, cb) {
+    const unique = `${Date.now()}-${file.originalname}`;
+    cb(null, unique);
+  }
+});
+
+const allowedDocs = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt', '.csv', '.zip'];
+const uploadAttachmentMulter = multer({
+  storage: attachmentsStorage,
+  limits: { fileSize: 20 * 1024 * 1024 }, // 20MB
+  fileFilter: (req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (!allowedDocs.includes(ext)) {
+      return cb(new Error('Unsupported file type'));
+    }
+    cb(null, true);
+  }
+});
+
+// @desc    List attachments for an event
+// @route   GET /api/events/:id/attachments
+// @access  Private/Supervisor (for dashboard) and could be public via event details
+const listEventAttachments = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    // If attachments model isn't available yet (pre-migration/generate), fall back to filesystem manifest
+    if (!(prisma && prisma.eventAttachment && typeof prisma.eventAttachment.findMany === 'function')) {
+      try {
+        const uploadDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+        const manifestPath = path.join(uploadDir, `${eventId}.attachments.json`);
+        if (!fs.existsSync(manifestPath)) return res.json([]);
+        const raw = fs.readFileSync(manifestPath, 'utf-8');
+        const list = JSON.parse(raw);
+        return res.json(list.map(att => ({ ...att, url: toAbsoluteUrl(req, att.url) })));
+      } catch (e) {
+        // If manifest is corrupt or unreadable, return empty list rather than failing
+        return res.json([]);
+      }
+    }
+    const items = await prisma.eventAttachment.findMany({ where: { eventId }, orderBy: { createdAt: 'desc' } });
+    res.json(items.map(att => ({ ...att, url: toAbsoluteUrl(req, att.url) })));
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Upload attachment for an event
+// @route   POST /api/events/:id/attachments
+// @access  Private/Supervisor
+const uploadEventAttachment = [
+  (req, res, next) => uploadAttachmentMulter.single('file')(req, res, (err) => {
+    if (err) req.multerError = err;
+    next();
+  }),
+  async (req, res) => {
+    try {
+      if (req.multerError) throw req.multerError;
+      if (!req.file) return res.status(400).json({ message: 'No file uploaded' });
+      const eventId = req.params.id;
+      const relUrl = `/uploads/event-files/${req.file.filename}`;
+
+      // Fallback: if attachments model is not available yet, store in filesystem manifest
+      if (!(prisma && prisma.eventAttachment && typeof prisma.eventAttachment.create === 'function')) {
+        try { console.warn('[attachments] Falling back to filesystem manifest: Prisma client lacks EventAttachment model. Ensure prisma generate ran in the deployed app dir and server restarted.'); } catch {}
+        try {
+          const uploadDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+          if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+          const manifestPath = path.join(uploadDir, `${eventId}.attachments.json`);
+          const entry = {
+            id: uuidv4(),
+            eventId,
+            originalName: req.file.originalname,
+            filename: req.file.filename,
+            mimeType: req.file.mimetype,
+            size: req.file.size,
+            url: relUrl,
+            createdAt: new Date().toISOString()
+          };
+          let list = [];
+          if (fs.existsSync(manifestPath)) {
+            try {
+              list = JSON.parse(fs.readFileSync(manifestPath, 'utf-8')) || [];
+            } catch {}
+          }
+          list.unshift(entry);
+          fs.writeFileSync(manifestPath, JSON.stringify(list, null, 2), 'utf-8');
+          return res.status(201).json({ ...entry, url: toAbsoluteUrl(req, entry.url) });
+        } catch (e) {
+          return res.status(500).json({ message: 'Failed to record attachment', detail: e?.message });
+        }
+      }
+
+      // Normal path: DB-backed
+      try {
+        const created = await prisma.eventAttachment.create({
+          data: {
+            id: uuidv4(),
+            eventId,
+            originalName: req.file.originalname,
+            filename: req.file.filename,
+            mimeType: req.file.mimetype,
+            size: req.file.size,
+            url: relUrl,
+          }
+        });
+        return res.status(201).json({ ...created, url: toAbsoluteUrl(req, created.url) });
+      } catch (e) {
+        const msg = String(e?.message || e || '');
+        const isMissingTable = msg.includes('does not exist') || msg.includes('relation') || msg.includes('P2021');
+        if (isMissingTable) {
+          try { console.warn('[attachments] DB create failed, falling back to filesystem manifest. Error:', msg); } catch {}
+          try {
+            const uploadDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+            if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+            const manifestPath = path.join(uploadDir, `${eventId}.attachments.json`);
+            const entry = {
+              id: uuidv4(),
+              eventId,
+              originalName: req.file.originalname,
+              filename: req.file.filename,
+              mimeType: req.file.mimetype,
+              size: req.file.size,
+              url: relUrl,
+              createdAt: new Date().toISOString()
+            };
+            let list = [];
+            if (fs.existsSync(manifestPath)) {
+              try { list = JSON.parse(fs.readFileSync(manifestPath, 'utf-8')) || []; } catch {}
+            }
+            list.unshift(entry);
+            fs.writeFileSync(manifestPath, JSON.stringify(list, null, 2), 'utf-8');
+            return res.status(201).json({ ...entry, url: toAbsoluteUrl(req, entry.url) });
+          } catch (fallbackErr) {
+            return res.status(500).json({ message: 'Failed to record attachment', detail: String(fallbackErr?.message || fallbackErr) });
+          }
+        }
+        // Unknown error
+        throw e;
+      }
+    } catch (error) {
+      res.status(400).json({ message: error.message });
+    }
+  }
+];
+
+// @desc    Delete attachment
+// @route   DELETE /api/events/:eventId/attachments/:attachmentId
+// @access  Private/Admin or Supervisor
+const deleteEventAttachment = async (req, res) => {
+  try {
+    const { eventId, attachmentId } = req.params;
+    // If attachments model is not available yet, fall back to filesystem manifest
+    if (!(prisma && prisma.eventAttachment && typeof prisma.eventAttachment.findUnique === 'function')) {
+      try {
+        const uploadDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+        const manifestPath = path.join(uploadDir, `${eventId}.attachments.json`);
+        if (!fs.existsSync(manifestPath)) return res.status(404).json({ message: 'Attachment not found' });
+        const list = JSON.parse(fs.readFileSync(manifestPath, 'utf-8')) || [];
+        const idx = list.findIndex((x) => x.id === attachmentId);
+        if (idx === -1) return res.status(404).json({ message: 'Attachment not found' });
+        const att = list[idx];
+        // Remove file on disk (best-effort)
+        try {
+          const filePath = path.join(uploadDir, att.filename);
+          if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+        } catch {}
+        // Remove from manifest
+        list.splice(idx, 1);
+        fs.writeFileSync(manifestPath, JSON.stringify(list, null, 2), 'utf-8');
+        return res.json({ message: 'Attachment deleted' });
+      } catch (e) {
+        return res.status(500).json({ message: 'Failed to delete attachment', detail: e?.message });
+      }
+    }
+    const att = await prisma.eventAttachment.findUnique({ where: { id: attachmentId } });
+    if (!att || att.eventId !== eventId) {
+      return res.status(404).json({ message: 'Attachment not found' });
+    }
+    // Remove file on disk (best-effort)
+    try {
+      const filePath = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files', att.filename);
+      if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+    } catch {}
+    await prisma.eventAttachment.delete({ where: { id: attachmentId } });
+    res.json({ message: 'Attachment deleted' });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Diagnostics for attachments pipeline
+// @route   GET /api/events/attachments/status
+// @access  Private/Admin
+const attachmentsStatus = async (req, res) => {
+  try {
+    const hasModel = !!(prisma && prisma.eventAttachment && typeof prisma.eventAttachment.findMany === 'function');
+    let tableQueryable = false;
+    let probeError = null;
+    if (hasModel) {
+      try {
+        await prisma.eventAttachment.findFirst({});
+        tableQueryable = true;
+      } catch (e) {
+        probeError = String(e?.message || e);
+      }
+    }
+    // Mask DB URL to avoid leaking secrets
+    const dbUrl = process.env.DATABASE_URL || '';
+    let dbInfo = null;
+    try {
+      const u = new URL(dbUrl);
+      dbInfo = {
+        protocol: u.protocol.replace(':',''),
+        host: u.hostname,
+        port: u.port || undefined,
+        database: (u.pathname || '').replace(/^\//,'') || undefined,
+      };
+    } catch {}
+    res.json({
+      prismaClientHasEventAttachmentModel: hasModel,
+      databaseTableQueryable: tableQueryable,
+      probeError,
+      database: dbInfo,
+    });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Admin-triggered sync: import manifest files into DB
+// @route   POST /api/events/attachments/sync
+// @access  Private/Admin
+const { syncManifestsToDb } = require('../utils/attachmentsSync');
+const attachmentsSync = async (req, res) => {
+  try {
+    const dryRun = String(req.query.dryRun || '').toLowerCase() === 'true';
+    const remove = String(req.query.remove || '').toLowerCase() === 'true';
+    const summary = await syncManifestsToDb(prisma, { dryRun, removeManifestAfterImport: remove });
+    res.json({ dryRun, remove, ...summary });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Email attendees for an event with filters and preview support
+// @route   POST /api/events/:id/email-attendees
+// @access  Private/Supervisor or Admin
+const emailEventAttendees = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    const { subject, html, text, filter, dryRun, template } = req.body || {};
+
+    // For non-ticket templates or custom messages, require subject and content
+    if ((template !== 'tickets') && (!subject || !(html || text))) {
+      res.status(400);
+      throw new Error('Subject and message (html or text) are required unless template is "tickets"');
+    }
+
+    // Ensure event exists
+    const event = await prisma.event.findUnique({ where: { id: eventId } });
+    if (!event) { res.status(404); throw new Error('Event not found'); }
+
+    // Optional promo event (used by Automations: Next Event Promo)
+    let promoEvent = null;
+    try {
+      const promoEventId = req.body?.promoEventId;
+      if (promoEventId && typeof promoEventId === 'string') {
+        promoEvent = await prisma.event.findUnique({ where: { id: promoEventId } });
+      }
+    } catch {}
+
+    // Build where clause for registrations
+    const where = { eventId };
+
+    // Filter by registration status groups: paid, unpaid, partial_paid, cancelled, any
+    const statusFilter = (filter && filter.status) ? String(filter.status) : 'any';
+    if (statusFilter === 'paid') {
+      where.status = 'paid';
+    } else if (statusFilter === 'unpaid') {
+      where.status = { in: ['pending', 'partial_paid'] };
+    } else if (statusFilter === 'partial_paid') {
+      where.status = 'partial_paid';
+    } else if (statusFilter === 'cancelled') {
+      where.status = 'cancelled';
+    }
+
+    // Optional explicit attendee selection by userIds
+    const attendeeIds = Array.isArray(filter?.attendeeIds) ? filter.attendeeIds.filter((x) => typeof x === 'string' && x.trim().length > 0) : [];
+    if (attendeeIds.length > 0) {
+      // Prefer server-side filtering when possible
+      where.userId = { in: attendeeIds };
+    }
+
+    // Name/email substring filter (kept for backward compatibility)
+    const nameQ = (filter && filter.name) ? String(filter.name).trim() : '';
+    const emailQ = (filter && filter.email) ? String(filter.email).trim() : '';
+
+    const registrations = await prisma.registration.findMany({
+      where,
+      include: {
+        user: { select: { id: true, name: true, email: true, isActive: true } },
+        // Include options with eventOption and early-bird tiers so pricing/balances compute correctly
+        registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+        payments: true,
+      },
+      orderBy: { createdAt: 'asc' }
+    });
+
+    // Apply name/email filter in JS (Prisma cross-relational OR contains with guards varies across versions)
+    // Also exclude guest/system-generated emails and suspended users
+    let filtered = registrations.filter(r => {
+      if (!r.user || !r.user.email) return false;
+      if (r.user.email.endsWith('@guest.local')) return false;
+      if (r.user.isActive === false) return false;
+      return true;
+    });
+    if (nameQ) {
+      const q = nameQ.toLowerCase();
+      filtered = filtered.filter(r => (r.user?.name || '').toLowerCase().includes(q));
+    }
+    if (emailQ) {
+      const q = emailQ.toLowerCase();
+      filtered = filtered.filter(r => (r.user?.email || '').toLowerCase().includes(q));
+    }
+
+    // Unique recipients by email to avoid duplicates across multiple registrations
+    const uniqMap = new Map();
+    for (const r of filtered) {
+      const email = (r.user?.email || '').trim();
+      if (!email) continue;
+      if (!uniqMap.has(email)) {
+        uniqMap.set(email, { email, name: r.user?.name || '' });
+      }
+    }
+    const recipients = Array.from(uniqMap.values());
+
+    if (dryRun) {
+      return res.json({ eventId, matched: recipients.length, recipients: recipients.slice(0, 20) });
+    }
+
+    const { sendMail } = require('../utils/email');
+    const { computeRegistrationTotalDue } = require('../utils/pricing');
+
+    function fmtAmount(amt) {
+      const n = Number(amt || 0);
+      return `R${n.toFixed(2)}`;
+    }
+    function fmtDate(d) {
+      try { return new Date(d).toLocaleString(); } catch { return String(d); }
+    }
+    function replacePlaceholders(str, ctx) {
+      if (!str) return str;
+      return String(str)
+        .replace(/\{\{\s*name\s*\}\}/g, ctx.name || '')
+        .replace(/\{\{\s*event\.title\s*\}\}/g, ctx.eventTitle || '')
+        .replace(/\{\{\s*event\.start\s*\}\}/g, ctx.eventStart || '')
+        .replace(/\{\{\s*event\.(link|url)\s*\}\}/g, (ctx.eventLinkHtml || ctx.eventLink || ''))
+        .replace(/\{\{\s*promo\.title\s*\}\}/g, ctx.promoTitle || '')
+        .replace(/\{\{\s*promo\.(link|url)\s*\}\}/g, (ctx.promoLinkHtml || ctx.promoLink || ''))
+        .replace(/\{\{\s*balance\s*\}\}/g, ctx.balanceFmt || '');
+    }
+
+    // Build per-recipient registration aggregates for this event
+    const regsByEmail = new Map();
+    for (const r of registrations) {
+      const em = (r.user?.email || '').trim();
+      if (!em) continue;
+      if (!regsByEmail.has(em)) regsByEmail.set(em, []);
+      regsByEmail.get(em).push(r);
+    }
+
+    let sent = 0;
+
+    // Special handling for tickets template: trigger ticket emails containing attachments
+    if (template === 'tickets') {
+      const { emailTickets } = require('./ticketController');
+      for (const rcpt of recipients) {
+        try {
+          const regs = regsByEmail.get(rcpt.email) || [];
+          // Send tickets for each registration that belongs to this recipient for this event
+          for (const reg of regs) {
+            // Use the controller helper as in other parts of the code
+            const mockReq = { user: { id: reg.userId }, body: { registrationId: reg.id } };
+            const mockRes = { status: () => mockRes, json: () => {} };
+            await emailTickets(mockReq, mockRes);
+          }
+          sent++;
+        } catch (e) {
+          try { console.warn('[email-attendees tickets] Failed for', rcpt.email, e?.message || e); } catch {}
+        }
+      }
+      return res.json({ eventId, matched: recipients.length, sent, template: 'tickets' });
+    }
+
+    const eventTitle = event?.title || 'the event';
+    const eventStart = event?.startDate ? fmtDate(event.startDate) : '';
+    // Build event and promo links for placeholders
+    const baseUrl = (process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, '');
+    const eventLink = `${baseUrl}/events/${encodeURIComponent(event.id)}`;
+    const eventLinkHtml = `<a href="${eventLink}">${eventLink}</a>`;
+    const promoTitle = promoEvent?.title || '';
+    const promoLink = promoEvent ? `${baseUrl}/events/${encodeURIComponent(promoEvent.id)}` : '';
+    const promoLinkHtml = promoLink ? `<a href="${promoLink}">${promoLink}</a>` : '';
+
+    // Send individually with personalization
+    for (const rcpt of recipients) {
+      try {
+        const regs = regsByEmail.get(rcpt.email) || [];
+        // Sum outstanding balance across this user's registrations for the event
+        let totalDue = 0; let totalPaid = 0;
+        for (const r of regs) {
+          const due = computeRegistrationTotalDue(r, new Date());
+          const paid = (r.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+          totalDue += due; totalPaid += paid;
+        }
+        const balance = Math.max(totalDue - totalPaid, 0);
+        // Build context for placeholder replacement
+        const ctxBase = {
+          name: rcpt.name || '',
+          eventTitle,
+          eventStart,
+          eventLink,
+          promoTitle,
+          promoLink,
+          balance,
+          balanceFmt: fmtAmount(balance),
+        };
+        const ctxHtml = {
+          ...ctxBase,
+          eventLinkHtml,
+          promoLinkHtml,
+        };
+
+        // If a known template is selected and no explicit content provided, auto-build content
+        let subj = subject;
+        let h = html; let t = text;
+        if (!h && !t && template) {
+          if (template === 'payment_reminder') {
+            subj = `Payment reminder: ${eventTitle}`;
+            t = `Hi {{name}}\n\nThis is a friendly reminder that you have an outstanding balance of {{balance}} for {{event.title}}.\nEvent starts: {{event.start}}\n\nPlease settle your balance to secure your tickets. Thank you!`;
+            h = `
+              <div style="font-family:Arial,sans-serif;line-height:1.6;color:#333">
+                <h2>Payment reminder</h2>
+                <p>Hi {{name}},</p>
+                <p>You have an outstanding balance of <strong>{{balance}}</strong> for <strong>{{event.title}}</strong>.</p>
+                ${eventStart ? `<p><strong>Event starts:</strong> {{event.start}}</p>` : ''}
+                <p>Please settle your balance to secure your tickets. Thank you!</p>
+              </div>`;
+          } else if (template === 'event_reminder') {
+            subj = `Reminder: ${eventTitle} on ${eventStart || ''}`.trim();
+            t = `Hi {{name}}\n\nA quick reminder about {{event.title}}.\nStart: {{event.start}}\n\nWe look forward to seeing you!`;
+            h = `
+              <div style="font-family:Arial,sans-serif;line-height:1.6;color:#333">
+                <h2>Event reminder</h2>
+                <p>Hi {{name}},</p>
+                <p>This is a reminder for <strong>{{event.title}}</strong>.</p>
+                ${eventStart ? `<p><strong>Start:</strong> {{event.start}}</p>` : ''}
+                <p>We look forward to seeing you!</p>
+              </div>`;
+          }
+        }
+
+        // Always perform placeholder replacement on whatever we have
+        const finalSubject = replacePlaceholders(subj || '', ctxBase);
+        const finalHtml = h ? replacePlaceholders(h, ctxHtml) : undefined;
+        const finalText = (!h ? replacePlaceholders(t || '', ctxBase) : undefined);
+
+        await sendMail({ to: rcpt.email, subject: finalSubject, html: finalHtml, text: finalText });
+        sent++;
+      } catch (e) {
+        try { console.warn('[email-attendees] Failed for', rcpt.email, e?.message || e); } catch {}
+      }
+    }
+
+    return res.json({ eventId, matched: recipients.length, sent, template: template || 'custom' });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Send WhatsApp message to event attendees with filters and preview support
+// @route   POST /api/events/:id/whatsapp-attendees
+// @access  Private/Supervisor or Admin
+const whatsappEventAttendees = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    const { message, filter, dryRun, template } = req.body || {};
+
+    if (template !== 'tickets' && !message) {
+      res.status(400);
+      throw new Error('message is required unless template is "tickets"');
+    }
+
+    const event = await prisma.event.findUnique({ where: { id: eventId } });
+    if (!event) { res.status(404); throw new Error('Event not found'); }
+
+    const where = { eventId };
+    const statusFilter = (filter && filter.status) ? String(filter.status) : 'any';
+    if (statusFilter === 'paid') {
+      where.status = 'paid';
+    } else if (statusFilter === 'unpaid') {
+      where.status = { in: ['pending', 'partial_paid'] };
+    } else if (statusFilter === 'partial_paid') {
+      where.status = 'partial_paid';
+    } else if (statusFilter === 'cancelled') {
+      where.status = 'cancelled';
+    }
+
+    const attendeeIds = Array.isArray(filter?.attendeeIds) ? filter.attendeeIds.filter((x) => typeof x === 'string' && x.trim().length > 0) : [];
+    if (attendeeIds.length > 0) {
+      where.userId = { in: attendeeIds };
+    }
+
+    const nameQ = (filter && filter.name) ? String(filter.name).trim() : '';
+    const phoneQ = (filter && filter.phone) ? String(filter.phone).trim() : '';
+
+    const registrations = await prisma.registration.findMany({
+      where,
+      include: {
+        user: { select: { id: true, name: true, email: true, phoneNumber: true, notificationPreference: true, isActive: true } },
+        registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+        payments: true,
+      },
+      orderBy: { createdAt: 'asc' }
+    });
+
+    const { isValidZAPhone, normalizeZAPhone } = require('../utils/whatsapp');
+
+    let filtered = registrations.filter(r => {
+      if (!r.user) return false;
+      if (r.user.email && r.user.email.endsWith('@guest.local')) return false;
+      if (r.user.isActive === false) return false;
+      if (!isValidZAPhone(r.user.phoneNumber)) return false;
+      return true;
+    });
+
+    if (nameQ) {
+      const q = nameQ.toLowerCase();
+      filtered = filtered.filter(r => (r.user?.name || '').toLowerCase().includes(q));
+    }
+    if (phoneQ) {
+      filtered = filtered.filter(r => (r.user?.phoneNumber || '').includes(phoneQ));
+    }
+
+    // Unique recipients by phone number
+    const uniqMap = new Map();
+    for (const r of filtered) {
+      const phone = normalizeZAPhone(r.user?.phoneNumber);
+      if (!phone) continue;
+      if (!uniqMap.has(phone)) {
+        uniqMap.set(phone, { phone, name: r.user?.name || '', userId: r.user?.id, registrationId: r.id });
+      }
+    }
+    const recipients = Array.from(uniqMap.values());
+
+    if (dryRun) {
+      return res.json({ eventId, matched: recipients.length, recipients: recipients.slice(0, 20) });
+    }
+
+    const { sendText } = require('../utils/whatsapp');
+    const { computeRegistrationTotalDue } = require('../utils/pricing');
+
+    function fmtAmount(amt) {
+      const n = Number(amt || 0);
+      return `R${n.toFixed(2)}`;
+    }
+    function fmtDate(d) {
+      try { return new Date(d).toLocaleString(); } catch { return String(d); }
+    }
+    function replacePlaceholders(str, ctx) {
+      if (!str) return str;
+      return String(str)
+        .replace(/\{\{\s*name\s*\}\}/g, ctx.name || '')
+        .replace(/\{\{\s*event\.title\s*\}\}/g, ctx.eventTitle || '')
+        .replace(/\{\{\s*event\.start\s*\}\}/g, ctx.eventStart || '')
+        .replace(/\{\{\s*event\.(link|url)\s*\}\}/g, ctx.eventLink || '')
+        .replace(/\{\{\s*balance\s*\}\}/g, ctx.balanceFmt || '');
+    }
+
+    const regsByPhone = new Map();
+    for (const r of registrations) {
+      const phone = normalizeZAPhone(r.user?.phoneNumber);
+      if (!phone) continue;
+      if (!regsByPhone.has(phone)) regsByPhone.set(phone, []);
+      regsByPhone.get(phone).push(r);
+    }
+
+    const eventTitle = event?.title || 'the event';
+    const eventStart = event?.startDate ? fmtDate(event.startDate) : '';
+    const baseUrl = (process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, '');
+    const eventLink = `${baseUrl}/events/${encodeURIComponent(event.id)}`;
+
+    let sent = 0;
+
+    // Special handling for tickets template: send ticket PDFs via WhatsApp
+    if (template === 'tickets') {
+      const { emailTickets } = require('./ticketController');
+      for (const rcpt of recipients) {
+        try {
+          const regs = regsByPhone.get(rcpt.phone) || [];
+          for (const reg of regs) {
+            const mockReq = { user: { id: reg.userId }, body: { registrationId: reg.id } };
+            const mockRes = { status: () => mockRes, json: () => {} };
+            await emailTickets(mockReq, mockRes);
+          }
+          sent++;
+        } catch (e) {
+          try { console.warn('[whatsapp-attendees tickets] Failed for', rcpt.phone, e?.message || e); } catch {}
+        }
+      }
+      return res.json({ eventId, matched: recipients.length, sent, template: 'tickets' });
+    }
+
+    for (const rcpt of recipients) {
+      try {
+        const regs = regsByPhone.get(rcpt.phone) || [];
+        let totalDue = 0; let totalPaid = 0;
+        for (const r of regs) {
+          const due = computeRegistrationTotalDue(r, new Date());
+          const paid = (r.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+          totalDue += due; totalPaid += paid;
+        }
+        const balance = Math.max(totalDue - totalPaid, 0);
+        const ctx = {
+          name: rcpt.name || '',
+          eventTitle,
+          eventStart,
+          eventLink,
+          balance,
+          balanceFmt: fmtAmount(balance),
+        };
+
+        let msg = message;
+        if (!msg && template === 'payment_reminder') {
+          msg = `Hi {{name}}\n\nThis is a friendly reminder that you have an outstanding balance of {{balance}} for {{event.title}}.\nEvent starts: {{event.start}}\n\nPlease settle your balance to secure your tickets. Thank you!`;
+        } else if (!msg && template === 'event_reminder') {
+          msg = `Hi {{name}}\n\nA quick reminder about {{event.title}}.\nStart: {{event.start}}\n\nWe look forward to seeing you!`;
+        }
+
+        const finalMessage = replacePlaceholders(msg || '', ctx);
+        await sendText(rcpt.phone, finalMessage);
+        sent++;
+      } catch (e) {
+        try { console.warn('[whatsapp-attendees] Failed for', rcpt.phone, e?.message || e); } catch {}
+      }
+    }
+
+    return res.json({ eventId, matched: recipients.length, sent, template: template || 'custom' });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Schedule email to attendees at a specific date/time
+// @route   POST /api/events/:id/email-attendees/schedule
+// @access  Private/Supervisor or Admin
+const scheduleEmailEventAttendees = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    const { scheduledAt, subject, html, text, filter, template } = req.body || {};
+
+    // Validate event
+    const event = await prisma.event.findUnique({ where: { id: eventId } });
+    if (!event) { res.status(404); throw new Error('Event not found'); }
+
+    // Validate date
+    if (!scheduledAt) { res.status(400); throw new Error('scheduledAt is required'); }
+    const when = new Date(scheduledAt);
+    if (isNaN(when.getTime())) { res.status(400); throw new Error('scheduledAt must be a valid ISO date-time'); }
+
+    // For non-ticket templates or custom messages, require subject and content
+    if ((template !== 'tickets') && (!subject || !(html || text))) {
+      res.status(400);
+      throw new Error('Subject and message (html or text) are required unless template is "tickets"');
+    }
+
+    // Build payload matching emailEventAttendees body
+    const payload = { subject, html, text, filter: filter || {}, template };
+
+    const { addJob } = require('../utils/scheduledEmails');
+    const created = addJob({
+      eventId,
+      createdById: req.user?.id || null,
+      scheduledAt: when.toISOString(),
+      payload,
+    });
+
+    return res.status(201).json({ message: 'Email scheduled', job: created });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Schedule WhatsApp message to attendees at a specific date/time
+// @route   POST /api/events/:id/whatsapp-attendees/schedule
+// @access  Private/Supervisor or Admin
+const scheduleWhatsappEventAttendees = async (req, res) => {
+  try {
+    const eventId = req.params.id;
+    const { scheduledAt, message, filter, template } = req.body || {};
+
+    const event = await prisma.event.findUnique({ where: { id: eventId } });
+    if (!event) { res.status(404); throw new Error('Event not found'); }
+
+    if (!scheduledAt) { res.status(400); throw new Error('scheduledAt is required'); }
+    const when = new Date(scheduledAt);
+    if (isNaN(when.getTime())) { res.status(400); throw new Error('scheduledAt must be a valid ISO date-time'); }
+
+    if (template !== 'tickets' && !message) {
+      res.status(400);
+      throw new Error('message is required unless template is "tickets"');
+    }
+
+    const payload = { message, filter: filter || {}, template };
+
+    const { addJob } = require('../utils/scheduledEmails');
+    const created = addJob({
+      eventId,
+      channel: 'whatsapp',
+      createdById: req.user?.id || null,
+      scheduledAt: when.toISOString(),
+      payload,
+    });
+
+    return res.status(201).json({ message: 'WhatsApp message scheduled', job: created });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+/**
+ * @desc    Get event by redirectUrl (alias)
+ * @route   GET /api/events/by-alias/:redirectUrl
+ * @access  Public
+ */
+const getEventByAlias = async (req, res) => {
+  const { redirectUrl } = req.params;
+
+  try {
+    const event = await prisma.event.findFirst({
+      where: {
+        redirectUrl: {
+          equals: redirectUrl,
+          mode: 'insensitive',
+        },
+        isActive: true,
+      },
+      select: {
+        id: true,
+        title: true,
+        description: true,
+        startDate: true,
+        endDate: true,
+        registrationDeadline: true,
+        goLiveAt: true,
+        price: true,
+        picture: true,
+        isActive: true,
+        redirectUrl: true,
+      },
+    });
+
+    if (!event) {
+      return res.status(404).json({ message: 'Event not found or inactive' });
+    }
+
+    const now = new Date();
+    const start = event.startDate ? new Date(event.startDate) : null;
+    const end = event.endDate ? new Date(event.endDate) : null;
+    const isLive =
+        (!start || start >= now) &&
+        (!end || end >= now);
+
+    res.json({ ...event, isLive });
+  } catch (error) {
+    console.error('[getEventByAlias] Error:', error);
+    res.status(500).json({ message: 'Internal server error' });
+  }
+};
+
+module.exports = {
+  createEvent,
+  getEvents,
+  getAllEvents,
+  getEventsAll,
+  getEventById,
+  updateEvent,
+  getEventNotifyRecipients,
+  updateEventNotifyRecipients,
+  deleteEvent,
+  createEventOption,
+  updateEventOption,
+  deleteEventOption,
+  createOptionVariant,
+  updateOptionVariant,
+  deleteOptionVariant,
+  listEventAttachments,
+  uploadEventAttachment,
+  deleteEventAttachment,
+  attachmentsStatus,
+  attachmentsSync,
+  emailEventAttendees,
+  scheduleEmailEventAttendees,
+  whatsappEventAttendees,
+  scheduleWhatsappEventAttendees,
+  getEventByAlias
+};
\ No newline at end of file
diff --git a/backend/src/controllers/formController.js b/backend/src/controllers/formController.js
new file mode 100644
index 0000000..b1fb547
--- /dev/null
+++ b/backend/src/controllers/formController.js
@@ -0,0 +1,52 @@
+const prisma = require('../config/db');
+
+// @desc    List submitted form responses with optional filters
+// @route   GET /api/forms/responses
+// @access  Private/Staff (admin, supervisor, staff)
+const listFormResponses = async (req, res) => {
+  try {
+    const { eventId, userId, registrationId, limit, cursor } = req.query;
+
+    // Build where clause
+    const where = {};
+    if (registrationId) {
+      where.registrationId = String(registrationId);
+    }
+    // For eventId/userId we filter through the related registration
+    const registrationFilter = {};
+    if (eventId) registrationFilter.eventId = String(eventId);
+    if (userId) registrationFilter.userId = String(userId);
+    if (Object.keys(registrationFilter).length > 0) {
+      // Prisma relation filter requires `is` wrapper
+      where.registration = { is: registrationFilter };
+    }
+
+    // Basic pagination (optional)
+    const take = Math.min(Math.max(parseInt(limit || '50', 10) || 50, 1), 200);
+    const cursorClause = cursor ? { id: String(cursor) } : undefined;
+
+    const responses = await prisma.formResponse.findMany({
+      where,
+      include: {
+        registration: {
+          include: {
+            user: { select: { id: true, name: true, email: true } },
+            event: { select: { id: true, title: true } },
+          }
+        },
+        answers: { include: { field: true } },
+      },
+      orderBy: { createdAt: 'desc' },
+      take,
+      ...(cursorClause ? { skip: 1, cursor: cursorClause } : {}),
+    });
+
+    const nextCursor = responses.length === take ? responses[responses.length - 1].id : null;
+
+    res.json({ items: responses, nextCursor });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+module.exports = { listFormResponses };
diff --git a/backend/src/controllers/paymentController.js b/backend/src/controllers/paymentController.js
new file mode 100644
index 0000000..804ba0e
--- /dev/null
+++ b/backend/src/controllers/paymentController.js
@@ -0,0 +1,1205 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const { generateTicketsForRegistration } = require('../utils/ticketUtils');
+const { computeRegistrationTotalDue, refreshPricingForRegistration } = require('../utils/pricing');
+const axios = require('axios');
+const { emailTickets } = require('./ticketController');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const { assertEventOpen } = require('../utils/cashupUtils');
+
+// @desc    Create a new payment
+// @route   POST /api/payments
+// @access  Private/Supervisor
+const createPayment = async (req, res) => {
+  try {
+    const { amount, method, registrationId, eventId, isDonation, paidAt, userId: bodyUserId } = req.body;
+
+    let userId = req.user.id;
+
+    // Allow admins/supervisors to create payments for other users
+    if (bodyUserId) {
+      if (req.user.role !== 'admin' && req.user.role !== 'supervisor') {
+        res.status(403);
+        throw new Error('Not authorized to create payments for other users');
+      }
+
+      // Ensure target user exists
+      const targetUser = await prisma.user.findUnique({
+        where: { id: bodyUserId }
+      });
+
+      if (!targetUser) {
+        res.status(404);
+        throw new Error('Target user not found');
+      }
+
+      userId = bodyUserId;
+    }
+
+    // Optional backdate support for supervisors/admins
+    let paidAtDate = null;
+    if (paidAt) {
+      const d = new Date(paidAt);
+      if (!isNaN(d.getTime())) {
+        // Disallow future-dated payments; clamp to now
+        const now = new Date();
+        paidAtDate = d > now ? now : d;
+      }
+    }
+
+    // Validate payment data
+    if (!amount || amount <= 0) {
+      res.status(400);
+      throw new Error('Invalid payment amount');
+    }
+
+    if (!method) {
+      res.status(400);
+      throw new Error('Payment method is required');
+    }
+
+    // Validate required parameters based on isDonation flag
+    if (isDonation && !eventId) {
+      res.status(400);
+      throw new Error('Event ID is required for donations');
+    }
+
+    if (!isDonation && !registrationId) {
+      res.status(400);
+      throw new Error('Registration ID is required for non-donation payments');
+    }
+
+    let registrationEventId = null;
+    // Full registration object reused for both the auth check and the payment calculation below
+    let registration = null;
+
+    // If it's a registration payment, fetch everything needed in one query (avoids a duplicate fetch later)
+    if (registrationId) {
+      registration = await prisma.registration.findUnique({
+        where: { id: registrationId },
+        include: {
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true,
+          user: { select: { id: true } }
+        }
+      });
+
+      if (!registration) {
+        res.status(404);
+        throw new Error('Registration not found');
+      }
+
+      registrationEventId = registration.eventId;
+
+      if (registration.userId !== userId && req.user.role !== 'admin' && req.user.role !== 'supervisor') {
+        res.status(403);
+        throw new Error('Not authorized to make payment for this registration');
+      }
+
+      await assertEventOpen(registrationEventId, res);
+    }
+
+    // If it's an event donation, check if event exists
+    if (eventId && !registrationId) {
+      const event = await prisma.event.findUnique({
+        where: { id: eventId }
+      });
+
+      if (!event) {
+        res.status(404);
+        throw new Error('Event not found');
+      }
+
+      if (!event.isActive) {
+        res.status(400);
+        throw new Error('Cannot make donation to inactive event');
+      }
+
+      if (event.cashupStatus === 'closed') {
+        res.status(400);
+        throw new Error('This event is closed and no longer accepting donations.');
+      }
+    }
+
+    // Create payment(s) with support for overpayments becoming donations
+    let payment;
+    let donationSplit = null;
+
+    // If this is a registration payment, we need to cap the applied amount and split any excess as a donation
+    if (!isDonation && registrationId) {
+      // Silently refresh early-bird prices so totalDue reflects any expired or exhausted tiers.
+      // For manual (supervisor) payments we don't block — we just ensure the totalDue is accurate.
+      try { await refreshPricingForRegistration(registrationId); } catch (e) { console.warn('Price refresh failed for manual payment:', e?.message); }
+      // Re-fetch after refresh so priceSnapshot values are current
+      registration = await prisma.registration.findUnique({
+        where: { id: registrationId },
+        include: {
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true,
+          user: { select: { id: true } }
+        }
+      });
+
+      // Calculate remaining amount to be paid (at payment time)
+      const totalDue = computeRegistrationTotalDue(registration, paidAtDate || new Date());
+      const totalPaid = registration.payments.reduce((sum, p) => sum + p.amount, 0);
+      const remainingAmount = Math.max(totalDue - totalPaid, 0);
+
+      const requestedAmount = parseFloat(amount);
+      const applyAmount = Math.min(requestedAmount, remainingAmount);
+      const excess = Math.max(requestedAmount - applyAmount, 0);
+
+      // If there's nothing remaining, treat the whole payment as a donation to the event
+      if (applyAmount <= 0) {
+        payment = await prisma.payment.create({
+          data: {
+            id: uuidv4(),
+            amount: requestedAmount,
+            method,
+            userId,
+            registrationId: null,
+            eventId: registration.eventId,
+            isDonation: true,
+            createdAt: paidAtDate || undefined
+          },
+          include: {
+            user: { select: { id: true, name: true, email: true } },
+            event: true
+          }
+        });
+      } else {
+        // Create the main registration payment for the capped amount
+        payment = await prisma.payment.create({
+          data: {
+            id: uuidv4(),
+            amount: applyAmount,
+            method,
+            userId,
+            registrationId,
+            eventId: registrationEventId || eventId || null,
+            isDonation: false,
+            createdAt: paidAtDate || undefined
+          },
+          include: {
+            user: { select: { id: true, name: true, email: true } },
+            registration: { include: { event: true } },
+            event: (registrationEventId || eventId) ? true : undefined
+          }
+        });
+
+        // If there is an excess, create a donation payment linked to the original payment
+        if (excess > 0) {
+          donationSplit = await prisma.payment.create({
+            data: {
+              id: uuidv4(),
+              amount: excess,
+              method,
+              userId,
+              registrationId: null,
+              eventId: registration.eventId,
+              isDonation: true,
+              originalPaymentId: payment.id,
+              createdAt: paidAtDate || undefined
+            }
+          });
+        }
+      }
+    } else {
+      // Original behavior for donations or non-registration payments
+      payment = await prisma.payment.create({
+        data: {
+          id: uuidv4(),
+          amount: parseFloat(amount),
+          method,
+          userId,
+          registrationId: registrationId || null,
+          eventId: registrationEventId || eventId || null,
+          isDonation: isDonation || false,
+          createdAt: paidAtDate || undefined
+        },
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+          registration: registrationId ? { include: { event: true } } : undefined,
+          event: (registrationEventId || eventId) ? true : undefined
+        }
+      });
+    }
+
+    // If it's a registration payment, update registration status
+    let updatedRegistration = null;
+    let generatedTickets = [];
+    
+    if (registrationId) {
+      const registration = await prisma.registration.findUnique({
+        where: { id: registrationId },
+        include: {
+          registrationOptions: {
+            include: {
+              eventOption: { include: { earlyBirdTiers: true } }
+            }
+          },
+          payments: true
+        }
+      });
+
+      // Calculate total amount paid
+      const totalPaid = registration.payments.reduce((sum, payment) => sum + payment.amount, 0);
+
+      // Calculate total amount due at this time (respect early-bird tiers)
+      const totalDue = computeRegistrationTotalDue(registration, paidAtDate || new Date());
+
+      // Update registration status based on payment
+      let newStatus;
+      if (totalPaid >= totalDue) {
+        newStatus = 'paid';
+      } else if (totalPaid > 0) {
+        newStatus = 'partial_paid';
+      } else {
+        newStatus = 'pending';
+      }
+
+      updatedRegistration = await prisma.registration.update({
+        where: { id: registrationId },
+        data: {
+          status: newStatus,
+          updatedAt: new Date()
+        }
+      });
+      
+      // Generate tickets when registration is fully paid (sync — populates generatedTickets for response)
+      if (newStatus === 'paid') {
+        try {
+          generatedTickets = await generateTicketsForRegistration(registrationId);
+        } catch (error) {
+          console.error('Error generating tickets:', error);
+        }
+      }
+    }
+
+    // Fire-and-forget: payment email first, then tickets (guarantees order)
+    const { sendPaymentEmails } = require('../utils/notifications');
+    const _cpPaymentId = payment?.id;
+    const _cpDonationId = donationSplit?.id;
+    const _cpShouldEmailTickets = generatedTickets.length > 0;
+    const _cpUserId = registration?.userId;
+    const _cpRegId = registrationId;
+    (async () => {
+      if (_cpPaymentId) {
+        try { await sendPaymentEmails(_cpPaymentId); } catch (e) { console.error('Failed to send payment emails:', e); }
+      }
+      if (_cpDonationId) {
+        try { await sendPaymentEmails(_cpDonationId); } catch (e) { console.error('Failed to send payment emails:', e); }
+      }
+      if (_cpShouldEmailTickets && _cpUserId) {
+        const mockReq = { user: { id: _cpUserId }, body: { registrationId: _cpRegId } };
+        const mockRes = { status: () => mockRes, json: () => {} };
+        try { await emailTickets(mockReq, mockRes); } catch (e) { console.error('Error emailing tickets:', e); }
+      }
+    })();
+
+    // If registration was updated, include the updated registration in the response
+    if (updatedRegistration) {
+      // Create a new payment object with the updated registration
+      const paymentWithUpdatedRegistration = {
+        ...payment,
+        registration: {
+          ...payment.registration,
+          ...updatedRegistration
+        },
+        generatedTickets: generatedTickets.length > 0 ? generatedTickets : undefined,
+        donationSplit: donationSplit || undefined
+      };
+      res.status(201).json(paymentWithUpdatedRegistration);
+    } else {
+      res.status(201).json({ ...payment, donationSplit: donationSplit || undefined });
+    }
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get all payments
+// @route   GET /api/payments
+// @access  Private/Admin
+const getPayments = async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page)  || 1);
+    const limit = Math.min(200, Math.max(1, parseInt(req.query.limit) || 100));
+    const skip  = (page - 1) * limit;
+
+    const include = {
+      user: { select: { id: true, name: true, email: true } },
+      registration: {
+        include: {
+          event: true,
+          user: { select: { name: true, email: true, phoneNumber: true } }
+        }
+      },
+      event: true
+    };
+
+    const [payments, total] = await prisma.$transaction([
+      prisma.payment.findMany({ include, orderBy: { createdAt: 'desc' }, skip, take: limit }),
+      prisma.payment.count()
+    ]);
+
+    res.json({ data: payments, total, page, limit, pages: Math.ceil(total / limit) });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get user payments
+// @route   GET /api/payments/mypayments
+// @access  Private
+const getUserPayments = async (req, res) => {
+  try {
+    // Users should see payments they made (donations) and payments tied to their registrations
+    const payments = await prisma.payment.findMany({
+      where: {
+        OR: [
+          { userId: req.user.id }, // payments made by the user (includes donations)
+          { registration: { userId: req.user.id } } // payments tied to the user's registrations
+        ]
+      },
+      include: {
+        registration: {
+          include: {
+            event: true
+          }
+        },
+        event: true
+      }
+    });
+
+    res.json(payments);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get payment by ID
+// @route   GET /api/payments/:id
+// @access  Private
+const getPaymentById = async (req, res) => {
+  try {
+    const payment = await prisma.payment.findUnique({
+      where: { id: req.params.id },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true
+          }
+        },
+        registration: {
+          include: {
+            event: true
+          }
+        },
+        event: true
+      }
+    });
+
+    if (!payment) {
+      res.status(404);
+      throw new Error('Payment not found');
+    }
+
+    // Check if user is authorized to view this payment
+    if (payment.userId !== req.user.id && req.user.role !== 'admin' && req.user.role !== 'supervisor' && req.user.role !== 'staff') {
+      res.status(403);
+      throw new Error('Not authorized to view this payment');
+    }
+
+    res.json(payment);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get payments by registration
+// @route   GET /api/payments/registration/:registrationId
+// @access  Private
+const getPaymentsByRegistration = async (req, res) => {
+  try {
+    const registration = await prisma.registration.findUnique({
+      where: { id: req.params.registrationId }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    // Check if user is authorized to view these payments
+    if (registration.userId !== req.user.id && req.user.role !== 'admin' && req.user.role !== 'supervisor' && req.user.role !== 'staff') {
+      res.status(403);
+      throw new Error('Not authorized to view these payments');
+    }
+
+    const payments = await prisma.payment.findMany({
+      where: { registrationId: req.params.registrationId },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true
+          }
+        }
+      }
+    });
+
+    res.json(payments);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get payments by event
+// @route   GET /api/payments/event/:eventId
+// @access  Private/Admin
+const getPaymentsByEvent = async (req, res) => {
+  try {
+    const limit = Math.min(1000, Math.max(1, parseInt(req.query.limit) || 1000));
+
+    const payments = await prisma.payment.findMany({
+      where: {
+        OR: [
+          { eventId: req.params.eventId },
+          { registration: { eventId: req.params.eventId } }
+        ]
+      },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        registration: {
+          include: { user: { select: { id: true, name: true, email: true } } }
+        }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: limit
+    });
+
+    res.json(payments);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Assign a donation to a registration
+// @route   PUT /api/payments/assign-donation
+// @access  Private/Supervisor
+const assignDonationToRegistration = async (req, res) => {
+  try {
+    const { paymentId, registrationId, amount } = req.body;
+
+    // Validate required parameters
+    if (!paymentId || !registrationId) {
+      res.status(400);
+      throw new Error('Payment ID and Registration ID are required');
+    }
+
+    // Find the payment
+    const payment = await prisma.payment.findUnique({
+      where: { id: paymentId }
+    });
+
+    if (!payment) {
+      res.status(404);
+      throw new Error('Payment not found');
+    }
+
+    // Check if payment is a donation
+    if (!payment.isDonation) {
+      res.status(400);
+      throw new Error('Only donations can be assigned to registrations');
+    }
+
+    // Check if payment is already assigned to a registration
+    if (payment.registrationId) {
+      res.status(400);
+      throw new Error('This payment is already assigned to a registration');
+    }
+
+    if (payment.eventId) {
+      const donationEvent = await prisma.event.findUnique({ where: { id: payment.eventId }, select: { cashupStatus: true } });
+      if (donationEvent && donationEvent.cashupStatus === 'closed') {
+        res.status(400);
+        throw new Error('Event is closed; donations can no longer be allocated');
+      }
+    }
+
+    // Find the registration
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: { include: { earlyBirdTiers: true } }
+          }
+        },
+        payments: true
+      }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    // The check above only covers the donation's own event — also block allocating into a
+    // registration whose event is closed, even if the donation itself came from an open one.
+    await assertEventOpen(registration.eventId, res);
+
+    // Calculate total amount due for the registration
+    const totalDue = computeRegistrationTotalDue(registration, new Date());
+
+    // Calculate total amount already paid
+    const totalPaid = registration.payments.reduce((sum, payment) => sum + payment.amount, 0);
+
+    // Calculate remaining amount to be paid
+    const remainingAmount = totalDue - totalPaid;
+
+    // If registration is already paid in full
+    if (remainingAmount <= 0) {
+      res.status(400);
+      throw new Error('This registration is already paid in full');
+    }
+
+    // How much of the donation to apply — defaults to today's behaviour (as much as the
+    // donation covers, capped at what's owed) but staff can specify a smaller amount and
+    // deliberately leave the registrant owing a balance.
+    let allocateAmount = amount != null ? Number(amount) : Math.min(payment.amount, remainingAmount);
+    if (!(allocateAmount > 0) || Number.isNaN(allocateAmount)) {
+      res.status(400);
+      throw new Error('Allocation amount must be greater than zero');
+    }
+    if (allocateAmount > payment.amount) {
+      res.status(400);
+      throw new Error('Cannot allocate more than the donation amount');
+    }
+    if (allocateAmount > remainingAmount) {
+      res.status(400);
+      throw new Error(`Cannot allocate more than the outstanding balance of R${remainingAmount.toFixed(2)}`);
+    }
+
+    let updatedRegistration;
+    let generatedTickets = [];
+    let originalPaymentId = payment.id;
+    let splitPayment = null;
+
+    // Update the payment to be associated with the registration and adjust amount
+    await prisma.payment.update({
+      where: { id: payment.id },
+      data: {
+        registrationId,
+        amount: allocateAmount,
+        isDonation: false
+      }
+    });
+
+    // If less than the full donation was allocated, the remainder stays as an unassigned
+    // donation (same donor, no notification — it's a bookkeeping split, not a new gift).
+    if (allocateAmount < payment.amount) {
+      const leftoverAmount = payment.amount - allocateAmount;
+
+      splitPayment = await prisma.payment.create({
+        data: {
+          id: uuidv4(),
+          amount: leftoverAmount,
+          method: payment.method,
+          userId: payment.userId,
+          eventId: payment.eventId,
+          isDonation: true,
+          externalId: payment.externalId ? `${payment.externalId}-split` : null,
+          status: payment.status,
+          originalPaymentId: payment.id,
+          createdAt: payment.createdAt
+        }
+      });
+    }
+
+    if (allocateAmount >= remainingAmount) {
+      // Fully covers what's owed
+      updatedRegistration = await prisma.registration.update({
+        where: { id: registrationId },
+        data: {
+          status: 'paid',
+          updatedAt: new Date()
+        }
+      });
+
+      // Generate tickets (sync — populates generatedTickets for response)
+      try {
+        generatedTickets = await generateTicketsForRegistration(registrationId);
+      } catch (error) {
+        console.error('Error generating tickets:', error);
+      }
+    } else {
+      updatedRegistration = await prisma.registration.update({
+        where: { id: registrationId },
+        data: {
+          status: 'partial_paid',
+          updatedAt: new Date()
+        }
+      });
+    }
+
+    // Fire-and-forget: notify the registrant (not the donor — see sendDonationAssignmentEmails),
+    // then tickets (guarantees order). The split/leftover payment is never notified.
+    const { sendDonationAssignmentEmails } = require('../utils/notifications');
+    const _adPaymentId = payment?.id;
+    const _adShouldEmailTickets = generatedTickets.length > 0;
+    const _adUserId = registration?.userId;
+    const _adRegId = registrationId;
+    (async () => {
+      if (_adPaymentId) {
+        try { await sendDonationAssignmentEmails(_adPaymentId); } catch (e) { console.error('Failed to send emails after assigning donation:', e); }
+      }
+      if (_adShouldEmailTickets && _adUserId) {
+        const mockReq = { user: { id: _adUserId }, body: { registrationId: _adRegId } };
+        const mockRes = { status: () => mockRes, json: () => {} };
+        try { await emailTickets(mockReq, mockRes); } catch (e) { console.error('Error emailing tickets after assigning donation:', e); }
+      }
+    })();
+
+    // Prepare response
+    const result = {
+      message: 'Donation successfully assigned to registration',
+      originalPaymentId,
+      updatedRegistration,
+      generatedTickets: generatedTickets.length > 0 ? generatedTickets : undefined,
+      splitPayment: splitPayment ? {
+        ...splitPayment,
+        originalPaymentId: payment.id
+      } : null
+    };
+
+    res.status(200).json(result);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// Internal helper: create a Yoco checkout for a registration and return { checkoutId, redirectUrl, amount }
+// Does NOT check user authorization — callers are responsible for ensuring the user owns the registration.
+async function createRegistrationCheckoutInternal(registrationId, userId, { successUrl, cancelUrl, failureUrl } = {}) {
+  const registration = await prisma.registration.findUnique({
+    where: { id: registrationId },
+    include: {
+      registrationOptions: {
+        include: {
+          eventOption: { include: { earlyBirdTiers: true } },
+          variant: true,
+        }
+      },
+      payments: true,
+      user: { select: { id: true, name: true, email: true } },
+      event: true
+    }
+  });
+
+  if (!registration) throw new Error('Registration not found');
+
+  const totalDue = computeRegistrationTotalDue(registration, new Date());
+  const totalPaid = registration.payments.reduce((sum, p) => sum + p.amount, 0);
+  const remainingAmount = totalDue - totalPaid;
+
+  if (remainingAmount <= 0) throw new Error('This registration is already paid in full');
+
+  const amountInCents = Math.round(remainingAmount * 100);
+  const idempotencyKey = `reg_${registrationId}_${amountInCents}_${Date.now()}`;
+  const now = new Date();
+
+  const lastPaymentAt = registration.payments.length > 0
+    ? new Date(Math.max(...registration.payments.map(p => new Date(p.createdAt).getTime())))
+    : null;
+
+  const lineItems = registration.registrationOptions.map(option => {
+    const variantLabel = option.variant?.name ? ` — ${option.variant.name}` : '';
+    // Use priceSnapshot when available (variant-aware, authoritative); fall back to deadline-only check
+    const unitPrice = (option.priceSnapshot !== null && option.priceSnapshot !== undefined)
+      ? option.priceSnapshot
+      : require('../utils/pricing').getEffectiveUnitPrice(option.eventOption, lastPaymentAt, now);
+    return {
+      displayName: `${option.eventOption.name}${variantLabel}`,
+      quantity: option.quantity,
+      pricingDetails: {
+        price: Math.round(unitPrice * 100)
+      }
+    };
+  });
+
+  // Show prior payments as a deduction line
+  if (totalPaid > 0) {
+    lineItems.push({
+      displayName: 'Previous Payments',
+      quantity: 1,
+      pricingDetails: { price: -Math.round(totalPaid * 100) }
+    });
+  }
+  // Paying full remaining — no "Partial Payment" line needed
+
+  const checkoutData = {
+    amount: amountInCents,
+    currency: 'ZAR',
+    metadata: { registrationId, userId, eventId: registration.eventId, eventTitle: registration.event.title, type: 'registration_payment' },
+    successUrl,
+    cancelUrl,
+    failureUrl,
+    lineItems
+  };
+
+  const response = await axios.post(
+    'https://payments.yoco.com/api/checkouts',
+    checkoutData,
+    { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.YOCO_SECRET_KEY}`, 'Idempotency-Key': idempotencyKey } }
+  );
+
+  await prisma.registration.update({
+    where: { id: registrationId },
+    data: { checkoutId: response.data.id, updatedAt: new Date() }
+  });
+
+  return {
+    checkoutId: response.data.id,
+    redirectUrl: response.data.redirectUrl,
+    amount: remainingAmount,
+    registration: { id: registration.id, eventId: registration.eventId, eventTitle: registration.event.title }
+  };
+}
+
+// @desc    Create a Yoco checkout for a registration
+// @route   POST /api/payments/yoco-checkout
+// @access  Private
+const createYocoCheckout = async (req, res) => {
+  try {
+    const { registrationId, eventId, amount, successUrl, cancelUrl, failureUrl } = req.body;
+    const userId = req.user.id;
+
+    // Validate required parameters for either registration payment or donation
+    if (!registrationId && !eventId) {
+      res.status(400);
+      throw new Error('Either registrationId or eventId is required');
+    }
+
+    // Branch 1: Registration payment — delegate to internal helper
+    if (registrationId) {
+      // Authorisation check (the internal helper skips this)
+      const reg = await prisma.registration.findUnique({ where: { id: registrationId }, select: { userId: true, eventId: true } });
+      if (!reg) { res.status(404); throw new Error('Registration not found'); }
+      if (reg.userId !== userId && req.user.role !== 'admin' && req.user.role !== 'supervisor') {
+        res.status(403); throw new Error('Not authorized to create checkout for this registration');
+      }
+      await assertEventOpen(reg.eventId, res);
+
+      // Refresh early-bird pricing — updates priceSnapshot if any tier has expired or sold out.
+      // Must run before totalDue is computed so the correct price is used for the checkout amount.
+      const { changed: priceChanged } = await refreshPricingForRegistration(registrationId);
+      if (priceChanged) {
+        // Re-fetch with fresh priceSnapshot values
+        const freshReg = await prisma.registration.findUnique({
+          where: { id: registrationId },
+          include: {
+            registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+            payments: true
+          }
+        });
+        const newTotal = computeRegistrationTotalDue(freshReg, new Date());
+        const totalPaid = (freshReg.payments || []).reduce((s, p) => s + p.amount, 0);
+        return res.status(200).json({
+          priceUpdated: true,
+          newTotal: Math.max(0, newTotal - totalPaid),
+          message: 'One or more early-bird prices have changed since your registration was created. Please review the updated total before proceeding.'
+        });
+      }
+
+      // If a specific partial amount was passed, fall through to the old inline path
+      if (amount && !isNaN(parseFloat(amount))) {
+        // Re-use old inline logic for partial payments
+        const registration = await prisma.registration.findUnique({
+          where: { id: registrationId },
+          include: {
+            registrationOptions: {
+              include: {
+                eventOption: { include: { earlyBirdTiers: true } },
+                variant: true,
+              }
+            },
+            payments: true,
+            user: { select: { id: true, name: true, email: true } },
+            event: true
+          }
+        });
+        const totalDue = computeRegistrationTotalDue(registration, new Date());
+        const totalPaid = registration.payments.reduce((sum, p) => sum + p.amount, 0);
+        const remainingAmount = totalDue - totalPaid;
+        if (remainingAmount <= 0) { res.status(400); throw new Error('This registration is already paid in full'); }
+        const requested = parseFloat(amount);
+        if (requested <= 0) { res.status(400); throw new Error('Amount must be greater than 0'); }
+        if (remainingAmount >= 15 && requested < 15) { res.status(400); throw new Error('Minimum payment is R15'); }
+        const charge = Math.min(requested, remainingAmount);
+        const amountInCents = Math.round(charge * 100);
+        const now = new Date();
+        const lastPaymentAt = registration.payments.length > 0
+          ? new Date(Math.max(...registration.payments.map(p => new Date(p.createdAt).getTime())))
+          : null;
+        const lineItems = registration.registrationOptions.map(option => {
+          const variantLabel = option.variant?.name ? ` — ${option.variant.name}` : '';
+          const unitPrice = (option.priceSnapshot !== null && option.priceSnapshot !== undefined)
+            ? option.priceSnapshot
+            : require('../utils/pricing').getEffectiveUnitPrice(option.eventOption, lastPaymentAt, now);
+          return {
+            displayName: `${option.eventOption.name}${variantLabel}`,
+            quantity: option.quantity,
+            pricingDetails: { price: Math.round(unitPrice * 100) }
+          };
+        });
+        // Previous payments deduction
+        if (totalPaid > 0) {
+          lineItems.push({ displayName: 'Previous Payments', quantity: 1, pricingDetails: { price: -Math.round(totalPaid * 100) } });
+        }
+        // Partial payment deduction — amount being deferred to a future payment
+        if (charge < remainingAmount) {
+          lineItems.push({ displayName: 'Partial Payment', quantity: 1, pricingDetails: { price: -Math.round((remainingAmount - charge) * 100) } });
+        }
+        const checkoutData = { amount: amountInCents, currency: 'ZAR', metadata: { registrationId, userId, eventId: registration.eventId, eventTitle: registration.event.title, type: 'registration_payment' }, successUrl, cancelUrl, failureUrl, lineItems };
+        const response = await axios.post('https://payments.yoco.com/api/checkouts', checkoutData, { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.YOCO_SECRET_KEY}`, 'Idempotency-Key': `reg_${registrationId}_${amountInCents}_${Date.now()}` } });
+        await prisma.registration.update({ where: { id: registrationId }, data: { checkoutId: response.data.id, updatedAt: new Date() } });
+        return res.status(200).json({ checkoutId: response.data.id, redirectUrl: response.data.redirectUrl, amount: charge, registration: { id: registration.id, eventId: registration.eventId, eventTitle: registration.event.title } });
+      }
+
+      const result = await createRegistrationCheckoutInternal(registrationId, userId, { successUrl, cancelUrl, failureUrl });
+      return res.status(200).json(result);
+    }
+
+    // Branch 2: Donation to an event
+    if (eventId) {
+      // Validate event
+      const event = await prisma.event.findUnique({ where: { id: eventId } });
+      if (!event) {
+        res.status(404);
+        throw new Error('Event not found');
+      }
+      if (!event.isActive) {
+        res.status(400);
+        throw new Error('Cannot make donation to inactive event');
+      }
+      if (event.cashupStatus === 'closed') {
+        res.status(400);
+        throw new Error('This event is closed and no longer accepting donations.');
+      }
+
+      const amt = parseFloat(amount);
+      if (!(amt > 0)) {
+        res.status(400);
+        throw new Error('Valid amount is required for donation');
+      }
+      if (amt < 15) {
+        res.status(400);
+        throw new Error('Minimum donation is R15');
+      }
+
+      const amountInCents = Math.round(amt * 100);
+      const idempotencyKey = `don_${eventId}_${amountInCents}_${Date.now()}`;
+      const metadata = {
+        userId,
+        eventId,
+        eventTitle: event.title,
+        type: 'donation',
+        isDonation: true
+      };
+
+      const checkoutData = {
+        amount: amountInCents,
+        currency: 'ZAR',
+        metadata,
+        successUrl,
+        cancelUrl,
+        failureUrl,
+        lineItems: [
+          { displayName: `Donation to ${event.title}`, quantity: 1, pricingDetails: { price: amountInCents } }
+        ]
+      };
+
+      const response = await axios.post(
+        'https://payments.yoco.com/api/checkouts',
+        checkoutData,
+        { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${process.env.YOCO_SECRET_KEY}`, 'Idempotency-Key': idempotencyKey } }
+      );
+
+      return res.status(200).json({
+        checkoutId: response.data.id,
+        redirectUrl: response.data.redirectUrl,
+        amount: amt,
+        event: { id: event.id, title: event.title }
+      });
+    }
+  } catch (error) {
+    console.error('Yoco checkout error:', error.response?.data || error.message);
+    res.status(error.response?.status || 400).json({ 
+      message: error.response?.data?.message || error.message 
+    });
+  }
+};
+
+// @desc    Deliver a previously-generated Yoco payment link to the registrant via email or WhatsApp
+// @route   POST /api/payments/yoco-checkout/send
+// @access  Private/Supervisor
+const sendPaymentLink = async (req, res) => {
+  try {
+    const { registrationId, redirectUrl, channel } = req.body;
+
+    if (!registrationId || !redirectUrl || !['email', 'whatsapp'].includes(channel)) {
+      res.status(400);
+      throw new Error('registrationId, redirectUrl and a valid channel are required');
+    }
+
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: { user: true, event: true }
+    });
+    if (!registration) { res.status(404); throw new Error('Registration not found'); }
+
+    const { user, event } = registration;
+    const message = `Hi ${user.name || ''}, here's your payment link for ${event?.title || 'your registration'}: ${redirectUrl}`;
+
+    if (channel === 'email') {
+      if (!user.email) { res.status(400); throw new Error('This user has no email address on file'); }
+      const { sendMail } = require('../utils/email');
+      await sendMail({
+        to: user.email,
+        subject: `Payment link — ${event?.title || 'Registration'}`,
+        text: message,
+        html: `<p>Hi ${user.name || ''},</p><p>Here's your payment link for <strong>${event?.title || 'your registration'}</strong>:</p><p><a href="${redirectUrl}">${redirectUrl}</a></p>`
+      });
+    } else {
+      const { isValidZAPhone } = require('../utils/whatsapp');
+      if (!isValidZAPhone(user.phoneNumber)) { res.status(400); throw new Error('This user has no valid WhatsApp number on file'); }
+      const { waTextAny } = require('../utils/notify');
+      await waTextAny(user, message);
+    }
+
+    return res.status(200).json({ sent: true, channel });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Create a refund (records as a negative payment)
+// @route   POST /api/payments/refund
+// @access  Private/Supervisor
+const createRefund = async (req, res) => {
+  try {
+    const { userId, amount, method, paymentId, registrationId, reason } = req.body;
+
+    // Validate role via middleware, but double-check
+    if (req.user.role !== 'admin' && req.user.role !== 'supervisor') {
+      res.status(403);
+      throw new Error('Not authorized to create refunds');
+    }
+
+    // Input validation
+    const amt = parseFloat(amount);
+    if (!(amt > 0)) {
+      res.status(400);
+      throw new Error('Refund amount must be greater than 0');
+    }
+    if (!userId) {
+      res.status(400);
+      throw new Error('User is required for refund');
+    }
+    if (!paymentId && !registrationId) {
+      res.status(400);
+      throw new Error('Either paymentId or registrationId must be provided');
+    }
+
+    let linkRegistrationId = null;
+    let linkEventId = null;
+    let originalPayment = null;
+
+    // If refunding a specific payment, fetch it and infer links
+    if (paymentId) {
+      originalPayment = await prisma.payment.findUnique({ where: { id: paymentId } });
+      if (!originalPayment) {
+        res.status(404);
+        throw new Error('Original payment not found');
+      }
+      // Optional: Ensure same user unless explicit
+      linkRegistrationId = originalPayment.registrationId || null;
+      linkEventId = originalPayment.eventId || null;
+    }
+
+    // If registrationId directly provided, ensure it exists
+    if (!linkRegistrationId && registrationId) {
+      const reg = await prisma.registration.findUnique({ where: { id: registrationId } });
+      if (!reg) {
+        res.status(404);
+        throw new Error('Registration not found');
+      }
+      linkRegistrationId = reg.id;
+      linkEventId = reg.eventId;
+    }
+
+    if (linkEventId) {
+      await assertEventOpen(linkEventId, res);
+    }
+
+    // Pre-check: If linked to a registration, determine if this refund would downgrade from paid and handle tickets
+    let willDowngradeFromPaid = false;
+    let originalStatus = null;
+    if (linkRegistrationId) {
+      const registration = await prisma.registration.findUnique({
+      where: { id: linkRegistrationId },
+      include: {
+        registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+        payments: true,
+        // Load tickets to check usage if needed
+        _count: true
+      }
+    });
+      if (registration) {
+        originalStatus = registration.status;
+        const totalPaidExisting = registration.payments.reduce((sum, p) => sum + p.amount, 0);
+        const totalDue = computeRegistrationTotalDue(registration, new Date());
+        const totalPaidAfter = totalPaidExisting - Math.abs(amt);
+        willDowngradeFromPaid = (originalStatus === 'paid') && (totalPaidAfter < totalDue);
+        if (willDowngradeFromPaid) {
+          // Check for used tickets; if any are used, block the refund
+          const regTickets = await prisma.ticket.findMany({
+            where: { registrationOption: { registrationId: linkRegistrationId } },
+            include: { usages: true }
+          });
+          const hasUsed = regTickets.some(t => t.isUsed || (t.usages && t.usages.length > 0));
+          if (hasUsed) {
+            res.status(400);
+            throw new Error('Cannot process refund because the ticket has already been used');
+          }
+        }
+      }
+    }
+
+    // Create the negative payment row
+    const negativePayment = await prisma.payment.create({
+      data: {
+        id: uuidv4(),
+        amount: -Math.abs(amt),
+        method: method || 'refund',
+        userId,
+        registrationId: linkRegistrationId,
+        eventId: linkEventId,
+        isDonation: false,
+        originalPaymentId: originalPayment ? originalPayment.id : null,
+        status: reason ? String(reason).slice(0, 255) : null
+      },
+      include: {
+        user: { select: { id: true, name: true, email: true } },
+        registration: { include: { event: true } },
+        event: true
+      }
+    });
+
+    // If tied to a registration, recalc and update status
+    if (linkRegistrationId) {
+      const registration = await prisma.registration.findUnique({
+        where: { id: linkRegistrationId },
+        include: {
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true
+        }
+      });
+      if (registration) {
+        const totalPaid = registration.payments.reduce((sum, p) => sum + p.amount, 0);
+        const totalDue = computeRegistrationTotalDue(registration, new Date());
+        let newStatus;
+        if (totalPaid >= totalDue) newStatus = 'paid';
+        else if (totalPaid > 0) newStatus = 'partial_paid';
+        else newStatus = 'pending';
+        await prisma.registration.update({ where: { id: linkRegistrationId }, data: { status: newStatus, updatedAt: new Date() } });
+
+        // If we downgraded from paid to not-paid, delete any unused tickets
+        if (originalStatus === 'paid' && newStatus !== 'paid') {
+          await prisma.ticket.deleteMany({
+            where: {
+              registrationOption: { registrationId: linkRegistrationId },
+              isUsed: false
+            }
+          });
+        }
+      }
+    }
+
+    // Fire-and-forget refund notification email
+    const { sendRefundEmail } = require('../utils/notifications');
+    sendRefundEmail(negativePayment.id).catch(e => console.error('Failed to send refund email:', e));
+
+    return res.status(201).json(negativePayment);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+const getPaymentStats = async (req, res) => {
+  try{
+    const startOfDay = new Date(new Date().setHours(0, 0, 0, 0));
+    const lastWeek = new Date(startOfDay.getTime() - 7 * 24 * 60 * 60 * 1000);
+    const lastMonth = new Date(startOfDay.getTime() - 30 * 24 * 60 * 60 * 1000);
+
+    const [totalToday, totalWeek, totalMonth] = await Promise.all([
+        prisma.payment.aggregate({
+          _sum: {
+            amount: true
+          },
+          where: {
+          createdAt: {
+            gte: startOfDay
+          }
+          }
+        }),
+        prisma.payment.aggregate({
+          _sum: {
+            amount: true
+          },
+          where: {
+          createdAt: {
+            gte: lastWeek
+          }
+          }
+        }),
+        prisma.payment.aggregate({
+          _sum: {
+            amount: true
+          },
+          where: {
+          createdAt: {
+            gte: lastMonth
+          }
+          }
+        })
+    ]);
+    res.status(200).json({
+      totalToday: totalToday._sum.amount || 0,
+      totalWeek: totalWeek._sum.amount || 0,
+      totalMonth: totalMonth._sum.amount || 0,
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+}
+
+module.exports = {
+  createPayment,
+  getPayments,
+  getUserPayments,
+  getPaymentById,
+  getPaymentsByRegistration,
+  getPaymentsByEvent,
+  assignDonationToRegistration,
+  createYocoCheckout,
+  createRegistrationCheckoutInternal,
+  sendPaymentLink,
+  createRefund,
+  getPaymentStats
+};
\ No newline at end of file
diff --git a/backend/src/controllers/registrationController.js b/backend/src/controllers/registrationController.js
new file mode 100644
index 0000000..6a9ebcf
--- /dev/null
+++ b/backend/src/controllers/registrationController.js
@@ -0,0 +1,1510 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const axios = require("axios");
+const { generateTicketsForRegistration } = require('../utils/ticketUtils');
+const { emailTickets } = require('./ticketController');
+const { hashPassword } = require('../config/auth');
+const { resolveOptionPrice, resolveVariantTierPrice, computeRegistrationTotalDue } = require('../utils/pricing');
+const { assertEventOpen } = require('../utils/cashupUtils');
+
+/**
+ * Check overall stock availability for an EventOption.
+ * Returns { available: boolean, remaining: number|null }
+ */
+async function checkOptionStock(option, requestedQty) {
+  if (!option.stockLimit || option.stockLimit === 0) return { available: true, remaining: null };
+
+  const soldAgg = await prisma.registrationOption.aggregate({
+    where: { eventOptionId: option.id, registration: { status: { not: 'cancelled' } } },
+    _sum: { quantity: true }
+  });
+  const sold = soldAgg._sum?.quantity || 0;
+  const remaining = option.stockLimit - sold;
+  return { available: remaining >= requestedQty, remaining };
+}
+
+/**
+ * Check stock availability for a specific variant.
+ */
+async function checkVariantStock(variant, requestedQty) {
+  if (!variant.stockLimit || variant.stockLimit === 0) return { available: true, remaining: null };
+
+  const soldAgg = await prisma.registrationOption.aggregate({
+    where: { variantId: variant.id, registration: { status: { not: 'cancelled' } } },
+    _sum: { quantity: true }
+  });
+  const sold = soldAgg._sum?.quantity || 0;
+  const remaining = variant.stockLimit - sold;
+  return { available: remaining >= requestedQty, remaining };
+}
+
+// @desc    Create a new registration
+// @route   POST /api/registrations
+// @access  Private
+const createRegistration = async (req, res) => {
+  try {
+    const { eventId, options, guestName, guestEmail, guestPhone } = req.body;
+
+    // Check if event exists
+    const canIncludeVariants = !!(prisma && prisma.optionVariant && typeof prisma.optionVariant.findMany === 'function');
+    const canIncludeTiers = !!(prisma && prisma.earlyBirdTier && typeof prisma.earlyBirdTier.findMany === 'function');
+    const optionInclude = canIncludeTiers
+      ? { earlyBirdTiers: true, ...(canIncludeVariants ? { variants: true } : {}) }
+      : true;
+    const event = await prisma.event.findUnique({
+      where: { id: eventId },
+      include: { eventOptions: optionInclude ? { include: optionInclude } : true }
+    });
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    if (!event.isActive) {
+      res.status(400);
+      throw new Error('Event is not active');
+    }
+
+    if (event.cashupStatus === 'closed') {
+      res.status(400);
+      throw new Error('This event is closed and no longer accepting registrations.');
+    }
+
+    // Enforce auth unless event explicitly opts out
+    const eventRequiresAuth = event.requiresAuth !== false;
+    if (eventRequiresAuth && !req.user) {
+      res.status(401);
+      throw new Error('Authentication required for this event');
+    }
+
+    // Unauthenticated guest registration is only permitted for free events
+    if (!req.user) {
+      const totalDueCheck = (event.eventOptions || []).reduce((sum, eo) => sum + (eo.price || 0), 0);
+      // Also check against the requested options specifically
+      const requestedTotal = (options || []).reduce((sum, opt) => {
+        const eo = event.eventOptions.find(o => o.id === opt.eventOptionId);
+        return sum + ((eo?.price || 0) * (opt.quantity || 1));
+      }, 0);
+      if (requestedTotal > 0) {
+        res.status(400);
+        throw new Error('Guest registration is only available for free events. Please create an account to pay for tickets.');
+      }
+    }
+
+    // Resolve userId — authenticated or guest
+    let userId;
+    if (req.user) {
+      userId = req.user.id;
+    } else {
+      // Guest registration: find existing user by email or create inactive placeholder
+      if (!guestEmail || !guestName) {
+        res.status(400);
+        throw new Error('Name and email are required for unauthenticated registration');
+      }
+      const existingGuest = await prisma.user.findUnique({ where: { email: guestEmail } });
+      if (existingGuest) {
+        userId = existingGuest.id;
+      } else {
+        const newGuest = await prisma.user.create({
+          data: {
+            id: uuidv4(),
+            name: guestName,
+            email: guestEmail,
+            password: '',
+            phoneNumber: guestPhone || null,
+            isActive: false,
+            updatedAt: new Date(),
+          }
+        });
+        userId = newGuest.id;
+      }
+    }
+
+    // Enforce registration cutoff for public registrations
+    const now = new Date();
+    const end = new Date(event.endDate);
+    const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+    if ((deadline && now >= deadline) || now >= end) {
+      res.status(400);
+      throw new Error('Registration is closed for this event');
+    }
+
+    // Validate options
+    if (!options || !Array.isArray(options) || options.length === 0) {
+      res.status(400);
+      throw new Error('At least one option must be selected');
+    }
+
+    // Validate each option and resolve prices / check stock
+    const resolvedOptions = [];
+    for (const option of options) {
+      const eventOption = event.eventOptions.find(eo => eo.id === option.eventOptionId);
+      if (!eventOption) {
+        res.status(400);
+        throw new Error(`Option with ID ${option.eventOptionId} not found for this event`);
+      }
+      if (!option.quantity || option.quantity < 1) {
+        res.status(400);
+        throw new Error('Quantity must be at least 1');
+      }
+
+      const qty = option.quantity;
+
+      // Check overall option stock
+      try {
+        const stockCheck = await checkOptionStock(eventOption, qty);
+        if (!stockCheck.available) {
+          res.status(400);
+          throw new Error(`"${eventOption.name}" is sold out or does not have enough stock (${stockCheck.remaining ?? 0} remaining).`);
+        }
+      } catch (e) {
+        if (res.statusCode !== 200) throw e; // propagate stock errors
+        // If stock check function fails (pre-migration), continue without stock check
+      }
+
+      // Check variant stock (if a variant is selected)
+      let variantId = option.variantId || null;
+      let variantPrice = null;
+      if (variantId && canIncludeVariants) {
+        const variant = (eventOption.variants || []).find(v => v.id === variantId);
+        if (!variant) {
+          res.status(400);
+          throw new Error(`Variant not found for option "${eventOption.name}"`);
+        }
+        try {
+          const vStock = await checkVariantStock(variant, qty);
+          if (!vStock.available) {
+            res.status(400);
+            throw new Error(`Variant "${variant.name}" is sold out (${vStock.remaining ?? 0} remaining).`);
+          }
+        } catch (e) {
+          if (res.statusCode !== 200) throw e;
+        }
+        variantPrice = variant.price; // null = use option price
+      }
+
+      // Resolve price: variant-level tiers take priority, then option-level tiers, then base prices
+      let priceSnapshot = null;
+      let appliedTierId = null;
+      if (canIncludeTiers) {
+        try {
+          if (variantId) {
+            // Try variant-specific early-bird tier first
+            const variantResolved = await resolveVariantTierPrice(eventOption, variantId, qty);
+            if (variantResolved.tierId) {
+              priceSnapshot = variantResolved.price;
+              appliedTierId = variantResolved.tierId;
+            } else {
+              // No variant tier — use the variant's own price (may be null → falls back to option price below)
+              priceSnapshot = variantPrice !== null && variantPrice !== undefined ? variantPrice : null;
+            }
+          } else {
+            // No variant — use option-level early-bird tier
+            const resolved = await resolveOptionPrice(eventOption, qty);
+            priceSnapshot = resolved.price;
+            appliedTierId = resolved.tierId;
+          }
+        } catch (e) {
+          priceSnapshot = variantPrice !== null && variantPrice !== undefined ? variantPrice : eventOption.price;
+        }
+      } else {
+        priceSnapshot = variantPrice !== null && variantPrice !== undefined ? variantPrice : null;
+      }
+      if (priceSnapshot === null) priceSnapshot = eventOption.price;
+
+      resolvedOptions.push({ ...option, variantId, appliedTierId, priceSnapshot });
+    }
+
+    // Check for existing non-cancelled registration for this user+event → merge instead
+    const existingReg = await prisma.registration.findFirst({
+      where: { userId, eventId, status: { not: 'cancelled' } },
+      include: { registrationOptions: true }
+    });
+
+    let registration;
+    let isNewRegistration = false;
+    if (existingReg) {
+      // Merge: upsert each requested option into the existing registration
+      for (const opt of resolvedOptions) {
+        // Match on eventOptionId + variantId for correct row
+        const existing = existingReg.registrationOptions.find(
+          ro => ro.eventOptionId === opt.eventOptionId && (ro.variantId || null) === (opt.variantId || null)
+        );
+        if (existing) {
+          await prisma.registrationOption.update({
+            where: { id: existing.id },
+            data: { quantity: existing.quantity + opt.quantity, priceSnapshot: opt.priceSnapshot, appliedTierId: opt.appliedTierId || null }
+          });
+        } else {
+          await prisma.registrationOption.create({
+            data: {
+              id: uuidv4(),
+              registrationId: existingReg.id,
+              eventOptionId: opt.eventOptionId,
+              quantity: opt.quantity,
+              variantId: opt.variantId || null,
+              appliedTierId: opt.appliedTierId || null,
+              priceSnapshot: opt.priceSnapshot,
+            }
+          });
+        }
+      }
+      // Only downgrade from paid if the newly added items actually cost something
+      const newItemsCost = resolvedOptions.reduce((sum, opt) => {
+        return sum + ((opt.priceSnapshot || 0) * (opt.quantity || 0));
+      }, 0);
+      if (existingReg.status === 'paid' && newItemsCost > 0) {
+        await prisma.registration.update({ where: { id: existingReg.id }, data: { status: 'partial_paid', updatedAt: new Date() } });
+      } else {
+        await prisma.registration.update({ where: { id: existingReg.id }, data: { updatedAt: new Date() } });
+      }
+      registration = await prisma.registration.findUnique({
+        where: { id: existingReg.id },
+        include: {
+          registrationOptions: { include: { eventOption: true } },
+          event: true,
+          user: { select: { id: true, name: true, email: true, phoneNumber: true } }
+        }
+      });
+    } else {
+      isNewRegistration = true;
+      // Create new registration
+      const registrationId = uuidv4();
+      registration = await prisma.registration.create({
+        data: {
+          id: registrationId,
+          userId,
+          eventId,
+          updatedAt: new Date(),
+          registrationOptions: {
+            create: resolvedOptions.map(option => ({
+              id: uuidv4(),
+              eventOptionId: option.eventOptionId,
+              quantity: option.quantity,
+              variantId: option.variantId || null,
+              appliedTierId: option.appliedTierId || null,
+              priceSnapshot: option.priceSnapshot,
+            }))
+          }
+        },
+        include: {
+          registrationOptions: { include: { eventOption: true } },
+          event: true,
+          user: { select: { id: true, name: true, email: true, phoneNumber: true } }
+        }
+      });
+    }
+
+    // If total due is zero, mark as paid and generate/update tickets if no required form
+    let freeTicketMockReq = null, freeTicketMockRes = null;
+    try {
+      const totalDue = (registration.registrationOptions || []).reduce((sum, ro) => sum + ((ro.priceSnapshot ?? ro.eventOption?.price ?? 0) * (ro.quantity || 0)), 0);
+      if (totalDue === 0) {
+        // Mark paid (no-op if already paid)
+        if (registration.status !== 'paid') {
+          await prisma.registration.update({ where: { id: registration.id }, data: { status: 'paid', updatedAt: new Date() } });
+        }
+        // check if event has a required form
+        let hasRequiredForm = false;
+        try {
+          const form = await prisma.eventForm.findUnique({ where: { eventId: registration.eventId } });
+          hasRequiredForm = !!(form && form.isRequired);
+        } catch {}
+        if (!hasRequiredForm) {
+          // Batch-fetch existing tickets then create/update in parallel (1 read + N parallel writes vs N×2 sequential)
+          const optionIds = registration.registrationOptions.map(o => o.id);
+          const existingTickets = await prisma.ticket.findMany({ where: { registrationOptionId: { in: optionIds } } });
+          const ticketByOptionId = Object.fromEntries(existingTickets.map(t => [t.registrationOptionId, t]));
+          await Promise.all(registration.registrationOptions.map(option => {
+            const exists = ticketByOptionId[option.id];
+            if (exists) {
+              const newQty = option.quantity || 1;
+              if (newQty > (exists.quantity || 1)) {
+                return prisma.ticket.update({ where: { id: exists.id }, data: { quantity: newQty, updatedAt: new Date() } });
+              }
+              return Promise.resolve();
+            }
+            return prisma.ticket.create({
+              data: {
+                id: uuidv4(),
+                qrCode: uuidv4(),
+                registrationOptionId: option.id,
+                userId: registration.userId,
+                eventId: registration.eventId,
+                quantity: option.quantity || 1,
+                updatedAt: new Date(),
+              }
+            });
+          }));
+          // Capture for chained email — tickets sent after registration confirmation
+          freeTicketMockReq = { user: { id: registration.userId }, body: { registrationId: registration.id } };
+          freeTicketMockRes = { status: () => freeTicketMockRes, json: () => {} };
+        }
+
+        // reflect status change in the returned object
+        registration.status = 'paid';
+      }
+    } catch (e) {
+      // ignore errors in auto-generation path; manual generation remains available
+    }
+
+    // Fire-and-forget: registration email first, then tickets (guarantees order)
+    const { sendRegistrationEmails, sendRegistrationUpdatedEmails } = require('../utils/notifications');
+    const _regId = registration.id;
+    const _freeTicketReq = freeTicketMockReq;
+    const _freeTicketRes = freeTicketMockRes;
+    (async () => {
+      try {
+        if (isNewRegistration) {
+          await sendRegistrationEmails(_regId);
+        } else {
+          await sendRegistrationUpdatedEmails(_regId);
+        }
+      } catch (e) { console.error('Failed to send registration emails:', e); }
+      if (_freeTicketReq) {
+        try { await emailTickets(_freeTicketReq, _freeTicketRes); } catch (e) { console.error('Error emailing tickets for free registration:', e); }
+      }
+    })();
+
+    res.status(201).json(registration);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get all registrations
+// @route   GET /api/registrations
+// @access  Private/Admin
+const getRegistrations = async (req, res) => {
+  try {
+    const registrations = await prisma.registration.findMany({
+      include: {
+        payments: true,
+        registrationOptions: {
+          include: {
+            eventOption: { include: { earlyBirdTiers: true } },
+            variant: { select: { id: true, name: true, price: true } },
+          }
+        },
+        event: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        }
+      }
+    });
+
+    res.json(registrations);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get user registrations
+// @route   GET /api/registrations/myregistrations
+// @access  Private
+const getUserRegistrations = async (req, res) => {
+  try {
+    const showPast = String(req.query.showPast || '').toLowerCase() === '1' || String(req.query.showPast || '').toLowerCase() === 'true';
+    const now = new Date();
+    const whereClause = showPast ? { userId: req.user.id } : {
+      userId: req.user.id,
+      status: { not: 'cancelled' },
+      event: { endDate: { gte: now } }
+    };
+
+    const registrations = await prisma.registration.findMany({
+      where: whereClause,
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: { include: { earlyBirdTiers: true } },
+            variant: { select: { id: true, name: true, price: true } },
+          }
+        },
+        // Nest the event's form so the frontend can tell whether attendee forms are
+        // required without a separate GET /api/events/:id per registration.
+        event: { include: { form: { include: { fields: true } } } },
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        }
+      },
+      orderBy: { createdAt: 'desc' }
+    });
+
+    res.json(registrations);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get registration by ID
+// @route   GET /api/registrations/:id
+// @access  Private
+const getRegistrationById = async (req, res) => {
+  try {
+    const registration = await prisma.registration.findUnique({
+      where: { id: req.params.id },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: { include: { earlyBirdTiers: true } },
+            variant: { select: { id: true, name: true, price: true } },
+            tickets: true
+          }
+        },
+        event: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        },
+        payments: true,
+        formResponses: { include: { answers: true } }
+      }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    // Guests (no auth) can view by knowing the registrationId (UUID = unguessable)
+    // Authenticated users must be the owner or staff+
+    if (req.user && registration.userId !== req.user.id && req.user.role !== 'admin' && req.user.role !== 'supervisor' && req.user.role !== 'staff') {
+      res.status(403);
+      throw new Error('Not authorized to view this registration');
+    }
+
+    res.json(registration);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Update registration status
+// @route   PUT /api/registrations/:id
+// @access  Private/Admin
+const updateRegistrationStatus = async (req, res) => {
+  try {
+    const { status } = req.body;
+
+    const registration = await prisma.registration.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    await assertEventOpen(registration.eventId, res);
+
+    // If downgrading from paid to not-paid, ensure no tickets were used and delete unused tickets
+    if (registration.status === 'paid' && status !== 'paid') {
+      const tickets = await prisma.ticket.findMany({
+        where: { registrationOption: { registrationId: req.params.id } },
+        include: { usages: true }
+      });
+      const hasUsed = tickets.some(t => t.isUsed || (t.usages && t.usages.length > 0));
+      if (hasUsed) {
+        res.status(400);
+        throw new Error('Cannot change registration from paid because one or more tickets have been used');
+      }
+      // Delete all unused tickets
+      await prisma.ticket.deleteMany({
+        where: {
+          registrationOption: { registrationId: req.params.id },
+          isUsed: false
+        }
+      });
+    }
+
+    const updatedRegistration = await prisma.registration.update({
+      where: { id: req.params.id },
+      data: {
+        status,
+        updatedAt: new Date()
+      },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: true
+          }
+        },
+        event: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        }
+      }
+    });
+
+    // Generate tickets and email them when status is manually set to 'paid' by staff
+    if (status === 'paid') {
+      (async () => {
+        try {
+          await generateTicketsForRegistration(req.params.id);
+          const mockReq = { user: { id: updatedRegistration.userId }, body: { registrationId: req.params.id } };
+          const mockRes = { status: () => mockRes, json: () => {} };
+          await emailTickets(mockReq, mockRes);
+        } catch (e) {
+          console.error('[updateRegistrationStatus] Failed to generate/email tickets:', e?.message || e);
+        }
+      })();
+    }
+
+    res.json(updatedRegistration);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Cancel registration
+// @route   DELETE /api/registrations/:id
+// @access  Private
+const cancelRegistration = async (req, res) => {
+  try {
+    const registration = await prisma.registration.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    // Check if user is authorized to cancel this registration
+    if (registration.userId !== req.user.id && req.user.role !== 'admin') {
+      res.status(403);
+      throw new Error('Not authorized to cancel this registration');
+    }
+
+    await assertEventOpen(registration.eventId, res);
+
+    // Check if registration can be cancelled
+    if (registration.status === 'cancelled') {
+      res.status(400);
+      throw new Error('Registration is already cancelled');
+    }
+
+    // Non-admins cannot cancel a registration that has payments against it
+    if (req.user.role !== 'admin') {
+      const paymentCount = await prisma.payment.count({
+        where: { registrationId: registration.id, amount: { gt: 0 } }
+      });
+      if (paymentCount > 0) {
+        res.status(403);
+        throw new Error('This registration has payments recorded against it and cannot be self-cancelled. Please contact the organisation for assistance.');
+      }
+    }
+
+    const updatedRegistration = await prisma.registration.update({
+      where: { id: req.params.id },
+      data: {
+        status: 'cancelled',
+        updatedAt: new Date()
+      }
+    });
+
+    res.json({ message: 'Registration cancelled', registration: updatedRegistration });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get registrations by event
+// @route   GET /api/registrations/event/:eventId
+// @access  Private/Admin
+const getRegistrationsByEvent = async (req, res) => {
+  try {
+    const { search } = req.query;
+    let registrations = await prisma.registration.findMany({
+      where: { eventId: req.params.eventId },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: { include: { earlyBirdTiers: true } },
+            variant: { select: { id: true, name: true, price: true } },
+            tickets: true,
+          }
+        },
+        payments: true,
+        user: { select: { id: true, name: true, email: true, phoneNumber: true, notificationPreference: true, isActive: true } }
+      },
+      orderBy: { createdAt: 'asc' }
+    });
+
+    if (search) {
+      const q = String(search).toLowerCase();
+      registrations = registrations.filter(r =>
+        String(r.user?.name || '').toLowerCase().includes(q) ||
+        String(r.user?.email || '').toLowerCase().includes(q) ||
+        String(r.user?.phoneNumber || '').toLowerCase().includes(q)
+      );
+    }
+
+    res.json(registrations);
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Create a new registration for non existing user
+// @route   POST /api/registrations/manual
+// @access  Private/Supervisor
+const createManualRegistration = async (req, res) => {
+  let userRecord;
+  try {
+    const { eventId, options, user, guestOnly, notificationPreference: prefFromBody } = req.body;
+
+    if (!eventId || !options || !user || !user.name || (!user.email && !user.phoneNumber)) {
+      res.status(400);
+      throw new Error('Missing required fields: eventId, options, user.name, and at least user.email or user.phoneNumber');
+    }
+
+    //Check event
+    const event = await prisma.event.findUnique({
+      where: {id: eventId},
+      include: { eventOptions: { include: { earlyBirdTiers: true, variants: true } } },
+    });
+
+    if (!event) {
+      res.status(404);
+      throw new Error('Event not found');
+    }
+
+    if (!event.isActive) {
+      res.status(400);
+      throw new Error('Event is not active');
+    }
+
+    await assertEventOpen(eventId, res);
+
+    // Validate options
+    if (!Array.isArray(options) || options.length === 0) {
+      res.status(400);
+      throw new Error('At least one option must be selected');
+    }
+
+    // Resolve pricing for each option (appliedTierId + priceSnapshot)
+    const resolvedManualOptions = [];
+    for (const option of options) {
+      const eventOption = event.eventOptions.find(eo => eo.id === option.eventOptionId);
+      if (!eventOption) {
+        res.status(400);
+        throw new Error(`Option with ID ${option.eventOptionId} not found for this event`);
+      }
+      if (!option.quantity || option.quantity < 1) {
+        res.status(400);
+        throw new Error('Quantity must be at least 1');
+      }
+
+      const variantId = option.variantId || null;
+      let priceSnapshot = null;
+      let appliedTierId = null;
+      try {
+        if (variantId) {
+          const variantResolved = await resolveVariantTierPrice(eventOption, variantId, option.quantity);
+          if (variantResolved.tierId) {
+            priceSnapshot = variantResolved.price;
+            appliedTierId = variantResolved.tierId;
+          } else {
+            const variant = (eventOption.variants || []).find(v => v.id === variantId);
+            priceSnapshot = (variant && variant.price !== null && variant.price !== undefined)
+              ? Number(variant.price)
+              : Number(eventOption.price || 0);
+          }
+        } else {
+          const resolved = await resolveOptionPrice(eventOption, option.quantity);
+          priceSnapshot = resolved.price;
+          appliedTierId = resolved.tierId;
+        }
+      } catch (e) {
+        priceSnapshot = Number(eventOption.price || 0);
+      }
+
+      resolvedManualOptions.push({ ...option, variantId, appliedTierId, priceSnapshot });
+    }
+
+    // Resolve or create a user
+    let userId;
+
+    const { normalizeZAPhone } = require('../utils/whatsapp');
+    const phone = normalizeZAPhone(user.phoneNumber) || (user.phoneNumber || '').replace(/\D/g, '');
+    const hasValidEmail = !!(user.email && typeof user.email === 'string' && user.email.includes('@'));
+
+    // Derive notification preference: explicit choice wins; otherwise infer from available contact info
+    const validPrefs = ['email', 'whatsapp', 'both'];
+    const derivedPref = (prefFromBody && validPrefs.includes(prefFromBody))
+      ? prefFromBody
+      : (hasValidEmail && phone ? 'both' : phone ? 'whatsapp' : 'email');
+
+    // Always search by email AND/OR phone regardless of guestOnly
+    // Also try the alternate format (27xxx ↔ 0xxx) so both representations match
+    const phoneAlt = phone && phone.startsWith('27') ? '0' + phone.slice(2) : (phone && phone.length === 9 ? '27' + phone : null);
+    const searchClauses = [
+      ...(hasValidEmail ? [{ email: user.email }] : []),
+      ...(phone ? [{ phoneNumber: phone }] : []),
+      ...(phoneAlt ? [{ phoneNumber: phoneAlt }] : []),
+    ];
+    const existingUser = searchClauses.length > 0
+      ? await prisma.user.findFirst({ where: { OR: searchClauses } })
+      : null;
+
+    if (existingUser) {
+      userId = existingUser.id;
+      const updateData = {};
+      // Update preference only when the caller explicitly specified one
+      if (prefFromBody && validPrefs.includes(prefFromBody)) {
+        updateData.notificationPreference = prefFromBody;
+      }
+      // Fill in a missing contact channel with the newly supplied value, without overwriting an existing one
+      if (phone && !existingUser.phoneNumber) {
+        updateData.phoneNumber = phone;
+      }
+      if (hasValidEmail && existingUser.email !== user.email && existingUser.email.endsWith('@guest.local')) {
+        updateData.email = user.email;
+      }
+      if (Object.keys(updateData).length > 0) {
+        await prisma.user.update({ where: { id: userId }, data: updateData }).catch(() => {});
+      }
+    } else if (!guestOnly && hasValidEmail) {
+      // Create a real active account (non-guest with email)
+      try {
+        const password = 'Hope123';
+        const response = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000'}/api/users`,
+          { name: user.name, email: user.email, password, phoneNumber: phone || null }
+        );
+        const createdUser = response.data.user || response.data;
+        if (!createdUser?.id) { res.status(400); throw new Error('User creation failed: No user ID returned'); }
+        userId = createdUser.id;
+        // Set derived preference on the new account
+        await prisma.user.update({ where: { id: userId }, data: { notificationPreference: derivedPref } }).catch(() => {});
+      } catch (userErr) {
+        res.status(400);
+        throw new Error(`Failed to create user: ${userErr.response?.data?.message || userErr.message}`);
+      }
+    } else {
+      // Guest path: phone-only, guestOnly=true, or no valid email
+      const placeholderEmail = hasValidEmail
+        ? user.email
+        : `guest+${uuidv4().slice(0, 8)}@guest.local`;
+      const hashed = await hashPassword(uuidv4());
+      const created = await prisma.user.create({
+        data: {
+          id: uuidv4(),
+          name: user.name,
+          email: placeholderEmail,
+          password: hashed,
+          phoneNumber: phone || null,
+          isActive: false,
+          notificationPreference: derivedPref,
+          updatedAt: new Date(),
+        }
+      });
+      userId = created.id;
+    }
+
+    // Merge into existing non-cancelled registration if one exists, otherwise create new
+    const existingReg = await prisma.registration.findFirst({
+      where: { userId, eventId, status: { not: 'cancelled' } },
+      include: { registrationOptions: true }
+    });
+
+    let registration;
+    let isNewRegistration = false;
+
+    if (existingReg) {
+      // Upsert each requested option into the existing registration (all in parallel)
+      await Promise.all(resolvedManualOptions.map(opt => {
+        const existing = existingReg.registrationOptions.find(
+          ro => ro.eventOptionId === opt.eventOptionId && (ro.variantId || null) === (opt.variantId || null)
+        );
+        if (existing) {
+          return prisma.registrationOption.update({
+            where: { id: existing.id },
+            data: {
+              quantity: existing.quantity + opt.quantity,
+              priceSnapshot: opt.priceSnapshot,
+              appliedTierId: opt.appliedTierId || null,
+            }
+          });
+        }
+        return prisma.registrationOption.create({
+          data: {
+            id: uuidv4(),
+            registrationId: existingReg.id,
+            eventOptionId: opt.eventOptionId,
+            quantity: opt.quantity,
+            variantId: opt.variantId || null,
+            appliedTierId: opt.appliedTierId || null,
+            priceSnapshot: opt.priceSnapshot,
+          }
+        });
+      }));
+      // Recompute status based on totals across ALL current options and payments
+      const freshForStatus = await prisma.registration.findUnique({
+        where: { id: existingReg.id },
+        include: {
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true,
+        }
+      });
+      const freshTotalDue = computeRegistrationTotalDue(freshForStatus, new Date());
+      const freshTotalPaid = (freshForStatus?.payments || []).reduce((sum, p) => sum + (p.amount || 0), 0);
+      let newExistingStatus;
+      if (freshTotalDue === 0 || freshTotalPaid >= freshTotalDue) newExistingStatus = 'paid';
+      else if (freshTotalPaid > 0) newExistingStatus = 'partial_paid';
+      else newExistingStatus = existingReg.status === 'cancelled' ? 'pending' : (existingReg.status || 'pending');
+      await prisma.registration.update({ where: { id: existingReg.id }, data: { status: newExistingStatus, updatedAt: new Date() } });
+
+      registration = await prisma.registration.findUnique({
+        where: { id: existingReg.id },
+        include: {
+          registrationOptions: { include: { eventOption: true } },
+          event: true,
+          user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+        },
+      });
+      registration.status = newExistingStatus;
+    } else {
+      isNewRegistration = true;
+      const registrationId = uuidv4();
+      registration = await prisma.registration.create({
+        data: {
+          id: registrationId,
+          userId,
+          eventId,
+          updatedAt: new Date(),
+          registrationOptions: {
+            create: resolvedManualOptions.map(option => ({
+              id: uuidv4(),
+              eventOptionId: option.eventOptionId,
+              quantity: option.quantity,
+              variantId: option.variantId || null,
+              appliedTierId: option.appliedTierId || null,
+              priceSnapshot: option.priceSnapshot,
+            })),
+          },
+        },
+        include: {
+          registrationOptions: { include: { eventOption: true } },
+          event: true,
+          user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+        },
+      });
+    }
+
+    const registrationId = registration.id;
+
+    // Auto mark paid and generate tickets if free and no required form (new registrations only)
+    let hasRequiredForm = false;
+    try {
+      const form = await prisma.eventForm.findUnique({ where: { eventId: registration.eventId } });
+      hasRequiredForm = !!(form && form.isRequired);
+    } catch {}
+
+    // Auto-mark paid and generate tickets for free registrations (new OR existing that became free)
+    if (registration.status !== 'paid') try {
+      const totalDue = (registration.registrationOptions || []).reduce((sum, ro) => sum + ((ro.priceSnapshot ?? ro.eventOption?.price ?? 0) * (ro.quantity || 0)), 0);
+      if (totalDue === 0) {
+        await prisma.registration.update({ where: { id: registration.id }, data: { status: 'paid', updatedAt: new Date() } });
+        registration.status = 'paid';
+      }
+    } catch {}
+
+    // Generate/sync tickets for all paid registrations that have no required form
+    if (registration.status === 'paid' && !hasRequiredForm) try {
+      await generateTicketsForRegistration(registration.id);
+    } catch {}
+
+    // For paid registrations, generate a Yoco checkout link to include in the email
+    let yocoPaymentUrl = null;
+    if (registration.status !== 'paid') {
+      try {
+        const { createRegistrationCheckoutInternal } = require('./paymentController');
+        const baseUrl = process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001';
+        const checkout = await createRegistrationCheckoutInternal(registrationId, userId, {
+          successUrl: `${baseUrl}/payment/success`,
+          cancelUrl: `${baseUrl}/payment/cancel`,
+          failureUrl: `${baseUrl}/payment/failure`,
+        });
+        yocoPaymentUrl = checkout.redirectUrl || null;
+      } catch (e) {
+        console.warn('Could not create Yoco checkout for self-service email:', e?.message || e);
+      }
+    }
+
+    // Fire-and-forget: registration email first, then tickets (guarantees order)
+    const { sendSelfServiceRegistrationEmails, sendRegistrationUpdatedEmails } = require('../utils/notifications');
+    const _ssRegId = registrationId;
+    const _ssUserId = userId;
+    const _ssPaymentUrl = yocoPaymentUrl;
+    const _ssFormRequired = hasRequiredForm;
+    const _ssIsNew = isNewRegistration;
+    const _ssNotifPref = derivedPref;
+    const _ssShouldEmailTickets = registration.status === 'paid' && !hasRequiredForm;
+    (async () => {
+      try {
+        if (_ssIsNew) {
+          await sendSelfServiceRegistrationEmails(_ssRegId, { paymentUrl: _ssPaymentUrl, formRequired: _ssFormRequired });
+        } else {
+          await sendRegistrationUpdatedEmails(_ssRegId);
+        }
+      } catch (e) { console.error('Failed to send registration email:', e); }
+      if (_ssShouldEmailTickets) {
+        const mockReq = { user: { id: _ssUserId }, body: { registrationId: _ssRegId, channel: _ssNotifPref } };
+        const mockRes = { status: () => mockRes, json: () => {} };
+        try { await emailTickets(mockReq, mockRes); } catch (e) { console.error('Failed to email tickets after free self-service registration:', e); }
+      }
+    })();
+
+    return res.status(201).json(registration);
+  } catch (error) {
+    console.error(error);
+    return res.status(400).json({message: error.message});
+  }
+};
+
+// @desc    Update registration options (add/remove items) with constraints
+// @route   PUT /api/registrations/:id/options
+// @access  Private (owner or staff/admin)
+const updateRegistrationOptions = async (req, res) => {
+  try {
+    const registrationId = req.params.id;
+    const userId = req.user.id;
+    const { options } = req.body; // [{ eventOptionId, quantity }]
+
+    if (!Array.isArray(options)) {
+      res.status(400);
+      throw new Error('Options must be an array');
+    }
+
+    // Load registration with relations
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: {
+          include: {
+            tickets: true,
+            eventOption: { include: { earlyBirdTiers: true, variants: true } }
+          }
+        },
+        event: { include: { eventOptions: { include: { earlyBirdTiers: true, variants: true } } } },
+        payments: true,
+      }
+    });
+
+    if (!registration) {
+      res.status(404);
+      throw new Error('Registration not found');
+    }
+
+    // Authorization: owner or admin/supervisor/staff
+    if (
+      registration.userId !== userId &&
+      req.user.role !== 'admin' &&
+      req.user.role !== 'supervisor' &&
+      req.user.role !== 'staff'
+    ) {
+      res.status(403);
+      throw new Error('Not authorized to edit this registration');
+    }
+
+    // If event is in the past, block edit
+    if (registration.event?.endDate && new Date(registration.event.endDate).getTime() < Date.now()) {
+      res.status(400);
+      throw new Error('This event has already ended; registration cannot be edited');
+    }
+
+    // registration.event is already loaded above, so check cashupStatus directly here
+    // rather than re-fetching via assertEventOpen.
+    if (registration.event?.cashupStatus === 'closed') {
+      res.status(400);
+      throw new Error('This event is closed. Reopen it (admin only) before making changes.');
+    }
+
+    // Validate provided options: must belong to same event and quantities >=1
+    if (options.length === 0) {
+      res.status(400);
+      throw new Error('At least one option must be provided');
+    }
+
+    const validOptionIds = new Set((registration.event?.eventOptions || []).map(eo => eo.id));
+    for (const opt of options) {
+      if (!opt || !opt.eventOptionId || !Number.isInteger(opt.quantity) || opt.quantity < 1) {
+        res.status(400);
+        throw new Error('Each option must include a valid eventOptionId and quantity >= 1');
+      }
+      if (!validOptionIds.has(opt.eventOptionId)) {
+        res.status(400);
+        throw new Error('One or more options do not belong to this event');
+      }
+    }
+
+    // Compute totalPaid
+    const totalPaid = (registration.payments || []).reduce((sum, p) => sum + (p.amount || 0), 0);
+
+    // Merge duplicate entries for the same eventOptionId+variantId (defensive; normal
+    // callers send one entry per option/variant combo).
+    const mergedOptionsMap = new Map();
+    for (const opt of options) {
+      const key = `${opt.eventOptionId}::${opt.variantId || ''}`;
+      if (mergedOptionsMap.has(key)) {
+        mergedOptionsMap.get(key).quantity += opt.quantity;
+      } else {
+        mergedOptionsMap.set(key, { ...opt });
+      }
+    }
+    const mergedOptions = Array.from(mergedOptionsMap.values());
+
+    // Resolve pricing for each incoming option (variant-aware, with stock check)
+    const eventOptionsMap = new Map((registration.event?.eventOptions || []).map(eo => [eo.id, eo]));
+    const resolvedUpdateOptions = [];
+    for (const opt of mergedOptions) {
+      const eventOption = eventOptionsMap.get(opt.eventOptionId);
+      const variantId = opt.variantId || null;
+      let priceSnapshot = null;
+      let appliedTierId = null;
+      try {
+        if (variantId) {
+          const variantResolved = await resolveVariantTierPrice(eventOption, variantId, opt.quantity);
+          priceSnapshot = variantResolved.price;
+          appliedTierId = variantResolved.tierId;
+        } else {
+          const resolved = await resolveOptionPrice(eventOption, opt.quantity);
+          priceSnapshot = resolved.price;
+          appliedTierId = resolved.tierId;
+        }
+      } catch (e) {
+        priceSnapshot = Number(eventOption?.price || 0);
+      }
+      resolvedUpdateOptions.push({ ...opt, variantId, priceSnapshot, appliedTierId });
+    }
+
+    const newTotalDue = resolvedUpdateOptions.reduce((sum, opt) => sum + (opt.priceSnapshot || 0) * (opt.quantity || 0), 0);
+
+    if (newTotalDue < totalPaid) {
+      res.status(400);
+      throw new Error('Cannot reduce items below the amount already paid');
+    }
+
+    // Group existing registrationOptions by eventOptionId::variantId so tickets that
+    // have already been issued are never deleted, only ever updated in place.
+    const oldByKey = new Map();
+    for (const ro of registration.registrationOptions) {
+      const key = `${ro.eventOptionId}::${ro.variantId || ''}`;
+      if (!oldByKey.has(key)) oldByKey.set(key, []);
+      oldByKey.get(key).push(ro);
+    }
+
+    // Per-item floor: a ticket is only ever created once a registration is paid, and it is
+    // never deleted or shrunk — only grown. So an option can never be reduced (or removed)
+    // below the quantity of any ticket already issued for it.
+    const newKeys = new Set(resolvedUpdateOptions.map(opt => `${opt.eventOptionId}::${opt.variantId || ''}`));
+    const newQtyByKey = new Map(resolvedUpdateOptions.map(opt => [`${opt.eventOptionId}::${opt.variantId || ''}`, opt.quantity || 0]));
+    for (const [key, rows] of oldByKey) {
+      const ticketQty = rows.reduce((sum, ro) => sum + (ro.tickets || []).reduce((s, t) => s + (t.quantity || 0), 0), 0);
+      if (ticketQty <= 0) continue;
+      const newQty = newQtyByKey.get(key) || 0;
+      if (newQty < ticketQty) {
+        res.status(400);
+        throw new Error(`Cannot reduce "${rows[0].eventOption?.name || 'item'}" below the ${ticketQty} ticket(s) already issued`);
+      }
+    }
+
+    // Differential update: update matching options in place, create genuinely new ones,
+    // and only delete options that were removed entirely. The floor check above guarantees
+    // a removed key never has tickets — the guard below turns that into a hard invariant
+    // instead of an assumption: tickets are never deleted.
+    await prisma.$transaction(async (tx) => {
+      for (const [key, rows] of oldByKey) {
+        if (newKeys.has(key)) continue;
+        const ticketedRows = rows.filter(ro => (ro.tickets || []).length > 0);
+        if (ticketedRows.length > 0) {
+          throw new Error(`Cannot remove "${rows[0].eventOption?.name || 'item'}" — tickets have already been issued for it`);
+        }
+        await tx.registrationOption.deleteMany({ where: { id: { in: rows.map(r => r.id) } } });
+      }
+
+      for (const opt of resolvedUpdateOptions) {
+        const key = `${opt.eventOptionId}::${opt.variantId || ''}`;
+        const existingRows = oldByKey.get(key);
+        if (existingRows && existingRows.length > 0) {
+          const [primary, ...dupes] = existingRows;
+          await tx.registrationOption.update({
+            where: { id: primary.id },
+            data: {
+              quantity: opt.quantity,
+              appliedTierId: opt.appliedTierId || null,
+              priceSnapshot: opt.priceSnapshot,
+            }
+          });
+          for (const dup of dupes) {
+            if ((dup.tickets || []).length > 0) {
+              await tx.ticket.updateMany({ where: { registrationOptionId: dup.id }, data: { registrationOptionId: primary.id } });
+            }
+            await tx.registrationOption.delete({ where: { id: dup.id } });
+          }
+        } else {
+          await tx.registrationOption.create({
+            data: {
+              id: uuidv4(),
+              registrationId,
+              eventOptionId: opt.eventOptionId,
+              quantity: opt.quantity,
+              variantId: opt.variantId || null,
+              appliedTierId: opt.appliedTierId || null,
+              priceSnapshot: opt.priceSnapshot,
+            }
+          });
+        }
+      }
+
+      // Update updatedAt and potentially status based on payments vs due
+      let newStatus = registration.status;
+      if (totalPaid >= newTotalDue) newStatus = 'paid';
+      else if (totalPaid > 0) newStatus = 'partial_paid';
+      else newStatus = 'pending';
+
+      await tx.registration.update({
+        where: { id: registrationId },
+        data: { updatedAt: new Date(), status: newStatus }
+      });
+    });
+
+    // Return updated registration
+    const updated = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: { include: { eventOption: true } },
+        event: true,
+        user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+        payments: true,
+      }
+    });
+
+    const { sendRegistrationUpdatedEmails } = require('../utils/notifications');
+    sendRegistrationUpdatedEmails(registrationId).catch(e => console.error('Failed to send registration updated emails:', e));
+
+    // If registration is now paid, regenerate tickets and send them
+    if (updated.status === 'paid') {
+      (async () => {
+        try {
+          await generateTicketsForRegistration(registrationId);
+          const mockReq = { user: { id: updated.userId }, body: { registrationId } };
+          const mockRes = { status: () => mockRes, json: () => {} };
+          await emailTickets(mockReq, mockRes);
+        } catch (e) {
+          console.error('[updateRegistrationOptions] Failed to generate/send tickets:', e?.message || e);
+        }
+      })();
+    }
+
+    return res.json(updated);
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Submit form responses for a registration
+// @route   POST /api/registrations/:id/forms/responses
+// @access  Private
+const submitFormResponses = async (req, res) => {
+  try {
+    const registrationId = req.params.id;
+    const userId = req.user?.id || null;
+    const { responses } = req.body; // [{ answers: { fieldId: value } }]
+
+    // load registration with options and event form
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: { include: { eventOption: true } },
+        event: true,
+      }
+    });
+    if (!registration) { res.status(404); throw new Error('Registration not found'); }
+    // Guests (no auth) may submit by knowing the registrationId; authenticated users must be owner or staff+
+    if (req.user && registration.userId !== userId && !['admin','supervisor','staff'].includes(req.user.role)) {
+      res.status(403); throw new Error('Not authorized');
+    }
+
+    // fetch form
+    let form = null;
+    try {
+      form = await prisma.eventForm.findUnique({ where: { eventId: registration.eventId }, include: { fields: true } });
+    } catch (e) {}
+    if (!form) {
+      return res.json({ message: 'No form for this event. Nothing to submit.' });
+    }
+
+    const fields = (form.fields || []).sort((a,b) => (a.order||0)-(b.order||0));
+    const answerableFields = fields.filter(f => f.type !== 'statement' && f.type !== 'paragraph');
+
+    const mainTickets = registration.registrationOptions.filter(ro => ro.eventOption?.isMainTicket).reduce((s, ro) => s + (ro.quantity || 0), 0);
+    const toSubmit = Array.isArray(responses) ? responses : [];
+
+    if (toSubmit.length === 0) { res.status(400); throw new Error('No responses provided'); }
+    if (toSubmit.length > mainTickets) { res.status(400); throw new Error(`Too many forms submitted. Expected at most ${mainTickets}`); }
+
+    // Create responses and answers
+    const created = [];
+    for (const resp of toSubmit) {
+      const respId = uuidv4();
+      const fr = await prisma.formResponse.create({ data: { id: respId, registrationId } });
+      const ansMap = resp?.answers || {};
+      for (const f of answerableFields) {
+        const raw = ansMap[f.id];
+        // If field required at field-level, enforce non-empty
+        if (f.isRequired && (raw === undefined || raw === null || String(raw).trim() === '')) {
+          res.status(400);
+          throw new Error(`Missing answer for: ${f.label}`);
+        }
+        if (raw !== undefined && raw !== null && String(raw).length > 0) {
+          await prisma.formAnswer.create({ data: { id: uuidv4(), responseId: respId, fieldId: f.id, value: String(raw) } });
+        }
+      }
+      created.push(fr);
+    }
+
+    // After submitting responses, if registration is already paid, generate and email tickets now.
+    let generatedTickets = [];
+    try {
+      const regAfter = await prisma.registration.findUnique({ where: { id: registrationId } });
+      if (regAfter && regAfter.status === 'paid') {
+        generatedTickets = await generateTicketsForRegistration(registrationId);
+        if (generatedTickets && generatedTickets.length > 0) {
+          try {
+            const mockReq = { user: { id: regAfter.userId }, body: { registrationId } };
+            const mockRes = { status: () => mockRes, json: () => {} };
+            await emailTickets(mockReq, mockRes);
+          } catch (emailErr) {
+            console.error('Post-form ticket email failed:', emailErr?.message || emailErr);
+          }
+        }
+      }
+    } catch (e) {
+      console.error('Post-form ticket generation attempt failed:', e?.message || e);
+    }
+
+    res.status(201).json({ message: 'Responses submitted', count: created.length, generatedTickets: (generatedTickets && generatedTickets.length) ? generatedTickets : undefined });
+  } catch (error) {
+    res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Replace (edit) form responses for a registration (staff/admin/supervisor)
+// @route   PUT /api/registrations/:id/forms/responses
+// @access  Private/Staff
+const replaceFormResponses = async (req, res) => {
+  try {
+    const registrationId = req.params.id;
+    const { responses } = req.body; // [{ answers: { fieldId: value } }]
+
+    // Authorization: staff or above only for replacing existing responses
+    if (!['admin','supervisor','staff'].includes(req.user.role)) {
+      res.status(403);
+      throw new Error('Not authorized');
+    }
+
+    // Load registration and form
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: { include: { eventOption: true } },
+        event: true,
+      }
+    });
+    if (!registration) { res.status(404); throw new Error('Registration not found'); }
+
+    let form = null;
+    try {
+      form = await prisma.eventForm.findUnique({ where: { eventId: registration.eventId }, include: { fields: true } });
+    } catch {}
+    if (!form) { return res.json({ message: 'No form for this event. Nothing to save.' }); }
+
+    const fields = (form.fields || []).sort((a,b) => (a.order||0)-(b.order||0));
+    const answerableFields = fields.filter(f => f.type !== 'statement' && f.type !== 'paragraph');
+    const mainTickets = registration.registrationOptions.filter(ro => ro.eventOption?.isMainTicket).reduce((s, ro) => s + (ro.quantity || 0), 0);
+    const toSubmit = Array.isArray(responses) ? responses : [];
+
+    if (toSubmit.length === 0) { res.status(400); throw new Error('No responses provided'); }
+    if (toSubmit.length > mainTickets) { res.status(400); throw new Error(`Too many forms submitted. Expected at most ${mainTickets}`); }
+
+    // Replace transactionally
+    await prisma.$transaction(async (tx) => {
+      // Delete existing answers and responses for this registration
+      const existing = await tx.formResponse.findMany({ where: { registrationId }, select: { id: true } });
+      const ids = existing.map(e => e.id);
+      if (ids.length > 0) {
+        await tx.formAnswer.deleteMany({ where: { responseId: { in: ids } } });
+        await tx.formResponse.deleteMany({ where: { id: { in: ids } } });
+      }
+      // Create new set
+      for (const resp of toSubmit) {
+        const respId = uuidv4();
+        await tx.formResponse.create({ data: { id: respId, registrationId } });
+        const ansMap = resp?.answers || {};
+        for (const f of answerableFields) {
+          const raw = ansMap[f.id];
+          if (f.isRequired && (raw === undefined || raw === null || String(raw).trim() === '')) {
+            res.status(400);
+            throw new Error(`Missing answer for: ${f.label}`);
+          }
+          if (raw !== undefined && raw !== null && String(raw).length > 0) {
+            await tx.formAnswer.create({ data: { id: uuidv4(), responseId: respId, fieldId: f.id, value: String(raw) } });
+          }
+        }
+      }
+      // Touch registration updatedAt
+      await tx.registration.update({ where: { id: registrationId }, data: { updatedAt: new Date() } });
+    });
+
+    // Attempt ticket generation and email if already paid
+    try {
+      const regAfter = await prisma.registration.findUnique({ where: { id: registrationId }, include: { user: { select: { id: true } } } });
+      if (regAfter && regAfter.status === 'paid') {
+        const newTickets = await generateTicketsForRegistration(registrationId);
+        if (newTickets && newTickets.length > 0) {
+          try {
+            const mockReq = { user: { id: regAfter.userId }, body: { registrationId } };
+            const mockRes = { status: () => mockRes, json: () => {} };
+            await emailTickets(mockReq, mockRes);
+          } catch (emailErr) {
+            console.error('Error emailing tickets after form replacement:', emailErr);
+          }
+        }
+      }
+    } catch {}
+
+    return res.json({ message: 'Responses saved' });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Get saved draft for attendee forms for a registration (owner or staff)
+// @route   GET /api/registrations/:id/forms/draft
+// @access  Private
+const getFormDraft = async (req, res) => {
+  try {
+    const registrationId = req.params.id;
+    const userId = req.user?.id || null;
+
+    // Ensure Prisma Client has the FormDraft model (migration + generate applied)
+    const hasFormDraftRead = !!(prisma && prisma.formDraft && typeof prisma.formDraft.findUnique === 'function');
+    if (!hasFormDraftRead) {
+      return res.status(400).json({
+        message: 'Draft storage is not available on the server.',
+        hint: 'Apply Prisma migrations and regenerate the Prisma Client, then restart the server.',
+        next: [
+          'cd backend',
+          'npx prisma migrate dev -n add-form-draft',
+          'npx prisma generate',
+          'restart the backend server'
+        ]
+      });
+    }
+
+    // Load registration to verify access
+    const registration = await prisma.registration.findUnique({ where: { id: registrationId } });
+    if (!registration) { res.status(404); throw new Error('Registration not found'); }
+    if (req.user && registration.userId !== userId && !['admin','supervisor','staff'].includes(req.user.role)) {
+      res.status(403); throw new Error('Not authorized');
+    }
+
+    // Find draft. If staff/admin, we still scope the draft to the registration owner (so they can resume later).
+    const ownerUserId = registration.userId;
+    const draft = await prisma.formDraft.findUnique({ where: { registrationId_userId: { registrationId, userId: ownerUserId } } });
+    if (!draft) return res.json({ data: {}, updatedAt: null });
+    return res.json({ data: draft.data || {}, updatedAt: draft.updatedAt });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Save draft for attendee forms for a registration (owner or staff). Does not mark as completed.
+// @route   PUT /api/registrations/:id/forms/draft
+// @access  Private
+const saveFormDraft = async (req, res) => {
+  try {
+    const registrationId = req.params.id;
+    const userId = req.user?.id || null;
+    const { data } = req.body; // JSON object mapping attendeeIndex -> { fieldId: value }
+
+    if (typeof data !== 'object' || data == null) {
+      res.status(400); throw new Error('Invalid draft payload');
+    }
+
+    // Ensure Prisma Client has the FormDraft model (migration + generate applied)
+    const hasFormDraftWrite = !!(prisma && prisma.formDraft && typeof prisma.formDraft.upsert === 'function');
+    if (!hasFormDraftWrite) {
+      return res.status(400).json({
+        message: 'Draft storage is not available on the server.',
+        hint: 'Apply Prisma migrations and regenerate the Prisma Client, then restart the server.',
+        next: [
+          'cd backend',
+          'npx prisma migrate dev -n add-form-draft',
+          'npx prisma generate',
+          'restart the backend server'
+        ]
+      });
+    }
+
+    // Load registration to verify access
+    const registration = await prisma.registration.findUnique({ where: { id: registrationId } });
+    if (!registration) { res.status(404); throw new Error('Registration not found'); }
+    if (req.user && registration.userId !== userId && !['admin','supervisor','staff'].includes(req.user.role)) {
+      res.status(403); throw new Error('Not authorized');
+    }
+
+    const ownerUserId = registration.userId;
+
+    // Upsert by (registrationId, userId) unique composite
+    const saved = await prisma.formDraft.upsert({
+      where: { registrationId_userId: { registrationId, userId: ownerUserId } },
+      update: { data, updatedAt: new Date() },
+      create: { registrationId, userId: ownerUserId, data },
+    });
+
+    return res.json({ message: 'Draft saved', updatedAt: saved.updatedAt });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+module.exports = {
+  createRegistration,
+  getRegistrations,
+  getUserRegistrations,
+  getRegistrationById,
+  updateRegistrationStatus,
+  cancelRegistration,
+  getRegistrationsByEvent,
+  createManualRegistration,
+  updateRegistrationOptions,
+  submitFormResponses,
+  replaceFormResponses,
+  getFormDraft,
+  saveFormDraft,
+};
\ No newline at end of file
diff --git a/backend/src/controllers/reportController.js b/backend/src/controllers/reportController.js
new file mode 100644
index 0000000..bd166e7
--- /dev/null
+++ b/backend/src/controllers/reportController.js
@@ -0,0 +1,275 @@
+const PDFDocument = require('pdfkit');
+const fs = require('fs');
+const path = require('path');
+const nodemailer = require('nodemailer');
+
+// Utility: draw a table
+function drawTable(doc, startX, startY, colWidths, rows, header) {
+  let y = startY;
+  doc.font('Helvetica-Bold');
+  if (header && header.length) {
+    let x = startX;
+    header.forEach((h, i) => {
+      const w = colWidths[i] || 80;
+      doc.rect(x, y, w, 20).stroke();
+      doc.text(String(h || ''), x + 4, y + 6, { width: w - 8 });
+      x += w;
+    });
+    y += 20;
+  }
+  doc.font('Helvetica');
+  rows.forEach((row) => {
+    let x = startX;
+    row.forEach((cell, i) => {
+      const w = colWidths[i] || 80;
+      const h = 18;
+      doc.rect(x, y, w, h).stroke();
+      doc.text(String(cell ?? ''), x + 4, y + 4, { width: w - 8 });
+      x += w;
+    });
+    y += 18;
+    // New page if overflow
+    if (y > doc.page.height - 40) {
+      doc.addPage();
+      y = 20;
+    }
+  });
+}
+
+function a4Doc(orientation = 'portrait') {
+  return new PDFDocument({ size: 'A4', margin: 20, layout: orientation === 'landscape' ? 'landscape' : 'portrait' });
+}
+
+// POST /api/reports/pdf
+// body: { title: string, kind: 'table'|'layered', table?: { columns: string[], rows: string[][] }, layered?: { header?: string, sections: { title: string, items: string[] }[] } }
+const generatePdf = async (req, res) => {
+  try {
+    const { title, kind, table, layered, orientation } = req.body || {};
+    res.setHeader('Content-Type', 'application/pdf');
+    const filename = `${(title || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase()}.pdf`;
+    res.setHeader('Content-Disposition', `attachment; filename="${filename}"`);
+
+    const doc = a4Doc(orientation === 'landscape' ? 'landscape' : 'portrait');
+    doc.pipe(res);
+
+    // Title
+    doc.font('Helvetica-Bold').fontSize(16).text(title || 'Report', { align: 'left' });
+    doc.moveDown(0.5);
+
+    if (kind === 'table' && table && Array.isArray(table.rows)) {
+      const columns = Array.isArray(table.columns) ? table.columns : [];
+      const colCount = columns.length || (table.rows[0] ? table.rows[0].length : 1);
+      const pageWidth = doc.page.width - doc.page.margins.left - doc.page.margins.right;
+      // Slightly wider first column to mimic site tables
+      const baseWidth = Math.floor(pageWidth / Math.max(1, colCount));
+      const colWidths = new Array(colCount).fill(baseWidth);
+      if (colCount > 0) colWidths[0] = Math.floor(baseWidth * 1.2);
+
+      // Draw header band
+      if (columns.length) {
+        let x = doc.page.margins.left;
+        const y = doc.y;
+        doc.save();
+        doc.rect(x, y, pageWidth, 22).fill('#f3f4f6');
+        doc.fillColor('#111827').font('Helvetica-Bold').fontSize(11);
+        columns.forEach((h, i) => {
+          const w = colWidths[i] || baseWidth;
+          doc.text(String(h || ''), x + 6, y + 6, { width: w - 12 });
+          x += w;
+        });
+        doc.restore();
+        doc.moveDown(1.6);
+      }
+
+      // Zebra rows
+      const rows = table.rows;
+      rows.forEach((row, idx) => {
+        const rowY = doc.y;
+        const rowH = 18;
+        const bg = idx % 2 === 0 ? '#ffffff' : '#f9fafb';
+        doc.save();
+        doc.rect(doc.page.margins.left, rowY - 2, pageWidth, rowH + 4).fill(bg).restore();
+        let x = doc.page.margins.left;
+        row.forEach((cell, i) => {
+          const w = colWidths[i] || baseWidth;
+          // Cell text
+          doc.fillColor('#111827').font('Helvetica').fontSize(10).text(String(cell ?? ''), x + 6, rowY, { width: w - 12 });
+          // Vertical separators similar to table borders
+          doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(x, rowY - 2).lineTo(x, rowY + rowH + 2).stroke();
+          x += w;
+        });
+        // Right border
+        doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(doc.page.margins.left + pageWidth, rowY - 2).lineTo(doc.page.margins.left + pageWidth, rowY + rowH + 2).stroke();
+        doc.moveDown(1.1);
+        if (doc.y > doc.page.height - 40) {
+          doc.addPage();
+        }
+      });
+      // Bottom border
+      doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(doc.page.margins.left, doc.y).lineTo(doc.page.margins.left + pageWidth, doc.y).stroke();
+
+    } else if (kind === 'layered' && layered && Array.isArray(layered.sections)) {
+      if (layered.header) {
+        doc.font('Helvetica-Bold').fontSize(13).text(layered.header);
+        doc.moveDown(0.3);
+      }
+      doc.font('Helvetica').fontSize(11);
+      for (const section of layered.sections) {
+        doc.fillColor('#111827').font('Helvetica-Bold').text(String(section.title || ''), { continued: false });
+        doc.moveDown(0.15);
+        doc.font('Helvetica').fontSize(10);
+        if (Array.isArray(section.items) && section.items.length) {
+          for (const item of section.items) {
+            // Bullet dot
+            doc.circle(doc.page.margins.left + 2, doc.y + 6, 1.5).fill('#374151').stroke();
+            doc.fillColor('#111827');
+            doc.text('  ' + String(item || ''), doc.page.margins.left + 8, doc.y, { width: doc.page.width - doc.page.margins.left - doc.page.margins.right - 8 });
+            doc.moveDown(0.2);
+          }
+        } else {
+          doc.text('No items');
+        }
+        doc.moveDown(0.5);
+        if (doc.y > doc.page.height - 60) doc.addPage();
+      }
+    } else {
+      doc.font('Helvetica').text('No content');
+    }
+
+    doc.end();
+  } catch (e) {
+    res.status(400).json({ message: e.message });
+  }
+};
+
+// POST /api/reports/email
+// body: { title, kind, table?, layered?, subject?, body? }
+const emailPdf = async (req, res) => {
+  try {
+    const { title, kind, table, layered, subject, body, orientation } = req.body || {};
+    const user = req.user;
+    if (!user || !user.email) {
+      res.status(400);
+      throw new Error('User email not available');
+    }
+
+    // Ensure temp dir
+    const tempDir = path.join(__dirname, '..', '..', 'temp');
+    if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
+    const filePath = path.join(tempDir, `${(title || 'report')}-${Date.now()}.pdf`.replace(/[^a-z0-9_.-]/gi, '_'));
+
+    // Build PDF to file
+    await new Promise((resolve, reject) => {
+      const doc = a4Doc(orientation === 'landscape' ? 'landscape' : 'portrait');
+      const ws = fs.createWriteStream(filePath);
+      doc.pipe(ws);
+
+      doc.font('Helvetica-Bold').fontSize(16).text(title || 'Report');
+      doc.moveDown(0.5);
+
+      if (kind === 'table' && table && Array.isArray(table.rows)) {
+        const columns = Array.isArray(table.columns) ? table.columns : [];
+        const colCount = columns.length || (table.rows[0] ? table.rows[0].length : 1);
+        const pageWidth = doc.page.width - doc.page.margins.left - doc.page.margins.right;
+        // Slightly wider first column
+        const baseWidth = Math.floor(pageWidth / Math.max(1, colCount));
+        const colWidths = new Array(colCount).fill(baseWidth);
+        if (colCount > 0) colWidths[0] = Math.floor(baseWidth * 1.2);
+
+        // Header band
+        if (columns.length) {
+          let x = doc.page.margins.left;
+          const y = doc.y;
+          doc.save();
+          doc.rect(x, y, pageWidth, 22).fill('#f3f4f6');
+          doc.fillColor('#111827').font('Helvetica-Bold').fontSize(11);
+          columns.forEach((h, i) => {
+            const w = colWidths[i] || baseWidth;
+            doc.text(String(h || ''), x + 6, y + 6, { width: w - 12 });
+            x += w;
+          });
+          doc.restore();
+          doc.moveDown(1.6);
+        }
+
+        // Rows zebra
+        const rows = table.rows;
+        rows.forEach((row, idx) => {
+          const rowY = doc.y;
+          const rowH = 18;
+          const bg = idx % 2 === 0 ? '#ffffff' : '#f9fafb';
+          doc.save();
+          doc.rect(doc.page.margins.left, rowY - 2, pageWidth, rowH + 4).fill(bg).restore();
+          let x = doc.page.margins.left;
+          row.forEach((cell, i) => {
+            const w = colWidths[i] || baseWidth;
+            doc.fillColor('#111827').font('Helvetica').fontSize(10).text(String(cell ?? ''), x + 6, rowY, { width: w - 12 });
+            doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(x, rowY - 2).lineTo(x, rowY + rowH + 2).stroke();
+            x += w;
+          });
+          doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(doc.page.margins.left + pageWidth, rowY - 2).lineTo(doc.page.margins.left + pageWidth, rowY + rowH + 2).stroke();
+          doc.moveDown(1.1);
+          if (doc.y > doc.page.height - 40) {
+            doc.addPage();
+          }
+        });
+        doc.strokeColor('#e5e7eb').lineWidth(0.5).moveTo(doc.page.margins.left, doc.y).lineTo(doc.page.margins.left + pageWidth, doc.y).stroke();
+
+      } else if (kind === 'layered' && layered && Array.isArray(layered.sections)) {
+        if (layered.header) {
+          doc.font('Helvetica-Bold').fontSize(13).text(layered.header);
+          doc.moveDown(0.3);
+        }
+        doc.font('Helvetica').fontSize(11);
+        for (const section of layered.sections) {
+          doc.fillColor('#111827').font('Helvetica-Bold').text(String(section.title || ''), { continued: false });
+          doc.moveDown(0.15);
+          doc.font('Helvetica').fontSize(10);
+          if (Array.isArray(section.items) && section.items.length) {
+            for (const item of section.items) {
+              doc.circle(doc.page.margins.left + 2, doc.y + 6, 1.5).fill('#374151').stroke();
+              doc.fillColor('#111827');
+              doc.text('  ' + String(item || ''), doc.page.margins.left + 8, doc.y, { width: doc.page.width - doc.page.margins.left - doc.page.margins.right - 8 });
+              doc.moveDown(0.2);
+            }
+          } else {
+            doc.text('No items');
+          }
+          doc.moveDown(0.5);
+          if (doc.y > doc.page.height - 60) doc.addPage();
+        }
+      } else {
+        doc.font('Helvetica').text('No content');
+      }
+
+      doc.end();
+      ws.on('finish', resolve);
+      ws.on('error', reject);
+    });
+
+    // Send email using nodemailer (same config as tickets)
+    const transporter = nodemailer.createTransport({
+      host: process.env.EMAIL_HOST,
+      port: process.env.EMAIL_PORT,
+      secure: process.env.EMAIL_PORT === '465',
+      auth: { user: process.env.EMAIL_USER, pass: process.env.EMAIL_PASS }
+    });
+
+    await transporter.sendMail({
+      from: process.env.EMAIL_FROM,
+      to: user.email,
+      subject: subject || (title ? `${title} PDF` : 'Report PDF'),
+      text: body || 'Please find your report attached.',
+      attachments: [{ filename: path.basename(filePath), path: filePath, contentType: 'application/pdf' }]
+    });
+
+    // Clean
+    try { fs.unlinkSync(filePath); } catch {}
+
+    res.json({ message: `Report emailed to ${user.email}` });
+  } catch (e) {
+    res.status(400).json({ message: e.message });
+  }
+};
+
+module.exports = { generatePdf, emailPdf };
diff --git a/backend/src/controllers/scheduledEmailsController.js b/backend/src/controllers/scheduledEmailsController.js
new file mode 100644
index 0000000..0276ca8
--- /dev/null
+++ b/backend/src/controllers/scheduledEmailsController.js
@@ -0,0 +1,109 @@
+const { listJobs, getJob, updateJob, deleteJob } = require('../utils/scheduledEmails');
+
+// Normalize job for client UI
+function toClient(job) {
+  const kind = job.broadcast ? 'broadcast' : (job.eventId ? 'attendees' : 'unknown');
+  const subject = job?.payload?.subject || '';
+  const html = job?.payload?.html || '';
+  const text = job?.payload?.text || '';
+  return {
+    id: job.id,
+    kind,
+    eventId: job.eventId || null,
+    broadcast: !!job.broadcast,
+    scheduledAt: job.scheduledAt,
+    createdAt: job.createdAt,
+    status: job.status,
+    attempts: job.attempts || 0,
+    sentAt: job.sentAt || null,
+    lastError: job.lastError || null,
+    subject,
+    hasHtml: !!html,
+    hasText: !!text,
+  };
+}
+
+// GET /api/scheduled-emails
+// Returns jobs excluding emails sent more than a week ago
+const listScheduledEmails = async (req, res) => {
+  try {
+    const raw = listJobs();
+    const now = new Date();
+    const weekMs = 7 * 24 * 60 * 60 * 1000;
+    const filtered = raw.filter(j => {
+      if (j.status === 'sent' && j.sentAt) {
+        const sentAt = new Date(j.sentAt).getTime();
+        return (now.getTime() - sentAt) <= weekMs;
+      }
+      // Include queued, sending, error by default
+      return true;
+    })
+    // Provide most-relevant first: queued -> sending -> error -> recent sent
+    .sort((a, b) => {
+      const order = { queued: 0, sending: 1, error: 2, sent: 3 };
+      const oa = order[a.status] ?? 99;
+      const ob = order[b.status] ?? 99;
+      if (oa !== ob) return oa - ob;
+      // Then by scheduledAt asc
+      return new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime();
+    })
+    .map(toClient);
+
+    return res.json({ jobs: filtered });
+  } catch (e) {
+    return res.status(400).json({ message: e?.message || 'Failed to list scheduled emails' });
+  }
+};
+
+// PATCH /api/scheduled-emails/:id
+// Allows editing scheduledAt, subject, html/text on queued jobs only
+const updateScheduledEmail = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const job = getJob(id);
+    if (!job) return res.status(404).json({ message: 'Job not found' });
+    if (job.status !== 'queued') return res.status(400).json({ message: 'Only queued jobs can be edited' });
+
+    const { scheduledAt, subject, html, text } = req.body || {};
+
+    const patch = {};
+    if (scheduledAt) {
+      const when = new Date(scheduledAt);
+      if (isNaN(when.getTime())) return res.status(400).json({ message: 'scheduledAt must be a valid ISO date-time' });
+      patch.scheduledAt = when.toISOString();
+    }
+    if (subject != null || html != null || text != null) {
+      const payload = { ...(job.payload || {}) };
+      if (subject != null) payload.subject = subject;
+      if (html != null || text != null) {
+        // If html provided explicitly, set html; if text provided, set text
+        if (html != null) payload.html = html;
+        if (text != null) payload.text = text;
+      }
+      patch.payload = payload;
+    }
+
+    const updated = updateJob(id, patch);
+    return res.json({ message: 'Updated', job: toClient(updated) });
+  } catch (e) {
+    return res.status(400).json({ message: e?.message || 'Failed to update job' });
+  }
+};
+
+// DELETE /api/scheduled-emails/:id
+// Only queued jobs can be removed
+const deleteScheduledEmail = async (req, res) => {
+  try {
+    const { id } = req.params;
+    const job = getJob(id);
+    if (!job) return res.status(404).json({ message: 'Job not found' });
+    if (job.status !== 'queued') return res.status(400).json({ message: 'Only queued jobs can be deleted' });
+    const ok = deleteJob(id);
+    if (!ok) return res.status(404).json({ message: 'Job not found' });
+    return res.json({ message: 'Deleted' });
+  } catch (e) {
+    return res.status(400).json({ message: e?.message || 'Failed to delete job' });
+  }
+};
+
+module.exports = { listScheduledEmails, updateScheduledEmail, deleteScheduledEmail };
diff --git a/backend/src/controllers/sectionController.js b/backend/src/controllers/sectionController.js
new file mode 100644
index 0000000..649616f
--- /dev/null
+++ b/backend/src/controllers/sectionController.js
@@ -0,0 +1,190 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+
+//
+// @desc    Get sections (optionally by event)
+// @route   GET /api/sections?eventId=xxx
+// @access  Private/Staff
+//
+const getSections = async (req, res) => {
+    try {
+        const { eventId } = req.query;
+
+        const where = eventId && eventId !== 'all'
+            ? { eventId }
+            : undefined;
+
+        const sections = await prisma.section.findMany({
+            where,
+            include: {
+                allowedOptions: {
+                    include: {
+                        eventOption: true
+                    }
+                },
+                event: {
+                    select: { id: true, title: true }
+                }
+            },
+            orderBy: { name: 'asc' }
+        });
+
+        res.json(sections);
+    } catch (error) {
+        res.status(400).json({ message: error.message });
+    }
+};
+
+//
+// @desc    Create section
+// @route   POST /api/sections
+// @access  Private/Admin/Supervisor
+//
+const createSection = async (req, res) => {
+    try {
+        const { eventId, name, allowedOptionIds } = req.body;
+
+        if (!eventId || !name) {
+            res.status(400);
+            throw new Error('Event and section name are required');
+        }
+
+        const event = await prisma.event.findUnique({
+            where: { id: eventId }
+        });
+
+        if (!event) {
+            res.status(404);
+            throw new Error('Event not found');
+        }
+
+        const section = await prisma.section.create({
+            data: {
+                id: uuidv4(),
+                eventId,
+                name,
+                updatedAt: new Date()
+            }
+        });
+
+        // Attach allowed options if provided
+        if (Array.isArray(allowedOptionIds) && allowedOptionIds.length > 0) {
+            await prisma.sectionOption.createMany({
+                data: allowedOptionIds.map(optionId => ({
+                    id: uuidv4(),
+                    sectionId: section.id,
+                    eventOptionId: optionId
+                })),
+                skipDuplicates: true
+            });
+        }
+
+        const fullSection = await prisma.section.findUnique({
+            where: { id: section.id },
+            include: {
+                allowedOptions: {
+                    include: { eventOption: true }
+                }
+            }
+        });
+
+        res.status(201).json(fullSection);
+
+    } catch (error) {
+        res.status(400).json({ message: error.message });
+    }
+};
+
+//
+// @desc    Update section
+// @route   PUT /api/sections/:id
+// @access  Private/Admin/Supervisor
+//
+const updateSection = async (req, res) => {
+    try {
+        const { name, allowedOptionIds } = req.body;
+
+        const section = await prisma.section.findUnique({
+            where: { id: req.params.id }
+        });
+
+        if (!section) {
+            res.status(404);
+            throw new Error('Section not found');
+        }
+
+        const updatedSection = await prisma.section.update({
+            where: { id: req.params.id },
+            data: {
+                name: name || section.name,
+                updatedAt: new Date()
+            }
+        });
+
+        // If allowed options supplied → reset them
+        if (Array.isArray(allowedOptionIds)) {
+
+            await prisma.sectionOption.deleteMany({
+                where: { sectionId: section.id }
+            });
+
+            if (allowedOptionIds.length > 0) {
+                await prisma.sectionOption.createMany({
+                    data: allowedOptionIds.map(optionId => ({
+                        id: uuidv4(),
+                        sectionId: section.id,
+                        eventOptionId: optionId
+                    }))
+                });
+            }
+        }
+
+        const fullSection = await prisma.section.findUnique({
+            where: { id: section.id },
+            include: {
+                allowedOptions: {
+                    include: { eventOption: true }
+                }
+            }
+        });
+
+        res.json(fullSection);
+
+    } catch (error) {
+        res.status(400).json({ message: error.message });
+    }
+};
+
+//
+// @desc    Delete section
+// @route   DELETE /api/sections/:id
+// @access  Private/Admin
+//
+const deleteSection = async (req, res) => {
+    try {
+        const section = await prisma.section.findUnique({
+            where: { id: req.params.id }
+        });
+
+        if (!section) {
+            res.status(404);
+            throw new Error('Section not found');
+        }
+
+        await prisma.section.delete({
+            where: { id: section.id }
+        });
+
+        res.json({ message: 'Section deleted' });
+
+    } catch (error) {
+        res.status(400).json({ message: error.message });
+    }
+};
+
+module.exports = {
+    getSections,
+    createSection,
+    updateSection,
+    deleteSection
+};
\ No newline at end of file
diff --git a/backend/src/controllers/settingsController.js b/backend/src/controllers/settingsController.js
new file mode 100644
index 0000000..ede9ff5
--- /dev/null
+++ b/backend/src/controllers/settingsController.js
@@ -0,0 +1,311 @@
+const prisma = require('../config/db');
+const { hashPassword, generateToken } = require('../config/auth');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const { v4: uuidv4 } = require('uuid');
+const { invalidate: invalidateSettingsCache, warmCache, ENCRYPTED_KEYS } = require('../utils/settingsCache');
+const { encrypt, decrypt, isEncrypted } = require('../utils/encryption');
+
+// Keys safe to return without auth — includes legal keys needed by public legal pages
+const PUBLIC_KEYS = [
+  'org_name', 'org_tagline', 'org_email', 'org_phone', 'org_address',
+  'accent_color', 'logo_url', 'setup_complete', 'app_base_url',
+  // Legal pages
+  'legal_operator_name', 'legal_io_name', 'legal_io_email',
+  'legal_website_url', 'legal_effective_date',
+];
+
+// @desc  Get public app settings
+// @route GET /api/settings
+// @access Public
+const getSettings = async (req, res) => {
+  try {
+    const rows = await prisma.appSetting.findMany({ where: { key: { in: PUBLIC_KEYS } } });
+    const settings = {};
+    for (const r of rows) settings[r.key] = r.value;
+    res.json(settings);
+  } catch (e) {
+    res.status(500).json({ message: safeErrorMessage(e) });
+  }
+};
+
+// @desc  Get ALL app settings (admin view — encrypted fields masked)
+// @route GET /api/settings/all
+// @access Admin
+const getAllSettings = async (req, res) => {
+  try {
+    const rows = await prisma.appSetting.findMany();
+    const settings = {};
+    for (const r of rows) {
+      if (ENCRYPTED_KEYS.has(r.key)) {
+        // Return a sentinel so the UI knows the value is set, without exposing it.
+        // smtp_user (email address) we can safely return as-is after decryption so
+        // the admin can see what address is configured; smtp_pass we fully mask.
+        if (r.key === 'smtp_pass') {
+          settings[r.key] = r.value ? '••••••••' : '';
+        } else {
+          // smtp_user — decrypt and return so admin can see/edit it
+          try {
+            settings[r.key] = isEncrypted(r.value) ? decrypt(r.value) : r.value;
+          } catch {
+            settings[r.key] = '';
+          }
+        }
+      } else {
+        settings[r.key] = r.value;
+      }
+    }
+    res.json(settings);
+  } catch (e) {
+    res.status(500).json({ message: safeErrorMessage(e) });
+  }
+};
+
+// @desc  Upsert one or more app settings
+// @route PUT /api/settings
+// @access Admin
+const updateSettings = async (req, res) => {
+  try {
+    const updates = req.body;
+    if (!updates || typeof updates !== 'object') {
+      res.status(400); throw new Error('Body must be a key→value object');
+    }
+
+    const ops = Object.entries(updates)
+      .filter(([, v]) => v !== undefined && v !== null)
+      .map(([key, value]) => {
+        let storedValue = String(value);
+
+        // Encrypt sensitive keys before storing
+        if (ENCRYPTED_KEYS.has(key)) {
+          // If the frontend sends the masking sentinel back, skip this key (user didn't change it)
+          if (storedValue === '••••••••') return null;
+          if (storedValue === '') {
+            // Blank = clear the setting
+            return prisma.appSetting.upsert({
+              where: { key },
+              update: { value: '' },
+              create: { key, value: '' },
+            });
+          }
+          storedValue = encrypt(storedValue);
+        }
+
+        return prisma.appSetting.upsert({
+          where: { key },
+          update: { value: storedValue },
+          create: { key, value: storedValue },
+        });
+      })
+      .filter(Boolean); // remove nulls (masked password skips)
+
+    if (ops.length) await prisma.$transaction(ops);
+    invalidateSettingsCache();
+    await warmCache(); // ensure in-memory cache reflects the new values before responding
+    res.json({ message: 'Settings saved' });
+  } catch (e) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(e) });
+  }
+};
+
+// @desc  Check whether first-time setup is still needed
+// @route GET /api/settings/needs-setup
+// @access Public
+const needsSetup = async (req, res) => {
+  try {
+    const done = await prisma.appSetting.findUnique({ where: { key: 'setup_complete' } });
+    res.json({ needsSetup: done?.value !== 'true' });
+  } catch {
+    // DB unreachable — don't block the app
+    res.json({ needsSetup: false });
+  }
+};
+
+// @desc  Register the first admin account during setup — returns a JWT for use in subsequent setup steps
+// @route POST /api/setup/register
+// @access Public (one-time only — blocked once users exist)
+const setupRegister = async (req, res) => {
+  try {
+    const count = await prisma.user.count();
+    if (count > 0) {
+      res.status(403); throw new Error('Setup has already been completed');
+    }
+
+    const { adminName, adminEmail, adminPassword } = req.body;
+
+    if (!adminName?.trim())   { res.status(400); throw new Error('Admin name is required'); }
+    if (!adminEmail?.trim())  { res.status(400); throw new Error('Admin email is required'); }
+    if (!adminPassword || adminPassword.length < 8) {
+      res.status(400); throw new Error('Password must be at least 8 characters');
+    }
+
+    const hashed = await hashPassword(adminPassword);
+    const user = await prisma.user.create({
+      data: {
+        id: uuidv4(),
+        name: adminName.trim(),
+        email: adminEmail.trim().toLowerCase(),
+        password: hashed,
+        role: 'admin',
+        isActive: true,
+      },
+    });
+
+    const token = generateToken(user.id, user.role, user.tokenVersion ?? 0);
+    res.json({ token, name: user.name, email: user.email });
+  } catch (e) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(e) });
+  }
+};
+
+// @desc  Complete first-time setup: persist settings (admin must already be registered via /api/setup/register)
+// @route POST /api/setup
+// @access Admin (use token returned by /api/setup/register)
+const runSetup = async (req, res) => {
+  try {
+    const setupDone = await prisma.appSetting.findUnique({ where: { key: 'setup_complete' } });
+    if (setupDone?.value === 'true') {
+      res.status(403); throw new Error('Setup has already been completed');
+    }
+
+    const { settings = {} } = req.body;
+
+    const toSave = { ...settings, setup_complete: 'true' };
+    const ops = Object.entries(toSave)
+      .filter(([, v]) => v !== undefined && v !== null && String(v).trim() !== '')
+      .map(([key, value]) => {
+        let storedValue = String(value);
+        if (ENCRYPTED_KEYS.has(key)) storedValue = encrypt(storedValue);
+        return prisma.appSetting.upsert({
+          where: { key },
+          update: { value: storedValue },
+          create: { key, value: storedValue },
+        });
+      });
+    await prisma.$transaction(ops);
+    invalidateSettingsCache();
+    await warmCache();
+
+    res.json({ message: 'Setup complete. You can now log in.' });
+  } catch (e) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(e) });
+  }
+};
+
+/**
+ * Translates raw nodemailer / Node.js network errors into plain-language messages
+ * suitable for display to an admin who may not know what ECONNREFUSED means.
+ */
+function friendlySmtpError(e) {
+  const code = e.code || '';
+  const msg  = (e.message || '').toLowerCase();
+  const resp = (e.response || '').toLowerCase();
+
+  // Authentication failures (530 = Microsoft "Client not authenticated", 535 = standard auth failure)
+  if (code === 'EAUTH' || e.responseCode === 535 || e.responseCode === 530 || msg.includes('invalid login') || msg.includes('username and password') || msg.includes('not authenticated') || resp.includes('badcredentials') || resp.includes('authentication')) {
+    return 'Authentication failed — check your SMTP username and password.';
+  }
+
+  // Wrong certificate / TLS mismatch
+  if (code === 'ESOCKET' && (msg.includes('wrong version') || msg.includes('ssl') || msg.includes('tls'))) {
+    return 'TLS/SSL error — try toggling the "Use TLS/SSL" option or switching the port between 465 and 587.';
+  }
+  if (msg.includes('unable_to_verify') || msg.includes('self signed') || msg.includes('certificate')) {
+    return 'SSL certificate error — the server\'s certificate could not be verified. Check the port and TLS setting.';
+  }
+
+  // Connection refused or timed out
+  if (code === 'ECONNREFUSED') {
+    return 'Connection refused — no mail server responded on that host and port. Check the host and port settings.';
+  }
+  if (code === 'ETIMEDOUT' || code === 'ESOCKETTIMEDOUT' || msg.includes('timed out')) {
+    return 'Connection timed out — the server did not respond in time. Check the host and port, or try a different port.';
+  }
+
+  // DNS / hostname not found
+  if (code === 'ENOTFOUND' || code === 'EAI_AGAIN') {
+    return 'Host not found — the SMTP hostname could not be resolved. Check for typos in the server address.';
+  }
+
+  // Network unreachable
+  if (code === 'ENETUNREACH' || code === 'EHOSTUNREACH') {
+    return 'Network unreachable — the server could not be reached. Check your network connection and the host address.';
+  }
+
+  // Connection reset
+  if (code === 'ECONNRESET') {
+    return 'Connection was reset by the server — this can indicate a port mismatch or a firewall block.';
+  }
+
+  // Generic SMTP error with a response code
+  if (e.responseCode) {
+    return `SMTP error ${e.responseCode}: ${e.response || e.message}`;
+  }
+
+  // Fallback — strip overly long technical strings but keep it readable
+  const raw = e.message || 'Unknown error';
+  const trimmed = raw.length > 120 ? raw.slice(0, 120) + '…' : raw;
+  return `Could not connect: ${trimmed}`;
+}
+
+// @desc  Test SMTP connection using current settings (DB or env fallbacks)
+//        Optionally accepts { host, port, secure, user, pass, from } in the request
+//        body to test unsaved values without saving them first.
+// @route POST /api/settings/test-smtp
+// @access Admin
+const testSmtp = async (req, res) => {
+  const nodemailer = require('nodemailer');
+  const { getSettingSync } = require('../utils/settingsCache');
+
+  try {
+    // Prefer values from the request body so admins can test before saving.
+    // Fall back to cache → env vars.
+    const host   = req.body.host   || getSettingSync('smtp_host',   process.env.SMTP_HOST   || process.env.EMAIL_HOST   || '');
+    const port   = req.body.port   || getSettingSync('smtp_port',   process.env.SMTP_PORT   || process.env.EMAIL_PORT   || '587');
+    const secure = req.body.secure !== undefined
+      ? (req.body.secure === true || req.body.secure === 'true')
+      : (getSettingSync('smtp_secure', process.env.SMTP_SECURE || 'false').toLowerCase() === 'true');
+    const user   = req.body.user   || getSettingSync('smtp_user',   process.env.SMTP_USER   || process.env.EMAIL_USER   || '');
+    // For pass: if a real value is supplied in body use it; if "••••••••" is sent, read from cache.
+    let pass = req.body.pass || '';
+    if (!pass || pass === '••••••••') {
+      pass = getSettingSync('smtp_pass', process.env.SMTP_PASS || process.env.EMAIL_PASS || '');
+    } else {
+      // Body supplied a plaintext password — decrypt it if it happens to be encrypted (shouldn't be, but guard anyway)
+      const { isEncrypted: _ie, decrypt: _d } = require('../utils/encryption');
+      if (_ie(pass)) pass = _d(pass);
+    }
+    const from   = req.body.from   || getSettingSync('smtp_from',   process.env.MAIL_FROM   || process.env.EMAIL_FROM   || '');
+
+    if (!host) {
+      res.status(400); throw new Error('SMTP host is not configured');
+    }
+
+    const transporter = nodemailer.createTransport({
+      host,
+      port: parseInt(port, 10) || 587,
+      secure: secure || String(port) === '465',
+      auth: user && pass ? { user, pass } : undefined,
+    });
+
+    // verify() checks connectivity and authentication without sending a message
+    await transporter.verify();
+
+    // Send a real test email to the authenticated user so there's visible proof
+    const adminEmail = req.user?.email;
+    if (adminEmail) {
+      await transporter.sendMail({
+        from: from || user || 'no-reply@hope-events.local',
+        to: adminEmail,
+        subject: 'SMTP test — Hope Events',
+        text: `This is a test email sent from the Hope Events admin panel to confirm that your SMTP settings are working correctly.\n\nHost: ${host}:${port}\nFrom: ${from || user}`,
+        html: `<p>This is a test email sent from the <strong>Hope Events</strong> admin panel to confirm that your SMTP settings are working correctly.</p><p><strong>Host:</strong> ${host}:${port}<br/><strong>From:</strong> ${from || user}</p>`,
+      });
+    }
+
+    res.json({ message: `SMTP connection verified${adminEmail ? ` — a test email has been sent to ${adminEmail}` : ''}` });
+  } catch (e) {
+    res.status(400).json({ message: friendlySmtpError(e), raw: e.message || String(e) });
+  }
+};
+
+module.exports = { getSettings, getAllSettings, updateSettings, needsSetup, setupRegister, runSetup, testSmtp };
\ No newline at end of file
diff --git a/backend/src/controllers/statsController.js b/backend/src/controllers/statsController.js
new file mode 100644
index 0000000..a63d3cd
--- /dev/null
+++ b/backend/src/controllers/statsController.js
@@ -0,0 +1,141 @@
+const prisma = require('../config/db');
+const { safeErrorMessage } = require('../utils/errorUtils');
+
+// Shared building blocks for the per-dashboard stats endpoints below. Each dashboard
+// (staff/supervisor/admin) gets exactly one endpoint that returns only what it renders,
+// computed with aggregate queries — never a full payments/events list shipped to the
+// client just to be reduced down to a couple of numbers.
+
+async function computeScanStats(userId) {
+  const startOfDay = new Date();
+  startOfDay.setHours(0, 0, 0, 0);
+  const whereBase = { scannedAt: { gte: startOfDay } };
+
+  const [totalToday, myToday, lastHour, byStaffRaw] = await Promise.all([
+    prisma.ticketUsage.count({ where: whereBase }),
+    prisma.ticketUsage.count({ where: { ...whereBase, scannedById: userId } }),
+    prisma.ticketUsage.count({ where: { scannedAt: { gte: new Date(Date.now() - 60 * 60 * 1000) } } }),
+    prisma.ticketUsage.groupBy({ by: ['scannedById'], where: whereBase, _count: { _all: true } }),
+  ]);
+
+  const staffIds = byStaffRaw.map((b) => b.scannedById);
+  const staffUsers = staffIds.length > 0
+    ? await prisma.user.findMany({ where: { id: { in: staffIds } }, select: { id: true, name: true } })
+    : [];
+  const nameMap = Object.fromEntries(staffUsers.map((u) => [u.id, u.name]));
+
+  return {
+    totalToday,
+    myToday,
+    lastHour,
+    byStaff: byStaffRaw.map((b) => ({ scannedById: b.scannedById, name: nameMap[b.scannedById] || 'Staff', count: b._count._all })),
+  };
+}
+
+function getRecentScans(limit = 10) {
+  return prisma.ticketUsage.findMany({
+    orderBy: { scannedAt: 'desc' },
+    take: limit,
+    select: {
+      id: true,
+      scannedAt: true,
+      quantityRedeemed: true,
+      scannedBy: { select: { id: true, name: true } },
+      ticket: {
+        select: {
+          id: true,
+          event: { select: { title: true } },
+          registrationOption: { select: { eventOption: { select: { name: true } } } },
+        },
+      },
+    },
+  });
+}
+
+function getActiveEventsCount() {
+  return prisma.event.count({ where: { isActive: true, endDate: { gte: new Date() } } });
+}
+
+async function computePaymentStats({ includeWeekMonth }) {
+  const startOfDay = new Date(new Date().setHours(0, 0, 0, 0));
+
+  const queries = [
+    prisma.payment.aggregate({ _sum: { amount: true }, where: { createdAt: { gte: startOfDay } } }),
+    prisma.payment.count({ where: { isDonation: true, createdAt: { gte: startOfDay } } }),
+  ];
+  if (includeWeekMonth) {
+    const lastWeek = new Date(startOfDay.getTime() - 7 * 24 * 60 * 60 * 1000);
+    const lastMonth = new Date(startOfDay.getTime() - 30 * 24 * 60 * 60 * 1000);
+    queries.push(
+      prisma.payment.aggregate({ _sum: { amount: true }, where: { createdAt: { gte: lastWeek } } }),
+      prisma.payment.aggregate({ _sum: { amount: true }, where: { createdAt: { gte: lastMonth } } }),
+    );
+  }
+
+  const [totalToday, donationsToday, totalWeek, totalMonth] = await Promise.all(queries);
+
+  const stats = {
+    totalToday: totalToday._sum.amount || 0,
+    donationsToday,
+  };
+  if (includeWeekMonth) {
+    stats.totalWeek = totalWeek._sum.amount || 0;
+    stats.totalMonth = totalMonth._sum.amount || 0;
+  }
+  return stats;
+}
+
+// @desc    All stats the staff dashboard needs, in one call
+// @route   GET /api/stats/staff
+// @access  Private/Staff+
+const getStaffDashboardStats = async (req, res) => {
+  try {
+    const [scanStats, recentScans] = await Promise.all([
+      computeScanStats(req.user.id),
+      getRecentScans(10),
+    ]);
+    res.json({ scanStats, recentScans });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    All stats the supervisor dashboard needs, in one call
+// @route   GET /api/stats/supervisor
+// @access  Private/Supervisor+
+const getSupervisorDashboardStats = async (req, res) => {
+  try {
+    const [scanStats, recentScans, paymentStats, activeEventsCount] = await Promise.all([
+      computeScanStats(req.user.id),
+      getRecentScans(10),
+      computePaymentStats({ includeWeekMonth: false }),
+      getActiveEventsCount(),
+    ]);
+    res.json({ scanStats, recentScans, paymentStats, activeEventsCount });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    All stats the admin dashboard needs, in one call
+// @route   GET /api/stats/admin
+// @access  Private/Admin
+const getAdminDashboardStats = async (req, res) => {
+  try {
+    const [scanStats, recentScans, paymentStats, activeEventsCount] = await Promise.all([
+      computeScanStats(req.user.id),
+      getRecentScans(10),
+      computePaymentStats({ includeWeekMonth: true }),
+      getActiveEventsCount(),
+    ]);
+    res.json({ scanStats, recentScans, paymentStats, activeEventsCount });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+module.exports = {
+  getStaffDashboardStats,
+  getSupervisorDashboardStats,
+  getAdminDashboardStats,
+};
\ No newline at end of file
diff --git a/backend/src/controllers/ticketController.js b/backend/src/controllers/ticketController.js
new file mode 100644
index 0000000..b020501
--- /dev/null
+++ b/backend/src/controllers/ticketController.js
@@ -0,0 +1,795 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const { generateTicketsForRegistration } = require('../utils/ticketUtils');
+const { assertRegistrationEventOpen } = require('../utils/cashupUtils');
+
+// @desc    Generate tickets for a registration
+// @route   POST /api/tickets/generate
+// @access  Private/Admin
+const generateTickets = async (req, res) => {
+  try {
+    const { registrationId } = req.body;
+
+    if (!registrationId) {
+      res.status(400);
+      throw new Error('registrationId is required');
+    }
+
+    await assertRegistrationEventOpen(registrationId, res);
+
+    // Delegate fully to the shared utility which handles deduplication/consolidation
+    const newTickets = await generateTicketsForRegistration(registrationId);
+
+    // Fetch the final canonical ticket set (one per option)
+    const options = await prisma.registrationOption.findMany({ where: { registrationId } });
+    const tickets = await prisma.ticket.findMany({
+      where: { registrationOptionId: { in: options.map(o => o.id) } },
+      include: {
+        registrationOption: { include: { eventOption: true } },
+        user: true,
+        event: true
+      },
+      orderBy: { createdAt: 'asc' }
+    });
+
+    res.status(201).json({
+      message: `${newTickets.length} ticket(s) generated, ${tickets.length} total`,
+      tickets
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get all tickets
+// @route   GET /api/tickets
+// @access  Private/Admin
+const getTickets = async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page)  || 1);
+    const limit = Math.min(200, Math.max(1, parseInt(req.query.limit) || 100));
+    const skip  = (page - 1) * limit;
+
+    const include = {
+      registrationOption: {
+        include: {
+          eventOption: true,
+          registration: {
+            include: { user: { select: { id: true, name: true, email: true, phoneNumber: true } } }
+          }
+        }
+      },
+      event: true,
+      user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+      usages: { include: { scannedBy: { select: { id: true, name: true, email: true } } } }
+    };
+
+    const [tickets, total] = await prisma.$transaction([
+      prisma.ticket.findMany({ include, orderBy: { createdAt: 'desc' }, skip, take: limit }),
+      prisma.ticket.count()
+    ]);
+
+    res.json({ data: tickets, total, page, limit, pages: Math.ceil(total / limit) });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get user tickets
+// @route   GET /api/tickets/mytickets
+// @access  Private
+const getUserTickets = async (req, res) => {
+  try {
+    const tickets = await prisma.ticket.findMany({
+      where: {
+        userId: req.user.id,
+        registrationOption: { registration: { status: { not: 'cancelled' } } }
+      },
+      include: {
+        registrationOption: {
+          include: {
+            eventOption: true,
+            variant: true,
+            registration: true
+          }
+        },
+        event: true,
+        usages: {
+          include: {
+            scannedBy: {
+              select: {
+                id: true,
+                name: true,
+                email: true
+              }
+            }
+          }
+        }
+      }
+    });
+
+    res.json(tickets);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get ticket by ID
+// @route   GET /api/tickets/:id
+// @access  Private
+const getTicketById = async (req, res) => {
+  try {
+    const ticket = await prisma.ticket.findUnique({
+      where: { id: req.params.id },
+      include: {
+        registrationOption: {
+          include: {
+            eventOption: true,
+            registration: {
+              include: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    email: true,
+                    phoneNumber: true
+                  }
+                }
+              }
+            }
+          }
+        },
+        event: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        },
+        usages: {
+          include: {
+            scannedBy: {
+              select: {
+                id: true,
+                name: true,
+                email: true
+              }
+            }
+          }
+        }
+      }
+    });
+
+    if (!ticket) {
+      res.status(404);
+      throw new Error('Ticket not found');
+    }
+
+    // Check if user is authorized to view this ticket
+    if (ticket.userId !== req.user.id && req.user.role !== 'admin' && req.user.role !== 'supervisor' && req.user.role !== 'staff') {
+      res.status(403);
+      throw new Error('Not authorized to view this ticket');
+    }
+
+    res.json(ticket);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get ticket by QR code
+// @route   GET /api/tickets/qr/:qrCode
+// @access  Private/Staff
+const getTicketByQrCode = async (req, res) => {
+  try {
+    const ticket = await prisma.ticket.findUnique({
+      where: { qrCode: req.params.qrCode },
+      include: {
+        registrationOption: {
+          include: {
+            eventOption: true,
+            registration: {
+              include: {
+                user: {
+                  select: {
+                    id: true,
+                    name: true,
+                    email: true,
+                    phoneNumber: true
+                  }
+                }
+              }
+            }
+          }
+        },
+        event: true,
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+            phoneNumber: true
+          }
+        },
+        usages: {
+          include: {
+            scannedBy: {
+              select: {
+                id: true,
+                name: true,
+                email: true
+              }
+            }
+          }
+        }
+      }
+    });
+
+    if (!ticket) {
+      res.status(404);
+      throw new Error('Ticket not found');
+    }
+
+    res.json(ticket);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Lightweight ticket preview for the scan-confirm flow (only fields the confirm modal needs)
+// @route   GET /api/tickets/scan-preview/:qrCode
+// @access  Private/Staff
+const getScanPreview = async (req, res) => {
+  try {
+    // Single JOIN query instead of 6 sequential Prisma round-trips (critical for remote DBs)
+    const rows = await prisma.$queryRaw`
+      SELECT
+        t.id,
+        t."qrCode",
+        t.quantity,
+        t."isUsed",
+        t."eventId",
+        ro.id                AS "registrationOptionId",
+        eo.id                AS "eventOptionId",
+        eo.name              AS "eventOptionName",
+        ov.id                AS "variantId",
+        ov.name              AS "variantName",
+        e.id                 AS "evId",
+        e.title              AS "eventTitle",
+        u.id                 AS "userId",
+        u.name               AS "userName",
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'quantityRedeemed', tu."quantityRedeemed",
+              'scannedAt',        tu."scannedAt"
+            )
+          ) FILTER (WHERE tu.id IS NOT NULL),
+          '[]'::json
+        ) AS usages
+      FROM "Ticket" t
+      LEFT JOIN "RegistrationOption" ro ON ro.id = t."registrationOptionId"
+      LEFT JOIN "EventOption"        eo ON eo.id = ro."eventOptionId"
+      LEFT JOIN "OptionVariant"      ov ON ov.id = ro."variantId"
+      LEFT JOIN "Event"               e ON  e.id = t."eventId"
+      LEFT JOIN "User"                u ON  u.id = t."userId"
+      LEFT JOIN "TicketUsage"        tu ON tu."ticketId" = t.id
+      WHERE t."qrCode" = ${req.params.qrCode}
+      GROUP BY t.id, ro.id, eo.id, ov.id, e.id, u.id
+    `;
+
+    if (!rows || rows.length === 0) {
+      res.status(404);
+      throw new Error('Ticket not found');
+    }
+
+    const r = rows[0];
+    res.json({
+      id:       r.id,
+      quantity: Number(r.quantity),
+      isUsed:   r.isUsed,
+      eventId:  r.eventId,
+      registrationOption: {
+        id: r.registrationOptionId,
+        eventOption: { id: r.eventOptionId, name: r.eventOptionName },
+        variant: r.variantId ? { id: r.variantId, name: r.variantName } : null,
+      },
+      event:  { id: r.evId,   title: r.eventTitle },
+      user:   { id: r.userId, name:  r.userName   },
+      usages: r.usages || []
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Scan ticket (mark as used, with optional partial quantity redemption)
+// @route   POST /api/tickets/scan/:qrCode
+// @access  Private/Staff
+const scanTicket = async (req, res) => {
+  try {
+    // Single JOIN query — avoids multiple sequential round-trips to the remote DB
+    const rows = await prisma.$queryRaw`
+      SELECT
+        t.id,
+        t.quantity,
+        t."isUsed",
+        t."eventId",
+        e.title              AS "eventTitle",
+        eo.id                AS "eventOptionId",
+        eo.name              AS "eventOptionName",
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'id',               tu.id,
+              'quantityRedeemed', tu."quantityRedeemed",
+              'scannedAt',        tu."scannedAt"
+            )
+          ) FILTER (WHERE tu.id IS NOT NULL),
+          '[]'::json
+        ) AS usages
+      FROM "Ticket" t
+      LEFT JOIN "Event"              e  ON  e.id = t."eventId"
+      LEFT JOIN "RegistrationOption" ro ON ro.id = t."registrationOptionId"
+      LEFT JOIN "EventOption"        eo ON eo.id = ro."eventOptionId"
+      LEFT JOIN "TicketUsage"        tu ON tu."ticketId" = t.id
+      WHERE t."qrCode" = ${req.params.qrCode}
+      GROUP BY t.id, e.id, eo.id
+    `;
+
+    if (!rows || rows.length === 0) {
+      res.status(404);
+      throw new Error('Ticket not found');
+    }
+
+    const r = rows[0];
+    const ticket = {
+      id:       r.id,
+      quantity: Number(r.quantity),
+      isUsed:   r.isUsed,
+      eventId:  r.eventId,
+      event:    { title: r.eventTitle },
+      registrationOption: { eventOption: { id: r.eventOptionId, name: r.eventOptionName } },
+      usages:   r.usages || []
+    };
+
+    // Optional server-side guard: ensure ticket belongs to the requested event when provided
+    const providedEventId = String((req.query?.eventId || req.body?.eventId) || '').trim();
+    if (providedEventId && ticket.eventId !== providedEventId) {
+      return res.status(400).json({ message: 'Ticket belongs to a different event', ticket });
+    }
+
+    // Compute how many have already been redeemed
+    const totalRedeemed = (ticket.usages || []).reduce((s, u) => s + (u.quantityRedeemed || 1), 0);
+    const remaining = (ticket.quantity || 1) - totalRedeemed;
+
+    if (remaining <= 0) {
+      return res.status(403).json({
+        message: 'Ticket has already been fully used',
+        ticket,
+        remaining: 0
+      });
+    }
+
+    // Determine how many to redeem this scan (defaults to all remaining)
+    const requestedQty = parseInt(req.body?.qty || req.body?.quantity) || remaining;
+    const qtyToRedeem = Math.min(Math.max(1, requestedQty), remaining);
+
+    const newTotalRedeemed = totalRedeemed + qtyToRedeem;
+    const newRemaining = (ticket.quantity || 1) - newTotalRedeemed;
+    const fullyUsed = newRemaining <= 0;
+
+    // Run the usage insert and ticket status update in parallel — they don't depend on each other
+    const [ticketUsage] = await Promise.all([
+      prisma.ticketUsage.create({
+        data: {
+          id: uuidv4(),
+          ticketId: ticket.id,
+          scannedById: req.user.id,
+          quantityRedeemed: qtyToRedeem,
+        }
+      }),
+      prisma.ticket.update({
+        where: { id: ticket.id },
+        data: { isUsed: fullyUsed, updatedAt: new Date() }
+      })
+    ]);
+
+    res.json({
+      message: `Ticket scanned successfully (${qtyToRedeem} of ${ticket.quantity || 1} redeemed${newRemaining > 0 ? `, ${newRemaining} remaining` : ''})`,
+      ticketUsage,
+      ticket,
+      qtyRedeemed: qtyToRedeem,
+      totalRedeemed: newTotalRedeemed,
+      remaining: newRemaining,
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get tickets by event
+// @route   GET /api/tickets/event/:eventId
+// @access  Private/Staff
+const getTicketsByEvent = async (req, res) => {
+  try {
+    const limit = Math.min(1000, Math.max(1, parseInt(req.query.limit) || 1000));
+
+    const tickets = await prisma.ticket.findMany({
+      where: { eventId: req.params.eventId },
+      include: {
+        registrationOption: { include: { eventOption: true, variant: true, registration: { select: { id: true } } } },
+        user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+        usages: { include: { scannedBy: { select: { id: true, name: true, email: true } } } }
+      },
+      orderBy: { createdAt: 'desc' },
+      take: limit
+    });
+
+    res.json(tickets);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Mark tickets as email sent
+// @route   PUT /api/tickets/email-sent
+// @access  Private/Admin
+const markTicketsAsEmailSent = async (req, res) => {
+  try {
+    const { ticketIds } = req.body;
+
+    if (!ticketIds || !Array.isArray(ticketIds) || ticketIds.length === 0) {
+      res.status(400);
+      throw new Error('Ticket IDs are required');
+    }
+
+    // Update tickets
+    await prisma.ticket.updateMany({
+      where: {
+        id: {
+          in: ticketIds
+        }
+      },
+      data: {
+        emailSent: true,
+        updatedAt: new Date()
+      }
+    });
+
+    res.json({ message: `${ticketIds.length} tickets marked as email sent` });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Email (and WhatsApp if preference set) tickets to user
+// @route   POST /api/tickets/email
+// @access  Private
+// Optional body param: channel ('email'|'whatsapp'|'both') — overrides user's notification preference for this request
+const emailTickets = async (req, res) => {
+  try {
+    // If caller specifies an explicit channel, build a minimal userOverride that forces that preference
+    const { channel } = req.body || {};
+    let userOverride = null;
+    if (channel && ['email', 'whatsapp', 'both'].includes(channel)) {
+      // Load base user data then override the preference
+      const userId = req.user?.id;
+      if (userId) {
+        const baseUser = await prisma.user.findUnique({
+          where: { id: userId },
+          select: { id: true, email: true, name: true, phoneNumber: true, notificationPreference: true }
+        });
+        if (baseUser) {
+          userOverride = { ...baseUser, notificationPreference: channel };
+        }
+      }
+    }
+    return await emailTicketsInternal(req, res, userOverride);
+  } catch (error) {
+    console.error('Error emailing tickets:', error);
+    res.status(error.statusCode || 400).json({ message: error.message });
+  }
+};
+
+// @desc    Get recent ticket scans
+// @route   GET /api/tickets/scans/recent
+// @access  Private/Staff
+const getRecentScans = async (req, res) => {
+  try {
+    const limit = Math.max(1, Math.min(parseInt(req.query.limit) || 10, 100));
+    const eventId = req.query.eventId || undefined;
+
+    const scans = await prisma.ticketUsage.findMany({
+      where: eventId ? { ticket: { eventId } } : undefined,
+      orderBy: { scannedAt: 'desc' },
+      take: limit,
+      select: {
+        id: true,
+        scannedAt: true,
+        quantityRedeemed: true,
+        scannedBy: { select: { id: true, name: true } },
+        ticket: {
+          select: {
+            id: true,
+            event: { select: { title: true } },
+            registrationOption: { select: { eventOption: { select: { name: true } } } }
+          }
+        }
+      }
+    });
+
+    res.json(scans);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get scan statistics
+// @route   GET /api/tickets/scans/stats
+// @access  Private/Staff
+const getScanStats = async (req, res) => {
+  try {
+    const eventId = req.query.eventId || undefined;
+    const startOfDay = new Date();
+    startOfDay.setHours(0, 0, 0, 0);
+
+    // Total scans today (optionally by event)
+    const whereBase = {
+      scannedAt: { gte: startOfDay },
+      ...(eventId ? { ticket: { eventId } } : {})
+    };
+
+    const [totalToday, myToday, lastHour] = await Promise.all([
+      prisma.ticketUsage.count({ where: whereBase }),
+      prisma.ticketUsage.count({ where: { ...whereBase, scannedById: req.user.id } }),
+      prisma.ticketUsage.count({
+        where: {
+          ...(eventId ? { ticket: { eventId } } : {}),
+          scannedAt: { gte: new Date(Date.now() - 60 * 60 * 1000) }
+        }
+      })
+    ]);
+
+    // Per-scanner breakdown today
+    const byStaff = await prisma.ticketUsage.groupBy({
+      by: ['scannedById'],
+      where: whereBase,
+      _count: { _all: true }
+    });
+    const staffIds = byStaff.map(b => b.scannedById);
+    const staffUsers = staffIds.length > 0 ? await prisma.user.findMany({
+      where: { id: { in: staffIds } },
+      select: { id: true, name: true }
+    }) : [];
+    const nameMap = Object.fromEntries(staffUsers.map(u => [u.id, u.name]));
+
+    res.json({
+      totalToday,
+      myToday,
+      lastHour,
+      byStaff: byStaff.map(b => ({ scannedById: b.scannedById, name: nameMap[b.scannedById] || 'Staff', count: b._count._all }))
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Send tickets to a specific phone/email (staff override for at-the-door)
+// @route   POST /api/tickets/send-to
+// @access  Private/Staff
+const sendTicketsTo = async (req, res) => {
+  try {
+    const { registrationId, ticketIds, channel, overridePhone, overrideEmail } = req.body;
+    if (!registrationId && (!ticketIds || !Array.isArray(ticketIds) || ticketIds.length === 0)) {
+      res.status(400); throw new Error('registrationId or ticketIds required');
+    }
+    if (!channel || !['email','whatsapp','both'].includes(channel)) {
+      res.status(400); throw new Error('channel must be email, whatsapp, or both');
+    }
+
+    // Determine which user owns the tickets to get their default contact info
+    let ownerUserId;
+    if (registrationId) {
+      const reg = await prisma.registration.findUnique({ where: { id: registrationId }, select: { userId: true } });
+      if (!reg) { res.status(404); throw new Error('Registration not found'); }
+      ownerUserId = reg.userId;
+    } else {
+      const firstTicket = await prisma.ticket.findUnique({ where: { id: ticketIds[0] }, select: { userId: true } });
+      if (!firstTicket) { res.status(404); throw new Error('Ticket not found'); }
+      ownerUserId = firstTicket.userId;
+    }
+
+    // Use a mock req that targets the ticket owner; override contact details in user object via closure
+    const originalUser = await prisma.user.findUnique({
+      where: { id: ownerUserId },
+      select: { id: true, email: true, name: true, phoneNumber: true, notificationPreference: true }
+    });
+    if (!originalUser) { res.status(404); throw new Error('Ticket owner not found'); }
+
+    // Build a virtual user with override contact details
+    const virtualUser = {
+      ...originalUser,
+      email: overrideEmail || originalUser.email,
+      phoneNumber: overridePhone || originalUser.phoneNumber,
+      // Force the preference to match the requested channel
+      notificationPreference: channel,
+    };
+
+    // Reuse emailTickets logic via mock request but with virtual user
+    // We build a minimal mock and call the internal flow directly
+    const mockBody = registrationId ? { registrationId } : { ticketIds };
+    const mockReq = { user: { id: ownerUserId }, body: mockBody, _virtualUser: virtualUser };
+    const mockRes = { status: () => mockRes, json: (body) => { res.json(body); } };
+
+    // Call emailTickets with the virtual user override
+    await emailTicketsInternal(mockReq, mockRes, virtualUser);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// Internal helper used by both emailTickets and sendTicketsTo
+async function emailTicketsInternal(req, res, userOverride) {
+  const { ticketIds, registrationId } = req.body;
+  const userId = req.user.id;
+
+  const user = userOverride || await prisma.user.findUnique({
+    where: { id: userId },
+    select: { email: true, name: true, phoneNumber: true, notificationPreference: true }
+  });
+  if (!user) { res.status(404); throw new Error('User not found'); }
+  const pref = user.notificationPreference || 'email';
+  const noValidEmail = !user.email || user.email.endsWith('@guest.local');
+  // For users without a valid email, WhatsApp is used as fallback regardless of preference
+  const canSendWA = !!user.phoneNumber && ((pref === 'whatsapp' || pref === 'both') || noValidEmail);
+  // Only block if neither channel can deliver
+  if (noValidEmail && !canSendWA) {
+    return res.json({ message: 'No valid contact details on file — ticket delivery skipped.' });
+  }
+
+  let tickets;
+  if (registrationId) {
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId, userId }
+    });
+    if (!registration) { res.status(404); throw new Error('Registration not found or does not belong to you'); }
+    const registrationOptions = await prisma.registrationOption.findMany({ where: { registrationId } });
+    tickets = await prisma.ticket.findMany({
+      where: { registrationOptionId: { in: registrationOptions.map(o => o.id) }, userId },
+      include: { event: true, registrationOption: { include: { eventOption: true, variant: true } }, usages: true },
+      orderBy: { createdAt: 'asc' }
+    });
+  } else {
+    tickets = await prisma.ticket.findMany({
+      where: { id: { in: ticketIds }, userId },
+      include: { event: true, registrationOption: { include: { eventOption: true, variant: true } }, usages: true },
+      orderBy: { createdAt: 'asc' }
+    });
+  }
+
+  // Dedup by registrationOptionId
+  {
+    const seen = new Map(); const deduped = [];
+    for (const t of tickets) {
+      const key = t.registrationOptionId;
+      if (!seen.has(key)) { seen.set(key, t); deduped.push(t); }
+      else {
+        const existing = seen.get(key);
+        if ((existing.usages||[]).length === 0 && (t.usages||[]).length > 0) {
+          seen.set(key, t); deduped[deduped.indexOf(existing)] = t;
+        }
+      }
+    }
+    tickets = deduped;
+  }
+  if (tickets.length === 0) { res.status(404); throw new Error('No valid tickets found'); }
+
+  // Generate PDF
+  const PDFDocument = require('pdfkit');
+  const QRCode = require('qrcode');
+  const fs = require('fs');
+  const path = require('path');
+  const tempFilePath = path.join(__dirname, '..', '..', 'temp', `tickets-${userId}-${Date.now()}.pdf`);
+  const tempDir = path.join(__dirname, '..', '..', 'temp');
+  if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
+
+  const doc = new PDFDocument({ size: 'A4', margin: 20 });
+  const writeStream = fs.createWriteStream(tempFilePath);
+  doc.pipe(writeStream);
+  const pageWidth = doc.page.width - 40; const pageHeight = doc.page.height - 40;
+  const ticketsPerRow = 2; const ticketsPerColumn = 4;
+  const ticketWidth = pageWidth / ticketsPerRow; const ticketHeight = pageHeight / ticketsPerColumn;
+  const qrCodes = await Promise.all(tickets.map(ticket => new Promise((resolve, reject) => {
+    QRCode.toDataURL(ticket.qrCode, (err, url) => err ? reject(err) : resolve({ ticketId: ticket.id, qrDataUrl: url }));
+  })));
+  const qrCodeMap = qrCodes.reduce((map, item) => { map[item.ticketId] = item.qrDataUrl; return map; }, {});
+  let ticketIndex = 0;
+  for (const ticket of tickets) {
+    const row = Math.floor(ticketIndex % ticketsPerColumn);
+    const col = Math.floor((ticketIndex / ticketsPerColumn) % ticketsPerRow);
+    const x = col * ticketWidth + 20; const y = row * ticketHeight + 20;
+    doc.rect(x, y, ticketWidth, ticketHeight).stroke();
+    doc.font('Helvetica-Bold').fontSize(12).text(ticket.event.title, x + 10, y + 10, { width: ticketWidth - 20 });
+    doc.font('Helvetica').fontSize(10);
+    const variantSuffix = ticket.registrationOption.variant ? ` — ${ticket.registrationOption.variant.name}` : '';
+    doc.text(`Ticket Type: ${ticket.registrationOption.eventOption.name}${variantSuffix}`, x + 10, y + 30, { width: ticketWidth - 20 });
+    doc.text(`Qty: ${ticket.quantity || 1}`, x + 10, y + 45, { width: ticketWidth - 20 });
+    const eventDate = new Date(ticket.event.startDate);
+    doc.text(`Date: ${new Intl.DateTimeFormat('en-GB', { day: '2-digit', month: 'long', year: 'numeric' }).format(eventDate)}`, x + 10, y + 60, { width: ticketWidth - 20 });
+    doc.text(`Purchased by: ${user.name}`, x + 10, y + 75, { width: ticketWidth - 20 });
+    const qrCodeSize = Math.min(ticketWidth, ticketHeight) * 0.45;
+    const qrX = x + (ticketWidth - qrCodeSize) / 2; const qrY = y + 90;
+    doc.image(qrCodeMap[ticket.id], qrX, qrY, { width: qrCodeSize, height: qrCodeSize });
+    doc.fontSize(8).text(`Ticket ID: ${ticket.id}`, x + 10, qrY + qrCodeSize + 5, { width: ticketWidth - 20, align: 'center' });
+    ticketIndex++;
+    if (ticketIndex % (ticketsPerRow * ticketsPerColumn) === 0 && ticketIndex < tickets.length) doc.addPage();
+  }
+  doc.end();
+  await new Promise((resolve, reject) => { writeStream.on('finish', resolve); writeStream.on('error', reject); });
+
+  const eventTitle = tickets[0].event.title;
+  const eventDate = tickets[0].event.startDate
+    ? new Date(tickets[0].event.startDate).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
+    : '';
+  const pdfFilename = `tickets-${eventTitle.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.pdf`;
+  const sentChannels = [];
+
+  const { sendMail, emailWrapper } = require('../utils/email');
+  const { canWhatsApp, waPdf } = require('../utils/notify');
+  const { buildWATicketCaption } = require('../utils/waMessages');
+  const orgUrl = (process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, '');
+  const ff = `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`;
+  const ticketHtml = emailWrapper(`
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0">🎟️ Your tickets are here!</p>
+    <p style="margin:0 0 8px 0;color:#374151;font-family:${ff}">Hi <strong>${user.name}</strong>,</p>
+    <p style="margin:0 0 24px 0;color:#374151;font-family:${ff}">Your tickets for <strong>${eventTitle}</strong>${eventDate ? ` on <strong>${eventDate}</strong>` : ''} are attached.</p>
+    <p style="font-size:13px;color:#64748b;font-family:${ff}">Questions? Visit <a href="${orgUrl}" style="color:#2563eb">${orgUrl}</a>.</p>
+  `, { preheader: `Your tickets for ${eventTitle} are attached!` });
+
+  // Send email unless preference is whatsapp-only
+  if (pref !== 'whatsapp' && user.email && !user.email.endsWith('@deleted.invalid') && !user.email.endsWith('@guest.local')) {
+    await sendMail({
+      to: user.email,
+      subject: `Your tickets for ${eventTitle}`,
+      html: ticketHtml,
+      text: `Hi ${user.name},\n\nYour tickets for ${eventTitle}${eventDate ? ' on ' + eventDate : ''} are attached.\n\nSee you there!`,
+      attachments: [{ filename: pdfFilename, path: tempFilePath, contentType: 'application/pdf' }],
+    });
+    sentChannels.push('email');
+  }
+
+  // Send WhatsApp if preference includes it, or as fallback when email isn't available
+  if (pref === 'whatsapp' || pref === 'both' || noValidEmail) {
+    const { normalizeZAPhone } = require('../utils/whatsapp');
+    const normalizedPhone = normalizeZAPhone(user.phoneNumber);
+    if (normalizedPhone) {
+      const caption = buildWATicketCaption({ name: user.name, eventTitle, eventDate });
+      await waPdf({ ...user, phoneNumber: normalizedPhone, notificationPreference: 'both' }, tempFilePath, pdfFilename, caption).catch(() => {});
+      sentChannels.push('whatsapp');
+    }
+  }
+
+  try { require('fs').unlinkSync(tempFilePath); } catch {}
+  await prisma.ticket.updateMany({ where: { id: { in: tickets.map(t => t.id) } }, data: { emailSent: true, updatedAt: new Date() } });
+  res.json({ message: `${tickets.length} ticket(s) sent via ${sentChannels.join(' & ') || 'no channel'}`, ticketIds: tickets.map(t => t.id) });
+}
+
+module.exports = {
+  generateTickets,
+  getTickets,
+  getUserTickets,
+  getTicketById,
+  getTicketByQrCode,
+  getScanPreview,
+  scanTicket,
+  getTicketsByEvent,
+  markTicketsAsEmailSent,
+  emailTickets,
+  sendTicketsTo,
+  getRecentScans,
+  getScanStats
+};
\ No newline at end of file
diff --git a/backend/src/controllers/uploadController.js b/backend/src/controllers/uploadController.js
new file mode 100644
index 0000000..31f6f7c
--- /dev/null
+++ b/backend/src/controllers/uploadController.js
@@ -0,0 +1,103 @@
+const path = require('path');
+const fs = require('fs');
+const multer = require('multer');
+
+// Setup multer storage
+const storage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        const uploadPath = path.join(__dirname, '..', '..','public', 'uploads', 'events');
+        
+        // Check if the upload location exists
+        try {
+            if (!fs.existsSync(uploadPath)) {
+                console.log(`Upload directory does not exist. Creating: ${uploadPath}`);
+                fs.mkdirSync(uploadPath, { recursive: true });
+            } else {
+                // Verify we have write permissions to the directory
+                fs.accessSync(uploadPath, fs.constants.W_OK);
+                console.log(`Upload directory exists and is writable: ${uploadPath}`);
+            }
+            cb(null, uploadPath);
+        } catch (error) {
+            console.error(`Error with upload directory: ${error.message}`);
+            cb(new Error(`Cannot access upload directory: ${error.message}`));
+        }
+    },
+    filename: function (req, file, cb) {
+        const uniqueName = `${Date.now()}-${file.originalname}`;
+        cb(null, uniqueName);
+    }
+});
+
+// Multer middleware
+const upload = multer({
+    storage,
+    limits: { fileSize: 5 * 1024 * 1024 }, // 5MB max
+    fileFilter: function (req, file, cb) {
+        const ext = path.extname(file.originalname).toLowerCase();
+        if (!['.jpg', '.jpeg', '.png', '.webp', '.gif'].includes(ext)) {
+            return cb(new Error('Only images are allowed'), false);
+        }
+        cb(null, true);
+    }
+});
+
+// Logo storage (separate subfolder)
+const logoStorage = multer.diskStorage({
+    destination: function (req, file, cb) {
+        const uploadPath = path.join(__dirname, '..', '..', 'public', 'uploads', 'branding');
+        try {
+            if (!fs.existsSync(uploadPath)) fs.mkdirSync(uploadPath, { recursive: true });
+            cb(null, uploadPath);
+        } catch (error) {
+            cb(new Error(`Cannot access upload directory: ${error.message}`));
+        }
+    },
+    filename: function (req, file, cb) {
+        cb(null, `logo-${Date.now()}${path.extname(file.originalname).toLowerCase()}`);
+    }
+});
+
+const uploadLogo = multer({
+    storage: logoStorage,
+    limits: { fileSize: 2 * 1024 * 1024 }, // 2 MB
+    fileFilter: function (req, file, cb) {
+        const ext = path.extname(file.originalname).toLowerCase();
+        if (!['.jpg', '.jpeg', '.png', '.webp', '.svg'].includes(ext)) {
+            return cb(new Error('Only image files are allowed'), false);
+        }
+        cb(null, true);
+    }
+});
+
+// Controller function
+const uploadEventImage = (req, res) => {
+    // Check for multer errors which would be passed in req.multerError
+    if (req.multerError) {
+        return res.status(500).json({ message: `Upload failed: ${req.multerError.message}` });
+    }
+
+    if (!req.file) {
+        return res.status(400).json({ message: 'No file uploaded' });
+    }
+
+    const imageUrl = `/uploads/events/${req.file.filename}`;
+    res.status(200).json({ url: imageUrl });
+};
+
+const uploadLogoImage = (req, res) => {
+    if (req.multerError) {
+        return res.status(500).json({ message: `Upload failed: ${req.multerError.message}` });
+    }
+    if (!req.file) {
+        return res.status(400).json({ message: 'No file uploaded' });
+    }
+    res.status(200).json({ url: `/uploads/branding/${req.file.filename}` });
+};
+
+module.exports = {
+    upload,
+    uploadEventImage,
+    uploadLogo,
+    uploadLogoImage,
+};
diff --git a/backend/src/controllers/userController.js b/backend/src/controllers/userController.js
new file mode 100644
index 0000000..a4dc3e3
--- /dev/null
+++ b/backend/src/controllers/userController.js
@@ -0,0 +1,934 @@
+const prisma = require('../config/db');
+const { generateToken, hashPassword, comparePassword } = require('../config/auth');
+const { v4: uuidv4 } = require('uuid');
+const { safeErrorMessage } = require('../utils/errorUtils');
+const axios = require('axios');
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+// Resolve a client IP from the request (works behind proxies)
+function getClientIp(req) {
+  const forwarded = req.headers['x-forwarded-for'];
+  if (forwarded) return forwarded.split(',')[0].trim();
+  return req.socket?.remoteAddress || 'unknown';
+}
+
+const PRIVATE_IP_RE = /^(::1|::ffff:127\.|127\.|10\.|172\.(1[6-9]|2\d|3[01])\.|192\.168\.)/;
+
+// Fire-and-forget: send a login notification email with approximate geo location
+async function sendLoginNotification(user, req) {
+  try {
+    const ip = getClientIp(req);
+    const userAgent = req.headers['user-agent'] || 'Unknown device';
+    const when = new Date().toLocaleString('en-ZA', { timeZone: 'Africa/Johannesburg' });
+
+    let location = 'Unknown location';
+    if (ip !== 'unknown' && !PRIVATE_IP_RE.test(ip)) {
+      try {
+        const geo = await axios.get(
+          `http://ip-api.com/json/${ip}?fields=status,city,regionName,country`,
+          { timeout: 3000 }
+        );
+        if (geo.data?.status === 'success') {
+          const parts = [geo.data.city, geo.data.regionName, geo.data.country].filter(Boolean);
+          if (parts.length) location = parts.join(', ');
+        }
+      } catch { /* geo lookup failure is non-fatal */ }
+    }
+
+    const { sendMail, buildLoginNotificationEmail } = require('../utils/email');
+    const { buildWALogin } = require('../utils/waMessages');
+    const content = buildLoginNotificationEmail({ name: user.name, when, location, userAgent });
+    // Security: always email; also WhatsApp if preferred
+    await sendMail({ to: user.email, subject: 'New login to your Hope Events account', ...content });
+    const { waText } = require('../utils/notify');
+    await waText(user, buildWALogin({ name: user.name, when, location, userAgent })).catch(() => {});
+  } catch (e) {
+    console.warn('[login notification] Failed:', e?.message || e);
+  }
+}
+
+// Fire-and-forget: send welcome email with next upcoming events
+async function sendWelcomeEmail(user) {
+  try {
+    const events = await prisma.event.findMany({
+      where: { isActive: true, startDate: { gt: new Date() } },
+      orderBy: { startDate: 'asc' },
+      take: 3,
+      select: { title: true, startDate: true },
+    });
+    const { sendMail, buildWelcomeEmail } = require('../utils/email');
+    const { buildWAWelcome } = require('../utils/waMessages');
+    const content = buildWelcomeEmail({ name: user.name, events });
+    const { shouldEmail, waText } = require('../utils/notify');
+    // Welcome is always sent via email; also via WhatsApp if preferred
+    await sendMail({ to: user.email, subject: 'Welcome to Hope Events!', ...content });
+    await waText(user, buildWAWelcome({ name: user.name, events })).catch(() => {});
+  } catch (e) {
+    console.warn('[welcome email] Failed:', e?.message || e);
+  }
+}
+
+// @desc    Register a new user
+// @route   POST /api/users
+// @access  Public
+const registerUser = async (req, res) => {
+  try {
+    const { name, email, password, phoneNumber, notificationPreference } = req.body;
+
+    // Normalize phone using SA-aware normalisation
+    const { normalizeZAPhone, isValidZAPhone } = require('../utils/whatsapp');
+    const phone = normalizeZAPhone(phoneNumber) || (phoneNumber ? phoneNumber.replace(/\D/g, '') || null : null);
+
+    // Validate preference — WhatsApp requires a valid phone number
+    const allowedPrefs = ['email', 'whatsapp', 'both'];
+    let pref = allowedPrefs.includes(notificationPreference) ? notificationPreference : 'email';
+    if ((pref === 'whatsapp' || pref === 'both') && !isValidZAPhone(phoneNumber)) {
+      pref = 'email'; // silently fall back if no valid number
+    }
+
+    // Check if user already exists
+    const userExists = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { email },
+          ...(phone ? [{ phoneNumber: phone }] : [])
+        ]
+      }
+    });
+
+    if (userExists) {
+      res.status(400);
+      throw new Error('User already exists');
+    }
+
+    // Hash password
+    const hashedPassword = await hashPassword(password);
+
+    // Create user
+    const user = await prisma.user.create({
+      data: {
+        id: uuidv4(),
+        name,
+        email,
+        password: hashedPassword,
+        phoneNumber: phone,
+        notificationPreference: pref,
+        updatedAt: new Date()
+      }
+    });
+
+    if (user) {
+      // Send welcome email in the background — don't block the response
+      sendWelcomeEmail(user).catch(() => {});
+
+      res.status(201).json({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        token: generateToken(user.id, user.role, user.tokenVersion)
+      });
+    } else {
+      res.status(400);
+      throw new Error('Invalid user data');
+    }
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Auth user & get token
+// @route   POST /api/users/login
+// @access  Public
+const loginUser = async (req, res) => {
+  try {
+    const {email, password} = req.body;
+
+    const rawInput = email;
+
+    // Normalize phone input — convert SA local format (0xx) → international (27xx)
+    const { normalizeZAPhone } = require('../utils/whatsapp');
+    const normalizedPhone = normalizeZAPhone(rawInput) || rawInput.replace(/\D/g, '');
+
+    // Check for user email or phone
+    const user = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { email: rawInput },
+          ...(normalizedPhone ? [{ phoneNumber: normalizedPhone }] : []),
+        ]
+      }
+    });
+
+    if (!user) {
+      res.status(401);
+      throw new Error('User does not exist');
+    }
+
+    // Check if user is active
+    if (!user.isActive) {
+      // If the account has a real email (not a guest placeholder), send an activation link via email
+      if (user.email && !user.email.endsWith('@guest.local')) {
+        try {
+          const token = uuidv4();
+          const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24h
+          await prisma.passwordReset.updateMany({
+            where: { userId: user.id, used: false },
+            data: { used: true }
+          });
+          await prisma.passwordReset.create({
+            data: { id: uuidv4(), userId: user.id, token, expiresAt, used: false }
+          });
+          const baseUrl = process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001';
+          const activationUrl = `${baseUrl.replace(/\/$/, '')}/activate-account?token=${encodeURIComponent(token)}`;
+          const { sendMail, buildAccountActivationEmail } = require('../utils/email');
+          const content = buildAccountActivationEmail({ name: user.name, activationUrl });
+          sendMail({ to: user.email, subject: 'Activate your Hope Events account', ...content })
+            .catch(e => console.warn('[activation email] Failed:', e?.message || e));
+        } catch (e) {
+          console.warn('[activation token] Failed to create activation token:', e?.message || e);
+        }
+        res.status(401);
+        throw new Error('Your account is not yet active. We\'ve sent you an email with a link to activate your account.');
+      }
+      // No real email — if they have a phone number, send the activation link via WhatsApp
+      if (user.phoneNumber) {
+        try {
+          const token = uuidv4();
+          const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000); // 24h
+          await prisma.passwordReset.updateMany({
+            where: { userId: user.id, used: false },
+            data: { used: true }
+          });
+          await prisma.passwordReset.create({
+            data: { id: uuidv4(), userId: user.id, token, expiresAt, used: false }
+          });
+          const baseUrl = process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001';
+          const activationUrl = `${baseUrl.replace(/\/$/, '')}/activate-account?token=${encodeURIComponent(token)}`;
+          const orgName = require('../utils/settingsCache').getSettingSync('org_name', process.env.ORG_NAME || 'Hope Events');
+          const waMessage = [
+            `🔓 *Activate your ${orgName} account*`,
+            '',
+            `Hi ${user.name || 'there'},`,
+            '',
+            `Your account needs to be activated before you can log in. Tap the link below to set a password and activate your account:`,
+            '',
+            activationUrl,
+            '',
+            `_This link expires in 24 hours._`,
+          ].join('\n');
+          const { waTextAny } = require('../utils/notify');
+          waTextAny(user, waMessage).catch(e => console.warn('[activation WA] Failed:', e?.message || e));
+        } catch (e) {
+          console.warn('[activation token WA] Failed to create activation token:', e?.message || e);
+        }
+        res.status(401);
+        throw new Error('Your account is not yet active. We\'ve sent you a WhatsApp message with a link to activate your account.');
+      }
+      res.status(401);
+      throw new Error('Your account has been deactivated');
+    }
+
+    const MAX_ATTEMPTS = 5;
+    const LOCK_TIME = 5 * 60 * 1000; // 5 min
+
+    // Check lock
+    if (user.lockUntil && user.lockUntil > new Date()) {
+      const now = new Date().getTime();
+      const lockTime = new Date(user.lockUntil).getTime();
+
+      const diffMs = lockTime - now;
+      const diffMinutes = Math.ceil(diffMs / (1000 * 60));
+
+      throw new Error(`Too many attempts. Try again in ${diffMinutes} minute(s).`);
+    }
+
+    // Check password
+    const isMatch = await comparePassword(password, user.password);
+
+    if (!isMatch) {
+      const attempts = user.failedAttempts + 1;
+
+      await prisma.user.update({
+        where: { id: user.id },
+        data: {
+          failedAttempts: attempts,
+          lockUntil:
+              attempts >= MAX_ATTEMPTS
+                  ? new Date(Date.now() + LOCK_TIME)
+                  : null,
+        },
+      });
+
+      throw new Error("Invalid email or password");
+    }
+
+    // ✅ SUCCESS → reset attempts
+    const updated = await prisma.user.update({
+      where: { id: user.id },
+      data: { failedAttempts: 0, lockUntil: null },
+      select: { id: true, name: true, email: true, role: true, tokenVersion: true, phoneNumber: true, notificationPreference: true },
+    });
+
+    // Send login notification in the background
+    sendLoginNotification(updated, req).catch(() => {});
+
+    res.json({
+      id: updated.id,
+      name: updated.name,
+      email: updated.email,
+      role: updated.role,
+      token: generateToken(updated.id, updated.role, updated.tokenVersion)
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get user profile
+// @route   GET /api/users/profile
+// @access  Private
+const getUserProfile = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.user.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        role: true,
+        phoneNumber: true,
+        notificationPreference: true,
+        createdAt: true,
+        updatedAt: true,
+        isActive: true
+      }
+    });
+
+    if (user) {
+      res.json(user);
+    } else {
+      res.status(404);
+      throw new Error('User not found');
+    }
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Update user profile
+// @route   PUT /api/users/profile
+// @access  Private
+const updateUserProfile = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.user.id }
+    });
+
+    if (!user) {
+      res.status(404);
+      throw new Error('User not found');
+    }
+
+    const { name, email, password, phoneNumber, currentPassword, notificationPreference } = req.body || {};
+
+    // If a password change is requested, verify current password for safety
+    let newHashedPassword = undefined;
+    if (typeof password === 'string' && password.trim().length > 0) {
+      const newPw = password.trim();
+      if (!currentPassword || typeof currentPassword !== 'string' || currentPassword.length === 0) {
+        res.status(400);
+        throw new Error('Current password is required to set a new password');
+      }
+      const matches = await comparePassword(currentPassword, user.password);
+      if (!matches) {
+        res.status(400);
+        throw new Error('Current password is incorrect');
+      }
+      if (newPw.length < 8) {
+        res.status(400);
+        throw new Error('New password must be at least 8 characters long');
+      }
+      newHashedPassword = await hashPassword(newPw);
+    }
+
+    // Normalize phone
+    const { normalizeZAPhone, isValidZAPhone } = require('../utils/whatsapp');
+    let newPhone = user.phoneNumber;
+    if (phoneNumber !== undefined) {
+      newPhone = phoneNumber ? (normalizeZAPhone(phoneNumber) || phoneNumber.replace(/\D/g, '') || null) : null;
+    }
+
+    // Validate notification preference — WhatsApp requires a valid SA phone number
+    const allowedPrefs = ['email', 'whatsapp', 'both'];
+    let newPref = user.notificationPreference;
+    if (notificationPreference !== undefined) {
+      newPref = allowedPrefs.includes(notificationPreference) ? notificationPreference : user.notificationPreference;
+      if ((newPref === 'whatsapp' || newPref === 'both') && !isValidZAPhone(newPhone)) {
+        newPref = 'email';
+      }
+    }
+
+    // Update user data
+    const updatedUser = await prisma.user.update({
+      where: { id: req.user.id },
+      data: {
+        name: name || user.name,
+        email: email || user.email,
+        password: newHashedPassword ? newHashedPassword : user.password,
+        phoneNumber: newPhone,
+        notificationPreference: newPref,
+        updatedAt: new Date()
+      },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        role: true,
+        phoneNumber: true,
+        notificationPreference: true,
+        createdAt: true,
+        updatedAt: true,
+        isActive: true,
+        tokenVersion: true
+      }
+    });
+
+    // If the password was changed, send a security alert email (fire-and-forget)
+    if (newHashedPassword) {
+      const { sendMail, buildPasswordChangedEmail } = require('../utils/email');
+      const { getSettingSync } = require('../utils/settingsCache');
+      const supportEmail = getSettingSync('org_email', process.env.EMAIL_FROM || '');
+      const content = buildPasswordChangedEmail({ name: updatedUser.name, when: Date.now(), supportEmail });
+      sendMail({ to: updatedUser.email, subject: 'Your Hope Events password was changed', ...content })
+        .catch(e => console.warn('[email] Failed to send password changed alert:', e?.message || e));
+      const { waText } = require('../utils/notify');
+      waText(updatedUser, content.text).catch(() => {});
+    }
+
+    res.json({
+      ...updatedUser,
+      token: generateToken(updatedUser.id, updatedUser.role, updatedUser.tokenVersion)
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get all users
+// @route   GET /api/users
+// @access  Private/Admin
+const getUsers = async (req, res) => {
+  try {
+    const page  = Math.max(1, parseInt(req.query.page)  || 1);
+    const limit = Math.min(200, Math.max(1, parseInt(req.query.limit) || 100));
+    const skip  = (page - 1) * limit;
+
+    const select = {
+      id: true, name: true, email: true, role: true,
+      phoneNumber: true, notificationPreference: true, createdAt: true, updatedAt: true, isActive: true
+    };
+
+    // Build filters
+    const where = {};
+    if (req.query.isActive !== undefined) {
+      where.isActive = req.query.isActive === 'true';
+    }
+    if (req.query.role) {
+      where.role = req.query.role;
+    }
+    if (req.query.search) {
+      const s = req.query.search.trim();
+      where.OR = [
+        { name: { contains: s, mode: 'insensitive' } },
+        { email: { contains: s, mode: 'insensitive' } },
+        { phoneNumber: { contains: s, mode: 'insensitive' } },
+      ];
+    }
+
+    const [users, total] = await prisma.$transaction([
+      prisma.user.findMany({ where, select, orderBy: { name: 'asc' }, skip, take: limit }),
+      prisma.user.count({ where })
+    ]);
+
+    res.json({ data: users, total, page, limit, pages: Math.ceil(total / limit) });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Check whether an account already exists for a given email and/or phone
+// @route   GET /api/users/check-exists
+// @access  Private/Supervisor
+const checkUserExists = async (req, res) => {
+  try {
+    const email = typeof req.query.email === 'string' ? req.query.email.trim() : '';
+    const rawPhone = typeof req.query.phone === 'string' ? req.query.phone.trim() : '';
+
+    const { normalizeZAPhone } = require('../utils/whatsapp');
+    const phone = normalizeZAPhone(rawPhone) || (rawPhone ? rawPhone.replace(/\D/g, '') : '');
+    const phoneAlt = phone && phone.startsWith('27') ? '0' + phone.slice(2) : (phone && phone.length === 9 ? '27' + phone : null);
+
+    const searchClauses = [
+      ...(email ? [{ email }] : []),
+      ...(phone ? [{ phoneNumber: phone }] : []),
+      ...(phoneAlt ? [{ phoneNumber: phoneAlt }] : []),
+    ];
+
+    if (searchClauses.length === 0) {
+      return res.json({ exists: false });
+    }
+
+    const existingUser = await prisma.user.findFirst({
+      where: { OR: searchClauses },
+      select: { email: true, phoneNumber: true },
+    });
+
+    res.json({
+      exists: !!existingUser,
+      hasEmail: !!existingUser?.email && !existingUser.email.endsWith('@guest.local'),
+      hasPhone: !!existingUser?.phoneNumber,
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Get user by ID
+// @route   GET /api/users/:id
+// @access  Private/Admin
+const getUserById = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.params.id },
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        role: true,
+        phoneNumber: true,
+        createdAt: true,
+        updatedAt: true,
+        isActive: true
+      }
+    });
+
+    if (user) {
+      res.json(user);
+    } else {
+      res.status(404);
+      throw new Error('User not found');
+    }
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Update user
+// @route   PUT /api/users/:id
+// @access  Private/Admin
+const updateUser = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!user) {
+      res.status(404);
+      throw new Error('User not found');
+    }
+
+    const { name, email, role, isActive, phoneNumber, password } = req.body;
+
+    // Prepare data update, allow admin to set a new password
+    const data = {
+      name: name || user.name,
+      email: email || user.email,
+      role: role || user.role,
+      isActive: isActive !== undefined ? isActive : user.isActive,
+      phoneNumber: phoneNumber !== undefined ? (phoneNumber || null) : user.phoneNumber,
+      updatedAt: new Date()
+    };
+
+    if (password && typeof password === 'string' && password.trim().length > 0) {
+      data.password = await hashPassword(password.trim());
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id: req.params.id },
+      data,
+      select: {
+        id: true,
+        name: true,
+        email: true,
+        role: true,
+        phoneNumber: true,
+        createdAt: true,
+        updatedAt: true,
+        isActive: true
+      }
+    });
+
+    res.json(updatedUser);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Delete user
+// @route   DELETE /api/users/:id
+// @access  Private/Admin
+const deleteUser = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({
+      where: { id: req.params.id }
+    });
+
+    if (!user) {
+      res.status(404);
+      throw new Error('User not found');
+    }
+
+    // Instead of deleting, we deactivate the user
+    await prisma.user.update({
+      where: { id: req.params.id },
+      data: {
+        isActive: false,
+        updatedAt: new Date()
+      }
+    });
+
+    res.json({ message: 'User deactivated' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Anonymize user data (GDPR / "right to be forgotten")
+// @route   POST /api/users/:id/anonymize
+// @access  Private/Admin
+const anonymizeUser = async (req, res) => {
+  try {
+    const user = await prisma.user.findUnique({ where: { id: req.params.id } });
+    if (!user) { res.status(404); throw new Error('User not found'); }
+
+    await prisma.user.update({
+      where: { id: req.params.id },
+      data: {
+        name: 'Deleted User',
+        email: `deleted-${req.params.id}@deleted.local`,
+        phoneNumber: null,
+        isActive: false,
+        tokenVersion: { increment: 1 },
+        updatedAt: new Date()
+      }
+    });
+
+    res.json({ message: 'User data deleted' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Request password reset
+// @route   POST /api/users/forgot
+// @access  Public
+const requestPasswordReset = async (req, res) => {
+  try {
+    const { email } = req.body;
+    if (!email || typeof email !== 'string') {
+      res.status(400);
+      throw new Error('Email is required');
+    }
+
+    const user = await prisma.user.findUnique({ where: { email } });
+
+    // Explicitly check existence as requested
+    if (!user) {
+      return res.status(404).json({ message: 'Email not found' });
+    }
+
+    // Create token valid for 1 hour
+    const token = uuidv4();
+    const expiresAt = new Date(Date.now() + 60 * 60 * 1000);
+
+    // If PasswordReset model isn't available (migration not run), return clear error
+    if (!prisma.passwordReset || typeof prisma.passwordReset.create !== 'function' || typeof prisma.passwordReset.updateMany !== 'function') {
+      console.warn('[PasswordReset] Prisma model not available. Run Prisma migrations to enable password reset tokens.');
+      return res.status(500).json({ message: 'Password reset is not available. Please contact support.' });
+    }
+
+    // Invalidate previous tokens (optional)
+    await prisma.passwordReset.updateMany({
+      where: { userId: user.id, used: false, expiresAt: { gt: new Date() } },
+      data: { used: true }
+    });
+
+    await prisma.passwordReset.create({
+      data: {
+        id: uuidv4(),
+        userId: user.id,
+        token,
+        expiresAt,
+        used: false
+      }
+    });
+
+    const baseUrl = process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001';
+    const resetUrl = `${baseUrl.replace(/\/$/, '')}/reset-password?token=${encodeURIComponent(token)}`;
+
+    const { sendMail, buildPasswordResetEmail } = require('../utils/email');
+    const emailContent = buildPasswordResetEmail({ name: user.name, resetUrl });
+    // Security: always email
+    sendMail({ to: user.email, subject: 'Reset your password', ...emailContent })
+      .catch(e => console.warn('[password reset email] Failed:', e?.message || e));
+    // Also WhatsApp if preferred (security message — sent in addition to email)
+    const { waText } = require('../utils/notify');
+    waText(user, emailContent.text).catch(() => {});
+
+    return res.json({ message: 'If that email exists, a password reset link has been sent.' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Reset password using token
+// @route   POST /api/users/reset
+// @access  Public
+const resetPassword = async (req, res) => {
+  try {
+    const { token, password } = req.body;
+    if (!token || !password) {
+      res.status(400);
+      throw new Error('Token and new password are required');
+    }
+
+    // If PasswordReset model isn't available, avoid crashing and return a generic error
+    if (!prisma.passwordReset || typeof prisma.passwordReset.findUnique !== 'function' || typeof prisma.passwordReset.update !== 'function') {
+      res.status(400);
+      throw new Error('Invalid or expired token');
+    }
+
+    const reset = await prisma.passwordReset.findUnique({ where: { token } });
+    if (!reset || reset.used || reset.expiresAt < new Date()) {
+      res.status(400);
+      throw new Error('Invalid or expired token');
+    }
+
+    const user = await prisma.user.findUnique({ where: { id: reset.userId } });
+    if (!user || !user.isActive) {
+      res.status(400);
+      throw new Error('User not found or inactive');
+    }
+
+    const newHashed = await hashPassword(password);
+
+    await prisma.$transaction([
+      prisma.user.update({ where: { id: user.id }, data: { password: newHashed, updatedAt: new Date() } }),
+      prisma.passwordReset.update({ where: { token }, data: { used: true } })
+    ]);
+
+    res.json({ message: 'Password has been reset successfully' });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Activate account using token (for inactive/guest accounts)
+// @route   POST /api/users/activate
+// @access  Public
+const activateAccount = async (req, res) => {
+  try {
+    const { token, password } = req.body;
+    if (!token || !password) {
+      res.status(400);
+      throw new Error('Token and password are required');
+    }
+    if (typeof password !== 'string' || password.trim().length < 8) {
+      res.status(400);
+      throw new Error('Password must be at least 8 characters');
+    }
+
+    if (!prisma.passwordReset || typeof prisma.passwordReset.findUnique !== 'function') {
+      res.status(400);
+      throw new Error('Invalid or expired token');
+    }
+
+    const reset = await prisma.passwordReset.findUnique({ where: { token } });
+    if (!reset || reset.used || reset.expiresAt < new Date()) {
+      res.status(400);
+      throw new Error('Invalid or expired activation link');
+    }
+
+    const user = await prisma.user.findUnique({ where: { id: reset.userId } });
+    if (!user) {
+      res.status(400);
+      throw new Error('User not found');
+    }
+
+    const newHashed = await hashPassword(password.trim());
+
+    await prisma.$transaction([
+      prisma.user.update({
+        where: { id: user.id },
+        data: { password: newHashed, isActive: true, updatedAt: new Date() }
+      }),
+      prisma.passwordReset.update({ where: { token }, data: { used: true } })
+    ]);
+
+    const updated = await prisma.user.findUnique({
+      where: { id: user.id },
+      select: { id: true, name: true, email: true, role: true, tokenVersion: true }
+    });
+
+    // Send welcome email (skip guest/placeholder accounts)
+    if (updated.email && !updated.email.endsWith('@guest.local')) {
+      sendWelcomeEmail(updated).catch(() => {});
+    }
+
+    res.json({
+      message: 'Account activated successfully.',
+      id: updated.id,
+      name: updated.name,
+      email: updated.email,
+      role: updated.role,
+      token: generateToken(updated.id, updated.role, updated.tokenVersion)
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Revoke all active sessions for the logged-in user (increments tokenVersion)
+// @route   POST /api/users/revoke-sessions
+// @access  Private
+const revokeMySession = async (req, res) => {
+  try {
+    const updated = await prisma.user.update({
+      where: { id: req.user.id },
+      data: { tokenVersion: { increment: 1 } },
+      select: { id: true, role: true, tokenVersion: true },
+    });
+    // Bumping tokenVersion invalidates every existing token, including the one
+    // this request just used. Issue a fresh token for the current device so it
+    // isn't logged out too.
+    res.json({
+      message: 'All other sessions have been signed out.',
+      token: generateToken(updated.id, updated.role, updated.tokenVersion),
+    });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Admin: revoke all sessions for a specific user
+// @route   POST /api/users/:id/revoke-sessions
+// @access  Private/Admin
+const adminRevokeUserSessions = async (req, res) => {
+  try {
+    const target = await prisma.user.findUnique({ where: { id: req.params.id } });
+    if (!target) {
+      res.status(404);
+      throw new Error('User not found');
+    }
+    await prisma.user.update({
+      where: { id: req.params.id },
+      data: { tokenVersion: { increment: 1 } },
+    });
+    res.json({ message: `Sessions revoked for ${target.name}.` });
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+// @desc    Close (and optionally anonymise) the logged-in user's own account
+// @route   POST /api/users/close-account
+// @access  Private
+const closeAccount = async (req, res) => {
+  try {
+    const { deleteData = false, password } = req.body || {};
+
+    // Re-verify password before allowing account closure
+    const user = await prisma.user.findUnique({ where: { id: req.user.id } });
+    if (!user) { res.status(404); throw new Error('User not found'); }
+
+    const passwordOk = await comparePassword(password, user.password);
+    if (!passwordOk) {
+      res.status(400);
+      throw new Error('Incorrect password');
+    }
+
+    // Capture real details before any anonymisation so the email goes to the right address
+    const realEmail = user.email;
+    const realName  = user.name;
+
+    if (deleteData) {
+      // Anonymise: wipe all personal data while keeping the row intact for referential integrity
+      await prisma.user.update({
+        where: { id: req.user.id },
+        data: {
+          name: 'Deleted User',
+          email: `deleted-${uuidv4()}@deleted.invalid`,
+          password: '',
+          phoneNumber: null,
+          isActive: false,
+          tokenVersion: { increment: 1 },
+          updatedAt: new Date(),
+        },
+      });
+      // Send closure confirmation to the real address (before it was wiped)
+      if (realEmail && !realEmail.endsWith('@deleted.invalid') && !realEmail.endsWith('@guest.local')) {
+        const { sendMail, buildAccountClosedEmail } = require('../utils/email');
+        const { waText } = require('../utils/notify');
+        const { buildWAAccountClosed } = require('../utils/waMessages');
+        const content = buildAccountClosedEmail({ name: realName, dataDeleted: true });
+        sendMail({ to: realEmail, subject: 'Your Hope Events account has been closed', ...content }).catch(() => {});
+        // WhatsApp while we still have phone (send before data wipe completes in-flight)
+        waText(user, buildWAAccountClosed({ name: realName, dataDeleted: true })).catch(() => {});
+      }
+      return res.json({ message: 'Your account and personal data have been removed.' });
+    } else {
+      // Soft-deactivate only
+      await prisma.user.update({
+        where: { id: req.user.id },
+        data: {
+          isActive: false,
+          tokenVersion: { increment: 1 },
+          updatedAt: new Date(),
+        },
+      });
+      // Send closure confirmation
+      if (realEmail && !realEmail.endsWith('@deleted.invalid') && !realEmail.endsWith('@guest.local')) {
+        const { sendMail, buildAccountClosedEmail } = require('../utils/email');
+        const { waText } = require('../utils/notify');
+        const { buildWAAccountClosed } = require('../utils/waMessages');
+        const content = buildAccountClosedEmail({ name: realName, dataDeleted: false });
+        sendMail({ to: realEmail, subject: 'Your Hope Events account has been closed', ...content }).catch(() => {});
+        waText(user, buildWAAccountClosed({ name: realName, dataDeleted: false })).catch(() => {});
+      }
+      return res.json({ message: 'Your account has been deactivated.' });
+    }
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
+module.exports = {
+  registerUser,
+  loginUser,
+  getUserProfile,
+  updateUserProfile,
+  getUsers,
+  checkUserExists,
+  getUserById,
+  updateUser,
+  deleteUser,
+  anonymizeUser,
+  requestPasswordReset,
+  resetPassword,
+  activateAccount,
+  revokeMySession,
+  adminRevokeUserSessions,
+  closeAccount,
+};
\ No newline at end of file
diff --git a/backend/src/controllers/webhookController.js b/backend/src/controllers/webhookController.js
new file mode 100644
index 0000000..83ae861
--- /dev/null
+++ b/backend/src/controllers/webhookController.js
@@ -0,0 +1,572 @@
+const crypto = require('crypto');
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+const { generateTicketsForRegistration } = require('../utils/ticketUtils');
+const { emailTickets } = require('./ticketController');
+const { computeRegistrationTotalDue, refreshPricingForRegistration } = require('../utils/pricing');
+
+// @desc    Handle Yoco webhook events
+// @route   POST /api/webhooks/yoco
+// @access  Public
+const handleYocoWebhook = async (req, res) => {
+  try {
+    const headers = req.headers;
+    const requestBody = req.rawBody;
+
+    // Log every JSON request body for webhook controller
+    try {
+      const contentType = headers['content-type'] || headers['Content-Type'] || '';
+      let parsedBody = null;
+      if (typeof requestBody === 'string') {
+        try {
+          parsedBody = JSON.parse(requestBody);
+        } catch (e) {
+          // Not valid JSON; keep as raw string
+        }
+      } else if (requestBody && typeof requestBody === 'object') {
+        parsedBody = requestBody;
+      }
+    } catch (logErr) {
+      // Fail-safe: never block webhook processing due to logging issues
+      console.error('Failed to log webhook JSON request:', logErr);
+    }
+
+    // Verify webhook signature
+    const id = headers['webhook-id'];
+    const timestamp = headers['webhook-timestamp'];
+
+    const rawSigHeader = headers['webhook-signature'];
+    if (!id || !timestamp || !rawSigHeader) {
+      const responseObj = {
+        success: false,
+        message: 'Missing webhook headers',
+        details: { missingHeaders: ['webhook-id', 'webhook-timestamp', 'webhook-signature'].filter(h => !headers[h]) }
+      };
+      return res.status(400).json(responseObj);
+    }
+
+    // Reject replayed requests (Yoco recommends a 3-minute tolerance window)
+    const webhookTimeMs = parseInt(timestamp, 10) * 1000;
+    if (isNaN(webhookTimeMs) || Math.abs(Date.now() - webhookTimeMs) > 3 * 60 * 1000) {
+      return res.status(400).json({ success: false, message: 'Webhook timestamp outside acceptable window' });
+    }
+
+    // Construct the signed content
+    const signedContent = `${id}.${timestamp}.${requestBody}`;
+
+    // Get the webhook secret from environment variables
+    const secret = process.env.YOCO_WEBHOOK_SECRET;
+    if (!secret) {
+      console.error('YOCO_WEBHOOK_SECRET is not defined in environment variables');
+      const responseObj = { 
+        success: false, 
+        message: 'Server configuration error',
+        details: { error: 'Missing webhook secret configuration' }
+      };
+      return res.status(500).json(responseObj);
+    }
+
+    const secretBytes = Buffer.from(secret.split('_')[1], "base64");
+
+    // Calculate expected signature
+    const expectedSignature = crypto
+      .createHmac('sha256', secretBytes)
+      .update(signedContent)
+      .digest('base64');
+
+    // Accept if any of the space-separated signatures match (supports key rotation)
+    const signatures = rawSigHeader.split(' ').map(s => s.split(',')[1]).filter(Boolean);
+    const signatureValid = signatures.some(sig => {
+      try {
+        return crypto.timingSafeEqual(Buffer.from(expectedSignature), Buffer.from(sig));
+      } catch {
+        return false;
+      }
+    });
+
+    if (!signatureValid) {
+      console.error('Invalid webhook signature');
+      const responseObj = {
+        success: false,
+        message: 'Invalid signature',
+        details: { error: 'Webhook signature verification failed' }
+      };
+      return res.status(403).json(responseObj);
+    }
+
+    // Parse the webhook payload
+    const webhookData = JSON.parse(requestBody);
+
+    // Extract checkoutId from payload or metadata
+    const receivedCheckoutId = webhookData?.payload?.checkoutId || webhookData?.payload?.metadata?.checkoutId || webhookData?.payload?.metadata?.checkout_id;
+
+    // Optional filtering: allow only specific checkoutIds or prefixes for this endpoint
+    try {
+      const idsEnv = process.env.YOCO_ALLOWED_CHECKOUT_IDS || process.env.YOCO_WEBHOOK_ALLOWED_CHECKOUT_IDS || '';
+      const prefixesEnv = process.env.YOCO_ALLOWED_CHECKOUT_PREFIXES || process.env.YOCO_WEBHOOK_ALLOWED_CHECKOUT_PREFIXES || '';
+      const allowedIds = idsEnv.split(',').map(s => s.trim()).filter(Boolean);
+      const allowedPrefixes = prefixesEnv.split(',').map(s => s.trim()).filter(Boolean);
+
+      const hasFilter = allowedIds.length > 0 || allowedPrefixes.length > 0;
+      if (hasFilter) {
+        const idMatches = receivedCheckoutId && (
+          allowedIds.includes(receivedCheckoutId) ||
+          allowedPrefixes.some(pref => receivedCheckoutId.startsWith(pref))
+        );
+        if (!idMatches) {
+          // Store event for audit/unreconciled tracking
+          try { await saveYocoTransaction(webhookData); } catch(e) { console.warn('Failed to store filtered yoco event:', e?.message || e); }
+          // Acknowledge but ignore processing for unrelated checkout flows
+          const responseObj = {
+            success: true,
+            message: 'Webhook acknowledged but ignored due to unmatched checkoutId for this endpoint',
+            data: {
+              filtered: true,
+              receivedCheckoutId,
+              allowedIdsCount: allowedIds.length,
+              allowedPrefixesCount: allowedPrefixes.length
+            }
+          };
+          return res.status(200).json(responseObj);
+        }
+      }
+    } catch (filterErr) {
+      // Never block webhook due to filter parsing errors; log only
+      console.warn('Webhook checkoutId filter parse warning:', filterErr?.message || filterErr);
+    }
+
+    // Automatic filtering by database registration record, with donation allowance
+    try {
+      if (receivedCheckoutId) {
+        const existingRegistration = await prisma.registration.findFirst({
+          where: { checkoutId: receivedCheckoutId },
+          select: { id: true }
+        });
+        if (!existingRegistration) {
+          // Allow donations (no registration) to proceed based on metadata
+          const meta = webhookData?.payload?.metadata || {};
+          const isDonation = meta?.type === 'donation' || !!meta?.isDonation || !!meta?.eventId;
+          if (!isDonation) {
+            try {
+              await saveYocoTransaction(webhookData);
+            } catch (saveErr) {
+              console.warn('Failed to save unreconciled transaction:', saveErr?.message || saveErr);
+            }
+            const responseObj = {
+              success: true,
+              message: 'Webhook acknowledged and stored as unreconciled: no registration found for checkoutId',
+              data: {
+                filtered: true,
+                reason: 'no_registration_for_checkoutId',
+                receivedCheckoutId
+              }
+            };
+            return res.status(200).json(responseObj);
+          }
+        }
+      }
+    } catch (dbFilterErr) {
+      // Do not fail webhook due to DB filter issues
+      console.warn('Webhook DB auto-filter warning:', dbFilterErr?.message || dbFilterErr);
+    }
+
+    let processedData = null;
+    
+    // Process different event types
+    switch (webhookData.type) {
+      case 'payment.succeeded':
+        processedData = await handlePaymentSucceeded(webhookData);
+        break;
+      // Add more event types as needed
+      default:
+        console.log(`Unhandled webhook event type: ${webhookData.type}`);
+        try { await saveYocoTransaction(webhookData); } catch(e) { console.warn('Failed to store unhandled yoco event:', e?.message || e); }
+        const responseObj = { 
+          success: true, 
+          message: 'Webhook received but event type not handled',
+          data: {
+            eventType: webhookData.type,
+            webhookId: id,
+            timestamp: timestamp
+          }
+        };
+        return res.status(200).json(responseObj);
+    }
+
+    // Return detailed success response
+    const responseObj = { 
+      success: true, 
+      message: `Successfully processed ${webhookData.type} webhook`,
+      data: {
+        eventType: webhookData.type,
+        webhookId: id,
+        timestamp: timestamp,
+        processedData
+      }
+    };
+    return res.status(200).json(responseObj);
+  } catch (error) {
+    console.error('Webhook error:', error);
+    const responseObj = {
+      success: false,
+      message: error.message,
+      details: {
+        error: error.stack,
+        timestamp: new Date().toISOString()
+      }
+    };
+    return res.status(500).json(responseObj);
+  }
+};
+
+// Handle payment.succeeded event
+const handlePaymentSucceeded = async (webhookData) => {
+  try {
+    const paymentData = webhookData.payload;
+    
+    // Log the payment data
+    console.log('Payment succeeded:', paymentData);
+    
+    // Extract payment details
+    const {
+      id: yocoPaymentId,
+      amount,
+      currency,
+      status,
+      metadata,
+      paymentMethodDetails: method,
+      checkoutId
+    } = paymentData;
+    
+    // Check if payment already exists to avoid duplicates
+    const existingPayment = await prisma.payment.findFirst({
+      where: {
+        externalId: yocoPaymentId
+      }
+    });
+    
+    if (existingPayment) {
+      console.log(`Payment ${yocoPaymentId} already processed`);
+      try { await saveYocoTransaction(webhookData, { reconciled: true, paymentId: existingPayment.id }); } catch(e) { console.warn('Failed to reconcile YocoTransaction for existing payment:', e?.message || e); }
+      return {
+        status: 'already_processed',
+        paymentId: existingPayment.id,
+        externalId: yocoPaymentId
+      };
+    }
+    
+    // Find the registration by checkoutId
+    let registration = null;
+    if (checkoutId) {
+      registration = await prisma.registration.findFirst({
+        where: {
+          checkoutId: checkoutId
+        },
+        include: {
+          event: {
+            select: {
+              id: true,
+              title: true
+            }
+          },
+          user: {
+            select: {
+              id: true,
+              name: true,
+              email: true
+            }
+          }
+        }
+      });
+    }
+    
+    // If no registration found by checkoutId, try metadata
+    if (!registration && metadata && metadata.registrationId) {
+      registration = await prisma.registration.findUnique({
+        where: {
+          id: metadata.registrationId
+        },
+        include: {
+          event: {
+            select: {
+              id: true,
+              title: true
+            }
+          },
+          user: {
+            select: {
+              id: true,
+              name: true,
+              email: true
+            }
+          }
+        }
+      });
+    }
+    
+    // Resolve userId: registration owner → metadata → first active admin (never use a non-existent UUID)
+    let resolvedUserId = registration?.userId || metadata?.userId || null;
+    if (!resolvedUserId) {
+      try {
+        const adminUser = await prisma.user.findFirst({ where: { role: 'admin', isActive: true }, select: { id: true } });
+        resolvedUserId = adminUser?.id || null;
+      } catch (e) { /* ignore — payment will fail below if still null */ }
+    }
+
+    // Create payment record
+    const payment = await prisma.payment.create({
+      data: {
+        id: uuidv4(), // Generate a UUID for the payment
+        amount: amount / 100, // Convert cents to your currency unit
+        method: method.type, // The type of payment from the webhook
+        status: status === 'succeeded' ? 'completed' : status,
+        externalId: yocoPaymentId,
+        registrationId: registration?.id || null,
+        userId: resolvedUserId,
+        eventId: registration?.eventId || metadata?.eventId || null,
+        isDonation: !registration?.id
+      },
+      include: {
+        user: {
+          select: {
+            id: true,
+            name: true,
+            email: true
+          }
+        },
+        registration: registration ? {
+          include: {
+            event: true
+          }
+        } : undefined,
+        event: (registration?.eventId || metadata?.eventId) ? true : undefined
+      }
+    });
+    
+    // If this payment is for a registration, update the registration status
+    let updatedRegistration = null;
+    let generatedTickets = [];
+    
+    if (registration) {
+      updatedRegistration = await updateRegistrationStatus(registration.id);
+      
+      // If registration status is 'paid', tickets were generated
+      if (updatedRegistration.status === 'paid') {
+        // Find the generated tickets
+        generatedTickets = await prisma.ticket.findMany({
+          where: {
+            registrationOption: {
+              registrationId: registration.id
+            }
+          },
+          select: {
+            id: true,
+            qrCode: true,
+            isUsed: true,
+            registrationOptionId: true,
+            eventId: true
+          }
+        });
+      }
+    }
+    
+    console.log(`Payment ${yocoPaymentId} processed successfully`);
+    
+    // Mark the Yoco transaction as reconciled and link the payment
+    try { await saveYocoTransaction(webhookData, { reconciled: true, paymentId: payment.id }); } catch(e) { console.warn('Failed to reconcile YocoTransaction after payment create:', e?.message || e); }
+
+    // Send emails: payment confirmation first, then tickets (guarantees order)
+    const _whPaymentId = payment.id;
+    const _whUserId = registration?.userId;
+    const _whRegId = registration?.id;
+    const _whTicketsGenerated = generatedTickets.length > 0;
+    (async () => {
+      try {
+        const { sendPaymentEmails } = require('../utils/notifications');
+        await sendPaymentEmails(_whPaymentId);
+      } catch (e) {
+        console.error('Failed to send webhook payment emails:', e);
+      }
+      if (_whTicketsGenerated && _whUserId && _whRegId) {
+        const mockReq = { user: { id: _whUserId }, body: { registrationId: _whRegId } };
+        const mockRes = { status: () => mockRes, json: () => {} };
+        try { await emailTickets(mockReq, mockRes); } catch (e) { console.error('Error emailing tickets from webhook:', e); }
+      }
+    })();
+    
+    // Return processed data
+    return {
+      status: 'success',
+      payment: {
+        id: payment.id,
+        externalId: yocoPaymentId,
+        amount: payment.amount,
+        method: payment.method,
+        status: payment.status,
+        createdAt: payment.createdAt
+      },
+      registration: registration ? {
+        id: registration.id,
+        status: updatedRegistration ? updatedRegistration.status : registration.status,
+        eventId: registration.eventId,
+        eventTitle: registration.event?.title,
+        userId: registration.userId,
+        userName: registration.user?.name
+      } : null,
+      generatedTickets: generatedTickets.length > 0 ? generatedTickets : undefined
+    };
+  } catch (error) {
+    console.error('Error processing payment.succeeded event:', error);
+    throw error;
+  }
+};
+
+// Update registration status based on payments
+const updateRegistrationStatus = async (registrationId) => {
+  try {
+    // Refresh early-bird pricing before computing totalDue — ensures expired/exhausted tiers
+    // are accounted for so we never mark a registration paid based on stale prices.
+    try { await refreshPricingForRegistration(registrationId); } catch (e) {
+      console.warn('[webhook] Price refresh failed:', e?.message);
+    }
+
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: {
+              include: {
+                earlyBirdTiers: true
+              }
+            }
+          }
+        },
+        payments: true
+      }
+    });
+
+    if (!registration) {
+      throw new Error(`Registration ${registrationId} not found`);
+    }
+
+    // Calculate total amount paid
+    const totalPaid = registration.payments.reduce((sum, payment) => sum + payment.amount, 0);
+
+    // Calculate total amount due (uses priceSnapshot — refreshed above)
+    const totalDue = computeRegistrationTotalDue(registration, new Date());
+
+    // Update registration status based on payment
+    let newStatus;
+    if (totalPaid >= totalDue) {
+      newStatus = 'paid';
+    } else if (totalPaid > 0) {
+      newStatus = 'partial_paid';
+    } else {
+      newStatus = 'pending';
+    }
+
+    const updatedRegistration = await prisma.registration.update({
+      where: { id: registrationId },
+      data: {
+        status: newStatus,
+        updatedAt: new Date()
+      }
+    });
+    
+    // Generate tickets if status is "paid" (email handled by caller after payment email)
+    let generatedTickets = [];
+    if (newStatus === 'paid') {
+      try {
+        generatedTickets = await generateTicketsForRegistration(registrationId);
+      } catch (error) {
+        console.error('Error generating tickets:', error);
+        // Don't throw the error, just log it - we still want to update the registration status
+      }
+    }
+    
+    // Return the updated registration
+    return {
+      ...updatedRegistration,
+      totalPaid,
+      totalDue,
+      generatedTickets: generatedTickets.length > 0 ? generatedTickets : undefined
+    };
+  } catch (error) {
+    console.error('Error updating registration status:', error);
+    throw error;
+  }
+};
+
+const handleWhatsappWebhook = async (req, res) => {
+  try {
+    const { body } = req;
+    const { message } = body;
+  } catch (error) {
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+}
+
+module.exports = {
+  handleYocoWebhook,
+  handleWhatsappWebhook,
+};
+
+// Helper: save or update Yoco transactions for any webhook event
+async function saveYocoTransaction(webhookData, updates = {}) {
+  try {
+    const payload = webhookData?.payload || {};
+    const externalId = payload?.id || webhookData?.id;
+    if (!externalId) {
+      throw new Error('Missing external id in webhook payload');
+    }
+
+    const amount = typeof payload?.amount === 'number' ? payload.amount : null; // cents if provided
+    const currency = payload?.currency || null;
+    const createdDateStr = payload?.createdDate || webhookData?.createdDate;
+    const createdDate = createdDateStr ? new Date(createdDateStr) : null;
+    const checkoutId = payload?.checkoutId || payload?.metadata?.checkoutId || payload?.metadata?.checkout_id || null;
+    const methodType = payload?.paymentMethodDetails?.type || null;
+
+    // Try find existing
+    const existing = await prisma.yocoTransaction.findFirst({ where: { externalId } });
+    if (existing) {
+      // Update with any provided updates
+      if (updates && Object.keys(updates).length > 0) {
+        return await prisma.yocoTransaction.update({
+          where: { id: existing.id },
+          data: { ...updates, updatedAt: new Date() }
+        });
+      }
+      return existing;
+    }
+
+    // Create new
+    const record = await prisma.yocoTransaction.create({
+      data: {
+        externalId,
+        amount,
+        currency,
+        createdDate,
+        checkoutId,
+        methodType,
+        reconciled: false,
+        raw: webhookData,
+        ...updates
+      }
+    });
+    return record;
+  } catch (e) {
+    // Unique constraint race: fetch existing
+    if (e?.code === 'P2002') {
+      const payload = webhookData?.payload || {};
+      const externalId = payload?.id || webhookData?.id;
+      const existing = await prisma.yocoTransaction.findFirst({ where: { externalId } });
+      if (existing && updates && Object.keys(updates).length > 0) {
+        return await prisma.yocoTransaction.update({ where: { id: existing.id }, data: { ...updates, updatedAt: new Date() } });
+      }
+      return existing;
+    }
+    throw e;
+  }
+}
\ No newline at end of file
diff --git a/backend/src/controllers/whatsappBroadcastController.js b/backend/src/controllers/whatsappBroadcastController.js
new file mode 100644
index 0000000..43151c4
--- /dev/null
+++ b/backend/src/controllers/whatsappBroadcastController.js
@@ -0,0 +1,170 @@
+const prisma = require('../config/db');
+
+function fmtDate(d) {
+  try { return new Date(d).toLocaleString(); } catch { return String(d); }
+}
+
+function getFrontendBaseUrl() {
+  return String(process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, '');
+}
+
+function replacePlaceholders(str, ctx) {
+  if (!str) return str;
+  return String(str)
+    .replace(/\{\{\s*name\s*\}\}/g, ctx.name || '')
+    .replace(/\{\{\s*event\.title\s*\}\}/g, ctx.eventTitle || '')
+    .replace(/\{\{\s*event\.start\s*\}\}/g, ctx.eventStart || '')
+    .replace(/\{\{\s*event\.(link|url)\s*\}\}/g, ctx.eventLink || '');
+}
+
+function parseFreeformPhones(lines) {
+  const recipients = [];
+  const input = Array.isArray(lines) ? lines : String(lines || '').split(/\r?\n/);
+  for (const raw of input) {
+    const s = String(raw || '').trim();
+    if (!s) continue;
+    // Format: Name <phone> or just phone
+    const m = s.match(/^(.*?)<\s*([+\d\s()-]+)\s*>\s*$/);
+    if (m) {
+      recipients.push({ phone: m[2].trim(), name: m[1].trim().replace(/^"|"$/g, '').trim() });
+    } else {
+      // Accept raw phone-like strings
+      const digits = s.replace(/\D/g, '');
+      if (digits.length >= 9) recipients.push({ phone: s, name: '' });
+    }
+  }
+  return recipients;
+}
+
+// @desc    Preview WhatsApp broadcast recipients
+// @route   POST /api/whatsapp-broadcasts/preview
+// @access  Private/Supervisor or Admin
+const previewWhatsAppBroadcast = async (req, res) => {
+  try {
+    const { userIds, phones, eventId } = req.body || {};
+    const { normalizeZAPhone } = require('../utils/whatsapp');
+
+    const ids = Array.isArray(userIds) ? userIds.filter(x => typeof x === 'string' && x) : [];
+    let users = [];
+    if (ids.length) {
+      users = await prisma.user.findMany({
+        where: { id: { in: ids } },
+        select: { id: true, name: true, phoneNumber: true, notificationPreference: true }
+      });
+    }
+
+    const extra = parseFreeformPhones(phones);
+
+    const map = new Map();
+    for (const u of users) {
+      const phone = normalizeZAPhone(u.phoneNumber);
+      if (!phone) continue;
+      if (!map.has(phone)) map.set(phone, { phone, name: u.name || '' });
+    }
+    for (const r of extra) {
+      const phone = normalizeZAPhone(r.phone);
+      if (!phone) continue;
+      if (!map.has(phone)) map.set(phone, { phone, name: r.name || '' });
+    }
+    const recipients = Array.from(map.values());
+
+    return res.json({ matched: recipients.length, recipients: recipients.slice(0, 20) });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Send WhatsApp broadcast now
+// @route   POST /api/whatsapp-broadcasts/send
+// @access  Private/Supervisor or Admin
+const sendWhatsAppBroadcast = async (req, res) => {
+  try {
+    const { message, userIds, phones, eventId } = req.body || {};
+    if (!message) {
+      return res.status(400).json({ message: 'message is required' });
+    }
+
+    const { normalizeZAPhone, sendText } = require('../utils/whatsapp');
+
+    const ids = Array.isArray(userIds) ? userIds.filter(x => typeof x === 'string' && x) : [];
+    let users = [];
+    if (ids.length) {
+      users = await prisma.user.findMany({
+        where: { id: { in: ids } },
+        select: { id: true, name: true, phoneNumber: true }
+      });
+    }
+    const extra = parseFreeformPhones(phones);
+
+    const map = new Map();
+    for (const u of users) {
+      const phone = normalizeZAPhone(u.phoneNumber);
+      if (!phone) continue;
+      if (!map.has(phone)) map.set(phone, { phone, name: u.name || '' });
+    }
+    for (const r of extra) {
+      const phone = normalizeZAPhone(r.phone);
+      if (!phone) continue;
+      if (!map.has(phone)) map.set(phone, { phone, name: r.name || '' });
+    }
+    const recipients = Array.from(map.values());
+    if (recipients.length === 0) {
+      return res.status(400).json({ message: 'No valid recipients with phone numbers' });
+    }
+
+    let event = null;
+    if (eventId && typeof eventId === 'string') {
+      event = await prisma.event.findUnique({ where: { id: eventId } });
+    }
+    const eventTitle = event?.title || '';
+    const eventStart = event?.startDate ? fmtDate(event.startDate) : '';
+    const eventLink = event ? `${getFrontendBaseUrl()}/events/${encodeURIComponent(event.id)}` : '';
+
+    const results = await Promise.allSettled(recipients.map(async rcpt => {
+      const ctx = { name: rcpt.name || '', eventTitle, eventStart, eventLink };
+      const finalMessage = replacePlaceholders(message, ctx);
+      await sendText(rcpt.phone, finalMessage);
+    }));
+
+    const sent = results.filter(r => r.status === 'fulfilled').length;
+    results.forEach((r, i) => {
+      if (r.status === 'rejected') {
+        try { console.warn('[wa-broadcast] failed for', recipients[i]?.phone, r.reason?.message || r.reason); } catch {}
+      }
+    });
+
+    return res.json({ matched: recipients.length, sent });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+// @desc    Schedule a WhatsApp broadcast
+// @route   POST /api/whatsapp-broadcasts/schedule
+// @access  Private/Supervisor or Admin
+const scheduleWhatsAppBroadcast = async (req, res) => {
+  try {
+    const { scheduledAt, message, userIds, phones, eventId } = req.body || {};
+    if (!scheduledAt) return res.status(400).json({ message: 'scheduledAt is required' });
+    const when = new Date(scheduledAt);
+    if (isNaN(when.getTime())) return res.status(400).json({ message: 'scheduledAt must be a valid ISO date-time' });
+    if (!message) return res.status(400).json({ message: 'message is required' });
+
+    const payload = { message, userIds, phones, eventId };
+
+    const { addJob } = require('../utils/scheduledEmails');
+    const created = addJob({
+      broadcast: true,
+      channel: 'whatsapp',
+      scheduledAt: when.toISOString(),
+      createdById: req.user?.id || null,
+      payload,
+    });
+
+    return res.status(201).json({ message: 'WhatsApp broadcast scheduled', job: created });
+  } catch (error) {
+    return res.status(400).json({ message: error.message });
+  }
+};
+
+module.exports = { previewWhatsAppBroadcast, sendWhatsAppBroadcast, scheduleWhatsAppBroadcast };
\ No newline at end of file
diff --git a/backend/src/controllers/whatsappController.js b/backend/src/controllers/whatsappController.js
new file mode 100644
index 0000000..0dee38e
--- /dev/null
+++ b/backend/src/controllers/whatsappController.js
@@ -0,0 +1,224 @@
+const {
+  getConfig, setConfig,
+  getStatus, startSession, restartSession, logoutSession,
+  getQr, requestPairingCode,
+  createInstance, deleteInstance,
+} = require('../utils/whatsapp');
+const { sendMail } = require('../utils/email');
+
+// ─── Config management ────────────────────────────────────────────────────────
+
+/**
+ * GET /api/whatsapp/config
+ * Returns the current WAWP credentials (token is masked).
+ */
+const getConfigHandler = async (req, res) => {
+  try {
+    const { token, instanceId } = await getConfig();
+    // Mask the token for display — show first 4 chars + asterisks
+    const maskedToken = token
+      ? token.slice(0, 4) + '*'.repeat(Math.max(0, token.length - 4))
+      : '';
+    res.json({
+      tokenMasked: maskedToken,
+      instanceId:  instanceId || '',
+      hasToken:    !!token,
+      hasInstance: !!instanceId,
+      configured:  !!(token && instanceId),
+    });
+  } catch (e) {
+    res.status(500).json({ message: e?.message || 'Failed to load config' });
+  }
+};
+
+/**
+ * POST /api/whatsapp/config
+ * Body: { token, instanceId }
+ * Saves credentials to DB; instanceId is optional (keep existing if omitted).
+ */
+const saveConfigHandler = async (req, res) => {
+  try {
+    const { token, instanceId } = req.body || {};
+
+    const current = await getConfig();
+
+    // Resolve token: '_clear_' resets it; blank/absent keeps existing
+    let resolvedToken = current.token;
+    if (token === '_clear_') {
+      resolvedToken = '';
+    } else if (token && token.trim()) {
+      resolvedToken = token.trim();
+    }
+
+    // Resolve instanceId: blank/absent keeps existing
+    const resolvedInstanceId = (instanceId && instanceId.trim())
+      ? instanceId.trim()
+      : current.instanceId || '';
+
+    await setConfig(resolvedToken, resolvedInstanceId);
+    res.json({ message: 'WAWP configuration saved successfully.' });
+  } catch (e) {
+    res.status(500).json({ message: e?.message || 'Failed to save config' });
+  }
+};
+
+// ─── Instance lifecycle ───────────────────────────────────────────────────────
+
+/**
+ * POST /api/whatsapp/create-instance
+ * Body: { name? }
+ * Creates a new WAWP session instance and saves its id to the DB.
+ */
+const createInstanceHandler = async (req, res) => {
+  try {
+    const { name } = req.body || {};
+    const data = await createInstance(name);
+    res.json({ message: 'Instance created and saved.', ...data });
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+/**
+ * POST /api/whatsapp/delete-instance
+ * Deletes the current WAWP instance and clears it from the DB.
+ */
+const deleteInstanceHandler = async (req, res) => {
+  try {
+    const data = await deleteInstance();
+    res.json({ message: 'Instance deleted.', ...data });
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+// ─── Admin session endpoints ──────────────────────────────────────────────────
+
+const getStatusHandler = async (req, res) => {
+  try {
+    res.json(await getStatus());
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+const getQrHandler = async (req, res) => {
+  try {
+    const data = await getQr();
+    // Normalise: strip leading "data:image/png;base64," if WAWP already includes it,
+    // so the client always receives a clean base64 string it can prefix itself.
+    if (data?.qr) {
+      data.qr = data.qr.replace(/^data:image\/png;base64,/, '');
+    }
+    res.json(data);
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+const requestCodeHandler = async (req, res) => {
+  try {
+    const { phoneNumber } = req.body || {};
+    if (!phoneNumber) return res.status(400).json({ message: 'phoneNumber is required' });
+    res.json(await requestPairingCode(phoneNumber));
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+const logoutHandler = async (req, res) => {
+  try {
+    res.json(await logoutSession());
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+const startHandler = async (req, res) => {
+  try {
+    res.json(await startSession());
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+const restartHandler = async (req, res) => {
+  try {
+    res.json(await restartSession());
+  } catch (e) {
+    res.status(500).json({ message: e?.response?.data?.message || e.message });
+  }
+};
+
+// ─── Webhook — auto-recovery ──────────────────────────────────────────────────
+
+const MAX_ATTEMPTS   = 3;
+const RETRY_DELAYS   = [5_000, 15_000, 30_000]; // ms between each attempt
+const STATUS_WAIT_MS = 10_000;                   // wait after restart before checking
+
+const handleWebhook = async (req, res) => {
+  // Acknowledge immediately so WAWP doesn't time out
+  res.status(200).json({ ok: true });
+
+  try {
+    const { event, session } = req.body || {};
+    if (event !== 'session.status') return;
+
+    const status = session?.status;
+    // Only auto-recover on FAILED — STOPPED may be intentional
+    if (status !== 'FAILED') return;
+
+    console.warn('[whatsapp webhook] Session FAILED — starting recovery...');
+
+    let recovered = false;
+
+    for (let i = 0; i < MAX_ATTEMPTS; i++) {
+      await new Promise(r => setTimeout(r, RETRY_DELAYS[i]));
+      try {
+        await restartSession();
+        await new Promise(r => setTimeout(r, STATUS_WAIT_MS));
+        const info = await getStatus();
+        const s = info?.status;
+        if (s === 'WORKING' || s === 'SCAN_QR_CODE' || s === 'STARTING') {
+          recovered = true;
+          console.info(`[whatsapp webhook] Session recovered on attempt ${i + 1} (status: ${s})`);
+          break;
+        }
+        console.warn(`[whatsapp webhook] Attempt ${i + 1}: status still ${s}`);
+      } catch (e) {
+        console.warn(`[whatsapp webhook] Attempt ${i + 1} error:`, e.message);
+      }
+    }
+
+    if (!recovered) {
+      console.error(`[whatsapp webhook] Could not recover after ${MAX_ATTEMPTS} attempts — sending admin alert`);
+      const { getSettingSync } = require('../utils/settingsCache');
+      const adminEmail = getSettingSync('smtp_from', process.env.EMAIL_FROM || process.env.EMAIL_USER || '')
+        || getSettingSync('org_email', process.env.EMAIL_FROM || process.env.EMAIL_USER || '');
+      const dashboardUrl = `${(process.env.FRONTEND_URL || 'http://localhost:3000').replace(/\/$/, '')}/dashboard/admin/whatsapp`;
+      const when = new Date().toLocaleString('en-ZA', { timeZone: 'Africa/Johannesburg' });
+      await sendMail({
+        to: adminEmail,
+        subject: 'WhatsApp session is down — action required',
+        text: `The Hope Events WhatsApp session has failed and could not be automatically recovered.\n\nTime: ${when}\n\nPlease visit the admin dashboard to reconnect:\n${dashboardUrl}`,
+        html: `<p>The Hope Events WhatsApp session has failed and could not be automatically recovered after ${MAX_ATTEMPTS} attempts.</p><p><strong>Time:</strong> ${when}</p><p>Please <a href="${dashboardUrl}">visit the admin dashboard</a> to re-scan the QR code and reconnect.</p>`,
+      }).catch(() => {});
+    }
+  } catch (e) {
+    console.error('[whatsapp webhook] Unhandled error in recovery handler:', e.message);
+  }
+};
+
+module.exports = {
+  getConfigHandler,
+  saveConfigHandler,
+  createInstanceHandler,
+  deleteInstanceHandler,
+  getStatusHandler,
+  getQrHandler,
+  requestCodeHandler,
+  logoutHandler,
+  startHandler,
+  restartHandler,
+  handleWebhook,
+};
\ No newline at end of file
diff --git a/backend/src/controllers/yocoTransactionsController.js b/backend/src/controllers/yocoTransactionsController.js
new file mode 100644
index 0000000..d1efcec
--- /dev/null
+++ b/backend/src/controllers/yocoTransactionsController.js
@@ -0,0 +1,272 @@
+const prisma = require('../config/db');
+const { generateTicketsForRegistration } = require('../utils/ticketUtils');
+const { emailTickets } = require('./ticketController');
+
+function getYocoModel() {
+  // Gracefully handle environments where the Prisma client hasn't been regenerated
+  // and YocoTransaction model is not available yet.
+  return prisma && prisma.yocoTransaction ? prisma.yocoTransaction : null;
+}
+
+// @desc    Get all Yoco transactions (optionally filter by reconciled and ignored)
+// @route   GET /api/yoco-transactions
+// @access  Private/Admin or Supervisor
+const getAllYocoTransactions = async (req, res) => {
+  try {
+    if (!req.user || !['admin', 'supervisor'].includes(req.user.role)) {
+      return res.status(403).json({ success: false, message: 'Forbidden' });
+    }
+
+    const { reconciled, ignored } = req.query;
+    const where = {};
+    if (typeof reconciled !== 'undefined') where.reconciled = String(reconciled) === 'true';
+    if (typeof ignored !== 'undefined') where.ignored = String(ignored) === 'true';
+
+    const Yoco = getYocoModel();
+    if (!Yoco) {
+      console.warn('YocoTransaction model not available on Prisma client. Did you run migrations and `prisma generate`?');
+      return res.status(200).json({ success: true, data: [], message: 'YocoTransaction model not available. Apply DB migration and regenerate Prisma client.' });
+    }
+
+    const items = await Yoco.findMany({
+      where,
+      orderBy: [{ createdDate: 'desc' }, { createdAt: 'desc' }]
+    });
+
+    return res.status(200).json({ success: true, data: items });
+  } catch (error) {
+    console.error('Failed to fetch Yoco transactions:', error);
+    return res.status(500).json({ success: false, message: 'Server error', details: error.message });
+  }
+};
+
+// @desc    Get unreconciled Yoco transactions (not reconciled and not ignored)
+// @route   GET /api/yoco-transactions/unreconciled
+// @access  Private/Admin or Supervisor
+const getUnreconciledYocoTransactions = async (req, res) => {
+  try {
+    // Basic role check if auth middleware sets req.user
+    if (!req.user || !['admin', 'supervisor'].includes(req.user.role)) {
+      return res.status(403).json({ success: false, message: 'Forbidden' });
+    }
+
+    const Yoco = getYocoModel();
+    if (!Yoco) {
+      console.warn('YocoTransaction model not available on Prisma client. Did you run migrations and `prisma generate`?');
+      return res.status(200).json({ success: true, data: [], message: 'YocoTransaction model not available. Apply DB migration and regenerate Prisma client.' });
+    }
+
+    const items = await Yoco.findMany({
+      where: { reconciled: false, ignored: false },
+      orderBy: { createdDate: 'desc' }
+    });
+
+    return res.status(200).json({ success: true, data: items });
+  } catch (error) {
+    console.error('Failed to fetch unreconciled Yoco transactions:', error);
+    return res.status(500).json({ success: false, message: 'Server error', details: error.message });
+  }
+};
+
+// @desc    Reconcile a Yoco transaction to a Registration or Donation (creates Payment)
+// @route   POST /api/yoco-transactions/:id/reconcile
+// @access  Private/Admin or Supervisor
+const reconcileYocoTransaction = async (req, res) => {
+  try {
+    if (!req.user || !['admin', 'supervisor'].includes(req.user.role)) {
+      return res.status(403).json({ success: false, message: 'Forbidden' });
+    }
+
+    const Yoco = getYocoModel();
+    if (!Yoco) {
+      return res.status(400).json({ success: false, message: 'YocoTransaction model not available. Apply DB migration and regenerate Prisma client.' });
+    }
+
+    const { id } = req.params;
+    const { registrationId, eventId } = req.body || {};
+
+    const ytx = await Yoco.findUnique({ where: { id } });
+    if (!ytx) return res.status(404).json({ success: false, message: 'YocoTransaction not found' });
+    if (ytx.reconciled && ytx.paymentId) {
+      return res.status(409).json({ success: false, message: 'Already reconciled', data: ytx });
+    }
+
+    // Load registration if provided
+    let registration = null;
+    if (registrationId) {
+      registration = await prisma.registration.findUnique({
+        where: { id: registrationId },
+        include: {
+          event: true,
+          user: true,
+          registrationOptions: { include: { eventOption: true } },
+          payments: true
+        }
+      });
+      if (!registration) return res.status(404).json({ success: false, message: 'Registration not found' });
+    }
+
+    // Determine payment fields
+    const amountFloat = typeof ytx.amount === 'number' ? (ytx.amount / 100) : 0;
+    if (!amountFloat || amountFloat <= 0) {
+      return res.status(400).json({ success: false, message: 'Invalid amount on YocoTransaction for reconciliation' });
+    }
+
+    const externalId = ytx.externalId || undefined;
+
+    // Resolve a valid userId for the Payment to satisfy FK constraints
+    let resolvedUserId = null;
+    if (registration?.userId) {
+      resolvedUserId = registration.userId;
+    } else if (ytx?.raw?.payload?.metadata?.userId) {
+      const metaUserId = String(ytx.raw.payload.metadata.userId);
+      try {
+        const exists = await prisma.user.findUnique({ where: { id: metaUserId } });
+        if (exists) resolvedUserId = metaUserId;
+      } catch {}
+    }
+    if (!resolvedUserId && req.user?.id) {
+      // Fallback to the acting supervisor/admin to avoid FK violations
+      resolvedUserId = req.user.id;
+    }
+    if (!resolvedUserId) {
+      return res.status(400).json({ success: false, message: 'Unable to resolve a valid user for this payment' });
+    }
+
+    // Build payment data
+    const paymentData = {
+      amount: amountFloat,
+      method: ytx.methodType || 'card',
+      userId: resolvedUserId,
+      registrationId: registration?.id || null,
+      eventId: registration?.eventId || eventId || null,
+      isDonation: !registration?.id,
+      externalId: externalId,
+      status: 'completed'
+    };
+
+    // Ensure donation has an eventId
+    if (!registration && !paymentData.eventId) {
+      return res.status(400).json({ success: false, message: 'eventId is required when reconciling as donation' });
+    }
+
+    // Create payment
+    // Preserve original Yoco creation time to correctly evaluate early-bird pricing
+    const createdAt = ytx.createdDate || ytx.createdAt || new Date();
+    const payment = await prisma.payment.create({ data: { ...paymentData, createdAt } });
+
+    // Optionally update registration status when applicable and generate/email tickets if paid
+    let generatedTickets = [];
+    if (registration) {
+      try {
+        const updatedReg = await updateRegistrationStatus(registration.id);
+        if (updatedReg && updatedReg.status === 'paid') {
+          try {
+            generatedTickets = await generateTicketsForRegistration(registration.id);
+            if (Array.isArray(generatedTickets) && generatedTickets.length > 0) {
+              try {
+                const mockReq = { user: { id: registration.userId }, body: { registrationId: registration.id } };
+                const mockRes = { status: () => mockRes, json: () => {} };
+                await emailTickets(mockReq, mockRes);
+              } catch (emailErr) {
+                console.error('Error emailing tickets after Yoco reconciliation:', emailErr);
+              }
+            }
+          } catch (genErr) {
+            console.error('Error generating tickets after Yoco reconciliation:', genErr);
+          }
+        }
+      } catch (e) {
+        // log but do not fail reconciliation
+        console.warn('Failed to update registration after reconciliation:', e?.message || e);
+      }
+    }
+
+    // Send emails for the reconciled payment
+    try {
+      const { sendPaymentEmails } = require('../utils/notifications');
+      await sendPaymentEmails(payment.id);
+    } catch (e) {
+      console.error('Failed to send payment emails after reconciliation:', e);
+    }
+
+    // Update yoco transaction as reconciled
+    const updatedTx = await Yoco.update({
+      where: { id: ytx.id },
+      data: { reconciled: true, paymentId: payment.id }
+    });
+
+    return res.status(200).json({ success: true, data: { yocoTransaction: updatedTx, payment, generatedTickets: (generatedTickets && generatedTickets.length) ? generatedTickets : undefined } });
+  } catch (error) {
+    console.error('Failed to reconcile Yoco transaction:', error);
+    // Handle unique externalId conflicts (if a Payment with same externalId already exists)
+    if (error?.code === 'P2002') {
+      try {
+        const existing = await prisma.payment.findFirst({ where: { externalId: (await getYocoModel()?.findUnique({ where: { id: req.params.id } }))?.externalId } });
+        if (existing) {
+          const updatedTx = await getYocoModel()?.update({ where: { id: req.params.id }, data: { reconciled: true, paymentId: existing.id } });
+          if (updatedTx) {
+            return res.status(200).json({ success: true, data: { yocoTransaction: updatedTx, payment: existing }, message: 'Linked to existing payment' });
+          }
+        }
+      } catch {}
+    }
+    return res.status(500).json({ success: false, message: 'Server error', details: error?.message || String(error) });
+  }
+};
+
+// Minimal registration status update mirroring webhook logic
+async function updateRegistrationStatus(registrationId) {
+  const registration = await prisma.registration.findUnique({
+    where: { id: registrationId },
+    include: {
+      registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+      payments: true
+    }
+  });
+  if (!registration) return null;
+  const totalPaid = (registration.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const totalDue = require('../utils/pricing').computeRegistrationTotalDue(registration, new Date());
+  let newStatus = 'pending';
+  if (totalPaid >= totalDue) newStatus = 'paid';
+  else if (totalPaid > 0) newStatus = 'partial_paid';
+  return prisma.registration.update({ where: { id: registrationId }, data: { status: newStatus, updatedAt: new Date() } });
+}
+
+// @desc    Ignore a Yoco transaction (mark as ignored and reconciled without creating a payment)
+// @route   POST /api/yoco-transactions/:id/ignore
+// @access  Private/Admin or Supervisor
+const ignoreYocoTransaction = async (req, res) => {
+  try {
+    if (!req.user || !['admin', 'supervisor'].includes(req.user.role)) {
+      return res.status(403).json({ success: false, message: 'Forbidden' });
+    }
+    const Yoco = getYocoModel();
+    if (!Yoco) {
+      return res.status(400).json({ success: false, message: 'YocoTransaction model not available. Apply DB migration and regenerate Prisma client.' });
+    }
+    const { id } = req.params;
+    const ytx = await Yoco.findUnique({ where: { id } });
+    if (!ytx) return res.status(404).json({ success: false, message: 'YocoTransaction not found' });
+
+    if (ytx.reconciled && ytx.ignored) {
+      return res.status(200).json({ success: true, data: ytx, message: 'Already ignored' });
+    }
+
+    const updated = await Yoco.update({
+      where: { id },
+      data: { ignored: true, reconciled: true }
+    });
+    return res.status(200).json({ success: true, data: updated });
+  } catch (error) {
+    console.error('Failed to ignore Yoco transaction:', error);
+    return res.status(500).json({ success: false, message: 'Server error', details: error?.message || String(error) });
+  }
+};
+
+module.exports = {
+  getAllYocoTransactions,
+  getUnreconciledYocoTransactions,
+  reconcileYocoTransaction,
+  ignoreYocoTransaction
+};
diff --git a/backend/src/favicon.ico b/backend/src/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/backend/src/favicon.ico differ
diff --git a/backend/src/index.js b/backend/src/index.js
new file mode 100644
index 0000000..efe6ae1
--- /dev/null
+++ b/backend/src/index.js
@@ -0,0 +1,1253 @@
+const express = require('express');
+const path = require('path');
+const { version: API_VERSION } = require('../package.json');
+const cors = require('cors');
+const rateLimit = require('express-rate-limit');
+const dotenv = require('dotenv');
+const { PrismaClient } = require('@prisma/client');
+const { notFound, errorHandler } = require('./middleware/errorMiddleware');
+const getRawBody = require('raw-body');
+
+// Load environment variables
+dotenv.config();
+
+// Initialize Prisma client
+const prisma = new PrismaClient();
+
+// Initialize Express app
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// CORS — allow only the configured frontend origin
+const allowedOrigins = (process.env.FRONTEND_URL || 'http://localhost:3000')
+  .split(',')
+  .map((o) => o.trim());
+
+const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
+const isTesting = process.env.NODE_ENV === 'testing';
+const isProd = process.env.NODE_ENV === 'production';
+const modeLabel = isProd ? 'production' : isTesting ? 'testing' : 'development';
+console.log(`Running in ${modeLabel} mode.`);
+
+// In testing or production, require all critical env vars to be set at startup
+if (isTesting || isProd) {
+  const required = ['DATABASE_URL', 'JWT_SECRET'];
+  const missing = required.filter(k => !process.env[k]);
+  if (missing.length > 0) {
+    console.error(`[startup] Missing required environment variables for ${modeLabel} mode: ${missing.join(', ')}`);
+    process.exit(1);
+  }
+}
+
+app.use(cors({
+  origin: (origin, callback) => {
+    // Allow requests with no origin (e.g. mobile apps, curl, Postman)
+    if (!origin) return callback(null, true);
+    // Always allow configured origins
+    if (allowedOrigins.includes(origin)) return callback(null, true);
+    // In dev or testing, also allow any LAN origin on the same port (e.g. phone on 192.168.x.x:3000)
+    if (isDev || isTesting) {
+      try {
+        const u = new URL(origin);
+        const isLan = /^(192\.168\.|10\.|172\.(1[6-9]|2\d|3[01])\.)/.test(u.hostname);
+        if (isLan) return callback(null, true);
+      } catch {}
+    }
+    callback(new Error(`CORS: origin '${origin}' not allowed`));
+  },
+  credentials: true,
+}));
+
+// Global rate limiter — 5000 requests per 5 minutes per IP
+// Webhooks are excluded because they come from Yoco's servers and are already HMAC-verified
+const globalLimiter = rateLimit({
+  windowMs: 5 * 60 * 1000,
+  max: 5000,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { message: 'Too many requests, please try again later.' },
+  skip: (req) => req.path.startsWith('/api/webhooks'),
+});
+app.use(globalLimiter);
+
+// Raw body parsing middleware for webhooks
+app.use((req, res, next) => {
+  if (req.path.startsWith('/api/webhooks')) {
+    getRawBody(req, {
+      length: req.headers['content-length'],
+      encoding: 'utf-8'
+    }, (err, rawBody) => {
+      if (err) return next(err);
+      req.rawBody = rawBody;
+      next();
+    });
+  } else {
+    next();
+  }
+});
+
+
+// Import routes
+const userRoutes = require('./routes/userRoutes');
+const eventRoutes = require('./routes/eventRoutes');
+const registrationRoutes = require('./routes/registrationRoutes');
+const paymentRoutes = require('./routes/paymentRoutes');
+const ticketRoutes = require('./routes/ticketRoutes');
+const webhookRoutes = require('./routes/webhookRoutes');
+const uploadRoutes = require('./routes/uploadRoutes');
+const reportRoutes = require('./routes/reportRoutes');
+const formRoutes = require('./routes/formRoutes');
+const yocoTransactionRoutes = require('./routes/yocoTransactionRoutes');
+const automationRoutes = require('./routes/automationRoutes');
+const broadcastRoutes = require('./routes/broadcastRoutes');
+const whatsappBroadcastRoutes = require('./routes/whatsappBroadcastRoutes');
+const scheduledEmailRoutes = require('./routes/scheduledEmailRoutes');
+const sectionRoutes = require('./routes/sectionRoutes');
+const bannerRoutes    = require('./routes/bannerRoutes');
+const whatsappRoutes  = require('./routes/whatsappRoutes');
+const settingsRoutes  = require('./routes/settingsRoutes');
+const setupRoutes     = require('./routes/setupRoutes');
+const costRoutes      = require('./routes/costRoutes');
+const cashupRoutes    = require('./routes/cashupRoutes');
+const statsRoutes     = require('./routes/statsRoutes');
+
+// Mount webhook routes BEFORE JSON body parser to avoid double-reading the stream
+app.use('/api/webhooks', webhookRoutes);
+
+// Apply JSON body parser for all non-webhook routes
+app.use(express.json());
+
+// Use routes
+app.use('/api/users', userRoutes);
+app.use('/api/events', eventRoutes);
+app.use('/api/registrations', registrationRoutes);
+app.use('/api/payments', paymentRoutes);
+app.use('/api/tickets', ticketRoutes);
+app.use('/api/uploads', uploadRoutes);
+app.use('/api/reports', reportRoutes);
+app.use('/api/forms', formRoutes);
+app.use('/api/yoco-transactions', yocoTransactionRoutes);
+app.use('/api/automations', automationRoutes);
+app.use('/api/broadcasts', broadcastRoutes);
+app.use('/api/whatsapp-broadcasts', whatsappBroadcastRoutes);
+app.use('/api/scheduled-emails', scheduledEmailRoutes);
+app.use('/api/sections', sectionRoutes);
+app.use('/api/banner',    bannerRoutes);
+app.use('/api/whatsapp', whatsappRoutes);
+app.use('/api/settings', settingsRoutes);
+app.use('/api/setup',    setupRoutes);
+app.use('/api/stats',    statsRoutes);
+app.use('/api', costRoutes);
+app.use('/api/cashups', cashupRoutes);
+
+// Pre-warm the settings cache so synchronous helpers have DB values from startup
+require('./utils/settingsCache').warmCache().catch(() => {});
+app.use('/uploads', express.static('public/uploads'));
+
+// ── Shared page helpers ────────────────────────────────────────────────────────
+const jwt = require('jsonwebtoken');
+
+function pageShell(title, accentColor, bodyHtml) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <style>
+    *{box-sizing:border-box;margin:0;padding:0}
+    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f3f4f6;color:#1f2937;min-height:100vh;padding:24px 16px}
+    .wrap{max-width:960px;margin:0 auto}
+    h1{font-size:1.5rem;font-weight:700;color:#111827;margin-bottom:4px}
+    h2{font-size:1.1rem;font-weight:600;color:#111827;margin:24px 0 10px}
+    .subtitle{font-size:.85rem;color:#6b7280;margin-bottom:24px}
+    .card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px;margin-bottom:16px}
+    .stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
+    .stat{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px 16px}
+    .stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;margin-bottom:4px}
+    .stat-value{font-size:1.1rem;font-weight:600;color:#111827}
+    .badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600}
+    .badge-ok{background:#d1fae5;color:#065f46}
+    .badge-warn{background:#fef3c7;color:#92400e}
+    .badge-err{background:#fee2e2;color:#991b1b}
+    table{width:100%;border-collapse:collapse;font-size:.82rem}
+    th{text-align:left;padding:6px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:600;color:#374151}
+    td{padding:6px 10px;border-bottom:1px solid #f3f4f6;color:#374151;vertical-align:top}
+    tr:last-child td{border-bottom:none}
+    .method{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.7rem;font-weight:700;font-family:monospace}
+    .get{background:#dbeafe;color:#1e40af}
+    .post{background:#d1fae5;color:#065f46}
+    .put{background:#fef3c7;color:#92400e}
+    .patch{background:#ede9fe;color:#5b21b6}
+    .del{background:#fee2e2;color:#991b1b}
+    .auth-badge{font-size:.68rem;padding:1px 6px;border-radius:4px;background:#f3f4f6;color:#374151;font-family:monospace}
+    code{background:#f3f4f6;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:.82rem}
+    .note{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 16px;font-size:.82rem;color:#1e40af;margin-bottom:16px}
+    .accent{color:${accentColor}}
+    a{color:${accentColor};text-decoration:none}
+    a:hover{text-decoration:underline}
+  </style>
+</head>
+<body>
+<div class="wrap">
+${bodyHtml}
+</div>
+</body>
+</html>`;
+}
+
+function formatUptime(seconds) {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  if (d > 0) return `${d}d ${h}h ${m}m`;
+  if (h > 0) return `${h}h ${m}m ${s}s`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+}
+
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+
+// ── Favicon ──────────────────────────────────────────────────────────────────
+app.get('/favicon.ico', (req, res) => {
+  res.sendFile(path.join(__dirname, 'favicon.ico'));
+});
+
+// ── Root route — status page ────────────────────────────────────────────────
+app.get('/', async (req, res) => {
+  const mem = process.memoryUsage();
+  const uptimeSec = process.uptime();
+  const now = new Date().toISOString();
+
+  // Database health check
+  let dbStatus = 'ok';
+  let dbMsg = 'Connected';
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+  } catch (e) {
+    dbStatus = 'error';
+    dbMsg = 'Unreachable';
+  }
+
+  const dbBadge = dbStatus === 'ok'
+    ? `<span class="badge badge-ok">&#10003; ${dbMsg}</span>`
+    : `<span class="badge badge-err">&#10007; ${dbMsg}</span>`;
+
+  const envBadge = isProd
+    ? `<span class="badge badge-ok">production</span>`
+    : isTesting
+      ? `<span class="badge badge-warn">testing</span>`
+      : `<span class="badge badge-warn">development</span>`;
+
+  const html = pageShell('Hope Events API — Status', '#2563eb', `
+    <h1>Hope Events API</h1>
+    <p class="subtitle">v${API_VERSION} &mdash; ${now}</p>
+
+    <div class="stat-grid">
+      <div class="stat">
+        <div class="stat-label">Status</div>
+        <div class="stat-value"><span class="badge badge-ok">&#10003; Online</span></div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Environment</div>
+        <div class="stat-value">${envBadge}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Database</div>
+        <div class="stat-value">${dbBadge}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Uptime</div>
+        <div class="stat-value">${formatUptime(uptimeSec)}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Heap Used</div>
+        <div class="stat-value">${formatBytes(mem.heapUsed)}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Heap Total</div>
+        <div class="stat-value">${formatBytes(mem.heapTotal)}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">RSS</div>
+        <div class="stat-value">${formatBytes(mem.rss)}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-label">Node</div>
+        <div class="stat-value">${process.version}</div>
+      </div>
+    </div>
+
+    <div class="note">
+      API documentation is available at <a href="/docs">/docs</a> — requires an admin account token.
+    </div>
+  `);
+
+  res.send(html);
+});
+
+// ── /docs route — interactive API reference, admin only ─────────────────────
+app.get('/docs', async (req, res) => {
+  const tokenFromQuery = req.query.token;
+  const tokenFromHeader = req.headers.authorization?.startsWith('Bearer ')
+    ? req.headers.authorization.split(' ')[1] : null;
+  const token = tokenFromQuery || tokenFromHeader;
+
+  if (!token) {
+    return res.status(401).send(pageShell('API Docs — Login Required', '#2563eb', `
+      <h1>API Documentation</h1>
+      <p class="subtitle">Admin access required</p>
+      <div class="card">
+        <p style="margin-bottom:12px;font-size:.9rem;">Pass your admin JWT to view the docs:</p>
+        <code style="display:block;padding:10px;background:#f3f4f6;border-radius:6px;font-size:.8rem;word-break:break-all;">/docs?token=&lt;your-admin-jwt&gt;</code>
+        <p style="margin-top:12px;font-size:.8rem;color:#6b7280;">Copy your token from the browser's localStorage key <code>token</code> after logging in as admin.</p>
+      </div>`));
+  }
+
+  let user;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    user = await prisma.user.findUnique({
+      where: { id: decoded.id },
+      select: { id: true, name: true, email: true, role: true, isActive: true, tokenVersion: true },
+    });
+    if (!user || !user.isActive) throw new Error('User not found or inactive');
+    if ((decoded.tokenVersion ?? 0) !== user.tokenVersion) throw new Error('Token revoked');
+    if (user.role !== 'admin') throw new Error('Admin role required');
+  } catch (e) {
+    return res.status(403).send(pageShell('API Docs — Access Denied', '#dc2626', `
+      <h1>Access Denied</h1>
+      <p class="subtitle">Admin role required</p>
+      <div class="card">
+        <p style="font-size:.9rem;color:#dc2626;">${e.message}</p>
+        <p style="margin-top:10px;font-size:.82rem;color:#6b7280;">Make sure you are logged in as an admin and using a valid, non-expired token.</p>
+      </div>`));
+  }
+
+  // ── Endpoint data ────────────────────────────────────────────────────────
+  const GROUPS = [
+    { title: 'Users', base: '/api/users', endpoints: [
+      { method:'POST', path:'/api/users', auth:'public', desc:'Register a new account',
+        request:{ body:{ name:'Jane Doe', email:'jane@example.com', password:'secret123', phoneNumber:'+27821234567' }},
+        responses:[
+          { status:201, desc:'Created', body:{ id:'a1b2c3d4-0000-0000-0000-000000000001', name:'Jane Doe', email:'jane@example.com', role:'user', token:'eyJhbGciOiJIUzI1NiJ9...' }},
+          { status:400, desc:'Validation error', body:{ message:'Email already in use' }},
+        ]},
+      { method:'POST', path:'/api/users/login', auth:'public', desc:'Login — returns a signed JWT',
+        notes:'Rate-limited to 15 requests/min per IP.',
+        request:{ body:{ email:'jane@example.com', password:'secret123' }},
+        responses:[
+          { status:200, desc:'Success', body:{ id:'a1b2c3d4-...', name:'Jane Doe', email:'jane@example.com', role:'user', token:'eyJhbGciOiJIUzI1NiJ9...' }},
+          { status:401, desc:'Wrong credentials', body:{ message:'Invalid email or password' }},
+        ]},
+      { method:'POST', path:'/api/users/forgot', auth:'public', desc:'Request a password reset email',
+        request:{ body:{ email:'jane@example.com' }},
+        responses:[
+          { status:200, desc:'Always succeeds (no user enumeration)', body:{ message:'If that email exists, a reset link has been sent.' }},
+        ]},
+      { method:'POST', path:'/api/users/reset', auth:'public', desc:'Reset password using token from email',
+        request:{ body:{ token:'reset-token-from-email', password:'newPassword123' }},
+        responses:[
+          { status:200, desc:'Success', body:{ message:'Password reset successful.' }},
+          { status:400, desc:'Invalid or expired token', body:{ message:'Reset token is invalid or has expired.' }},
+        ]},
+      { method:'POST', path:'/api/users/activate', auth:'public', desc:'Activate a new account via email link',
+        request:{ body:{ token:'activation-token-from-email' }},
+        responses:[
+          { status:200, desc:'Success', body:{ message:'Account activated.' }},
+          { status:400, desc:'Invalid token', body:{ message:'Invalid or expired activation token.' }},
+        ]},
+      { method:'GET', path:'/api/users/profile', auth:'user+', desc:'Get own profile',
+        responses:[
+          { status:200, desc:'Success', body:{ id:'a1b2c3d4-...', name:'Jane Doe', email:'jane@example.com', role:'user', phoneNumber:'+27821234567', notificationPreference:'email', createdAt:'2024-01-15T08:00:00.000Z' }},
+          { status:401, desc:'Unauthorized', body:{ message:'Not authorized, no token' }},
+        ]},
+      { method:'PUT', path:'/api/users/profile', auth:'user+', desc:'Update own profile',
+        request:{ body:{ name:'Jane Smith', phoneNumber:'+27821234567', notificationPreference:'both' }},
+        responses:[
+          { status:200, desc:'Updated', body:{ id:'a1b2c3d4-...', name:'Jane Smith', email:'jane@example.com', notificationPreference:'both' }},
+        ]},
+      { method:'POST', path:'/api/users/revoke-sessions', auth:'user+', desc:'Invalidate all own sessions by incrementing tokenVersion',
+        responses:[{ status:200, desc:'Success', body:{ message:'All sessions revoked.' }}]},
+      { method:'POST', path:'/api/users/close-account', auth:'user+', desc:'Deactivate own account',
+        responses:[{ status:200, desc:'Success', body:{ message:'Account deactivated.' }}]},
+      { method:'GET', path:'/api/users', auth:'supervisor+', desc:'List all users (paginated). All filters are applied server-side.',
+        queryParams:{ page:'Page number (default 1)', limit:'Items per page (max 200, default 100)', search:'Search by name, email, or phone number (case-insensitive substring)', role:'Filter by role: admin|supervisor|staff|user', isActive:'Filter by active status: true|false (omit for both)' },
+        responses:[
+          { status:200, desc:'Success', body:{ data:[{ id:'a1b2c3d4-...', name:'Jane Doe', email:'jane@example.com', role:'user', isActive:true, createdAt:'2024-01-15T08:00:00.000Z' }], total:1, page:1, limit:20 }},
+        ]},
+      { method:'GET', path:'/api/users/check-exists', auth:'supervisor+', desc:'Check whether an account already exists for a given email and/or phone number (used by the self-service kiosk and manual registration screens to avoid duplicate accounts)',
+        queryParams:{ email:'Email to look up (optional)', phone:'Phone number to look up (optional; SA formats normalized)' },
+        responses:[
+          { status:200, desc:'Success', body:{ exists:true, hasEmail:true, hasPhone:false }},
+        ]},
+      { method:'GET', path:'/api/users/:id', auth:'admin', desc:'Get a single user by ID',
+        pathParams:{ ':id':'User UUID' },
+        responses:[
+          { status:200, desc:'Success', body:{ id:'a1b2c3d4-...', name:'Jane Doe', email:'jane@example.com', role:'user', isActive:true, phoneNumber:'+27821234567', notificationPreference:'email' }},
+          { status:404, desc:'Not found', body:{ message:'User not found' }},
+        ]},
+      { method:'PUT', path:'/api/users/:id', auth:'admin', desc:'Update any user (including role)',
+        pathParams:{ ':id':'User UUID' },
+        request:{ body:{ role:'supervisor', isActive:true, name:'Jane Doe' }},
+        responses:[
+          { status:200, desc:'Updated', body:{ id:'a1b2c3d4-...', name:'Jane Doe', role:'supervisor' }},
+        ]},
+      { method:'DELETE', path:'/api/users/:id', auth:'admin', desc:'Deactivate a user account (sets isActive: false; does not erase data)',
+        pathParams:{ ':id':'User UUID' },
+        responses:[
+          { status:200, desc:'Deactivated', body:{ message:'User deactivated' }},
+          { status:404, desc:'Not found', body:{ message:'User not found' }},
+        ]},
+      { method:'POST', path:'/api/users/:id/revoke-sessions', auth:'admin', desc:'Revoke all sessions for another user',
+        pathParams:{ ':id':'User UUID' },
+        responses:[{ status:200, desc:'Success', body:{ message:'Sessions revoked for user.' }}]},
+      { method:'POST', path:'/api/users/:id/anonymize', auth:'admin', desc:'Erase personal data for a user — sets name to "Deleted User", email to deleted-{id}@deleted.local, clears phone number, deactivates account, revokes all sessions. Irreversible.',
+        pathParams:{ ':id':'User UUID' },
+        responses:[
+          { status:200, desc:'Anonymised', body:{ message:'User data deleted' }},
+          { status:404, desc:'Not found', body:{ message:'User not found' }},
+        ]},
+    ]},
+
+    { title: 'Events', base: '/api/events', endpoints: [
+      { method:'GET', path:'/api/events', auth:'public', desc:'List active, public, upcoming events. Each event includes isSoldOut:boolean — true when every option with a stockLimit > 0 is fully booked.',
+        queryParams:{ limit:'Max results (default 20)' },
+        responses:[
+          { status:200, desc:'Success', body:[{ id:'ev-uuid-...', title:'Camp 2025', startDate:'2025-07-10T08:00:00.000Z', endDate:'2025-07-14T17:00:00.000Z', price:450, picture:'/uploads/camp.jpg', isActive:true, isSoldOut:false }]},
+        ]},
+      { method:'GET', path:'/api/events/all', auth:'staff+', desc:'All events including hidden and past',
+        queryParams:{ includePast:'Include past events (true|false, default false)' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'ev-uuid-...', title:'Camp 2025', isHidden:false, isActive:true }]}]},
+      { method:'GET', path:'/api/events/:id', auth:'public', desc:'Get full event detail by ID. When called by staff/supervisor/admin, the response also includes createdBy and notifyRecipients (who the event\'s notifications go to).',
+        pathParams:{ ':id':'Event UUID' },
+        responses:[
+          { status:200, desc:'Success', body:{ id:'ev-uuid-...', title:'Camp 2025', description:'Annual family camp.', startDate:'2025-07-10T08:00:00.000Z', endDate:'2025-07-14T17:00:00.000Z', price:450, requiresAuth:true, eventOptions:[{ id:'opt-uuid-...', name:'Adult', price:450, isMainTicket:true }], createdBy:{ id:'user-uuid-...', name:'Jane Supervisor', email:'jane@example.com' }, notifyRecipients:[]}},
+          { status:404, desc:'Not found', body:{ message:'Event not found' }},
+        ]},
+      { method:'GET', path:'/api/events/by-alias/:redirectUrl', auth:'public', desc:'Get event by its URL alias',
+        pathParams:{ ':redirectUrl':'URL alias string (e.g. camp-2025)' },
+        responses:[{ status:200, desc:'Success', body:{ id:'ev-uuid-...', title:'Camp 2025', redirectUrl:'camp-2025' }}]},
+      { method:'POST', path:'/api/events', auth:'supervisor+', desc:'Create a new event',
+        request:{ body:{ title:'Camp 2025', description:'Annual family camp', startDate:'2025-07-10T08:00:00.000Z', endDate:'2025-07-14T17:00:00.000Z', registrationDeadline:'2025-07-01T00:00:00.000Z', price:450, isActive:true, isHidden:false, requiresAuth:true }},
+        responses:[
+          { status:201, desc:'Created', body:{ id:'ev-uuid-new', title:'Camp 2025', createdAt:'2024-11-01T09:00:00.000Z' }},
+        ]},
+      { method:'PUT', path:'/api/events/:id', auth:'supervisor+', desc:'Update an event',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ title:'Camp 2025 Updated', price:500 }},
+        responses:[{ status:200, desc:'Updated', body:{ id:'ev-uuid-...', title:'Camp 2025 Updated', price:500 }}]},
+      { method:'GET', path:'/api/events/:id/notify-recipients', auth:'supervisor+', desc:'Get which users receive registration/payment/daily-summary notifications for this event. Lightweight — skips the option/stock computation that GET /api/events/:id does.',
+        pathParams:{ ':id':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'user-uuid-1', name:'Jane Supervisor', email:'jane@example.com', role:'supervisor' }]}]},
+      { method:'PUT', path:'/api/events/:id/notify-recipients', auth:'supervisor+', desc:'Set which users receive registration/payment/daily-summary notifications for this event. Pass an empty array to fall back to the event creator.',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ userIds:['user-uuid-1','user-uuid-2'] }},
+        responses:[
+          { status:200, desc:'Saved', body:[{ id:'user-uuid-1', name:'Jane Supervisor', email:'jane@example.com', role:'supervisor' },{ id:'user-uuid-2', name:'John Admin', email:'john@example.com', role:'admin' }]},
+          { status:400, desc:'Bad input', body:{ message:'userIds must be an array' }},
+        ]},
+      { method:'DELETE', path:'/api/events/:id', auth:'admin', desc:'Permanently delete an event',
+        pathParams:{ ':id':'Event UUID' },
+        responses:[{ status:200, desc:'Deleted', body:{ message:'Event deleted.' }}]},
+      { method:'POST', path:'/api/events/:id/email-attendees', auth:'supervisor+', desc:'Send a bulk email to event attendees. Use dryRun:true to preview recipients without sending.',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ subject:'Payment reminder: Camp 2025', text:'Hi {{name}}, you have an outstanding balance of {{balance}}.', filter:{ status:'unpaid', attendeeIds:['user-uuid-1','user-uuid-2'] }, dryRun:false, template:'custom' }},
+        responses:[
+          { status:200, desc:'Sent', body:{ matched:15, sent:14, failed:1 }},
+          { status:200, desc:'Dry run', body:{ matched:15, dryRun:true, recipients:[{ email:'jane@example.com', name:'Jane Doe' }]}},
+        ]},
+      { method:'POST', path:'/api/events/:id/email-attendees/schedule', auth:'supervisor+', desc:'Schedule a bulk email to run at a future time',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ subject:'Reminder: Camp 2025', text:'Hi {{name}}, see you soon!', scheduledAt:'2025-07-03T09:00:00.000Z', filter:{ status:'paid' }}},
+        responses:[{ status:201, desc:'Scheduled', body:{ job:{ id:'job-uuid-...', scheduledAt:'2025-07-03T09:00:00.000Z', status:'queued' }}}]},
+      { method:'POST', path:'/api/events/:id/whatsapp-attendees', auth:'supervisor+', desc:'Send a bulk WhatsApp message to attendees with a phone number. Supports dryRun.',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ message:'Hi {{name}}, camp starts in 3 days! 🏕️', filter:{ status:'paid' }, dryRun:false }},
+        responses:[
+          { status:200, desc:'Sent', body:{ matched:12, sent:11 }},
+        ]},
+      { method:'POST', path:'/api/events/:id/whatsapp-attendees/schedule', auth:'supervisor+', desc:'Schedule a bulk WhatsApp message',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ message:'Hi {{name}}, final reminder for camp tomorrow! 🎉', scheduledAt:'2025-07-09T08:00:00.000Z', filter:{ status:'paid' }}},
+        responses:[{ status:201, desc:'Scheduled', body:{ job:{ id:'job-uuid-...', status:'queued' }}}]},
+      { method:'POST', path:'/api/events/:id/options', auth:'supervisor+', desc:'Add a ticket option to an event',
+        pathParams:{ ':id':'Event UUID' },
+        request:{ body:{ name:'Child (under 12)', price:250, isMainTicket:false }},
+        responses:[{ status:201, desc:'Created', body:{ id:'opt-uuid-new', name:'Child (under 12)', price:250, isMainTicket:false }}]},
+      { method:'PUT', path:'/api/events/options/:id', auth:'supervisor+', desc:'Update a ticket option',
+        pathParams:{ ':id':'EventOption UUID' },
+        request:{ body:{ price:300 }},
+        responses:[{ status:200, desc:'Updated', body:{ id:'opt-uuid-...', price:300 }}]},
+      { method:'DELETE', path:'/api/events/options/:id', auth:'admin', desc:'Delete a ticket option (fails if registrations exist)',
+        pathParams:{ ':id':'EventOption UUID' },
+        responses:[
+          { status:200, desc:'Deleted', body:{ message:'Option deleted.' }},
+          { status:400, desc:'In use', body:{ message:'Cannot delete option with existing registrations.' }},
+        ]},
+    ]},
+
+    { title: 'Registrations', base: '/api/registrations', endpoints: [
+      { method:'POST', path:'/api/registrations', auth:'optional', desc:'Create a registration. Auth optional — guests are allowed when event does not require auth.',
+        request:{ body:{ eventId:'ev-uuid-...', options:[{ eventOptionId:'opt-uuid-...', quantity:2 }] }},
+        responses:[
+          { status:201, desc:'Created', body:{ id:'reg-uuid-...', eventId:'ev-uuid-...', status:'pending', checkoutId:null, createdAt:'2025-06-01T10:00:00.000Z' }},
+          { status:400, desc:'Deadline passed', body:{ message:'Registration deadline has passed.' }},
+        ]},
+      { method:'GET', path:'/api/registrations/myregistrations', auth:'user+', desc:'Get all registrations for the authenticated user',
+        responses:[{ status:200, desc:'Success', body:[{ id:'reg-uuid-...', event:{ id:'ev-uuid-...', title:'Camp 2025' }, status:'paid', createdAt:'2025-06-01T10:00:00.000Z' }]}]},
+      { method:'GET', path:'/api/registrations/:id', auth:'optional', desc:'Get registration detail by ID',
+        pathParams:{ ':id':'Registration UUID' },
+        responses:[{ status:200, desc:'Success', body:{ id:'reg-uuid-...', status:'paid', event:{ title:'Camp 2025' }, registrationOptions:[{ eventOption:{ name:'Adult' }, quantity:1 }], payments:[{ amount:450, method:'card', status:'succeeded' }] }}]},
+      { method:'PUT', path:'/api/registrations/:id', auth:'staff+', desc:'Update registration status. If set to "paid", generates tickets and emails them fire-and-forget. If downgraded from "paid", deletes unused tickets (blocks if any ticket has been scanned).',
+        pathParams:{ ':id':'Registration UUID' },
+        request:{ body:{ status:'paid' }},
+        responses:[{ status:200, desc:'Updated', body:{ id:'reg-uuid-...', status:'paid' }}]},
+      { method:'DELETE', path:'/api/registrations/:id', auth:'user+', desc:'Cancel registration. Users: only allowed when no positive payments exist (returns 403 otherwise). Admins: always allowed.',
+        pathParams:{ ':id':'Registration UUID' },
+        responses:[
+          { status:200, desc:'Cancelled', body:{ message:'Registration cancelled', registration:{ id:'reg-uuid-...', status:'cancelled' }}},
+          { status:400, desc:'Already cancelled', body:{ message:'Registration is already cancelled' }},
+          { status:403, desc:'Payments exist — non-admin cannot cancel', body:{ message:'This registration has payments recorded against it and cannot be self-cancelled. Please contact the organisation for assistance.' }},
+          { status:403, desc:'Not the owner (and not admin)', body:{ message:'Not authorized to cancel this registration' }},
+        ]},
+      { method:'GET', path:'/api/registrations', auth:'staff+', desc:'List all registrations across all events',
+        queryParams:{ page:'Page (default 1)', limit:'Per page (default 20)', eventId:'Filter by event', status:'Filter by status', search:'Search by name/email' },
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'reg-uuid-...', user:{ name:'Jane Doe' }, event:{ title:'Camp 2025' }, status:'paid' }], total:1, page:1 }}]},
+      { method:'GET', path:'/api/registrations/event/:eventId', auth:'staff+', desc:'Get all registrations for a specific event',
+        pathParams:{ ':eventId':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'reg-uuid-...', user:{ id:'user-uuid-...', name:'Jane Doe', email:'jane@example.com', phoneNumber:'+27821234567' }, status:'paid' }]}]},
+      { method:'POST', path:'/api/registrations/manual', auth:'supervisor+', desc:'Manually create a registration (at-the-door / walk-in). Resolves early-bird tier pricing (including per-variant tiers) and stores priceSnapshot + appliedTierId on each option. Creates or finds a matching user by email/phone. If a matching user is found, updates their notificationPreference and backfills a missing phone number or guest placeholder email with the newly supplied value (without overwriting existing contact info). Generates a Yoco checkout link for unpaid registrations to include in the self-service notification email.',
+        request:{ body:{ eventId:'ev-uuid-...', user:{ name:'Jane Doe', email:'jane@example.com', phoneNumber:'0821234567' }, options:[{ eventOptionId:'opt-uuid-...', quantity:1, variantId:'var-uuid-...' }], notificationPreference:'email' }},
+        responses:[{ status:201, desc:'Created', body:{ id:'reg-uuid-new', status:'pending' }}]},
+      { method:'POST', path:'/api/registrations/:id/forms/responses', auth:'optional', desc:'Submit form responses for a registration',
+        pathParams:{ ':id':'Registration UUID' },
+        request:{ body:{ answers:[{ fieldId:'field-uuid-...', value:'Yes' }, { fieldId:'field-uuid-2', value:'Vegetarian' }] }},
+        responses:[{ status:201, desc:'Submitted', body:{ id:'response-uuid-...', createdAt:'2025-06-01T10:05:00.000Z' }}]},
+    ]},
+
+    { title: 'Payments', base: '/api/payments', endpoints: [
+      { method:'POST', path:'/api/payments/yoco-checkout', auth:'user+', desc:'Initiate a Yoco checkout session. Before creating the checkout, re-evaluates early-bird tier eligibility (deadline + stock). If any price changed since registration, returns priceUpdated:true instead of creating a checkout — the client must inform the user and retry.',
+        request:{ body:{ registrationId:'reg-uuid-...', amount:450, successUrl:'https://events.hopehenley.co.za/payment/success', cancelUrl:'https://events.hopehenley.co.za/payment/cancel', failureUrl:'https://events.hopehenley.co.za/payment/failure' }},
+        responses:[
+          { status:200, desc:'Checkout created — proceed to Yoco', body:{ redirectUrl:'https://pay.yoco.com/checkout/abc123', checkoutId:'yoco-checkout-id', amount:450 }},
+          { status:200, desc:'Early-bird price changed — checkout NOT created. Frontend must show warning and let user confirm before retrying.', body:{ priceUpdated:true, newTotal:500, message:'One or more early-bird prices have changed since your registration was created. Please review the updated total before proceeding.' }},
+        ]},
+      { method:'POST', path:'/api/payments', auth:'supervisor+', desc:'Record a manual payment (cash, EFT, etc.)',
+        request:{ body:{ registrationId:'reg-uuid-...', amount:450, method:'cash', userId:'user-uuid-...' }},
+        responses:[
+          { status:201, desc:'Recorded', body:{ id:'pay-uuid-...', amount:450, method:'cash', status:'succeeded', createdAt:'2025-06-10T09:00:00.000Z' }},
+        ]},
+      { method:'GET', path:'/api/payments/mypayments', auth:'user+', desc:'Get own payment history',
+        responses:[{ status:200, desc:'Success', body:[{ id:'pay-uuid-...', amount:450, method:'card', status:'succeeded', createdAt:'2025-06-01T11:00:00.000Z' }]}]},
+      { method:'GET', path:'/api/payments', auth:'supervisor+', desc:'List all payments',
+        queryParams:{ page:'Page (default 1)', limit:'Per page (default 20)', eventId:'Filter by event', userId:'Filter by user', method:'Filter by method (cash|card|eft|donation)', startDate:'ISO date', endDate:'ISO date' },
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'pay-uuid-...', amount:450, method:'card', user:{ name:'Jane Doe' }, registration:{ event:{ title:'Camp 2025' }}}], total:1 }}]},
+      { method:'GET', path:'/api/payments/event/:eventId', auth:'staff+', desc:'All payments for an event',
+        pathParams:{ ':eventId':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'pay-uuid-...', amount:450, user:{ name:'Jane Doe' }, method:'card' }]}]},
+      { method:'POST', path:'/api/payments/refund', auth:'supervisor+', desc:'Create a refund payment (negative amount)',
+        request:{ body:{ originalPaymentId:'pay-uuid-...', amount:450, reason:'Cancelled registration' }},
+        responses:[{ status:201, desc:'Refund recorded', body:{ id:'pay-uuid-refund', amount:-450, method:'refund' }}]},
+      { method:'PUT', path:'/api/payments/assign-donation', auth:'supervisor+', desc:'Link an unassigned donation payment to a specific registration',
+        request:{ body:{ paymentId:'pay-uuid-...', registrationId:'reg-uuid-...' }},
+        responses:[{ status:200, desc:'Assigned', body:{ id:'pay-uuid-...', registrationId:'reg-uuid-...', isDonation:false }}]},
+      { method:'GET', path:'/api/payments/admin/stats', auth:'admin', desc:'Aggregated payment statistics',
+        responses:[{ status:200, desc:'Success', body:{ totalRevenue:98500, totalPayments:215, byMethod:{ card:180, cash:30, eft:5 }, byEvent:[{ eventId:'ev-uuid-...', title:'Camp 2025', total:45000 }] }}]},
+    ]},
+
+    { title: 'Tickets', base: '/api/tickets', endpoints: [
+      { method:'GET', path:'/api/tickets/mytickets', auth:'user+', desc:'Get own tickets',
+        responses:[{ status:200, desc:'Success', body:[{ id:'tkt-uuid-...', qrCode:'TKT-ABC123', event:{ title:'Camp 2025' }, registrationOption:{ eventOption:{ name:'Adult' }}, quantity:1, isUsed:false }]}]},
+      { method:'POST', path:'/api/tickets/generate', auth:'supervisor+', desc:'Generate tickets for a registration (idempotent — skips already-generated options)',
+        request:{ body:{ registrationId:'reg-uuid-...' }},
+        responses:[{ status:201, desc:'Generated', body:{ created:2, skipped:0, tickets:[{ id:'tkt-uuid-...', qrCode:'TKT-ABC123' }] }}]},
+      { method:'POST', path:'/api/tickets/scan/:qrCode', auth:'staff+', desc:'Scan and redeem a ticket',
+        pathParams:{ ':qrCode':'QR code string from ticket' },
+        request:{ body:{ quantity:1 }},
+        responses:[
+          { status:200, desc:'Scanned', body:{ ticket:{ id:'tkt-uuid-...', qrCode:'TKT-ABC123', isUsed:true }, event:{ title:'Camp 2025' }, user:{ name:'Jane Doe' }, quantityRedeemed:1, remainingUses:0 }},
+          { status:400, desc:'Already used', body:{ message:'Ticket has already been fully redeemed.' }},
+          { status:404, desc:'Not found', body:{ message:'Ticket not found.' }},
+        ]},
+      { method:'GET', path:'/api/tickets/scan-preview/:qrCode', auth:'staff+', desc:'Preview a ticket scan without marking it used',
+        pathParams:{ ':qrCode':'QR code string' },
+        responses:[{ status:200, desc:'Preview', body:{ ticket:{ qrCode:'TKT-ABC123', quantity:2, isUsed:false }, event:{ title:'Camp 2025' }, user:{ name:'Jane Doe', phoneNumber:'+27821234567' }, totalRedeemed:0 }}]},
+      { method:'POST', path:'/api/tickets/email', auth:'user+', desc:'Email own tickets as PDF attachments',
+        responses:[{ status:200, desc:'Sent', body:{ message:'Tickets emailed.', count:2 }}]},
+      { method:'POST', path:'/api/tickets/send-to', auth:'staff+', desc:'Send tickets to a specific user by email or WhatsApp',
+        request:{ body:{ userId:'user-uuid-...', eventId:'ev-uuid-...', channel:'email' }},
+        responses:[{ status:200, desc:'Sent', body:{ sent:2 }}]},
+      { method:'GET', path:'/api/tickets/event/:eventId', auth:'staff+', desc:'All tickets for an event',
+        pathParams:{ ':eventId':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'tkt-uuid-...', qrCode:'TKT-ABC123', user:{ name:'Jane Doe' }, isUsed:false, quantity:1 }]}]},
+      { method:'GET', path:'/api/tickets/scans/recent', auth:'staff+', desc:'Last 50 scan events across all events',
+        responses:[{ status:200, desc:'Success', body:[{ ticketId:'tkt-uuid-...', scannedAt:'2025-07-10T09:05:00.000Z', quantityRedeemed:1, ticket:{ user:{ name:'Jane Doe' }, event:{ title:'Camp 2025' }}, scannedBy:{ name:'Staff Member' }}]}]},
+      { method:'GET', path:'/api/tickets/scans/stats', auth:'staff+', desc:'Scan statistics grouped by event',
+        responses:[{ status:200, desc:'Success', body:[{ eventId:'ev-uuid-...', title:'Camp 2025', totalTickets:50, scanned:38, remaining:12 }]}]},
+    ]},
+
+    { title: 'Broadcasts (Email)', base: '/api/broadcasts', endpoints: [
+      { method:'POST', path:'/api/broadcasts/preview', auth:'supervisor+', desc:'Dry-run a broadcast — returns resolved recipient list without sending',
+        request:{ body:{ userIds:['user-uuid-1','user-uuid-2'], emails:'extra@example.com\nJohn <john@example.com>', eventId:'ev-uuid-...' }},
+        responses:[{ status:200, desc:'Preview', body:{ matched:3, recipients:[{ email:'jane@example.com', name:'Jane Doe' },{ email:'extra@example.com', name:null }] }}]},
+      { method:'POST', path:'/api/broadcasts/send', auth:'supervisor+', desc:'Send an email broadcast to users and/or ad-hoc addresses',
+        request:{ body:{ subject:'Important update', text:'Hi {{name}}, here is a message for you.', userIds:['user-uuid-1'], emails:'extra@example.com', eventId:'ev-uuid-...' }},
+        responses:[{ status:200, desc:'Sent', body:{ matched:2, sent:2 }}]},
+      { method:'POST', path:'/api/broadcasts/schedule', auth:'supervisor+', desc:'Schedule an email broadcast for a future time',
+        request:{ body:{ subject:'Save the date!', text:'Hi {{name}}, mark your calendar for {{event.title}}.', userIds:['user-uuid-1'], scheduledAt:'2025-06-01T09:00:00.000Z', eventId:'ev-uuid-...' }},
+        responses:[{ status:201, desc:'Scheduled', body:{ job:{ id:'job-uuid-...', status:'queued', scheduledAt:'2025-06-01T09:00:00.000Z' }}}]},
+    ]},
+
+    { title: 'Broadcasts (WhatsApp)', base: '/api/whatsapp-broadcasts', endpoints: [
+      { method:'POST', path:'/api/whatsapp-broadcasts/preview', auth:'supervisor+', desc:'Dry-run — resolve phone list without sending',
+        request:{ body:{ userIds:['user-uuid-1'], phones:'0821234567\nJane <0721234567>', eventId:'ev-uuid-...' }},
+        responses:[{ status:200, desc:'Preview', body:{ matched:2, recipients:[{ phone:'+27821234567', name:'Jane Doe' }] }}]},
+      { method:'POST', path:'/api/whatsapp-broadcasts/send', auth:'supervisor+', desc:'Send a WhatsApp broadcast',
+        request:{ body:{ message:'Hi {{name}}, please check your tickets for {{event.title}}.', userIds:['user-uuid-1'], phones:'0821234567', eventId:'ev-uuid-...' }},
+        responses:[{ status:200, desc:'Sent', body:{ matched:2, sent:2 }}]},
+      { method:'POST', path:'/api/whatsapp-broadcasts/schedule', auth:'supervisor+', desc:'Schedule a WhatsApp broadcast',
+        request:{ body:{ message:'Hi {{name}}! {{event.title}} is tomorrow. See you there 🙌', userIds:['user-uuid-1'], scheduledAt:'2025-07-09T08:00:00.000Z' }},
+        responses:[{ status:201, desc:'Scheduled', body:{ job:{ id:'job-uuid-...', status:'queued' }}}]},
+    ]},
+
+    { title: 'Scheduled Messages', base: '/api/scheduled-emails', endpoints: [
+      { method:'GET', path:'/api/scheduled-emails', auth:'supervisor+', desc:'List all scheduled jobs — email and WhatsApp. Jobs sent more than 7 days ago are hidden.',
+        responses:[{ status:200, desc:'Success', body:{ jobs:[{ id:'job-uuid-...', channel:'email', broadcast:false, eventId:'ev-uuid-...', status:'queued', scheduledAt:'2025-07-03T09:00:00.000Z', attempts:0, payload:{ subject:'Camp reminder' }}]}}]},
+      { method:'PATCH', path:'/api/scheduled-emails/:id', auth:'supervisor+', desc:'Edit a queued job — reschedule or update its message content',
+        pathParams:{ ':id':'Scheduled job UUID' },
+        request:{ body:{ scheduledAt:'2025-07-04T09:00:00.000Z', subject:'Updated subject', text:'Hi {{name}}, updated message.' }},
+        responses:[
+          { status:200, desc:'Updated', body:{ id:'job-uuid-...', scheduledAt:'2025-07-04T09:00:00.000Z', status:'queued' }},
+          { status:400, desc:'Already sent', body:{ message:'Cannot edit a job that has already been sent.' }},
+        ]},
+      { method:'DELETE', path:'/api/scheduled-emails/:id', auth:'supervisor+', desc:'Cancel and remove a queued job',
+        pathParams:{ ':id':'Scheduled job UUID' },
+        responses:[{ status:200, desc:'Deleted', body:{ message:'Scheduled job removed.' }}]},
+    ]},
+
+    { title: 'Automations', base: '/api/automations', endpoints: [
+      { method:'POST', path:'/api/automations/schedule', auth:'supervisor+', desc:'Schedule multiple lifecycle email automations for an event in one call (pre-event, final reminder, thank-you, promo).',
+        request:{ body:{ eventId:'ev-uuid-...', jobs:[
+          { subject:'1 Week to Go: Camp 2025!', text:'Hi {{name}}, camp is one week away!\n\nDetails: {{event.link}}', scheduledAt:'2025-07-03T09:00:00.000Z' },
+          { subject:"We'll See You Tomorrow!", text:'Hi {{name}}, final reminder for {{event.title}}. Please have your QR code ready.', scheduledAt:'2025-07-09T09:00:00.000Z' },
+        ]}},
+        responses:[{ status:201, desc:'Scheduled', body:{ message:'2 automation(s) scheduled.', jobs:[{ id:'job-uuid-1', status:'queued' },{ id:'job-uuid-2', status:'queued' }] }}]},
+    ]},
+
+    { title: 'Reports', base: '/api/reports', endpoints: [
+      { method:'POST', path:'/api/reports/pdf', auth:'user+', desc:'Generate a PDF report of own registrations and tickets and return it as a binary download',
+        responses:[{ status:200, desc:'PDF file (application/pdf)', body:'<binary PDF>' }]},
+      { method:'POST', path:'/api/reports/email', auth:'user+', desc:'Generate PDF report and email it to the authenticated user',
+        responses:[{ status:200, desc:'Sent', body:{ message:'Report emailed.' }}]},
+    ]},
+
+    { title: 'Costs', base: '/api/events/:eventId/costs', endpoints: [
+      { method:'GET', path:'/api/events/:eventId/costs', auth:'supervisor+', desc:'List costs (once-off or per-item) for an event',
+        pathParams:{ ':eventId':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:[{ id:'cost-uuid-...', label:'Venue hire', costType:'once_off', amount:2500 },{ id:'cost-uuid-2', label:'Catering', costType:'per_item', amount:75, eventOptionId:'opt-uuid-...' }]}]},
+      { method:'POST', path:'/api/events/:eventId/costs', auth:'admin', desc:'Create a cost for an event. eventOptionId is required when costType is per_item. paidFromMethod (cash/card/eft/other) optionally tags which float it was paid out of. Rejected once the event is closed.',
+        pathParams:{ ':eventId':'Event UUID' },
+        request:{ body:{ label:'Catering', costType:'per_item', amount:75, eventOptionId:'opt-uuid-...', paidFromMethod:'cash' }},
+        responses:[{ status:201, desc:'Created', body:{ id:'cost-uuid-new', label:'Catering', costType:'per_item', amount:75, paidFromMethod:'cash' }}]},
+      { method:'PUT', path:'/api/costs/:id', auth:'admin', desc:'Update a cost. Rejected once the event is closed.',
+        pathParams:{ ':id':'EventCost UUID' },
+        request:{ body:{ amount:80 }},
+        responses:[{ status:200, desc:'Updated', body:{ id:'cost-uuid-...', amount:80 }}]},
+      { method:'DELETE', path:'/api/costs/:id', auth:'admin', desc:'Delete a cost. Rejected once the event is closed.',
+        pathParams:{ ':id':'EventCost UUID' },
+        responses:[{ status:200, desc:'Deleted', body:{ message:'Cost deleted' }}]},
+    ]},
+
+    { title: 'Cashups', base: '/api/cashups', endpoints: [
+      { method:'GET', path:'/api/cashups/event/:eventId', auth:'supervisor+', desc:'Live cashup preview for an event: system income vs. reconciled actual per method, method-tagged costs, unallocated donations, net profit, and the full close/reopen history',
+        pathParams:{ ':eventId':'Event UUID' },
+        responses:[{ status:200, desc:'Success', body:{ event:{ id:'ev-uuid-...', title:'Camp 2025', cashupStatus:'open' }, paymentsByMethod:{ cash:1200, card:4500, eft:600, other:0 }, expectedCashByMethod:{ cash:1150, card:4500, eft:600, other:0 }, unallocatedDonationsTotal:150, totalCosts:900, netProfit:6450, history:[] }}]},
+      { method:'PUT', path:'/api/cashups/event/:eventId/draft', auth:'admin', desc:'Save in-progress reconciliation entries (actual counted amounts, and cash denomination counts, per method) without closing the event',
+        pathParams:{ ':eventId':'Event UUID' },
+        request:{ body:{ lines:[{ method:'cash', denominations:[{ value:100, count:5 },{ value:50, count:2 }] },{ method:'card', actualAmount:4500 }] }},
+        responses:[{ status:200, desc:'Saved', body:{ message:'Draft saved' }}]},
+      { method:'POST', path:'/api/cashups/event/:eventId/close', auth:'admin', desc:'Close the event. Pass "lines" for a full per-method cashup (variances computed against expected cash, i.e. income minus any method-tagged costs) — for the cash line, pass "denominations" and the actual amount is computed from the note/coin counts server-side. Omit "lines" for a quick close that accepts system numbers as-is. Either way, unallocated donations are counted as profit and the event is fully locked (no new registrations, payments, refunds, checkouts, or donations) until an admin reopens it. Creates a permanent EventCashup audit row.',
+        pathParams:{ ':eventId':'Event UUID' },
+        request:{ body:{ lines:[{ method:'cash', denominations:[{ value:100, count:5 },{ value:50, count:2 }], notes:'R20 short' }], notes:'Closed after evening service' }},
+        responses:[{ status:201, desc:'Closed', body:{ id:'cashup-uuid-...', action:'closed', unallocatedDonationsTotal:150, totalCosts:900, totalExpectedRevenue:6300, totalActualRevenue:6280 }}]},
+      { method:'POST', path:'/api/cashups/event/:eventId/reopen', auth:'admin', desc:'Reopen a closed event, unlocking registrations/payments/donations again. Admin-only. Creates a permanent "reopened" EventCashup audit row.',
+        pathParams:{ ':eventId':'Event UUID' },
+        request:{ body:{ notes:'Reopening to correct a miscounted cash drawer' }},
+        responses:[{ status:201, desc:'Reopened', body:{ id:'cashup-uuid-...', action:'reopened' }}]},
+      { method:'GET', path:'/api/cashups/audit', auth:'supervisor+', desc:'Flat audit log of every close/quick-close/reopen across events, optionally filtered by eventId and/or from/to dates',
+        request:{ query:{ eventId:'ev-uuid-... (optional)', from:'2026-01-01 (optional)', to:'2026-12-31 (optional)' }},
+        responses:[{ status:200, desc:'Success', body:[{ id:'cashup-uuid-...', action:'closed', event:{ id:'ev-uuid-...', title:'Camp 2025' }, performedBy:{ name:'Jane Supervisor' }, createdAt:'2026-07-20T18:00:00.000Z' }]}]},
+    ]},
+
+    { title: 'Uploads', base: '/api/uploads', endpoints: [
+      { method:'POST', path:'/api/uploads/event-image', auth:'supervisor+', desc:'Upload an event cover image. Send as multipart/form-data with field name "image". Returns the public URL.',
+        notes:'Content-Type must be multipart/form-data. Max size is typically 5 MB.',
+        responses:[
+          { status:200, desc:'Uploaded', body:{ url:'/uploads/event-images/camp-2025-abc123.jpg' }},
+          { status:400, desc:'No file', body:{ message:'No image file provided.' }},
+        ]},
+    ]},
+
+    { title: 'Sections', base: '/api/sections', endpoints: [
+      { method:'GET', path:'/api/sections', auth:'staff+', desc:'List all sections with their allowed options',
+        responses:[{ status:200, desc:'Success', body:[{ id:'sec-uuid-...', eventId:'ev-uuid-...', name:'Adults', allowedOptions:[{ eventOptionId:'opt-uuid-...', eventOption:{ name:'Adult', price:450 }}] }]}]},
+      { method:'POST', path:'/api/sections', auth:'supervisor+', desc:'Create a section for an event',
+        request:{ body:{ eventId:'ev-uuid-...', name:'Adults', optionIds:['opt-uuid-1','opt-uuid-2'] }},
+        responses:[{ status:201, desc:'Created', body:{ id:'sec-uuid-new', name:'Adults', eventId:'ev-uuid-...' }}]},
+      { method:'PUT', path:'/api/sections/:id', auth:'supervisor+', desc:'Update a section',
+        pathParams:{ ':id':'Section UUID' },
+        request:{ body:{ name:'Adults & Teens', optionIds:['opt-uuid-1','opt-uuid-2','opt-uuid-3'] }},
+        responses:[{ status:200, desc:'Updated', body:{ id:'sec-uuid-...', name:'Adults & Teens' }}]},
+      { method:'DELETE', path:'/api/sections/:id', auth:'admin', desc:'Delete a section',
+        pathParams:{ ':id':'Section UUID' },
+        responses:[{ status:200, desc:'Deleted', body:{ message:'Section deleted.' }}]},
+    ]},
+
+    { title: 'Banner', base: '/api/banner', endpoints: [
+      { method:'GET', path:'/api/banner', auth:'public', desc:'Get the current site-wide announcement banner',
+        responses:[
+          { status:200, desc:'Banner set', body:{ message:'Registration for Camp 2025 is now open!', type:'info', active:true }},
+          { status:200, desc:'No banner', body:{ message:null, active:false }},
+        ]},
+      { method:'POST', path:'/api/banner', auth:'supervisor+', desc:'Set or update the site banner',
+        request:{ body:{ message:'Registration is now closed.', type:'warning', active:true }},
+        responses:[{ status:200, desc:'Saved', body:{ message:'Registration is now closed.', type:'warning', active:true }}]},
+    ]},
+
+    { title: 'Forms', base: '/api/forms', endpoints: [
+      { method:'GET', path:'/api/forms/responses', auth:'staff+', desc:'List all submitted form responses across all events',
+        queryParams:{ eventId:'Filter by event UUID', page:'Page (default 1)', limit:'Per page (default 20)' },
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'resp-uuid-...', registrationId:'reg-uuid-...', createdAt:'2025-06-01T10:05:00.000Z', answers:[{ field:{ label:'Dietary requirements' }, value:'Vegetarian' }] }], total:1 }}]},
+    ]},
+
+    { title: 'Yoco Transactions', base: '/api/yoco-transactions', endpoints: [
+      { method:'GET', path:'/api/yoco-transactions', auth:'supervisor+', desc:'All Yoco webhook transactions (raw events received from Yoco)',
+        queryParams:{ page:'Page (default 1)', limit:'Per page (default 50)', reconciled:'true|false' },
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'ytx-uuid-...', externalId:'pi_yoco_abc', amount:45000, currency:'ZAR', reconciled:true, paymentId:'pay-uuid-...', createdDate:'2025-06-01T11:00:00.000Z' }], total:1 }}]},
+      { method:'GET', path:'/api/yoco-transactions/unreconciled', auth:'supervisor+', desc:'Transactions not yet matched to a payment record',
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'ytx-uuid-...', externalId:'pi_yoco_xyz', amount:45000, currency:'ZAR', reconciled:false }], total:1 }}]},
+      { method:'POST', path:'/api/yoco-transactions/:id/reconcile', auth:'supervisor+', desc:'Manually link a Yoco transaction to an existing payment',
+        pathParams:{ ':id':'YocoTransaction UUID' },
+        request:{ body:{ paymentId:'pay-uuid-...' }},
+        responses:[{ status:200, desc:'Reconciled', body:{ id:'ytx-uuid-...', reconciled:true, paymentId:'pay-uuid-...' }}]},
+      { method:'POST', path:'/api/yoco-transactions/:id/ignore', auth:'supervisor+', desc:'Mark a transaction as intentionally ignored',
+        pathParams:{ ':id':'YocoTransaction UUID' },
+        responses:[{ status:200, desc:'Ignored', body:{ id:'ytx-uuid-...', ignored:true }}]},
+    ]},
+
+    { title: 'WhatsApp Admin', base: '/api/whatsapp', endpoints: [
+      { method:'GET', path:'/api/whatsapp/config', auth:'admin', desc:'Get the currently stored WAWP credentials from DB (tokens are partially masked)',
+        responses:[{ status:200, desc:'Success', body:{ instanceId:'wawp-instance-abc', accessToken:'eyJ...****', source:'db' }}]},
+      { method:'POST', path:'/api/whatsapp/config', auth:'admin', desc:'Save WAWP credentials to the database (AppSetting). Takes effect immediately; no restart needed.',
+        request:{ body:{ accessToken:'eyJhbGciOiJSUzI1...', instanceId:'wawp-instance-abc' }},
+        responses:[{ status:200, desc:'Saved', body:{ message:'WhatsApp config saved.' }}]},
+      { method:'GET', path:'/api/whatsapp/status', auth:'admin', desc:'Get the current WAWP session status',
+        responses:[
+          { status:200, desc:'Connected', body:{ status:'open', phoneNumber:'+27821234567', pushName:'Hope Events' }},
+          { status:200, desc:'Not connected', body:{ status:'close' }},
+        ]},
+      { method:'GET', path:'/api/whatsapp/qr', auth:'admin', desc:'Get a QR code image/string to link a WhatsApp account',
+        responses:[{ status:200, desc:'Success', body:{ qr:'data:image/png;base64,...', qrString:'2@abc123...' }}]},
+      { method:'POST', path:'/api/whatsapp/create-instance', auth:'admin', desc:'Create a new WAWP session instance',
+        responses:[{ status:200, desc:'Created', body:{ instanceId:'wawp-instance-new', message:'Instance created.' }}]},
+      { method:'POST', path:'/api/whatsapp/restart', auth:'admin', desc:'Restart the current WAWP instance',
+        responses:[{ status:200, desc:'Restarted', body:{ message:'Instance restarted.' }}]},
+      { method:'POST', path:'/api/whatsapp/logout', auth:'admin', desc:'Log out the current WhatsApp session',
+        responses:[{ status:200, desc:'Logged out', body:{ message:'Logged out.' }}]},
+    ]},
+
+    { title: 'Webhooks', base: '/api/webhooks', endpoints: [
+      { method:'POST', path:'/api/webhooks/yoco', auth:'HMAC', desc:'Yoco payment event webhook. Called by Yoco servers. Verified via HMAC-SHA256 signature in the X-Yoco-Signature header.',
+        notes:'This endpoint bypasses the global rate limiter. Raw body is parsed before JSON middleware. Refreshes early-bird pricing before computing totalDue to ensure accurate paid/partial status.',
+        request:{ body:{ id:'evt_yoco_abc', type:'payment.succeeded', payload:{ metadata:{ checkoutId:'checkout-id-...' }, amount:45000, currency:'ZAR' }}},
+        responses:[{ status:200, desc:'Acknowledged', body:{ received:true }}]},
+      { method:'POST', path:'/api/webhooks/whatsapp', auth:'—', desc:'WAWP inbound message event. Called by WAWP servers when a message arrives on the linked number.',
+        responses:[{ status:200, desc:'Acknowledged', body:{ received:true }}]},
+    ]},
+
+    { title: 'Settings', base: '/api/settings', endpoints: [
+      { method:'GET', path:'/api/settings', auth:'public', desc:'Public settings — org name, accent colour, logo URL, legal page slugs, registration notification email (no secrets)',
+        responses:[{ status:200, desc:'Success', body:{ org_name:'Hope Family Church', org_tagline:'Where everyone belongs', accent_color:'#2563eb', logo_url:'/uploads/logo.png' }}]},
+      { method:'GET', path:'/api/settings/all', auth:'admin', desc:'All settings including SMTP config. smtp_pass is returned masked (••••••••); smtp_user is returned decrypted.',
+        responses:[{ status:200, desc:'Success', body:[{ key:'smtp_host', value:'smtp.example.com' },{ key:'smtp_user', value:'user@example.com' },{ key:'smtp_pass', value:'••••••••' }]}]},
+      { method:'GET', path:'/api/settings/needs-setup', auth:'public', desc:'Returns true until the setup wizard has been completed (setup_complete flag is set).',
+        responses:[{ status:200, desc:'Success', body:{ needsSetup:true }}]},
+      { method:'PUT', path:'/api/settings', auth:'admin', desc:'Upsert one or more settings. smtp_user and smtp_pass are AES-256-GCM encrypted before storage. Sending •••••••• for smtp_pass is a no-op.',
+        request:{ body:{ org_name:'Hope Family Church', smtp_host:'smtp.gmail.com', smtp_port:'587', smtp_user:'user@gmail.com', smtp_pass:'app-password' }},
+        responses:[{ status:200, desc:'Saved', body:{ message:'Settings saved.' }}]},
+      { method:'POST', path:'/api/settings/test-smtp', auth:'admin (or setup token)', desc:'Test the SMTP connection with provided credentials. On success, sends a real test email to the authenticated admin and returns a friendly message. On failure, returns a human-readable message plus a raw field containing the original SMTP error for debugging. Error code 530 (Microsoft "Client not authenticated") maps to the authentication-failure message.',
+        request:{ body:{ host:'smtp.gmail.com', port:587, secure:false, user:'me@gmail.com', pass:'app-password', from:'me@gmail.com' }},
+        responses:[
+          { status:200, desc:'Connection OK — test email sent', body:{ message:'SMTP connection verified — a test email has been sent to admin@example.com' }},
+          { status:400, desc:'Connection failed', body:{ message:'Authentication failed — check your SMTP username and password.', raw:'535 5.7.8 Error: authentication failed' }},
+        ]},
+    ]},
+
+    { title: 'Setup', base: '/api/setup', endpoints: [
+      { method:'POST', path:'/api/setup/register', auth:'public (one-time)', desc:'Step 2 of the first-time setup wizard. Creates the admin account and returns a short-lived JWT. Blocked once any user exists.',
+        request:{ body:{ name:'Admin User', email:'admin@example.com', password:'strong-password' }},
+        responses:[
+          { status:201, desc:'Created', body:{ token:'eyJhbGciOiJIUzI1NiJ9...', user:{ id:'uuid-...', name:'Admin User', role:'admin' }}},
+          { status:400, desc:'Already exists', body:{ message:'Setup already completed — users exist.' }},
+        ]},
+      { method:'POST', path:'/api/setup', auth:'setup token or admin', desc:'Final step of the setup wizard. Saves initial site settings. Requires the JWT returned by POST /api/setup/register.',
+        request:{ body:{ settings:{ org_name:'Hope Family Church', smtp_host:'smtp.gmail.com', smtp_port:'587', smtp_user:'user@gmail.com', smtp_pass:'app-password', mail_from:'noreply@example.com' }}},
+        responses:[{ status:200, desc:'Setup complete', body:{ message:'Setup complete.' }}]},
+    ]},
+  ];
+
+  // ── Rendering helpers ─────────────────────────────────────────────────────
+  function hl(json) {
+    // Simple JSON syntax highlighting — server-side
+    const s = JSON.stringify(json, null, 2);
+    return s
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+      .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (m) => {
+        if (/^"/.test(m)) {
+          if (/:$/.test(m)) return `<span style="color:#6366f1">${m}</span>`; // key
+          return `<span style="color:#059669">${m}</span>`; // string value
+        }
+        if (/true|false/.test(m)) return `<span style="color:#d97706">${m}</span>`;
+        if (/null/.test(m)) return `<span style="color:#9ca3af">${m}</span>`;
+        return `<span style="color:#2563eb">${m}</span>`; // number
+      });
+  }
+
+  function codeBlock(content, lang) {
+    return `<pre style="background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:6px;font-size:.75rem;overflow-x:auto;margin:0;line-height:1.6">${content}</pre>`;
+  }
+
+  function headerLine(key, val) {
+    return `<span style="color:#6366f1">${key}</span>: <span style="color:#059669">${val}</span>`;
+  }
+
+  function renderEndpoint(ep, idx) {
+    const id = `ep${idx}`;
+    const methodCls = { GET:'get', POST:'post', PUT:'put', PATCH:'patch', DELETE:'del' }[ep.method] || 'get';
+    const hasDetail = ep.notes || ep.pathParams || ep.queryParams || ep.request || ep.responses;
+
+    // Build HTTP request example
+    let reqLines = [];
+    const needsAuth = ep.auth !== 'public' && ep.auth !== 'HMAC' && ep.auth !== '—';
+    const isMultipart = ep.notes && ep.notes.includes('multipart');
+
+    reqLines.push(`<span style="color:#f59e0b;font-weight:600">${ep.method}</span> <span style="color:#e2e8f0">${ep.path}</span> <span style="color:#64748b">HTTP/1.1</span>`);
+    if (needsAuth) reqLines.push(headerLine('Authorization','Bearer &lt;your-jwt&gt;'));
+    if (ep.request?.body && !isMultipart) reqLines.push(headerLine('Content-Type','application/json'));
+    if (isMultipart) reqLines.push(headerLine('Content-Type','multipart/form-data'));
+    if (ep.request?.body && !isMultipart) {
+      reqLines.push('');
+      reqLines.push(hl(ep.request.body));
+    } else if (isMultipart) {
+      reqLines.push('');
+      reqLines.push(`<span style="color:#9ca3af">-- form field: image (binary file) --</span>`);
+    }
+
+    const reqHtml = codeBlock(reqLines.join('\n'));
+
+    // Build response examples
+    const resHtml = (ep.responses || []).map(r => {
+      const statusColor = r.status < 300 ? '#22c55e' : r.status < 500 ? '#f59e0b' : '#ef4444';
+      const body = typeof r.body === 'string' ? `<span style="color:#9ca3af">${r.body}</span>` : hl(r.body);
+      return `<div style="margin-bottom:8px">
+        <div style="font-size:.72rem;color:#64748b;margin-bottom:4px">
+          <span style="color:${statusColor};font-weight:600">HTTP ${r.status}</span>
+          <span style="margin-left:8px">${r.desc}</span>
+        </div>
+        ${codeBlock(body)}
+      </div>`;
+    }).join('');
+
+    // Path params table
+    let paramsHtml = '';
+    if (ep.pathParams && Object.keys(ep.pathParams).length) {
+      const rows = Object.entries(ep.pathParams).map(([k,v]) =>
+        `<tr><td style="padding:3px 10px;font-family:monospace;color:#6366f1;white-space:nowrap">${k}</td><td style="padding:3px 10px;color:#374151">${v}</td></tr>`).join('');
+      paramsHtml += `<div style="margin-bottom:10px"><div style="font-size:.72rem;font-weight:600;color:#374151;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Path parameters</div><table style="width:100%;font-size:.8rem;border-collapse:collapse"><tbody>${rows}</tbody></table></div>`;
+    }
+    if (ep.queryParams && Object.keys(ep.queryParams).length) {
+      const rows = Object.entries(ep.queryParams).map(([k,v]) =>
+        `<tr><td style="padding:3px 10px;font-family:monospace;color:#6366f1;white-space:nowrap">${k}</td><td style="padding:3px 10px;color:#374151">${v}</td></tr>`).join('');
+      paramsHtml += `<div style="margin-bottom:10px"><div style="font-size:.72rem;font-weight:600;color:#374151;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em">Query parameters</div><table style="width:100%;font-size:.8rem;border-collapse:collapse"><tbody>${rows}</tbody></table></div>`;
+    }
+
+    const notesHtml = ep.notes
+      ? `<div style="margin-bottom:10px;padding:8px 12px;background:#fefce8;border:1px solid #fde68a;border-radius:6px;font-size:.78rem;color:#92400e">${ep.notes}</div>`
+      : '';
+
+    const detailHtml = hasDetail ? `
+      <tr id="${id}-detail" style="display:none">
+        <td colspan="4" style="padding:0;border-bottom:2px solid #e5e7eb">
+          <div style="padding:16px;background:#f8fafc">
+            ${notesHtml}
+            ${paramsHtml}
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+              <div>
+                <div style="font-size:.72rem;font-weight:600;color:#374151;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Request</div>
+                ${reqHtml}
+              </div>
+              <div>
+                <div style="font-size:.72rem;font-weight:600;color:#374151;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Responses</div>
+                ${resHtml}
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>` : '';
+
+    const cursor = hasDetail ? 'cursor:pointer' : '';
+    const chevron = hasDetail
+      ? `<svg id="${id}-chevron" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;transition:transform .15s;flex-shrink:0"><polyline points="9 18 15 12 9 6"/></svg>`
+      : '';
+
+    const onclick = hasDetail ? `onclick="toggle('${id}')"` : '';
+
+    return `
+      <tr ${onclick} style="${cursor};${hasDetail?'':''}">
+        <td style="padding:7px 10px"><span class="method ${methodCls}">${ep.method}</span></td>
+        <td style="padding:7px 10px;font-family:monospace;font-size:.8rem;word-break:break-all">${ep.path}</td>
+        <td style="padding:7px 10px"><span class="auth-badge">${ep.auth}</span></td>
+        <td style="padding:7px 10px;font-size:.82rem;display:flex;align-items:center;justify-content:space-between;gap:6px">
+          <span>${ep.desc}</span>
+          <span style="color:#9ca3af;flex-shrink:0">${chevron}</span>
+        </td>
+      </tr>
+      ${detailHtml}`;
+  }
+
+  function renderGroup(group) {
+    const rows = group.endpoints.map((ep, i) => renderEndpoint(ep, `${group.title.replace(/\W+/g,'')}-${i}`)).join('');
+    return `
+      <h2 style="font-size:1rem;font-weight:600;color:#111827;margin:24px 0 8px">${group.title} <span style="font-size:.78rem;font-weight:400;color:#6b7280;font-family:monospace">${group.base}</span></h2>
+      <div style="border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:4px">
+        <table style="width:100%;border-collapse:collapse">
+          <thead><tr style="background:#f9fafb;border-bottom:1px solid #e5e7eb">
+            <th style="padding:7px 10px;width:75px;text-align:left;font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Method</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Path</th>
+            <th style="padding:7px 10px;width:100px;text-align:left;font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Auth</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Description</th>
+          </tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>`;
+  }
+
+  const groupsHtml = GROUPS.map(renderGroup).join('');
+
+  // ── Notifications reference — every automatic email/WhatsApp message the system sends ──
+  const NOTIFICATIONS = [
+    { category: 'Registration', items: [
+      { trigger: 'New registration — self-service (attendee registers via the public website)', channels: ['Email', 'WhatsApp'], recipients: 'Registrant', subject: 'Registration confirmed – {event}', content: 'Selections table, total due / paid / balance, payment options (website or at the door), and an account login / create-account prompt.' },
+      { trigger: 'New registration — self-service', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator when none are set)', subject: 'New registration: {event} — {name}', content: 'Registrant name, email, phone, status, items table, total due / paid / balance, registration ID.' },
+      { trigger: 'New registration — staff/at-door (manual registration, self-service kiosk)', channels: ['Email', 'WhatsApp'], recipients: 'Registrant', subject: 'Registration confirmed – {event}', content: 'Same as above, plus a Yoco pay-now link when a balance is owing.' },
+      { trigger: 'New registration — staff/at-door', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator)', subject: 'New registration: {event} — {name}', content: 'Same layout as the self-service admin notice.' },
+      { trigger: 'Registration updated (options changed by staff, or a free registration completes)', channels: ['Email', 'WhatsApp'], recipients: 'Registrant', subject: 'Registration updated – {event}', content: 'Updated selections/total, same payment & account sections as the confirmation email.' },
+      { trigger: 'Registration updated', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator)', subject: 'Registration updated: {event} — {name}', content: 'Same layout as the new-registration admin notice.' },
+    ]},
+    { category: 'Payments', items: [
+      { trigger: 'Payment recorded (Yoco webhook success, manual cash/EFT entry, or a donation assigned to a registration)', channels: ['Email', 'WhatsApp'], recipients: 'Payer', subject: 'Payment received – {event} (or "Donation received – {event}" for unassigned donations)', content: 'Amount, method, date, full payment history table, updated balance.' },
+      { trigger: 'Payment recorded', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator)', subject: 'Payment recorded: {amount} — {payer} ({event})', content: 'Amount, type (registration payment / donation), payer, event, method, date, payment ID, external (Yoco) ID.' },
+      { trigger: 'Refund processed (negative payment created against an original payment)', channels: ['Email'], recipients: 'Payer', subject: 'Refund processed – {amount} for {event}', content: 'Refund amount, method, date, reason (when supplied).' },
+      { trigger: 'Refund processed', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator)', subject: 'Refund: Payment recorded: {amount} — {payer} ({event})', content: 'Same payment admin notice content, subject prefixed "Refund:".' },
+    ]},
+    { category: 'Tickets', items: [
+      { trigger: 'Tickets generated — fires whenever a registration becomes fully paid or is free (webhook, manual payment, staff status change, or free/no-cost registration)', channels: ['Email (PDF attached)', 'WhatsApp (PDF)'], recipients: 'Registrant (or a specific user when sent manually via "Send to")', subject: 'Your tickets for {event}', content: 'QR-coded ticket PDF, one per registered option/quantity; WhatsApp caption names the event and date.' },
+    ]},
+    { category: 'Daily digest', items: [
+      { trigger: 'Scheduled — every day at 07:00 local server time, once per active event that has gone live and has not yet started', channels: ['Email'], recipients: 'Admin — registrations inbox + event notify recipients (falls back to the event creator)', subject: 'Daily summary: {event} — {date}', content: 'Stat tiles (registrations, paid, awaiting payment, revenue), full registrations table with balances, full payments & donations table.' },
+    ]},
+    { category: 'Account & security', items: [
+      { trigger: 'New account registered', channels: ['Email (always)', 'WhatsApp (if preferred)'], recipients: 'New user', subject: 'Welcome to Hope Events!', content: 'Welcome message plus a list of upcoming events.' },
+      { trigger: 'Login attempt on an account that is not yet active', channels: ['Email (if a real address is on file)', 'WhatsApp (fallback when there is no usable email)'], recipients: 'User', subject: 'Activate your Hope Events account', content: 'One-time activation link; expires after 24 hours.' },
+      { trigger: 'Successful login', channels: ['Email (always)', 'WhatsApp (if preferred)'], recipients: 'User', subject: 'New login to your Hope Events account', content: 'Login time, approximate location, device/user agent. Security alert — always emailed regardless of the user\'s notification preference.' },
+      { trigger: 'Password changed via profile update', channels: ['Email (always)', 'WhatsApp (if preferred)'], recipients: 'User', subject: 'Your Hope Events password was changed', content: 'Confirms the change and gives a support contact to use if it wasn\'t them.' },
+      { trigger: 'Forgot-password request', channels: ['Email (always)', 'WhatsApp (if preferred)'], recipients: 'User', subject: 'Reset your password', content: 'Password reset link.' },
+      { trigger: 'Account closed (self-service — "Deactivate" or "Delete my data")', channels: ['Email', 'WhatsApp (if preferred)'], recipients: 'User (sent to their last-known address/number just before data is wiped)', subject: 'Your Hope Events account has been closed', content: 'Confirms closure; wording differs slightly when personal data was also erased.' },
+    ]},
+    { category: 'Admin-triggered broadcasts', items: [
+      { trigger: 'Bulk email to event attendees, or an ad-hoc email broadcast — sent immediately or on a schedule', channels: ['Email'], recipients: 'Selected attendees / users / ad-hoc addresses chosen by the sender', subject: 'Admin-authored', content: 'Free-form subject & body written by the sender, supporting {{name}}, {{event.title}}, {{event.link}} placeholders. Used for reminders, thank-yous, promos, and multi-step automations.' },
+      { trigger: 'Bulk WhatsApp to event attendees, or an ad-hoc WhatsApp broadcast — sent immediately or on a schedule', channels: ['WhatsApp'], recipients: 'Selected attendees / users / ad-hoc phone numbers chosen by the sender', subject: '—', content: 'Free-form message written by the sender, same placeholder support as email broadcasts.' },
+    ]},
+  ];
+
+  function notifChannelBadges(channels) {
+    return channels.map(c => {
+      const isWa = /whatsapp/i.test(c);
+      return `<span style="display:inline-block;margin:1px 4px 2px 0;padding:1px 7px;border-radius:4px;font-size:.68rem;font-weight:700;white-space:nowrap;background:${isWa ? '#d1fae5' : '#dbeafe'};color:${isWa ? '#065f46' : '#1e40af'}">${c}</span>`;
+    }).join('');
+  }
+
+  function renderNotificationRow(n) {
+    return `<tr>
+      <td style="padding:8px 10px;font-size:.8rem;color:#374151;vertical-align:top">${n.trigger}</td>
+      <td style="padding:8px 10px;vertical-align:top">${notifChannelBadges(n.channels)}</td>
+      <td style="padding:8px 10px;font-size:.78rem;color:#374151;vertical-align:top">${n.recipients}</td>
+      <td style="padding:8px 10px;font-size:.78rem;font-family:monospace;color:#111827;vertical-align:top">${n.subject}</td>
+      <td style="padding:8px 10px;font-size:.76rem;color:#6b7280;vertical-align:top">${n.content}</td>
+    </tr>`;
+  }
+
+  function renderNotificationCategory(cat) {
+    const rows = cat.items.map(renderNotificationRow).join('');
+    return `
+      <h3 style="font-size:.88rem;font-weight:600;color:#111827;margin:16px 0 8px">${cat.category}</h3>
+      <div style="border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;margin-bottom:4px">
+        <table style="width:100%;border-collapse:collapse">
+          <thead><tr style="background:#f9fafb;border-bottom:1px solid #e5e7eb">
+            <th style="padding:7px 10px;text-align:left;font-size:.7rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em;width:26%">Trigger — when it's sent</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.7rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em;width:11%">Channel</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.7rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em;width:19%">Recipients</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.7rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em;width:17%">Subject</th>
+            <th style="padding:7px 10px;text-align:left;font-size:.7rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em">Content</th>
+          </tr></thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>`;
+  }
+
+  const notificationsHtml = NOTIFICATIONS.map(renderNotificationCategory).join('');
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hope Events — API Docs</title>
+  <style>
+    *{box-sizing:border-box;margin:0;padding:0}
+    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f3f4f6;color:#1f2937;min-height:100vh;padding:24px 16px}
+    .wrap{max-width:1100px;margin:0 auto}
+    .method{display:inline-block;padding:1px 7px;border-radius:4px;font-size:.7rem;font-weight:700;font-family:monospace}
+    .get{background:#dbeafe;color:#1e40af}
+    .post{background:#d1fae5;color:#065f46}
+    .put{background:#fef3c7;color:#92400e}
+    .patch{background:#ede9fe;color:#5b21b6}
+    .del{background:#fee2e2;color:#991b1b}
+    .auth-badge{font-size:.68rem;padding:1px 6px;border-radius:4px;background:#f3f4f6;color:#374151;font-family:monospace}
+    code{background:#f3f4f6;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:.82rem}
+    tr.ep-open{background:#f0f9ff}
+    tbody tr:hover{background:#f8fafc}
+    tbody tr[onclick]:hover{background:#f0f9ff}
+    td{border-bottom:1px solid #f3f4f6}
+    a{color:#2563eb;text-decoration:none}
+    a:hover{text-decoration:underline}
+  </style>
+</head>
+<body>
+<div class="wrap">
+  <div style="display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px">
+    <h1 style="font-size:1.4rem;font-weight:700;color:#111827">Hope Events — API Reference</h1>
+    <a href="/" style="font-size:.82rem;color:#6b7280">&#8592; Status page</a>
+  </div>
+  <p style="font-size:.82rem;color:#6b7280;margin-bottom:20px">
+    Logged in as <strong>${user.name || user.email}</strong> (${user.role}) &mdash;
+    Click any row to expand request &amp; response examples.
+  </p>
+
+  <div style="background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:10px 14px;font-size:.8rem;color:#1e40af;margin-bottom:20px">
+    Protected routes require <code>Authorization: Bearer &lt;jwt&gt;</code> &nbsp;|&nbsp;
+    Roles: <code>admin</code> &gt; <code>supervisor</code> &gt; <code>staff</code> &gt; <code>user</code> &nbsp;|&nbsp;
+    Base URL: <code>${process.env.APP_BASE_URL || 'http://localhost:' + PORT}</code>
+  </div>
+
+  ${groupsHtml}
+
+  <h1 style="font-size:1.2rem;font-weight:700;color:#111827;margin:36px 0 4px">Notifications sent by the system</h1>
+  <p style="font-size:.8rem;color:#6b7280;margin-bottom:16px">
+    Every automatic email and WhatsApp message the platform sends, what triggers it, who receives it, and what it contains.
+    Admin-facing registration/payment/daily-summary notices go to the <code>reg_notification_emails</code> setting plus each
+    event's configured notify recipients (Admin &rarr; Events &rarr; edit event &rarr; Notifications step) &mdash;
+    falling back to that event's creator when no recipients have been chosen.
+  </p>
+
+  ${notificationsHtml}
+
+  <p style="font-size:.72rem;color:#9ca3af;margin-top:28px;text-align:center">
+    Hope Events API v${API_VERSION} &mdash; ${new Date().toISOString()}
+  </p>
+</div>
+<script>
+function toggle(id) {
+  const detail = document.getElementById(id + '-detail');
+  const chevron = document.getElementById(id + '-chevron');
+  if (!detail) return;
+  const open = detail.style.display !== 'none';
+  detail.style.display = open ? 'none' : 'table-row';
+  if (chevron) chevron.style.transform = open ? 'rotate(0deg)' : 'rotate(90deg)';
+  // highlight parent row
+  const rows = detail.parentElement.querySelectorAll('tr[onclick]');
+  rows.forEach(r => {
+    if (r.getAttribute('onclick') === "toggle('" + id + "')") {
+      r.classList.toggle('ep-open', !open);
+    }
+  });
+}
+</script>
+</body>
+</html>`;
+
+  res.send(html);
+});
+
+// Error middleware
+app.use(notFound);
+app.use(errorHandler);
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`Server is running at http://localhost:${PORT}`);
+  // Attempt a one-time background sync of attachment manifests into DB
+  try {
+    const { syncManifestsToDb } = require('./utils/attachmentsSync');
+    const prismaShared = require('./config/db');
+    setTimeout(async () => {
+      try {
+        const summary = await syncManifestsToDb(prismaShared, { dryRun: false });
+        if ((summary.imported || 0) > 0) {
+          console.log(`[attachments sync] Imported ${summary.imported} attachments from manifests (skipped ${summary.skipped}).`);
+        } else {
+          console.log('[attachments sync] No attachments imported (either none found or already in DB).');
+        }
+      } catch (e) {
+        console.warn('[attachments sync] Failed:', e?.message || e);
+      }
+    }, 1000);
+  } catch (e) {
+    console.warn('[attachments sync] Not scheduled:', e?.message || e);
+  }
+
+  // Schedule daily summaries at 07:00 local time (configurable)
+  try {
+    const enabled = String(process.env.DAILY_SUMMARY_ENABLED || 'true').toLowerCase() !== 'false';
+    if (enabled) {
+      const { sendDailyEventSummaries } = require('./utils/notifications');
+      function msUntilNext(hour, minute) {
+        const now = new Date();
+        const next = new Date(now);
+        next.setHours(hour, minute, 0, 0);
+        if (next <= now) {
+          next.setDate(next.getDate() + 1);
+        }
+        return next.getTime() - now.getTime();
+      }
+      async function scheduleNext() {
+        const delay = msUntilNext(7, 0);
+        setTimeout(async () => {
+          try {
+            console.log('[daily summaries] Running daily event summaries...');
+            await sendDailyEventSummaries(new Date());
+            console.log('[daily summaries] Completed sending daily event summaries.');
+          } catch (e) {
+            console.error('[daily summaries] Failed:', e?.message || e);
+          } finally {
+            // Schedule next run
+            scheduleNext();
+          }
+        }, delay);
+      }
+      scheduleNext();
+      console.log('[daily summaries] Scheduler initialized (07:00 local time). Set DAILY_SUMMARY_ENABLED=false to disable.');
+    } else {
+      console.log('[daily summaries] Scheduler disabled by env DAILY_SUMMARY_ENABLED=false');
+    }
+  } catch (e) {
+    console.warn('[daily summaries] Not scheduled:', e?.message || e);
+  }
+
+  // Daily temp-file cleanup — removes files older than 7 days from /temp
+  try {
+    const { cleanupTempFiles } = require('./utils/cleanupTemp');
+    function scheduleTempCleanup() {
+      const now = new Date();
+      const next = new Date(now);
+      next.setHours(3, 0, 0, 0); // Run at 03:00 local time (low-traffic window)
+      if (next <= now) next.setDate(next.getDate() + 1);
+      setTimeout(() => {
+        try {
+          const result = cleanupTempFiles();
+          if (result.deleted > 0 || result.errors > 0) {
+            console.log(`[temp cleanup] Deleted ${result.deleted} file(s), ${result.errors} error(s).`);
+          }
+        } catch (e) {
+          console.warn('[temp cleanup] Failed:', e?.message || e);
+        } finally {
+          scheduleTempCleanup();
+        }
+      }, next.getTime() - now.getTime());
+    }
+    scheduleTempCleanup();
+    console.log('[temp cleanup] Scheduler initialized (03:00 local time, files older than 7 days).');
+  } catch (e) {
+    console.warn('[temp cleanup] Not scheduled:', e?.message || e);
+  }
+
+  // Scheduled emails worker (polling)
+  try {
+    const enabled = String(process.env.SCHEDULED_EMAILS_ENABLED || 'true').toLowerCase() !== 'false';
+    if (enabled) {
+      const { getDueJobs, updateJob } = require('./utils/scheduledEmails');
+      const { emailEventAttendees, whatsappEventAttendees } = require('./controllers/eventController');
+      const { sendBroadcast } = require('./controllers/broadcastController');
+      const { sendWhatsAppBroadcast } = require('./controllers/whatsappBroadcastController');
+      const intervalMs = parseInt(process.env.SCHEDULED_EMAILS_INTERVAL_MS || '30000', 10);
+      setInterval(async () => {
+        try {
+          const due = getDueJobs(new Date());
+          if (!due || due.length === 0) return;
+          for (const job of due) {
+            try {
+              updateJob(job.id, { status: 'sending', attempts: (job.attempts || 0) + 1, lastError: null });
+              let responseBody = null; let code = 200;
+              const mockRes = {
+                status: (c) => { code = c; return mockRes; },
+                json: (b) => { responseBody = b; return mockRes; }
+              };
+              if (job.broadcast && job.channel === 'whatsapp') {
+                const mockReq = { body: job.payload };
+                await sendWhatsAppBroadcast(mockReq, mockRes);
+              } else if (job.broadcast) {
+                const mockReq = { body: job.payload };
+                await sendBroadcast(mockReq, mockRes);
+              } else if (job.channel === 'whatsapp') {
+                const mockReq = { params: { id: job.eventId }, body: job.payload };
+                await whatsappEventAttendees(mockReq, mockRes);
+              } else {
+                const mockReq = { params: { id: job.eventId }, body: job.payload };
+                await emailEventAttendees(mockReq, mockRes);
+              }
+              if (code >= 200 && code < 300) {
+                updateJob(job.id, { status: 'sent', sentAt: new Date().toISOString(), lastResult: responseBody || null });
+              } else {
+                updateJob(job.id, { status: 'error', lastError: (responseBody && responseBody.message) ? responseBody.message : `HTTP ${code}` });
+              }
+            } catch (e) {
+              updateJob(job.id, { status: 'error', lastError: String(e?.message || e) });
+            }
+          }
+        } catch (e) {
+          console.warn('[scheduled emails] poll failed:', e?.message || e);
+        }
+      }, isNaN(intervalMs) ? 30000 : intervalMs);
+      console.log('[scheduled emails] Worker initialized. Set SCHEDULED_EMAILS_ENABLED=false to disable.');
+    } else {
+      console.log('[scheduled emails] Worker disabled by env SCHEDULED_EMAILS_ENABLED=false');
+    }
+  } catch (e) {
+    console.warn('[scheduled emails] Worker not started:', e?.message || e);
+  }
+});
+
+// Handle unhandled promise rejections
+process.on('unhandledRejection', (err) => {
+  console.log('UNHANDLED REJECTION! Shutting down...');
+  console.log(err.name, err.message);
+  process.exit(1);
+});
+
+module.exports = { app, prisma };
\ No newline at end of file
diff --git a/backend/src/middleware/authMiddleware.js b/backend/src/middleware/authMiddleware.js
new file mode 100644
index 0000000..e2058a1
--- /dev/null
+++ b/backend/src/middleware/authMiddleware.js
@@ -0,0 +1,122 @@
+const rateLimit = require("express-rate-limit");
+
+const jwt = require('jsonwebtoken');
+const prisma = require('../config/db');
+
+// Protect routes - verify token
+const protect = async (req, res, next) => {
+  let token;
+
+  // Check if token exists in headers
+  if (req.headers.authorization && req.headers.authorization.startsWith('Bearer')) {
+    try {
+      // Get token from header
+      token = req.headers.authorization.split(' ')[1];
+
+      // Verify token
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+
+      // Get user from the token (exclude password)
+      req.user = await prisma.user.findUnique({
+        where: { id: decoded.id },
+        select: {
+          id: true,
+          name: true,
+          email: true,
+          role: true,
+          isActive: true,
+          createdAt: true,
+          updatedAt: true,
+          phoneNumber: true,
+          tokenVersion: true
+        }
+      });
+
+      if (!req.user) {
+        res.status(401);
+        return next(new Error('User not found'));
+      }
+
+      if (!req.user.isActive) {
+        res.status(401);
+        return next(new Error('User account is deactivated'));
+      }
+
+      // Revocation check — tokenVersion in JWT must match DB
+      // Old tokens without tokenVersion are treated as version 0
+      const tokenVer = decoded.tokenVersion ?? 0;
+      if (tokenVer !== req.user.tokenVersion) {
+        res.status(401);
+        return next(new Error('Session has been revoked. Please log in again.'));
+      }
+
+      next();
+    } catch (error) {
+      console.error(error);
+      res.status(401);
+      return next(new Error('Not authorized, token failed'));
+    }
+  } else {
+    res.status(401);
+    return next(new Error('Not authorized, no token'));
+  }
+};
+
+// Admin only middleware
+const admin = (req, res, next) => {
+  if (req.user && req.user.role === 'admin') {
+    next();
+  } else {
+    res.status(403);
+    return next(new Error('Not authorized as an admin'));
+  }
+};
+
+// Staff or higher middleware
+const staff = (req, res, next) => {
+  if (req.user && (req.user.role === 'admin' || req.user.role === 'supervisor' || req.user.role === 'staff')) {
+    next();
+  } else {
+    res.status(403);
+    return next(new Error('Not authorized as staff'));
+  }
+};
+
+// Supervisor or higher middleware
+const supervisor = (req, res, next) => {
+  if (req.user && (req.user.role === 'admin' || req.user.role === 'supervisor')) {
+    next();
+  } else {
+    res.status(403);
+    return next(new Error('Not authorized as a supervisor'));
+  }
+};
+
+const loginLimiter = rateLimit({
+  windowMs: 60 * 1000,
+  max: 15,
+  message: "Too many login attempts. Try again later.",
+});
+
+// Optional auth — populates req.user if a valid token is present, but never rejects the request
+const optionalAuth = async (req, res, next) => {
+  if (!req.headers.authorization || !req.headers.authorization.startsWith('Bearer')) {
+    return next();
+  }
+  try {
+    const token = req.headers.authorization.split(' ')[1];
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    const user = await prisma.user.findUnique({
+      where: { id: decoded.id },
+      select: { id: true, name: true, email: true, role: true, isActive: true, createdAt: true, updatedAt: true, phoneNumber: true, tokenVersion: true }
+    });
+    if (user && user.isActive && (decoded.tokenVersion ?? 0) === user.tokenVersion) {
+      req.user = user;
+    }
+  } catch {
+    // Token invalid or expired — proceed without user
+  }
+  next();
+};
+
+module.exports = { protect, admin, staff, supervisor, loginLimiter, optionalAuth };
\ No newline at end of file
diff --git a/backend/src/middleware/errorMiddleware.js b/backend/src/middleware/errorMiddleware.js
new file mode 100644
index 0000000..e02d654
--- /dev/null
+++ b/backend/src/middleware/errorMiddleware.js
@@ -0,0 +1,20 @@
+const { safeErrorMessage } = require('../utils/errorUtils');
+
+// Not found error handler — don't echo the URL back (leaks route structure)
+const notFound = (req, res, next) => {
+  const error = new Error('Not Found');
+  res.status(404);
+  next(error);
+};
+
+// General error handler
+const errorHandler = (err, req, res, next) => {
+  const statusCode = res.statusCode === 200 ? 500 : res.statusCode;
+
+  res.status(statusCode).json({
+    message: safeErrorMessage(err),
+    stack: process.env.NODE_ENV === 'production' ? undefined : err.stack,
+  });
+};
+
+module.exports = { notFound, errorHandler };
\ No newline at end of file
diff --git a/backend/src/routes/automationRoutes.js b/backend/src/routes/automationRoutes.js
new file mode 100644
index 0000000..8755480
--- /dev/null
+++ b/backend/src/routes/automationRoutes.js
@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const { scheduleAutomations } = require('../controllers/automationController');
+const { protect, supervisor } = require('../middleware/authMiddleware');
+
+// Schedule multiple automation emails for an event
+router.post('/schedule', protect, supervisor, scheduleAutomations);
+
+module.exports = router;
diff --git a/backend/src/routes/bannerRoutes.js b/backend/src/routes/bannerRoutes.js
new file mode 100644
index 0000000..8a2fabe
--- /dev/null
+++ b/backend/src/routes/bannerRoutes.js
@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const { getBanner, setBanner } = require('../controllers/bannerController');
+const { protect, supervisor } = require('../middleware/authMiddleware');
+
+router.get('/', getBanner);
+router.post('/', protect, supervisor, setBanner);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/broadcastRoutes.js b/backend/src/routes/broadcastRoutes.js
new file mode 100644
index 0000000..f9a4491
--- /dev/null
+++ b/backend/src/routes/broadcastRoutes.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const router = express.Router();
+const { previewBroadcast, sendBroadcast, scheduleBroadcast } = require('../controllers/broadcastController');
+const { protect, supervisor } = require('../middleware/authMiddleware');
+
+// All routes require supervisor (or admin via middleware logic) access
+router.post('/preview', protect, supervisor, previewBroadcast);
+router.post('/send', protect, supervisor, sendBroadcast);
+router.post('/schedule', protect, supervisor, scheduleBroadcast);
+
+module.exports = router;
diff --git a/backend/src/routes/cashupRoutes.js b/backend/src/routes/cashupRoutes.js
new file mode 100644
index 0000000..961dbfd
--- /dev/null
+++ b/backend/src/routes/cashupRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const { getEventCashup, saveEventCashupDraft, closeEvent, reopenEvent, getCashupAudit } = require('../controllers/cashupController');
+const { protect, supervisor, admin } = require('../middleware/authMiddleware');
+
+router.get('/audit', protect, supervisor, getCashupAudit);
+router.get('/event/:eventId', protect, supervisor, getEventCashup);
+router.put('/event/:eventId/draft', protect, admin, saveEventCashupDraft);
+router.post('/event/:eventId/close', protect, admin, closeEvent);
+router.post('/event/:eventId/reopen', protect, admin, reopenEvent);
+
+module.exports = router;
diff --git a/backend/src/routes/costRoutes.js b/backend/src/routes/costRoutes.js
new file mode 100644
index 0000000..c8b1784
--- /dev/null
+++ b/backend/src/routes/costRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const { getEventCosts, createEventCost, updateEventCost, deleteEventCost } = require('../controllers/costController');
+const { protect, supervisor, admin } = require('../middleware/authMiddleware');
+
+// Mounted at /api — paths below match the documented /api/events/:eventId/costs and /api/costs/:id shape
+router.get('/events/:eventId/costs', protect, supervisor, getEventCosts);
+router.post('/events/:eventId/costs', protect, admin, createEventCost);
+router.put('/costs/:id', protect, admin, updateEventCost);
+router.delete('/costs/:id', protect, admin, deleteEventCost);
+
+module.exports = router;
diff --git a/backend/src/routes/eventRoutes.js b/backend/src/routes/eventRoutes.js
new file mode 100644
index 0000000..2bc408f
--- /dev/null
+++ b/backend/src/routes/eventRoutes.js
@@ -0,0 +1,86 @@
+const express = require('express');
+const router = express.Router();
+const {
+  createEvent,
+  getEvents,
+  getAllEvents,
+  getEventsAll,
+  getEventById,
+  updateEvent,
+  getEventNotifyRecipients,
+  updateEventNotifyRecipients,
+  deleteEvent,
+  createEventOption,
+  updateEventOption,
+  deleteEventOption,
+  createOptionVariant,
+  updateOptionVariant,
+  deleteOptionVariant,
+  listEventAttachments,
+  uploadEventAttachment,
+  deleteEventAttachment,
+  attachmentsStatus,
+  attachmentsSync,
+  emailEventAttendees,
+  scheduleEmailEventAttendees,
+  whatsappEventAttendees,
+  scheduleWhatsappEventAttendees,
+  getEventByAlias
+} = require('../controllers/eventController');
+const { protect, admin, supervisor, optionalAuth } = require('../middleware/authMiddleware');
+
+// Public routes
+router.get('/', getEvents);
+
+// Staff/supervisor/admin: all events including hidden, optional past/inactive filters
+router.get('/all', protect, getEventsAll);
+
+// Admin routes
+router.get('/admin/all', protect, admin, getAllEvents);
+router.get('/attachments/status', protect, admin, attachmentsStatus);
+router.post('/attachments/sync', protect, admin, attachmentsSync);
+
+// Public route for single event (keep after specific admin routes).
+// optionalAuth populates req.user when a valid token is present so staff/supervisor/admin
+// can still load inactive events (e.g. for cashup or editing) without being 404'd.
+router.get('/:id', optionalAuth, getEventById);
+router.get('/by-alias/:redirectUrl', getEventByAlias);
+
+// Create/Update/Delete event
+router.post('/', protect, supervisor, createEvent);
+router.route('/:id')
+  .put(protect, supervisor, updateEvent)
+  .delete(protect, admin, deleteEvent);
+
+// Notification recipients: who gets registration/payment/daily-summary emails for this event
+router.route('/:id/notify-recipients')
+  .get(protect, supervisor, getEventNotifyRecipients)
+  .put(protect, supervisor, updateEventNotifyRecipients);
+
+// Attachments routes
+router.get('/:id/attachments', listEventAttachments); // public read (used by event detail page)
+router.post('/:id/attachments', protect, supervisor, ...uploadEventAttachment);
+router.delete('/:eventId/attachments/:attachmentId', protect, supervisor, deleteEventAttachment);
+
+// Bulk email attendees
+router.post('/:id/email-attendees', protect, supervisor, emailEventAttendees);
+// Schedule bulk email to attendees
+router.post('/:id/email-attendees/schedule', protect, supervisor, scheduleEmailEventAttendees);
+// Bulk WhatsApp message to attendees
+router.post('/:id/whatsapp-attendees', protect, supervisor, whatsappEventAttendees);
+// Schedule bulk WhatsApp message to attendees
+router.post('/:id/whatsapp-attendees/schedule', protect, supervisor, scheduleWhatsappEventAttendees);
+
+// Event options routes
+router.post('/:id/options', protect, supervisor, createEventOption);
+router.route('/options/:id')
+  .put(protect, supervisor, updateEventOption)
+  .delete(protect, admin, deleteEventOption);
+
+// Option variant routes
+router.post('/options/:id/variants', protect, supervisor, createOptionVariant);
+router.route('/variants/:id')
+  .put(protect, supervisor, updateOptionVariant)
+  .delete(protect, admin, deleteOptionVariant);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/formRoutes.js b/backend/src/routes/formRoutes.js
new file mode 100644
index 0000000..7d6f1d1
--- /dev/null
+++ b/backend/src/routes/formRoutes.js
@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const { listFormResponses } = require('../controllers/formController');
+const { protect, staff } = require('../middleware/authMiddleware');
+
+// Staff or higher can view submitted forms
+router.get('/responses', protect, staff, listFormResponses);
+
+module.exports = router;
diff --git a/backend/src/routes/paymentRoutes.js b/backend/src/routes/paymentRoutes.js
new file mode 100644
index 0000000..1774b47
--- /dev/null
+++ b/backend/src/routes/paymentRoutes.js
@@ -0,0 +1,33 @@
+const express = require('express');
+const router = express.Router();
+const {
+  createPayment,
+  getPayments,
+  getUserPayments,
+  getPaymentById,
+  getPaymentsByRegistration,
+  getPaymentsByEvent,
+  assignDonationToRegistration,
+  createYocoCheckout,
+  sendPaymentLink,
+  createRefund,
+  getPaymentStats
+} = require('../controllers/paymentController');
+const { protect, supervisor, staff, admin} = require('../middleware/authMiddleware');
+
+// Protected routes
+router.post('/', protect, supervisor, createPayment);
+router.post('/yoco-checkout', protect, createYocoCheckout);
+router.post('/yoco-checkout/send', protect, supervisor, sendPaymentLink);
+router.get('/mypayments', protect, getUserPayments);
+router.get('/:id', protect, getPaymentById);
+router.get('/registration/:registrationId', protect, getPaymentsByRegistration);
+
+// Admin/Staff routes
+router.get('/', protect, supervisor, getPayments);
+router.get('/event/:eventId', protect, staff, getPaymentsByEvent);
+router.put('/assign-donation', protect, supervisor, assignDonationToRegistration);
+router.post('/refund', protect, supervisor, createRefund);
+router.get('/admin/stats', protect, admin, getPaymentStats);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/registrationRoutes.js b/backend/src/routes/registrationRoutes.js
new file mode 100644
index 0000000..a887ce1
--- /dev/null
+++ b/backend/src/routes/registrationRoutes.js
@@ -0,0 +1,37 @@
+const express = require('express');
+const router = express.Router();
+const {
+  createRegistration,
+  getRegistrations,
+  getUserRegistrations,
+  getRegistrationById,
+  updateRegistrationStatus,
+  cancelRegistration,
+  getRegistrationsByEvent,
+  createManualRegistration,
+  updateRegistrationOptions,
+  submitFormResponses, replaceFormResponses,
+  getFormDraft, saveFormDraft,
+} = require('../controllers/registrationController');
+const { protect, supervisor, staff, optionalAuth } = require('../middleware/authMiddleware');
+
+// Registration - auth optional when event doesn't require it
+router.post('/', optionalAuth, createRegistration);
+router.get('/myregistrations', protect, getUserRegistrations);
+router.put('/:id/options', protect, updateRegistrationOptions);
+router.delete('/:id', protect, cancelRegistration);
+
+// Registration detail + forms — optionalAuth so guests can access with just the registrationId
+router.get('/:id', optionalAuth, getRegistrationById);
+router.get('/:id/forms/draft', optionalAuth, getFormDraft);
+router.put('/:id/forms/draft', optionalAuth, saveFormDraft);
+router.post('/:id/forms/responses', optionalAuth, submitFormResponses);
+router.put('/:id/forms/responses', protect, supervisor, replaceFormResponses);
+
+// Admin/Staff routes
+router.get('/', protect, staff, getRegistrations);
+router.put('/:id', protect, staff, updateRegistrationStatus);
+router.get('/event/:eventId', protect, staff, getRegistrationsByEvent);
+router.post('/manual', protect, supervisor, createManualRegistration);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/reportRoutes.js b/backend/src/routes/reportRoutes.js
new file mode 100644
index 0000000..bfc29e2
--- /dev/null
+++ b/backend/src/routes/reportRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const { generatePdf, emailPdf } = require('../controllers/reportController');
+const { protect } = require('../middleware/authMiddleware');
+
+// Generate and download PDF
+router.post('/pdf', protect, generatePdf);
+
+// Email PDF to current user
+router.post('/email', protect, emailPdf);
+
+module.exports = router;
diff --git a/backend/src/routes/scheduledEmailRoutes.js b/backend/src/routes/scheduledEmailRoutes.js
new file mode 100644
index 0000000..3c7bbaa
--- /dev/null
+++ b/backend/src/routes/scheduledEmailRoutes.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const router = express.Router();
+const { listScheduledEmails, updateScheduledEmail, deleteScheduledEmail } = require('../controllers/scheduledEmailsController');
+const { protect, supervisor } = require('../middleware/authMiddleware');
+
+// All routes require supervisor (or admin via middleware logic) access
+router.get('/', protect, supervisor, listScheduledEmails);
+router.patch('/:id', protect, supervisor, updateScheduledEmail);
+router.delete('/:id', protect, supervisor, deleteScheduledEmail);
+
+module.exports = router;
diff --git a/backend/src/routes/sectionRoutes.js b/backend/src/routes/sectionRoutes.js
new file mode 100644
index 0000000..52df37f
--- /dev/null
+++ b/backend/src/routes/sectionRoutes.js
@@ -0,0 +1,16 @@
+const express = require('express');
+const router = express.Router();
+const {
+    getSections,
+    createSection,
+    deleteSection,
+    updateSection
+} = require('../controllers/sectionController');
+const { protect, admin, supervisor, staff } = require('../middleware/authMiddleware');
+
+router.get('/', protect, staff, getSections);
+router.post('/', protect, supervisor, createSection);
+router.delete('/:id', protect, admin, deleteSection);
+router.put('/:id', protect, supervisor, updateSection);
+
+module.exports = router;
diff --git a/backend/src/routes/settingsRoutes.js b/backend/src/routes/settingsRoutes.js
new file mode 100644
index 0000000..10b2ce9
--- /dev/null
+++ b/backend/src/routes/settingsRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const { getSettings, getAllSettings, updateSettings, needsSetup, testSmtp } = require('../controllers/settingsController');
+const { protect, admin } = require('../middleware/authMiddleware');
+
+router.get('/needs-setup', needsSetup);
+router.get('/all', protect, admin, getAllSettings);
+router.get('/', getSettings);
+router.put('/', protect, admin, updateSettings);
+router.post('/test-smtp', protect, admin, testSmtp);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/setupRoutes.js b/backend/src/routes/setupRoutes.js
new file mode 100644
index 0000000..b58bb53
--- /dev/null
+++ b/backend/src/routes/setupRoutes.js
@@ -0,0 +1,12 @@
+const express = require('express');
+const router = express.Router();
+const { setupRegister, runSetup } = require('../controllers/settingsController');
+const { protect, admin } = require('../middleware/authMiddleware');
+
+// Step 1 of setup: create the admin account, returns a JWT token
+router.post('/register', setupRegister);
+
+// Step 2 of setup: finalize settings (requires the token from /register)
+router.post('/', protect, admin, runSetup);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/statsRoutes.js b/backend/src/routes/statsRoutes.js
new file mode 100644
index 0000000..16cd881
--- /dev/null
+++ b/backend/src/routes/statsRoutes.js
@@ -0,0 +1,13 @@
+const express = require('express');
+const router = express.Router();
+const { getStaffDashboardStats, getSupervisorDashboardStats, getAdminDashboardStats } = require('../controllers/statsController');
+const { protect, staff, supervisor, admin } = require('../middleware/authMiddleware');
+
+// One endpoint per dashboard — each returns exactly what that dashboard renders in a
+// single response instead of the dashboard making several separate calls (and, previously,
+// pulling full payments/events lists just to reduce them to a couple of numbers).
+router.get('/staff', protect, staff, getStaffDashboardStats);
+router.get('/supervisor', protect, supervisor, getSupervisorDashboardStats);
+router.get('/admin', protect, admin, getAdminDashboardStats);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/ticketRoutes.js b/backend/src/routes/ticketRoutes.js
new file mode 100644
index 0000000..1a454e1
--- /dev/null
+++ b/backend/src/routes/ticketRoutes.js
@@ -0,0 +1,39 @@
+const express = require('express');
+const router = express.Router();
+const {
+  generateTickets,
+  getTickets,
+  getUserTickets,
+  getTicketById,
+  getTicketByQrCode,
+  getScanPreview,
+  scanTicket,
+  getTicketsByEvent,
+  markTicketsAsEmailSent,
+  emailTickets,
+  sendTicketsTo,
+  getRecentScans,
+  getScanStats
+} = require('../controllers/ticketController');
+const { protect, admin, supervisor, staff } = require('../middleware/authMiddleware');
+
+// Protected routes
+router.get('/mytickets', protect, getUserTickets);
+router.get('/:id', protect, getTicketById);
+router.post('/email', protect, emailTickets);
+
+// Staff routes
+router.post('/send-to', protect, staff, sendTicketsTo);
+router.get('/scan-preview/:qrCode', protect, staff, getScanPreview);
+router.get('/qr/:qrCode', protect, staff, getTicketByQrCode);
+router.post('/scan/:qrCode', protect, staff, scanTicket);
+router.get('/event/:eventId', protect, staff, getTicketsByEvent);
+router.get('/scans/recent', protect, staff, getRecentScans);
+router.get('/scans/stats', protect, staff, getScanStats);
+
+// Admin routes
+router.post('/generate', protect, supervisor, generateTickets);
+router.get('/', protect, supervisor, getTickets);
+router.put('/email-sent', protect, admin, markTicketsAsEmailSent);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/uploadRoutes.js b/backend/src/routes/uploadRoutes.js
new file mode 100644
index 0000000..3978bf4
--- /dev/null
+++ b/backend/src/routes/uploadRoutes.js
@@ -0,0 +1,41 @@
+const express = require('express');
+const router = express.Router();
+
+const { upload, uploadEventImage, uploadLogo, uploadLogoImage } = require('../controllers/uploadController');
+const { protect, supervisor, admin } = require('../middleware/authMiddleware');
+const prisma = require('../config/db');
+
+// @route POST /api/uploads/event-image
+// @desc Upload an image for an event
+// @access Private (Supervisor+ recommended)
+router.post('/event-image', protect, supervisor, (req, res, next) => {
+    upload.single('image')(req, res, (err) => {
+        if (err) {
+            req.multerError = err;
+        }
+        next();
+    });
+}, uploadEventImage);
+
+// @route POST /api/uploads/logo
+// @desc Upload site logo — admin, OR allowed during first-time setup (no users yet)
+// @access Admin or setup
+
+async function logoAccess(req, res, next) {
+    try {
+        const count = await prisma.user.count();
+        if (count === 0) return next(); // first-time setup
+        return protect(req, res, () => admin(req, res, next));
+    } catch {
+        return protect(req, res, () => admin(req, res, next));
+    }
+}
+
+router.post('/logo', logoAccess, (req, res, next) => {
+    uploadLogo.single('image')(req, res, (err) => {
+        if (err) req.multerError = err;
+        next();
+    });
+}, uploadLogoImage);
+
+module.exports = router;
diff --git a/backend/src/routes/userRoutes.js b/backend/src/routes/userRoutes.js
new file mode 100644
index 0000000..1a9c84d
--- /dev/null
+++ b/backend/src/routes/userRoutes.js
@@ -0,0 +1,52 @@
+const express = require('express');
+const router = express.Router();
+const {
+  registerUser,
+  loginUser,
+  getUserProfile,
+  updateUserProfile,
+  getUsers,
+  checkUserExists,
+  getUserById,
+  updateUser,
+  deleteUser,
+  anonymizeUser,
+  requestPasswordReset,
+  resetPassword,
+  activateAccount,
+  revokeMySession,
+  adminRevokeUserSessions,
+  closeAccount,
+} = require('../controllers/userController');
+const { protect, admin, supervisor, loginLimiter} = require('../middleware/authMiddleware');
+
+// Public routes
+router.post('/', registerUser);
+router.post('/login', loginLimiter, loginUser);
+router.post('/forgot', requestPasswordReset);
+router.post('/reset', resetPassword);
+router.post('/activate', activateAccount);
+
+// Protected routes
+router.route('/profile')
+  .get(protect, getUserProfile)
+  .put(protect, updateUserProfile);
+
+router.post('/revoke-sessions', protect, revokeMySession);
+router.post('/close-account', protect, closeAccount);
+
+// Admin routes
+router.route('/')
+  .get(protect, supervisor, getUsers);
+
+router.get('/check-exists', protect, supervisor, checkUserExists);
+
+router.route('/:id')
+  .get(protect, admin, getUserById)
+  .put(protect, admin, updateUser)
+  .delete(protect, admin, deleteUser);
+
+router.post('/:id/revoke-sessions', protect, admin, adminRevokeUserSessions);
+router.post('/:id/anonymize', protect, admin, anonymizeUser);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/webhookRoutes.js b/backend/src/routes/webhookRoutes.js
new file mode 100644
index 0000000..1fe6da1
--- /dev/null
+++ b/backend/src/routes/webhookRoutes.js
@@ -0,0 +1,9 @@
+const express = require('express');
+const router = express.Router();
+const { handleYocoWebhook, handleWhatsappWebhook } = require('../controllers/webhookController');
+
+// Yoco webhook endpoint
+router.post('/yoco', handleYocoWebhook);
+router.post('/whatsapp', handleWhatsappWebhook);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/whatsappBroadcastRoutes.js b/backend/src/routes/whatsappBroadcastRoutes.js
new file mode 100644
index 0000000..a6a043b
--- /dev/null
+++ b/backend/src/routes/whatsappBroadcastRoutes.js
@@ -0,0 +1,10 @@
+const express = require('express');
+const router = express.Router();
+const { previewWhatsAppBroadcast, sendWhatsAppBroadcast, scheduleWhatsAppBroadcast } = require('../controllers/whatsappBroadcastController');
+const { protect, supervisor } = require('../middleware/authMiddleware');
+
+router.post('/preview', protect, supervisor, previewWhatsAppBroadcast);
+router.post('/send', protect, supervisor, sendWhatsAppBroadcast);
+router.post('/schedule', protect, supervisor, scheduleWhatsAppBroadcast);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/whatsappRoutes.js b/backend/src/routes/whatsappRoutes.js
new file mode 100644
index 0000000..47bee9a
--- /dev/null
+++ b/backend/src/routes/whatsappRoutes.js
@@ -0,0 +1,37 @@
+const express = require('express');
+const router  = express.Router();
+const {
+  getConfigHandler,
+  saveConfigHandler,
+  createInstanceHandler,
+  deleteInstanceHandler,
+  getStatusHandler,
+  getQrHandler,
+  requestCodeHandler,
+  logoutHandler,
+  startHandler,
+  restartHandler,
+  handleWebhook,
+} = require('../controllers/whatsappController');
+const { protect, admin } = require('../middleware/authMiddleware');
+
+// Public webhook (called by WAWP servers)
+router.post('/webhook', handleWebhook);
+
+// Admin-only: credentials config
+router.get( '/config',          protect, admin, getConfigHandler);
+router.post('/config',          protect, admin, saveConfigHandler);
+
+// Admin-only: instance lifecycle
+router.post('/create-instance', protect, admin, createInstanceHandler);
+router.post('/delete-instance', protect, admin, deleteInstanceHandler);
+
+// Admin-only: session management
+router.get( '/status',       protect, admin, getStatusHandler);
+router.get( '/qr',           protect, admin, getQrHandler);
+router.post('/request-code', protect, admin, requestCodeHandler);
+router.post('/logout',       protect, admin, logoutHandler);
+router.post('/start',        protect, admin, startHandler);
+router.post('/restart',      protect, admin, restartHandler);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/src/routes/yocoTransactionRoutes.js b/backend/src/routes/yocoTransactionRoutes.js
new file mode 100644
index 0000000..a38ed62
--- /dev/null
+++ b/backend/src/routes/yocoTransactionRoutes.js
@@ -0,0 +1,18 @@
+const express = require('express');
+const router = express.Router();
+const { getAllYocoTransactions, getUnreconciledYocoTransactions, reconcileYocoTransaction, ignoreYocoTransaction } = require('../controllers/yocoTransactionsController');
+const { protect, supervisor} = require('../middleware/authMiddleware');
+
+// GET all Yoco transactions (admin/supervisor)
+router.get('/', protect, supervisor, getAllYocoTransactions);
+
+// GET all unreconciled Yoco transactions (admin/supervisor)
+router.get('/unreconciled', protect, supervisor, getUnreconciledYocoTransactions);
+
+// POST reconcile a Yoco transaction
+router.post('/:id/reconcile', protect, supervisor, reconcileYocoTransaction);
+
+// POST ignore a Yoco transaction
+router.post('/:id/ignore', protect, supervisor, ignoreYocoTransaction);
+
+module.exports = router;
diff --git a/backend/src/utils/attachmentsSync.js b/backend/src/utils/attachmentsSync.js
new file mode 100644
index 0000000..465ef06
--- /dev/null
+++ b/backend/src/utils/attachmentsSync.js
@@ -0,0 +1,107 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Checks whether the Prisma client has the EventAttachment model and the table is queryable.
+ * @param {import('@prisma/client').PrismaClient} prisma
+ */
+async function canUseEventAttachment(prisma) {
+  const hasModel = !!(prisma && prisma.eventAttachment && typeof prisma.eventAttachment.findMany === 'function');
+  if (!hasModel) return { ok: false, reason: 'NO_MODEL' };
+  try {
+    await prisma.eventAttachment.findFirst({});
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, reason: 'QUERY_ERROR', error: String(e?.message || e) };
+  }
+}
+
+/**
+ * Reads all manifest files for event attachments and inserts missing rows into DB.
+ * It is idempotent: it will skip entries that already exist by id. If id lookup fails,
+ * it tries to avoid duplicates using a composite check (eventId + filename + size).
+ *
+ * @param {import('@prisma/client').PrismaClient} prisma
+ * @param {{ dryRun?: boolean, removeManifestAfterImport?: boolean }} [options]
+ * @returns {Promise<{processedFiles:number, imported:number, skipped:number, errors:Array<{file:string,error:string}>, details:Array<{file:string, imported:number, skipped:number}>}>}
+ */
+async function syncManifestsToDb(prisma, options = {}) {
+  const { dryRun = false, removeManifestAfterImport = false } = options;
+  const baseDir = path.join(__dirname, '..', '..', 'public', 'uploads', 'event-files');
+  const result = { processedFiles: 0, imported: 0, skipped: 0, errors: [], details: [] };
+
+  const check = await canUseEventAttachment(prisma);
+  if (!check.ok) {
+    return { ...result, errors: [{ file: '*', error: `Attachments model not usable (${check.reason})${check.error ? ': ' + check.error : ''}` }] };
+  }
+
+  if (!fs.existsSync(baseDir)) return result;
+  const files = fs.readdirSync(baseDir).filter(f => f.endsWith('.attachments.json'));
+
+  for (const file of files) {
+    const manifestPath = path.join(baseDir, file);
+    result.processedFiles += 1;
+    let list = [];
+    try {
+      const raw = fs.readFileSync(manifestPath, 'utf-8');
+      list = JSON.parse(raw) || [];
+    } catch (e) {
+      result.errors.push({ file, error: 'Failed to parse JSON: ' + String(e?.message || e) });
+      continue;
+    }
+
+    let imported = 0;
+    let skipped = 0;
+
+    for (const entry of list) {
+      try {
+        // Check existing by id first
+        const existsById = entry?.id ? await prisma.eventAttachment.findUnique({ where: { id: entry.id } }) : null;
+        if (existsById) { skipped++; continue; }
+
+        // Check using composite heuristic to avoid duplicates
+        const maybeExisting = await prisma.eventAttachment.findFirst({
+          where: {
+            eventId: entry.eventId,
+            filename: entry.filename,
+            size: typeof entry.size === 'number' ? entry.size : undefined,
+          }
+        });
+        if (maybeExisting) { skipped++; continue; }
+
+        if (!dryRun) {
+          await prisma.eventAttachment.create({
+            data: {
+              id: entry.id || undefined,
+              eventId: entry.eventId,
+              originalName: entry.originalName || entry.filename || 'file',
+              filename: entry.filename,
+              mimeType: entry.mimeType || 'application/octet-stream',
+              size: typeof entry.size === 'number' ? entry.size : 0,
+              url: entry.url,
+              createdAt: entry.createdAt ? new Date(entry.createdAt) : undefined,
+            }
+          });
+        }
+        imported++;
+      } catch (e) {
+        result.errors.push({ file, error: 'Insert failed: ' + String(e?.message || e) });
+      }
+    }
+
+    result.imported += imported;
+    result.skipped += skipped;
+    result.details.push({ file, imported, skipped });
+
+    // Optionally remove manifest if all entries are in DB now
+    if (!dryRun && removeManifestAfterImport && imported > 0) {
+      try {
+        fs.unlinkSync(manifestPath);
+      } catch {}
+    }
+  }
+
+  return result;
+}
+
+module.exports = { syncManifestsToDb, canUseEventAttachment };
diff --git a/backend/src/utils/cashupUtils.js b/backend/src/utils/cashupUtils.js
new file mode 100644
index 0000000..b08a92d
--- /dev/null
+++ b/backend/src/utils/cashupUtils.js
@@ -0,0 +1,204 @@
+const prisma = require('../config/db');
+
+const METHOD_BUCKETS = ['cash', 'card', 'eft'];
+const ALL_METHODS = ['cash', 'card', 'eft', 'other'];
+
+// Standard South African Rand note/coin denominations used for the cash count grid.
+const ZAR_DENOMINATIONS = [200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1];
+
+function emptyByMethod(fill = 0) {
+  return { cash: fill, card: fill, eft: fill, other: fill };
+}
+
+// Normalizes a free-text Payment.method into one of the fixed cashup buckets.
+function bucketForMethod(method) {
+  const m = String(method || '').toLowerCase();
+  if (m.includes('cash')) return 'cash';
+  if (m.includes('eft')) return 'eft';
+  if (m.includes('card') || m.includes('yoco')) return 'card';
+  return 'other';
+}
+
+// Throws if the event is closed. Callers wrap this in their existing try/catch
+// (res.statusCode is set before throwing, matching the rest of the controllers).
+async function assertEventOpen(eventId, res) {
+  const event = await prisma.event.findUnique({ where: { id: eventId }, select: { id: true, cashupStatus: true } });
+  if (!event) {
+    if (res) res.status(404);
+    throw new Error('Event not found');
+  }
+  if (event.cashupStatus === 'closed') {
+    if (res) res.status(400);
+    throw new Error('This event is closed. Reopen it (admin only) before making changes.');
+  }
+  return event;
+}
+
+// Same check, but resolves the event via a registrationId first (for payment/registration flows
+// that receive a registrationId rather than an eventId directly).
+async function assertRegistrationEventOpen(registrationId, res) {
+  const registration = await prisma.registration.findUnique({ where: { id: registrationId }, select: { eventId: true } });
+  if (!registration) {
+    if (res) res.status(404);
+    throw new Error('Registration not found');
+  }
+  await assertEventOpen(registration.eventId, res);
+  return registration;
+}
+
+// Core computation shared by the cashup preview/close endpoints and the Cashup/Finance/Profit reports.
+//
+// Two figures must never be conflated: "revenue" (gross, profit-relevant) and "expected cash"
+// (net of any costs paid out of a method's float, for physically verifying a drawer/float).
+// Mixing them up would double-subtract method-tagged costs from profit.
+async function computeEventFinancials(eventId) {
+  const event = await prisma.event.findUnique({
+    where: { id: eventId },
+    select: { id: true, title: true, cashupStatus: true, cashupDraft: true, closedAt: true, closedById: true, reopenedAt: true, reopenedById: true }
+  });
+  if (!event) {
+    throw new Error('Event not found');
+  }
+
+  const [payments, costs, tickets, salesRows, history] = await Promise.all([
+    prisma.payment.findMany({
+      where: { OR: [{ eventId }, { registration: { eventId } }] }
+    }),
+    prisma.eventCost.findMany({ where: { eventId }, include: { eventOption: { select: { id: true, name: true } } } }),
+    prisma.ticket.findMany({
+      where: { eventId },
+      include: { registrationOption: { select: { eventOptionId: true } } }
+    }),
+    prisma.registrationOption.findMany({
+      where: { registration: { eventId, status: 'paid' } },
+      include: { eventOption: { select: { id: true, name: true, price: true } } }
+    }),
+    prisma.eventCashup.findMany({
+      where: { eventId },
+      include: {
+        lines: { include: { denominations: true } },
+        performedBy: { select: { id: true, name: true, email: true } }
+      },
+      orderBy: { createdAt: 'desc' }
+    })
+  ]);
+
+  // Ticket quantity sold per EventOption (used to price per-item costs)
+  const quantityByOption = {};
+  for (const t of tickets) {
+    const optId = t.registrationOption?.eventOptionId;
+    if (!optId) continue;
+    quantityByOption[optId] = (quantityByOption[optId] || 0) + t.quantity;
+  }
+
+  const nonRefundPayments = payments.filter(p => p.amount > 0);
+  const unallocatedDonations = payments.filter(p => p.isDonation && !p.registrationId);
+  const unallocatedDonationsTotal = unallocatedDonations.reduce((sum, p) => sum + p.amount, 0);
+  const totalDonations = payments.filter(p => p.isDonation).reduce((sum, p) => sum + p.amount, 0);
+
+  const paymentsByMethod = emptyByMethod();
+  for (const p of nonRefundPayments) {
+    paymentsByMethod[bucketForMethod(p.method)] += p.amount;
+  }
+  const totalRevenue = payments.reduce((sum, p) => sum + p.amount, 0);
+
+  // Costs, with computed totals and attribution to a payment method's float (if tagged)
+  const costBreakdown = costs.map(c => {
+    const total = c.costType === 'per_item'
+      ? c.amount * (quantityByOption[c.eventOptionId] || 0)
+      : c.amount;
+    return { ...c, total };
+  });
+  const costsByMethod = emptyByMethod();
+  let untaggedCostsTotal = 0;
+  for (const c of costBreakdown) {
+    if (c.paidFromMethod && ALL_METHODS.includes(c.paidFromMethod)) {
+      costsByMethod[c.paidFromMethod] += c.total;
+    } else {
+      untaggedCostsTotal += c.total;
+    }
+  }
+  const totalCosts = untaggedCostsTotal + ALL_METHODS.reduce((s, m) => s + costsByMethod[m], 0);
+
+  // What should physically be on hand per method, after known payouts from that float
+  const expectedCashByMethod = emptyByMethod();
+  for (const m of ALL_METHODS) expectedCashByMethod[m] = paymentsByMethod[m] - costsByMethod[m];
+
+  // Most recent reconciliation on record (if any) — the source of "actual" truth
+  const latestReconciled = history.find(h => h.action === 'closed' || h.action === 'quick_closed') || null;
+  const reconciled = latestReconciled ? {
+    id: latestReconciled.id,
+    action: latestReconciled.action,
+    createdAt: latestReconciled.createdAt,
+    performedBy: latestReconciled.performedBy,
+    notes: latestReconciled.notes,
+    byMethod: (() => {
+      const out = {};
+      for (const m of ALL_METHODS) {
+        const line = latestReconciled.lines.find(l => l.method === m);
+        out[m] = {
+          expected: line ? line.expectedAmount : expectedCashByMethod[m],
+          actual: line && line.actualAmount != null ? line.actualAmount : null,
+          variance: line && line.variance != null ? line.variance : null,
+          notes: line ? line.notes : null,
+          denominations: line ? line.denominations : []
+        };
+      }
+      return out;
+    })()
+  } : null;
+
+  // Reconciled value is truth; system (expected) value is the fallback when nothing was counted.
+  // Tagged costs are added back so a reconciled cash count still yields a correct *gross* income figure —
+  // costs get subtracted from profit exactly once, via totalCosts, never twice.
+  const effectiveGrossIncomeByMethod = emptyByMethod();
+  for (const m of ALL_METHODS) {
+    const actual = reconciled?.byMethod?.[m]?.actual;
+    const base = actual != null ? actual : expectedCashByMethod[m];
+    effectiveGrossIncomeByMethod[m] = base + costsByMethod[m];
+  }
+  const effectiveTotalRevenue = ALL_METHODS.reduce((s, m) => s + effectiveGrossIncomeByMethod[m], 0);
+  const netProfit = effectiveTotalRevenue - totalCosts;
+
+  // What was actually sold, by ticket type — for the Finance report's income-stream breakdown
+  const salesByOptionMap = {};
+  for (const ro of salesRows) {
+    const opt = ro.eventOption;
+    if (!opt) continue;
+    if (!salesByOptionMap[opt.id]) salesByOptionMap[opt.id] = { eventOptionId: opt.id, name: opt.name, quantitySold: 0, revenue: 0 };
+    const unitPrice = ro.priceSnapshot != null ? ro.priceSnapshot : opt.price;
+    salesByOptionMap[opt.id].quantitySold += ro.quantity;
+    salesByOptionMap[opt.id].revenue += unitPrice * ro.quantity;
+  }
+  const salesByOption = Object.values(salesByOptionMap);
+
+  return {
+    event,
+    paymentsByMethod,
+    totalRevenue,
+    costs: costBreakdown,
+    costsByMethod,
+    untaggedCostsTotal,
+    totalCosts,
+    expectedCashByMethod,
+    reconciled,
+    effectiveGrossIncomeByMethod,
+    effectiveTotalRevenue,
+    netProfit,
+    unallocatedDonations,
+    unallocatedDonationsTotal,
+    totalDonations,
+    salesByOption,
+    history
+  };
+}
+
+module.exports = {
+  METHOD_BUCKETS,
+  ALL_METHODS,
+  ZAR_DENOMINATIONS,
+  bucketForMethod,
+  assertEventOpen,
+  assertRegistrationEventOpen,
+  computeEventFinancials
+};
diff --git a/backend/src/utils/cleanupTemp.js b/backend/src/utils/cleanupTemp.js
new file mode 100644
index 0000000..b97f166
--- /dev/null
+++ b/backend/src/utils/cleanupTemp.js
@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+
+const TEMP_DIR = path.join(__dirname, '..', '..', 'temp');
+const MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000; // 7 days
+
+/**
+ * Deletes files in the temp directory that are older than 7 days.
+ * Returns a summary: { deleted, errors }.
+ */
+function cleanupTempFiles() {
+  try {
+    if (!fs.existsSync(TEMP_DIR)) return { deleted: 0, errors: 0 };
+
+    const files = fs.readdirSync(TEMP_DIR);
+    const cutoff = Date.now() - MAX_AGE_MS;
+    let deleted = 0;
+    let errors = 0;
+
+    for (const file of files) {
+      try {
+        const filePath = path.join(TEMP_DIR, file);
+        const stat = fs.statSync(filePath);
+        if (stat.isFile() && stat.mtimeMs < cutoff) {
+          fs.unlinkSync(filePath);
+          deleted++;
+        }
+      } catch {
+        errors++;
+      }
+    }
+
+    return { deleted, errors };
+  } catch {
+    return { deleted: 0, errors: 1 };
+  }
+}
+
+module.exports = { cleanupTempFiles };
\ No newline at end of file
diff --git a/backend/src/utils/email.js b/backend/src/utils/email.js
new file mode 100644
index 0000000..a093623
--- /dev/null
+++ b/backend/src/utils/email.js
@@ -0,0 +1,389 @@
+const nodemailer = require('nodemailer');
+
+// ─── Transport ────────────────────────────────────────────────────────────────
+// The SMTP transporter is built lazily and rebuilt whenever the settings cache
+// reports a different configuration (e.g. after an admin updates SMTP settings).
+
+const { getSettingSync } = require('./settingsCache');
+
+/** Read current SMTP config from settings cache, falling back to env vars. */
+function _smtpConfig() {
+  return {
+    host:   getSettingSync('smtp_host',   process.env.SMTP_HOST   || process.env.EMAIL_HOST   || ''),
+    port:   getSettingSync('smtp_port',   process.env.SMTP_PORT   || process.env.EMAIL_PORT   || '587'),
+    secure: getSettingSync('smtp_secure', process.env.SMTP_SECURE || process.env.EMAIL_SECURE || 'false'),
+    user:   getSettingSync('smtp_user',   process.env.SMTP_USER   || process.env.EMAIL_USER   || ''),
+    pass:   getSettingSync('smtp_pass',   process.env.SMTP_PASS   || process.env.EMAIL_PASS   || ''),
+    from:   getSettingSync('smtp_from',   process.env.MAIL_FROM   || process.env.EMAIL_FROM   || ''),
+  };
+}
+
+function _configHash(c) {
+  return [c.host, c.port, c.secure, c.user, c.pass].join('|');
+}
+
+let _cachedTransporter = null;
+let _cachedConfigHash  = null;
+
+function _getTransporter() {
+  const cfg  = _smtpConfig();
+  const hash = _configHash(cfg);
+
+  if (!_cachedTransporter || hash !== _cachedConfigHash) {
+    _cachedConfigHash = hash;
+    if (cfg.host) {
+      _cachedTransporter = nodemailer.createTransport({
+        host:   cfg.host,
+        port:   parseInt(cfg.port, 10) || 587,
+        secure: String(cfg.secure).toLowerCase() === 'true' || String(cfg.port) === '465',
+        auth:   cfg.user && cfg.pass ? { user: cfg.user, pass: cfg.pass } : undefined,
+      });
+    } else {
+      _cachedTransporter = nodemailer.createTransport({ jsonTransport: true });
+      if (process.env.NODE_ENV !== 'production') {
+        console.info('[email] SMTP not configured — using jsonTransport (dev). Configure SMTP via Admin → Site Settings or set SMTP_HOST env var.');
+      }
+    }
+  }
+
+  return { transporter: _cachedTransporter, cfg };
+}
+
+async function sendMail({ to, subject, html, text, attachments }) {
+  // Never send to anonymised/deleted accounts
+  if (!to || String(to).endsWith('@deleted.invalid')) {
+    console.info('[email] Skipping send to deleted account:', to);
+    return;
+  }
+  const { transporter, cfg } = _getTransporter();
+  const from = cfg.from || 'no-reply@hope-events.local';
+  const info = await transporter.sendMail({ from, to, subject, html, text, ...(attachments ? { attachments } : {}) });
+
+  if (transporter.options && transporter.options.jsonTransport) {
+    try {
+      const payload = typeof info.message === 'string' ? JSON.parse(info.message) : info.message;
+      console.info('[email][dev] simulated:', { to, subject, envelope: info.envelope });
+      if (payload && payload.html) console.info('[email][dev] html (first 300 chars):', String(payload.html).slice(0, 300));
+    } catch {
+      console.info('[email][dev] simulated (raw):', info && info.message);
+    }
+  }
+}
+
+// ─── Shared template helpers ──────────────────────────────────────────────────
+
+function getOrg() {
+  const urlFallback = process.env.APP_BASE_URL || process.env.FRONTEND_URL || 'http://localhost:3001';
+  return {
+    name:        getSettingSync('org_name',      process.env.ORG_NAME    || 'Hope Events'),
+    tagline:     getSettingSync('org_tagline',   process.env.ORG_TAGLINE || 'Connecting community through events'),
+    email:       getSettingSync('smtp_from',     process.env.EMAIL_FROM  || process.env.EMAIL_USER || ''),
+    url:         getSettingSync('app_base_url',  urlFallback).replace(/\/$/, ''),
+    headerColor: getSettingSync('accent_color',  process.env.EMAIL_HEADER_COLOR || '#1e3a5f'),
+  };
+}
+
+/**
+ * Wraps HTML content in a professional, responsive email shell.
+ * @param {string} body - Inner HTML content
+ * @param {{ preheader?: string }} options
+ */
+function emailWrapper(body, { preheader = '' } = {}) {
+  const org = getOrg();
+  const ff = `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+<title>${org.name}</title>
+</head>
+<body style="margin:0;padding:0;background-color:#f1f5f9;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
+${preheader ? `<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all">${preheader}&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;</div>` : ''}
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f1f5f9">
+<tr><td align="center" style="padding:40px 16px">
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px">
+
+  <!-- Header -->
+  <tr><td style="background:linear-gradient(135deg,${org.headerColor} 0%,#2d5287 100%);border-radius:12px 12px 0 0;padding:40px 48px;text-align:center">
+    <h1 style="color:#ffffff;font-size:28px;font-weight:800;margin:0;letter-spacing:-0.5px;font-family:${ff};text-shadow:0 1px 3px rgba(0,0,0,0.3)">${org.name}</h1>
+    <p style="color:#ffffff;font-size:14px;font-weight:500;margin:8px 0 0 0;font-family:${ff};letter-spacing:0.3px;opacity:0.9">${org.tagline}</p>
+  </td></tr>
+
+  <!-- Body -->
+  <tr><td style="background:#ffffff;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;padding:48px 48px 40px 48px">
+    <div style="font-family:${ff};color:#1e293b;font-size:15px;line-height:1.75">
+      ${body}
+    </div>
+  </td></tr>
+
+  <!-- Footer -->
+  <tr><td style="background:#f8fafc;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 12px 12px;padding:24px 48px;text-align:center">
+    <p style="color:#94a3b8;font-size:12px;margin:0 0 4px 0;font-family:${ff}">
+      ${org.name} &bull;
+      <a href="mailto:${org.email}" style="color:#94a3b8;text-decoration:underline">${org.email}</a> &bull;
+      <a href="${org.url}" style="color:#94a3b8;text-decoration:underline">${org.url}</a>
+    </p>
+    <p style="color:#cbd5e1;font-size:11px;margin:6px 0 0 0;font-family:${ff}">
+      This email was sent because you have an account or registration with ${org.name}.
+    </p>
+  </td></tr>
+
+</table>
+</td></tr>
+</table>
+</body>
+</html>`;
+}
+
+/** Renders a prominent CTA button. */
+function ctaButton(label, url, { bg = '#2563eb', fg = '#ffffff' } = {}) {
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:28px auto 8px auto">
+  <tr><td align="center" style="border-radius:8px;background-color:${bg};mso-padding-alt:0px">
+    <a href="${url}" target="_blank"
+       style="display:inline-block;padding:14px 36px;font-size:15px;font-weight:700;color:${fg};text-decoration:none;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;letter-spacing:0.2px;mso-hide:none"
+    >${label}</a>
+  </td></tr>
+</table>`;
+}
+
+/** Renders a fallback link below a CTA button. */
+function fallbackLink(url) {
+  return `<p style="text-align:center;margin:4px 0 0 0;font-size:12px;color:#94a3b8;word-break:break-all">
+    Or copy this link: <a href="${url}" style="color:#2563eb">${url}</a>
+  </p>`;
+}
+
+/** Horizontal rule. */
+function divider() {
+  return `<div style="border-top:1px solid #f1f5f9;margin:32px 0"></div>`;
+}
+
+/** Coloured callout box. type: info | success | warning | danger | neutral */
+function callout(content, type = 'info') {
+  const map = {
+    info:    { bg: '#eff6ff', border: '#3b82f6', color: '#1e40af' },
+    success: { bg: '#f0fdf4', border: '#22c55e', color: '#166534' },
+    warning: { bg: '#fffbeb', border: '#f59e0b', color: '#92400e' },
+    danger:  { bg: '#fef2f2', border: '#ef4444', color: '#991b1b' },
+    neutral: { bg: '#f8fafc', border: '#e2e8f0', color: '#475569' },
+  };
+  const s = map[type] || map.info;
+  return `<div style="background:${s.bg};border-left:4px solid ${s.border};border-radius:0 6px 6px 0;padding:16px 20px;margin:24px 0;color:${s.color};font-size:14px;line-height:1.6">
+  ${content}
+</div>`;
+}
+
+/** Numbered payment option row. */
+function paymentOption(num, title, detail) {
+  return `<tr>
+  <td style="padding:14px 16px 14px 0;vertical-align:top;width:28px">
+    <div style="width:26px;height:26px;border-radius:50%;background:#2563eb;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:26px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif">${num}</div>
+  </td>
+  <td style="padding:14px 0;border-bottom:1px solid #f1f5f9;vertical-align:top">
+    <p style="margin:0 0 4px 0;font-size:14px;font-weight:700;color:#1e293b;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif">${title}</p>
+    <div style="font-size:13px;color:#64748b;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5">${detail}</div>
+  </td>
+</tr>`;
+}
+
+// ─── Builder functions ────────────────────────────────────────────────────────
+
+function buildPasswordResetEmail({ name, resetUrl }) {
+  const org = getOrg();
+  const preheader = `Reset your ${org.name} password. This link expires in 1 hour.`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Password reset request</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">We received a request to reset your password.</p>
+
+    <p style="margin:0 0 8px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+    <p style="margin:0 0 24px 0;color:#374151">Click the button below to choose a new password. This link will expire in <strong>1 hour</strong>.</p>
+
+    ${ctaButton('Reset my password', resetUrl)}
+    ${fallbackLink(resetUrl)}
+
+    ${divider()}
+    <p style="margin:0;font-size:13px;color:#94a3b8">
+      If you did not request a password reset, you can safely ignore this email — your password will not be changed.
+      If you're concerned, contact us at <a href="mailto:${org.email}" style="color:#2563eb">${org.email}</a>.
+    </p>`;
+
+  const text = `Hi ${name || 'there'},\n\nWe received a request to reset your ${org.name} password.\n\nReset link (expires in 1 hour):\n${resetUrl}\n\nIf you did not request this, ignore this email.\n\n${org.name} — ${org.email}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+function buildPasswordChangedEmail({ name, when, supportEmail }) {
+  const org = getOrg();
+  const contact = supportEmail || org.email;
+  const whenText = when ? new Date(when).toLocaleString() : 'recently';
+  const preheader = `Your ${org.name} password was changed. If this wasn't you, act immediately.`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Password changed</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">Security notification for your account</p>
+
+    <p style="margin:0 0 8px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+    <p style="margin:0 0 24px 0;color:#374151">
+      Your <strong>${org.name}</strong> account password was successfully changed
+      ${when ? `on <strong>${whenText}</strong>` : 'recently'}.
+    </p>
+
+    ${callout(`<strong>This wasn't you?</strong><br/>
+      If you did not make this change, your account may be compromised. Contact us immediately at
+      <a href="mailto:${contact}" style="color:#991b1b;font-weight:600">${contact}</a>
+      and reset your password right away.`, 'danger')}
+
+    <p style="margin:24px 0 0 0;font-size:13px;color:#94a3b8">
+      If you made this change, no further action is needed. This is an automated security notification.
+    </p>`;
+
+  const text = `Hi ${name || 'there'},\n\nYour ${org.name} password was changed ${when ? 'on ' + whenText : 'recently'}.\n\nIf you did NOT make this change, contact us immediately at ${contact}.\n\n${org.name} — ${org.email}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+function buildLoginNotificationEmail({ name, when, location, userAgent }) {
+  const org = getOrg();
+  const preheader = `New login to your ${org.name} account detected.`;
+  const ff = `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">New login detected</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">A new session was opened on your account</p>
+
+    <p style="margin:0 0 24px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 24px 0">
+      <tr style="background:#f8fafc">
+        <td style="padding:12px 16px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;width:36%;font-family:${ff}">Detail</td>
+        <td style="padding:12px 16px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Value</td>
+      </tr>
+      <tr>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#64748b;font-size:13px;font-weight:600;font-family:${ff}">Time</td>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#1e293b;font-size:14px;font-weight:500;font-family:${ff}">${when}</td>
+      </tr>
+      <tr>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#64748b;font-size:13px;font-weight:600;font-family:${ff}">Location</td>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#1e293b;font-size:14px;font-weight:500;font-family:${ff}">${location}</td>
+      </tr>
+      <tr>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#64748b;font-size:13px;font-weight:600;font-family:${ff}">Device</td>
+        <td style="padding:12px 16px;border-top:1px solid #f1f5f9;color:#1e293b;font-size:14px;font-weight:500;word-break:break-all;font-family:${ff}">${userAgent}</td>
+      </tr>
+    </table>
+
+    ${callout(`<strong>Not you?</strong> If you don't recognise this login, change your password immediately and contact us at <a href="mailto:${org.email}" style="color:#991b1b">${org.email}</a>.`, 'danger')}
+
+    <p style="margin:24px 0 0 0;font-size:13px;color:#94a3b8">If this was you, no action is needed.</p>`;
+
+  const text = `Hi ${name || 'there'},\n\nA new login to your ${org.name} account was detected.\n\nTime: ${when}\nLocation: ${location}\nDevice: ${userAgent}\n\nIf this was NOT you, change your password immediately and contact ${org.email}.\n\n${org.name}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+function buildWelcomeEmail({ name, events }) {
+  const org = getOrg();
+  const ff = `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`;
+  const hasEvents = Array.isArray(events) && events.length > 0;
+  const preheader = `Welcome to ${org.name}! Your account is ready.`;
+
+  const eventsBlock = hasEvents
+    ? `${divider()}
+       <p style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 16px 0">Upcoming events</p>
+       <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+       ${events.map(e => `<tr>
+         <td style="padding:12px 0;border-bottom:1px solid #f1f5f9">
+           <p style="margin:0 0 2px 0;font-size:14px;font-weight:700;color:#1e293b;font-family:${ff}">${e.title}</p>
+           <p style="margin:0;font-size:13px;color:#64748b;font-family:${ff}">${new Date(e.startDate).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</p>
+         </td>
+       </tr>`).join('')}
+       </table>
+       ${ctaButton('Browse all events', org.url + '/events')}`
+    : `<p style="color:#64748b;font-size:14px;margin:0">Keep an eye on our website — new events are added regularly!</p>
+       ${ctaButton('View events', org.url + '/events')}`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Welcome to ${org.name}!</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">Your account has been created</p>
+
+    <p style="margin:0 0 16px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+    <p style="margin:0 0 0 0;color:#374151">
+      Your ${org.name} account is set up and ready to go. Use your account to register for events, manage your bookings, and view your tickets — all in one place.
+    </p>
+
+    ${eventsBlock}
+
+    ${divider()}
+    <p style="margin:0;font-size:13px;color:#94a3b8">We look forward to seeing you at our events!</p>`;
+
+  const eventsText = hasEvents
+    ? `Upcoming events:\n${events.map(e => `- ${e.title} (${new Date(e.startDate).toLocaleDateString()})`).join('\n')}`
+    : 'Keep an eye on our website for upcoming events.';
+  const text = `Welcome to ${org.name}, ${name || 'there'}!\n\nYour account has been created successfully.\n\n${eventsText}\n\n${org.url}\n\n${org.name} — ${org.email}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+function buildAccountActivationEmail({ name, activationUrl }) {
+  const org = getOrg();
+  const preheader = `Activate your ${org.name} account to get started.`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Activate your account</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">One step to access your events and tickets</p>
+
+    <p style="margin:0 0 8px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+    <p style="margin:0 0 24px 0;color:#374151">
+      Your ${org.name} account is ready, but needs to be activated. Click below to set your password and access your registrations, tickets, and more.
+    </p>
+
+    ${ctaButton('Activate my account', activationUrl, { bg: '#059669' })}
+    ${fallbackLink(activationUrl)}
+
+    ${callout('This activation link expires in <strong>24 hours</strong>.', 'warning')}
+
+    <p style="margin:24px 0 0 0;font-size:13px;color:#94a3b8">
+      If you didn't expect this email, you can safely ignore it.
+    </p>`;
+
+  const text = `Hi ${name || 'there'},\n\nActivate your ${org.name} account by visiting the link below:\n\n${activationUrl}\n\nThis link expires in 24 hours.\n\nIf you didn't expect this, ignore this email.\n\n${org.name} — ${org.email}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+function buildAccountClosedEmail({ name, dataDeleted }) {
+  const org = getOrg();
+  const preheader = `Your ${org.name} account has been closed.`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Account closed</p>
+    <p style="color:#64748b;font-size:14px;margin:0 0 32px 0">Confirmation of account closure</p>
+
+    <p style="margin:0 0 8px 0;color:#374151">Hi <strong>${name || 'there'}</strong>,</p>
+    <p style="margin:0 0 16px 0;color:#374151">
+      This email confirms that your <strong>${org.name}</strong> account has been successfully closed.
+    </p>
+    ${dataDeleted
+      ? `<p style="margin:0 0 16px 0;color:#374151">All personal data associated with your account has been permanently deleted as requested.</p>`
+      : `<p style="margin:0 0 16px 0;color:#374151">Your account has been deactivated. If you would also like your personal data permanently deleted, please contact us at <a href="mailto:${org.email}" style="color:#2563eb">${org.email}</a>.</p>`
+    }
+    <p style="margin:0 0 0 0;color:#374151">
+      If you did not request this, please contact us immediately at
+      <a href="mailto:${org.email}" style="color:#2563eb">${org.email}</a>.
+    </p>`;
+
+  const dataNote = dataDeleted
+    ? 'All personal data has been permanently deleted.'
+    : 'Your account has been deactivated. Contact us if you also want your data deleted.';
+  const text = `Hi ${name || 'there'},\n\nYour ${org.name} account has been closed.\n\n${dataNote}\n\nIf you did not request this, contact us immediately at ${org.email}.\n\n${org.name}`;
+  return { text, html: emailWrapper(body, { preheader }) };
+}
+
+module.exports = {
+  sendMail,
+  emailWrapper,
+  ctaButton,
+  fallbackLink,
+  divider,
+  callout,
+  paymentOption,
+  buildPasswordResetEmail,
+  buildPasswordChangedEmail,
+  buildLoginNotificationEmail,
+  buildWelcomeEmail,
+  buildAccountActivationEmail,
+  buildAccountClosedEmail,
+};
\ No newline at end of file
diff --git a/backend/src/utils/encryption.js b/backend/src/utils/encryption.js
new file mode 100644
index 0000000..1bb397a
--- /dev/null
+++ b/backend/src/utils/encryption.js
@@ -0,0 +1,79 @@
+/**
+ * AES-256-GCM encryption helpers for sensitive settings stored in the database.
+ *
+ * Encrypted values are stored with an "enc:" prefix so they can be detected
+ * and decrypted transparently when read back from the cache.
+ *
+ * Key is derived once at startup from JWT_SECRET via scrypt so it never
+ * appears in plain text in the codebase.
+ */
+
+const crypto = require('crypto');
+
+const SENTINEL = 'enc:';
+
+// Derive a stable 32-byte key from JWT_SECRET using scrypt.
+// The fixed salt is fine here — its purpose is to namespace this key
+// so it can't be confused with keys derived for other purposes.
+const ENCRYPTION_KEY = (() => {
+  const secret = process.env.JWT_SECRET || 'default-unsafe-key-CHANGE-IN-PRODUCTION';
+  if (secret === 'default-unsafe-key-CHANGE-IN-PRODUCTION') {
+    console.warn('[encryption] WARNING: JWT_SECRET is not set. Sensitive settings will be encrypted with an insecure fallback key. Set JWT_SECRET in production.');
+  }
+  return crypto.scryptSync(secret, 'hope-events-settings-aes256gcm-v1', 32);
+})();
+
+/**
+ * Encrypt a plaintext string. Returns an "enc:<iv>:<authTag>:<ciphertext>" string.
+ * Returns the original value if it is already encrypted or falsy.
+ * @param {string} plaintext
+ * @returns {string}
+ */
+function encrypt(plaintext) {
+  if (!plaintext) return plaintext;
+  if (typeof plaintext !== 'string') plaintext = String(plaintext);
+  if (plaintext.startsWith(SENTINEL)) return plaintext; // already encrypted
+  const iv = crypto.randomBytes(12); // 96-bit IV for GCM
+  const cipher = crypto.createCipheriv('aes-256-gcm', ENCRYPTION_KEY, iv);
+  const encrypted = Buffer.concat([cipher.update(plaintext, 'utf8'), cipher.final()]);
+  const tag = cipher.getAuthTag();
+  return `${SENTINEL}${iv.toString('hex')}:${tag.toString('hex')}:${encrypted.toString('hex')}`;
+}
+
+/**
+ * Decrypt a value produced by encrypt(). Returns the plaintext.
+ * Returns the original value unchanged if it does not start with "enc:".
+ * @param {string} value
+ * @returns {string}
+ */
+function decrypt(value) {
+  if (!value || typeof value !== 'string') return value;
+  if (!value.startsWith(SENTINEL)) return value; // not encrypted
+  try {
+    const inner = value.slice(SENTINEL.length);
+    const parts = inner.split(':');
+    if (parts.length !== 3) throw new Error('Invalid encrypted value format');
+    const [ivHex, tagHex, cipherHex] = parts;
+    const iv         = Buffer.from(ivHex,    'hex');
+    const tag        = Buffer.from(tagHex,   'hex');
+    const ciphertext = Buffer.from(cipherHex,'hex');
+    const decipher = crypto.createDecipheriv('aes-256-gcm', ENCRYPTION_KEY, iv);
+    decipher.setAuthTag(tag);
+    const decrypted = Buffer.concat([decipher.update(ciphertext), decipher.final()]);
+    return decrypted.toString('utf8');
+  } catch (err) {
+    console.error('[encryption] Failed to decrypt value:', err.message);
+    return ''; // return empty rather than crashing
+  }
+}
+
+/**
+ * Returns true if the value looks like it was produced by encrypt().
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isEncrypted(value) {
+  return typeof value === 'string' && value.startsWith(SENTINEL);
+}
+
+module.exports = { encrypt, decrypt, isEncrypted };
\ No newline at end of file
diff --git a/backend/src/utils/errorUtils.js b/backend/src/utils/errorUtils.js
new file mode 100644
index 0000000..4047090
--- /dev/null
+++ b/backend/src/utils/errorUtils.js
@@ -0,0 +1,43 @@
+// Prisma error codes all match P followed by 4 digits
+const PRISMA_CODE_RE = /^P\d{4}$/;
+
+/**
+ * Returns a client-safe error message.
+ * Prisma errors and connection errors can expose table names, column names,
+ * DB hostnames and ports — replace those with generic messages.
+ * Intentional application errors (thrown with `new Error('...')` in controllers)
+ * are passed through unchanged.
+ */
+function safeErrorMessage(err) {
+  if (!err) return 'An unexpected error occurred.';
+
+  const code = String(err.code || '');
+
+  // Prisma client / query engine errors
+  if (PRISMA_CODE_RE.test(code)) {
+    switch (code) {
+      case 'P2002': return 'A record with that value already exists.';
+      case 'P2025': return 'Record not found.';
+      case 'P2003': return 'Operation failed due to a related record constraint.';
+      case 'P2016': return 'Required record not found.';
+      default:      return 'A database error occurred. Please try again.';
+    }
+  }
+
+  const msg = String(err.message || '');
+
+  // DB connection / network errors leak hostnames and ports
+  if (
+    msg.includes("Can't reach database") ||
+    msg.includes('ECONNREFUSED') ||
+    msg.includes('ETIMEDOUT') ||
+    msg.includes('Connection refused') ||
+    msg.includes('database server')
+  ) {
+    return 'A database connection error occurred. Please try again later.';
+  }
+
+  return msg || 'An unexpected error occurred.';
+}
+
+module.exports = { safeErrorMessage };
\ No newline at end of file
diff --git a/backend/src/utils/notifications.js b/backend/src/utils/notifications.js
new file mode 100644
index 0000000..5239dae
--- /dev/null
+++ b/backend/src/utils/notifications.js
@@ -0,0 +1,984 @@
+const prisma = require('../config/db');
+const { sendMail, emailWrapper, ctaButton, fallbackLink, divider, callout, paymentOption } = require('./email');
+const { computeRegistrationTotalDue } = require('./pricing');
+
+// ─── Formatting helpers ───────────────────────────────────────────────────────
+
+const ff = `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif`;
+
+function fmtAmount(amt) {
+  const n = Number(amt || 0);
+  return `R${n.toFixed(2)}`;
+}
+
+function fmtDate(d) {
+  try { return new Date(d).toLocaleString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }); } catch { return String(d); }
+}
+
+function fmtDateShort(d) {
+  try { return new Date(d).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); } catch { return String(d); }
+}
+
+const { getSettingSync } = require('./settingsCache');
+
+function getOrg() {
+  return {
+    name:  getSettingSync('org_name', process.env.ORG_NAME || 'Hope Events'),
+    email: process.env.EMAIL_FROM || process.env.EMAIL_USER || '',
+    url:   (process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, ''),
+  };
+}
+
+function getRegistrationsInbox() {
+  // Supports comma-separated list; return the first address for single-recipient use
+  const raw = getSettingSync('reg_notification_emails', process.env.REGISTRATIONS_EMAIL || '');
+  return raw.split(',')[0].trim() || '';
+}
+
+function getRegistrationsInboxAll() {
+  // Returns the full comma-separated string for multi-recipient sends
+  return getSettingSync('reg_notification_emails', process.env.REGISTRATIONS_EMAIL || '');
+}
+
+/**
+ * Resolves who should receive registration/payment/daily-summary notices for an event:
+ * the event's configured `notifyRecipients`, or the event creator when none are set.
+ */
+function getEventNotifyEmails(event) {
+  const recipients = Array.isArray(event?.notifyRecipients) ? event.notifyRecipients : [];
+  const emails = recipients.map(u => u?.email).filter(Boolean);
+  if (emails.length) return emails;
+  return event?.createdBy?.email ? [event.createdBy.email] : [];
+}
+
+/**
+ * Builds the deduplicated admin "to" list for an event notification: the global
+ * registrations inbox plus that event's notify recipients (or its creator as fallback).
+ */
+function buildEventNotifyRecipientList(event) {
+  const inbox = getRegistrationsInbox();
+  const seen = new Set();
+  const to = [];
+  if (inbox) { seen.add(inbox); to.push(inbox); }
+  for (const email of getEventNotifyEmails(event)) {
+    if (!seen.has(email)) { seen.add(email); to.push(email); }
+  }
+  return to;
+}
+
+// ─── Data loaders ─────────────────────────────────────────────────────────────
+
+async function loadRegistrationFull(registrationId) {
+  return prisma.registration.findUnique({
+    where: { id: registrationId },
+    include: {
+      registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+      payments: true,
+      user: { select: { id: true, name: true, email: true, phoneNumber: true, isActive: true, notificationPreference: true } },
+      event: { include: { createdBy: { select: { id: true, name: true, email: true } }, notifyRecipients: { select: { id: true, name: true, email: true } } } },
+    },
+  });
+}
+
+async function loadPaymentFull(paymentId) {
+  return prisma.payment.findUnique({
+    where: { id: paymentId },
+    include: {
+      user: { select: { id: true, name: true, email: true, phoneNumber: true, notificationPreference: true } },
+      registration: {
+        include: {
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true,
+          user: { select: { id: true, name: true, email: true, phoneNumber: true, isActive: true, notificationPreference: true } },
+          event: { include: { createdBy: { select: { id: true, name: true, email: true } }, notifyRecipients: { select: { id: true, name: true, email: true } } } },
+        },
+      },
+      event: { include: { createdBy: { select: { id: true, name: true, email: true } }, notifyRecipients: { select: { id: true, name: true, email: true } } } },
+    },
+  });
+}
+
+// ─── Shared building blocks ───────────────────────────────────────────────────
+
+/** Renders the selections summary table. */
+function selectionsTable(registrationOptions) {
+  const rows = (registrationOptions || []).map(ro => {
+    const name = ro.eventOption?.name || 'Option';
+    const qty = ro.quantity || 1;
+    const price = ro.eventOption?.price || 0;
+    return `<tr>
+      <td style="padding:10px 16px 10px 0;font-size:14px;color:#374151;font-family:${ff};border-bottom:1px solid #f1f5f9">${name}</td>
+      <td style="padding:10px 0;font-size:14px;color:#374151;text-align:center;font-family:${ff};border-bottom:1px solid #f1f5f9">×${qty}</td>
+      <td style="padding:10px 0 10px 16px;font-size:14px;color:#374151;text-align:right;font-weight:500;font-family:${ff};border-bottom:1px solid #f1f5f9">${fmtAmount(price * qty)}</td>
+    </tr>`;
+  });
+
+  if (!rows.length) return `<p style="color:#94a3b8;font-size:14px;margin:0">No items</p>`;
+
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 4px 0">
+    <tr style="background:#f8fafc">
+      <th style="padding:10px 16px 10px 0;font-size:12px;font-weight:700;color:#64748b;text-align:left;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Item</th>
+      <th style="padding:10px 0;font-size:12px;font-weight:700;color:#64748b;text-align:center;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Qty</th>
+      <th style="padding:10px 0 10px 16px;font-size:12px;font-weight:700;color:#64748b;text-align:right;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Amount</th>
+    </tr>
+    ${rows.join('')}
+  </table>`;
+}
+
+/** Renders a financial summary line. */
+function financialSummary(totalDue, totalPaid, balance) {
+  const ff2 = ff;
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:16px 0 0 0">
+    <tr>
+      <td style="padding:6px 0;font-size:13px;color:#64748b;font-family:${ff2}">Total due</td>
+      <td style="padding:6px 0;font-size:13px;color:#374151;text-align:right;font-weight:500;font-family:${ff2}">${fmtAmount(totalDue)}</td>
+    </tr>
+    <tr>
+      <td style="padding:6px 0;font-size:13px;color:#64748b;font-family:${ff2}">Amount paid</td>
+      <td style="padding:6px 0;font-size:13px;color:#374151;text-align:right;font-weight:500;font-family:${ff2}">${fmtAmount(totalPaid)}</td>
+    </tr>
+    <tr style="border-top:2px solid #e2e8f0">
+      <td style="padding:10px 0 6px 0;font-size:15px;font-weight:800;color:#${balance <= 0 ? '059669' : '1e293b'};font-family:${ff2}">${balance <= 0 ? 'Fully paid' : 'Balance due'}</td>
+      <td style="padding:10px 0 6px 0;font-size:15px;font-weight:800;color:#${balance <= 0 ? '059669' : '1e293b'};text-align:right;font-family:${ff2}">${fmtAmount(balance)}</td>
+    </tr>
+  </table>`;
+}
+
+/**
+ * Renders the account CTA section at the bottom of user-facing registration emails.
+ * isActive: true → Login prompt; false → Create account prompt.
+ */
+function accountCta(isActive, siteUrl) {
+  if (isActive) {
+    return `${divider()}
+    <p style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px 0;font-family:${ff}">Manage your registration online</p>
+    <p style="font-size:13px;color:#64748b;margin:0 0 16px 0;font-family:${ff}">
+      Log in to your account to view your registration, make payments, and download your tickets.
+    </p>
+    ${ctaButton('Log in to your account', siteUrl + '/login', { bg: '#0f172a' })}`;
+  }
+  return `${divider()}
+  <p style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 6px 0;font-family:${ff}">Create your account</p>
+  <p style="font-size:13px;color:#64748b;margin:0 0 16px 0;font-family:${ff}">
+    Create a free account to manage your registrations, make payments online, and access your tickets — all in one place.
+  </p>
+  ${ctaButton('Create your account', siteUrl + '/register', { bg: '#0f172a' })}`;
+}
+
+/**
+ * Renders the payment options section for registration emails.
+ * @param {{ balance, yocoLink, source, siteUrl, formRequired }}
+ *   source: 'admin' (manual/self-service/at-door) | 'user' (self-register via website)
+ */
+function paymentSection({ balance, yocoLink, source, siteUrl, formRequired, isUserActive }) {
+  if (balance <= 0 && !formRequired) {
+    return callout(
+      `<strong style="font-size:15px">🎟️ You\'re all set!</strong><br/>
+       <span style="font-size:13px">No payment required. Your tickets have been sent in a separate email.</span>`,
+      'success'
+    );
+  }
+
+  if (balance <= 0 && formRequired) {
+    return callout(
+      `<strong>One more step — attendee form required</strong><br/>
+       <span style="font-size:13px">This event requires an attendee information form before tickets can be issued. The form was presented during registration. If you haven't submitted it yet, please contact us.</span>`,
+      'warning'
+    );
+  }
+
+  // Balance due — build payment options
+  const isAdmin = source === 'admin';
+  let optNum = 1;
+  const options = [];
+
+  if (isAdmin && yocoLink) {
+    options.push(paymentOption(
+      optNum++,
+      'Pay online now (quickest)',
+      `<a href="${yocoLink}" style="color:#2563eb;font-weight:600;text-decoration:underline">${yocoLink}</a><br/>
+       <span style="color:#94a3b8;font-style:italic">Already paid? You can safely ignore this option.</span>`
+    ));
+  }
+
+  options.push(paymentOption(
+    optNum++,
+    `Pay via our website`,
+    `Visit <a href="${siteUrl}" style="color:#2563eb">${siteUrl}</a> to pay online.${
+      isUserActive === false
+        ? `<br/><span style="color:#64748b">You'll need to create a free account to pay online.</span>`
+        : isUserActive === true
+        ? `<br/><span style="color:#64748b">Log in to access your registration and pay.</span>`
+        : ''
+    }`
+  ));
+
+  options.push(paymentOption(
+    optNum++,
+    'Pay at the door',
+    'Cash and card accepted at the event entrance. No need to pre-pay — your registration is already confirmed.'
+  ));
+
+  return `<p style="font-size:16px;font-weight:700;color:#0f172a;margin:32px 0 8px 0;font-family:${ff}">How to pay</p>
+  <p style="font-size:13px;color:#64748b;margin:0 0 16px 0;font-family:${ff}">Choose any of the following payment methods:</p>
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0">${options.join('')}</table>
+  <p style="font-size:13px;color:#64748b;margin:16px 0 0 0;font-family:${ff}">Your tickets will be emailed once your payment is confirmed.</p>`;
+}
+
+// ─── Registration confirmation (user self-registered via website) ──────────────
+
+function buildRegistrationConfirmation(reg, { isNew = true } = {}) {
+  const org = getOrg();
+  const eventTitle = reg.event?.title || 'the event';
+  const eventDate = reg.event?.startDate ? fmtDateShort(reg.event.startDate) : '';
+  const totalDue = computeRegistrationTotalDue(reg, new Date());
+  const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const balance = Math.max(totalDue - totalPaid, 0);
+  const isUserActive = reg.user?.isActive;
+
+  const heading = isNew ? 'Registration confirmed!' : 'Registration updated';
+  const subtext = isNew
+    ? `Thank you for registering for <strong>${eventTitle}</strong>.`
+    : `Your registration for <strong>${eventTitle}</strong> has been updated.`;
+  const subject = isNew ? `Registration confirmed – ${eventTitle}` : `Registration updated – ${eventTitle}`;
+  const preheader = isNew
+    ? `You\'re registered for ${eventTitle}${eventDate ? ' on ' + eventDate : ''}!`
+    : `Your registration for ${eventTitle} has been updated.`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">${heading}</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">${isNew ? 'Your spot is reserved' : 'Changes saved'}</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${reg.user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">${subtext}${eventDate ? ` — <strong>${eventDate}</strong>` : ''}</p>
+
+    <p style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 12px 0;font-family:${ff}">Your registration</p>
+    ${selectionsTable(reg.registrationOptions)}
+    ${financialSummary(totalDue, totalPaid, balance)}
+
+    ${paymentSection({ balance, yocoLink: null, source: 'user', siteUrl: org.url, formRequired: false, isUserActive })}
+    ${accountCta(isUserActive, org.url)}`;
+
+  const itemsText = (reg.registrationOptions || []).map(ro => `  • ${ro.eventOption?.name || 'Option'} ×${ro.quantity} — ${fmtAmount((ro.eventOption?.price || 0) * ro.quantity)}`).join('\n');
+  const text = `${heading}\n\nHi ${reg.user?.name || 'there'},\n\n${isNew ? `You are registered for ${eventTitle}` : `Your registration for ${eventTitle} has been updated`}${eventDate ? ' on ' + eventDate : ''}.\n\nYour selections:\n${itemsText || '  —'}\n\nTotal due: ${fmtAmount(totalDue)}\nAmount paid: ${fmtAmount(totalPaid)}\nBalance: ${fmtAmount(balance)}\n\n${balance > 0 ? `Payment options:\n  1. On our website: ${org.url}\n  2. At the door (cash or card)\n\nYour tickets will be sent once payment is confirmed.` : 'No payment required — your tickets have been sent separately.'}\n\n${org.name} — ${org.email}\n${org.url}`;
+
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
+// ─── Registration confirmation (admin / self-service / at-door) ───────────────
+
+function buildAdminInitiatedRegistrationConfirmation(reg, { yocoLink = null, formRequired = false, isNew = true } = {}) {
+  const org = getOrg();
+  const eventTitle = reg.event?.title || 'the event';
+  const eventDate = reg.event?.startDate ? fmtDateShort(reg.event.startDate) : '';
+  const totalDue = computeRegistrationTotalDue(reg, new Date());
+  const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const balance = Math.max(totalDue - totalPaid, 0);
+  const isUserActive = reg.user?.isActive;
+
+  const heading = isNew ? 'Registration confirmed!' : 'Registration updated';
+  const subtext = isNew
+    ? `You have been registered for <strong>${eventTitle}</strong>.`
+    : `Your registration for <strong>${eventTitle}</strong> has been updated.`;
+  const subject = isNew ? `Registration confirmed – ${eventTitle}` : `Registration updated – ${eventTitle}`;
+  const preheader = isNew
+    ? `You\'re registered for ${eventTitle}${eventDate ? ' on ' + eventDate : ''}!`
+    : `Your registration for ${eventTitle} has been updated.`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">${heading}</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">${isNew ? 'Your spot is reserved' : 'Changes saved'}</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${reg.user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">${subtext}${eventDate ? ` The event takes place on <strong>${eventDate}</strong>.` : ''}</p>
+
+    <p style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 12px 0;font-family:${ff}">Your registration</p>
+    ${selectionsTable(reg.registrationOptions)}
+    ${financialSummary(totalDue, totalPaid, balance)}
+
+    ${paymentSection({ balance, yocoLink, source: 'admin', siteUrl: org.url, formRequired, isUserActive })}
+    ${accountCta(isUserActive, org.url)}`;
+
+  const itemsText = (reg.registrationOptions || []).map(ro => `  • ${ro.eventOption?.name || 'Option'} ×${ro.quantity} — ${fmtAmount((ro.eventOption?.price || 0) * ro.quantity)}`).join('\n');
+  const payText = balance > 0
+    ? `Payment options:\n${yocoLink ? `  1. Pay online (Yoco): ${yocoLink}\n     (Already paid? Ignore this option)\n` : ''}  ${yocoLink ? '2' : '1'}. On our website: ${org.url}\n  ${yocoLink ? '3' : '2'}. At the door (cash or card)\n\nYour tickets will be sent once payment is confirmed.`
+    : formRequired
+    ? 'An attendee form is required before your tickets are issued. Please complete it at the registration desk.'
+    : 'No payment required — your tickets have been sent in a separate email.';
+  const text = `${heading}\n\nHi ${reg.user?.name || 'there'},\n\n${isNew ? `You have been registered for ${eventTitle}` : `Your registration for ${eventTitle} has been updated`}${eventDate ? ' on ' + eventDate : ''}.\n\nYour selections:\n${itemsText || '  —'}\n\nTotal due: ${fmtAmount(totalDue)}\nAmount paid: ${fmtAmount(totalPaid)}\nBalance: ${fmtAmount(balance)}\n\n${payText}\n\n${org.name} — ${org.email}\n${org.url}`;
+
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
+// ─── Admin notification (internal) ───────────────────────────────────────────
+
+function buildRegistrationAdminNotice(reg, { isNew = true, isUpdated = false } = {}) {
+  const org = getOrg();
+  const eventTitle = reg.event?.title || 'Event';
+  const totalDue = computeRegistrationTotalDue(reg, new Date());
+  const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const balance = Math.max(totalDue - totalPaid, 0);
+  const verb = isUpdated ? 'updated' : (isNew ? 'created' : 'modified');
+  const subject = isUpdated
+    ? `Registration updated: ${eventTitle} — ${reg.user?.name || 'Unknown'}`
+    : `New registration: ${eventTitle} — ${reg.user?.name || 'Unknown'}`;
+
+  const itemRows = (reg.registrationOptions || []).map(ro =>
+    `<tr>
+      <td style="padding:8px 12px;font-size:13px;color:#374151;font-family:${ff};border-bottom:1px solid #f1f5f9">${ro.eventOption?.name || 'Option'}</td>
+      <td style="padding:8px 12px;font-size:13px;color:#374151;text-align:center;font-family:${ff};border-bottom:1px solid #f1f5f9">×${ro.quantity}</td>
+      <td style="padding:8px 12px;font-size:13px;color:#374151;text-align:right;font-family:${ff};border-bottom:1px solid #f1f5f9">${fmtAmount((ro.eventOption?.price || 0) * ro.quantity)}</td>
+    </tr>`).join('');
+
+  const body = `
+    <p style="font-size:20px;font-weight:800;color:#0f172a;margin:0 0 4px 0">Registration ${verb}</p>
+    <p style="font-size:13px;color:#64748b;margin:0 0 28px 0">${org.name} — internal notification</p>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 24px 0">
+      <tr style="background:#f8fafc">
+        <td colspan="2" style="padding:12px 16px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Registrant details</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;width:30%;font-family:${ff};border-top:1px solid #f1f5f9">Name</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${reg.user?.name || '—'}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Email</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${reg.user?.email || '—'}</td>
+      </tr>
+      ${reg.user?.phoneNumber ? `<tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Phone</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${reg.user.phoneNumber}</td>
+      </tr>` : ''}
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Event</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${eventTitle}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Status</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${reg.status || 'pending'}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Reg ID</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-family:${ff};border-top:1px solid #f1f5f9;font-size:12px">${reg.id}</td>
+      </tr>
+    </table>
+
+    ${itemRows ? `<p style="font-size:14px;font-weight:700;color:#0f172a;margin:0 0 8px 0;font-family:${ff}">Items</p>
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 16px 0">
+      <tr style="background:#f8fafc">
+        <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:left;font-family:${ff}">Option</th>
+        <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:center;font-family:${ff}">Qty</th>
+        <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:right;font-family:${ff}">Amount</th>
+      </tr>${itemRows}
+    </table>` : ''}
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:16px 0 0 0">
+      <tr>
+        <td style="font-size:13px;color:#64748b;padding:4px 0;font-family:${ff}">Total due</td>
+        <td style="font-size:13px;color:#374151;text-align:right;font-weight:500;padding:4px 0;font-family:${ff}">${fmtAmount(totalDue)}</td>
+      </tr>
+      <tr>
+        <td style="font-size:13px;color:#64748b;padding:4px 0;font-family:${ff}">Paid</td>
+        <td style="font-size:13px;color:#374151;text-align:right;font-weight:500;padding:4px 0;font-family:${ff}">${fmtAmount(totalPaid)}</td>
+      </tr>
+      <tr>
+        <td style="font-size:14px;font-weight:700;color:#0f172a;padding:8px 0 0 0;border-top:1px solid #e2e8f0;font-family:${ff}">Balance</td>
+        <td style="font-size:14px;font-weight:700;color:#${balance <= 0 ? '059669' : '0f172a'};text-align:right;padding:8px 0 0 0;border-top:1px solid #e2e8f0;font-family:${ff}">${fmtAmount(balance)}</td>
+      </tr>
+    </table>`;
+
+  const to = buildEventNotifyRecipientList(reg.event);
+  const text = `Registration ${verb}\n\nEvent: ${eventTitle}\nName: ${reg.user?.name || '—'}\nEmail: ${reg.user?.email || '—'}\nStatus: ${reg.status || 'pending'}\nTotal due: ${fmtAmount(totalDue)} | Paid: ${fmtAmount(totalPaid)} | Balance: ${fmtAmount(balance)}\nReg ID: ${reg.id}`;
+  return { to, subject, text, html: emailWrapper(body) };
+}
+
+// ─── Payment receipt ──────────────────────────────────────────────────────────
+
+function buildPaymentReceipt(payment) {
+  const org = getOrg();
+  const isReg = !!payment.registrationId && payment.registration;
+  const eventTitle = isReg
+    ? (payment.registration?.event?.title || 'the event')
+    : (payment.event?.title || 'the event');
+
+  if (isReg) {
+    const reg = payment.registration;
+    const totalDue = computeRegistrationTotalDue(reg, payment.createdAt || new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    const balance = Math.max(totalDue - totalPaid, 0);
+    const isUserActive = reg.user?.isActive;
+    const subject = `Payment received – ${eventTitle}`;
+    const preheader = `We received your payment of ${fmtAmount(payment.amount)} for ${eventTitle}.`;
+
+    const historyRows = (reg.payments || [])
+      .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
+      .map(p => `<tr>
+        <td style="padding:8px 12px;font-size:13px;color:#374151;font-family:${ff};border-bottom:1px solid #f1f5f9">${fmtDate(p.createdAt)}</td>
+        <td style="padding:8px 12px;font-size:13px;color:#374151;font-family:${ff};border-bottom:1px solid #f1f5f9">${p.method || '—'}</td>
+        <td style="padding:8px 12px;font-size:13px;color:#374151;text-align:right;font-weight:600;font-family:${ff};border-bottom:1px solid #f1f5f9">${fmtAmount(p.amount)}</td>
+      </tr>`).join('');
+
+    const body = `
+      <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Payment received</p>
+      <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">Thank you — we've got your payment</p>
+
+      <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${payment.user?.name || 'there'}</strong>,</p>
+      <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">
+        We received your payment of <strong>${fmtAmount(payment.amount)}</strong> for <strong>${eventTitle}</strong>.
+      </p>
+
+      ${callout(`<strong style="font-size:15px">${fmtAmount(payment.amount)} received</strong><br/>
+        <span style="font-size:13px">Payment method: ${payment.method || '—'} &bull; Date: ${fmtDate(payment.createdAt)}</span>`,
+        'success')}
+
+      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:24px 0">
+        <tr>
+          <td style="font-size:13px;color:#64748b;padding:5px 0;font-family:${ff}">Total due</td>
+          <td style="font-size:13px;text-align:right;font-weight:500;color:#374151;padding:5px 0;font-family:${ff}">${fmtAmount(totalDue)}</td>
+        </tr>
+        <tr>
+          <td style="font-size:13px;color:#64748b;padding:5px 0;font-family:${ff}">Total paid</td>
+          <td style="font-size:13px;text-align:right;font-weight:500;color:#374151;padding:5px 0;font-family:${ff}">${fmtAmount(totalPaid)}</td>
+        </tr>
+        <tr>
+          <td style="font-size:14px;font-weight:700;color:#0f172a;padding:10px 0 5px 0;border-top:1px solid #e2e8f0;font-family:${ff}">${balance <= 0 ? 'Fully paid ✓' : 'Balance remaining'}</td>
+          <td style="font-size:14px;font-weight:700;color:#${balance <= 0 ? '059669' : '0f172a'};text-align:right;padding:10px 0 5px 0;border-top:1px solid #e2e8f0;font-family:${ff}">${fmtAmount(balance)}</td>
+        </tr>
+      </table>
+
+      ${historyRows ? `<p style="font-size:14px;font-weight:700;color:#0f172a;margin:24px 0 8px 0;font-family:${ff}">Payment history</p>
+      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 24px 0">
+        <tr style="background:#f8fafc">
+          <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:left;font-family:${ff}">Date</th>
+          <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:left;font-family:${ff}">Method</th>
+          <th style="padding:10px 12px;font-size:12px;color:#64748b;text-align:right;font-family:${ff}">Amount</th>
+        </tr>${historyRows}
+      </table>` : ''}
+
+      ${balance <= 0
+        ? callout('<strong>You\'re fully paid!</strong> Your tickets have been emailed to you separately.', 'success')
+        : ''}
+
+      ${accountCta(isUserActive, org.url)}`;
+
+    const text = `Payment received\n\nHi ${payment.user?.name || 'there'},\n\nWe received your payment of ${fmtAmount(payment.amount)} for ${eventTitle}.\n\nTotal due: ${fmtAmount(totalDue)}\nTotal paid: ${fmtAmount(totalPaid)}\nBalance: ${fmtAmount(balance)}\n\nThank you!\n\n${org.name} — ${org.email}`;
+    return { subject, text, html: emailWrapper(body, { preheader }) };
+  }
+
+  // Donation receipt
+  const subject = `Donation received – ${eventTitle}`;
+  const preheader = `Thank you for your donation of ${fmtAmount(payment.amount)} to ${eventTitle}.`;
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Thank you for your donation!</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">Your generosity makes a difference</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${payment.user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">
+      We received your donation of <strong>${fmtAmount(payment.amount)}</strong> to <strong>${eventTitle}</strong>. Your support means the world to us.
+    </p>
+
+    ${callout(`<strong style="font-size:15px">${fmtAmount(payment.amount)} donated</strong><br/>
+      <span style="font-size:13px">Method: ${payment.method || '—'} &bull; Date: ${fmtDate(payment.createdAt)}</span>`,
+      'success')}
+
+    <p style="margin:24px 0 0 0;font-size:13px;color:#94a3b8;font-family:${ff}">We appreciate your generous support. Thank you!</p>`;
+
+  const text = `Thank you for your donation!\n\nHi ${payment.user?.name || 'there'},\n\nWe received your donation of ${fmtAmount(payment.amount)} to ${eventTitle}.\n\nMethod: ${payment.method || '—'}\nDate: ${fmtDate(payment.createdAt)}\n\nThank you!\n\n${org.name} — ${org.email}`;
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
+// ─── Donation applied to a registration ────────────────────────────────────────
+//
+// Distinct from buildPaymentReceipt: this is sent to the REGISTRANT when staff apply
+// someone else's donation to their registration — they didn't pay anything themselves,
+// so "payment received" wording would be wrong. Kept anonymous (no donor name) by design.
+
+function buildDonationAppliedToRegistrant(payment) {
+  const org = getOrg();
+  const reg = payment.registration;
+  const eventTitle = reg?.event?.title || 'the event';
+  const totalDue = computeRegistrationTotalDue(reg, payment.createdAt || new Date());
+  const totalPaid = (reg?.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const balance = Math.max(totalDue - totalPaid, 0);
+  const isUserActive = reg?.user?.isActive;
+  const subject = `A donation was applied to your registration – ${eventTitle}`;
+  const preheader = `A donation of ${fmtAmount(payment.amount)} was applied to your registration for ${eventTitle}.`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">A donation was applied to your registration</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">Good news about your balance</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${reg?.user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">
+      A donation of <strong>${fmtAmount(payment.amount)}</strong> was applied to your registration for <strong>${eventTitle}</strong> by our team.
+    </p>
+
+    ${callout(`<strong style="font-size:15px">${fmtAmount(payment.amount)} applied</strong><br/>
+      <span style="font-size:13px">Date: ${fmtDate(payment.createdAt)}</span>`,
+      'success')}
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:24px 0">
+      <tr>
+        <td style="font-size:13px;color:#64748b;padding:5px 0;font-family:${ff}">Total due</td>
+        <td style="font-size:13px;text-align:right;font-weight:500;color:#374151;padding:5px 0;font-family:${ff}">${fmtAmount(totalDue)}</td>
+      </tr>
+      <tr>
+        <td style="font-size:13px;color:#64748b;padding:5px 0;font-family:${ff}">Total paid</td>
+        <td style="font-size:13px;text-align:right;font-weight:500;color:#374151;padding:5px 0;font-family:${ff}">${fmtAmount(totalPaid)}</td>
+      </tr>
+      <tr>
+        <td style="font-size:14px;font-weight:700;color:#0f172a;padding:10px 0 5px 0;border-top:1px solid #e2e8f0;font-family:${ff}">${balance <= 0 ? 'Fully paid ✓' : 'Balance remaining'}</td>
+        <td style="font-size:14px;font-weight:700;color:#${balance <= 0 ? '059669' : '0f172a'};text-align:right;padding:10px 0 5px 0;border-top:1px solid #e2e8f0;font-family:${ff}">${fmtAmount(balance)}</td>
+      </tr>
+    </table>
+
+    ${balance <= 0
+      ? callout('<strong>You\'re fully paid!</strong> Your tickets have been emailed to you separately.', 'success')
+      : ''}
+
+    ${accountCta(isUserActive, org.url)}`;
+
+  const text = `A donation was applied to your registration\n\nHi ${reg?.user?.name || 'there'},\n\nA donation of ${fmtAmount(payment.amount)} was applied to your registration for ${eventTitle} by our team.\n\nTotal due: ${fmtAmount(totalDue)}\nTotal paid: ${fmtAmount(totalPaid)}\nBalance: ${fmtAmount(balance)}\n\n${org.name} — ${org.email}`;
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
+// ─── Payment admin notification ───────────────────────────────────────────────
+
+function buildPaymentAdminNotice(payment) {
+  const isReg = !!payment.registrationId && payment.registration;
+  const eventTitle = isReg ? (payment.registration?.event?.title || 'Event') : (payment.event?.title || 'Event');
+  const payerName = payment.user?.name || '—';
+  const payerEmail = payment.user?.email || '—';
+  const subject = `Payment recorded: ${fmtAmount(payment.amount)} — ${payerName} (${eventTitle})`;
+  const type = isReg ? 'Registration payment' : 'Donation';
+
+  const body = `
+    <p style="font-size:20px;font-weight:800;color:#0f172a;margin:0 0 4px 0">Payment recorded</p>
+    <p style="font-size:13px;color:#64748b;margin:0 0 28px 0">Internal notification</p>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 24px 0">
+      <tr style="background:#f8fafc">
+        <td colspan="2" style="padding:12px 16px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;font-family:${ff}">Payment details</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;width:30%;font-family:${ff};border-top:1px solid #f1f5f9">Amount</td>
+        <td style="padding:10px 16px;font-size:15px;color:#059669;font-weight:800;font-family:${ff};border-top:1px solid #f1f5f9">${fmtAmount(payment.amount)}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Type</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${type}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Payer</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${payerName} &lt;${payerEmail}&gt;</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Event</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${eventTitle}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Method</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${payment.method || '—'}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Date</td>
+        <td style="padding:10px 16px;font-size:14px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${fmtDate(payment.createdAt)}</td>
+      </tr>
+      <tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">Payment ID</td>
+        <td style="padding:10px 16px;font-size:12px;color:#94a3b8;font-family:${ff};border-top:1px solid #f1f5f9">${payment.id}</td>
+      </tr>
+      ${payment.externalId ? `<tr>
+        <td style="padding:10px 16px;font-size:13px;color:#64748b;font-weight:600;font-family:${ff};border-top:1px solid #f1f5f9">External ID</td>
+        <td style="padding:10px 16px;font-size:12px;color:#94a3b8;font-family:${ff};border-top:1px solid #f1f5f9">${payment.externalId}</td>
+      </tr>` : ''}
+    </table>`;
+
+  const event = isReg ? payment.registration?.event : payment.event;
+  const to = buildEventNotifyRecipientList(event);
+  const text = `Payment recorded\n\nAmount: ${fmtAmount(payment.amount)}\nType: ${type}\nPayer: ${payerName} <${payerEmail}>\nEvent: ${eventTitle}\nMethod: ${payment.method || '—'}\nDate: ${fmtDate(payment.createdAt)}\nID: ${payment.id}`;
+  return { to, subject, text, html: emailWrapper(body) };
+}
+
+// ─── Refund email ─────────────────────────────────────────────────────────────
+
+function buildRefundEmail(payment) {
+  const org = getOrg();
+  const user = payment.user;
+  const amt = Math.abs(payment.amount || 0);
+  const eventTitle = payment.registration?.event?.title || payment.event?.title || 'the event';
+  const subject = `Refund processed – ${fmtAmount(amt)} for ${eventTitle}`;
+  const preheader = `Your refund of ${fmtAmount(amt)} for ${eventTitle} has been processed.`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">Refund processed</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">Your refund is on its way</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">
+      A refund of <strong>${fmtAmount(amt)}</strong> has been processed for <strong>${eventTitle}</strong>.
+      ${payment.status ? `<br/>Reason: ${payment.status}` : ''}
+    </p>
+
+    ${callout(`<strong style="font-size:15px">${fmtAmount(amt)} refunded</strong><br/>
+      <span style="font-size:13px">Method: ${payment.method || 'original payment method'} &bull; Date: ${fmtDate(payment.createdAt)}</span>`,
+      'info')}
+
+    <p style="margin:24px 0 0 0;font-size:14px;color:#374151;font-family:${ff}">
+      Refunds may take a few business days to appear depending on your bank and payment method.
+      If you have any questions, contact us at <a href="mailto:${org.email}" style="color:#2563eb">${org.email}</a>.
+    </p>`;
+
+  const text = `Refund processed\n\nHi ${user?.name || 'there'},\n\nA refund of ${fmtAmount(amt)} for ${eventTitle} has been processed.\n\nMethod: ${payment.method || 'original method'}\nDate: ${fmtDate(payment.createdAt)}\n\n${org.name} — ${org.email}`;
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
+// ─── Daily event summary ──────────────────────────────────────────────────────
+
+function buildDailySummary(ev, registrations, payments, now) {
+  const org = getOrg();
+  const subject = `Daily summary: ${ev.title} — ${new Date(now).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}`;
+
+  const regRows = registrations.map(r => {
+    const totalDue = computeRegistrationTotalDue(r, now);
+    const totalPaid = (r.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    const balance = Math.max(totalDue - totalPaid, 0);
+    return { name: r.user?.name || '?', email: r.user?.email || '', status: r.status, totalDue, totalPaid, balance };
+  });
+
+  const payRows = payments.map(p => ({
+    date: fmtDate(p.createdAt),
+    amount: p.amount,
+    method: p.method || '—',
+    isDonation: p.isDonation || !p.registrationId,
+    payerName: p.registration?.user?.name || p.user?.name || '?',
+    payerEmail: p.user?.email || p.registration?.user?.email || '',
+  }));
+
+  const totalRegistrations = regRows.length;
+  const totalRevenue = payRows.reduce((s, p) => s + (p.amount || 0), 0);
+  const paidCount = regRows.filter(r => r.status === 'paid').length;
+  const pendingCount = regRows.filter(r => r.status === 'pending' || r.status === 'partial_paid').length;
+
+  const statsRow = (label, value, color = '#1e293b') =>
+    `<td style="text-align:center;padding:16px;border-right:1px solid #f1f5f9">
+      <div style="font-size:24px;font-weight:800;color:${color};font-family:${ff}">${value}</div>
+      <div style="font-size:12px;color:#64748b;margin-top:4px;font-family:${ff}">${label}</div>
+    </td>`;
+
+  const regTableHtml = regRows.length
+    ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;font-size:13px">
+        <tr style="background:#f8fafc">
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Name</th>
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Email</th>
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Status</th>
+          <th style="padding:10px 12px;text-align:right;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Total</th>
+          <th style="padding:10px 12px;text-align:right;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Paid</th>
+          <th style="padding:10px 12px;text-align:right;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Balance</th>
+        </tr>
+        ${regRows.map((r, i) => `<tr style="background:${i % 2 === 0 ? '#ffffff' : '#f8fafc'}">
+          <td style="padding:10px 12px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${r.name}</td>
+          <td style="padding:10px 12px;color:#64748b;font-family:${ff};border-top:1px solid #f1f5f9;font-size:12px">${r.email}</td>
+          <td style="padding:10px 12px;border-top:1px solid #f1f5f9">
+            <span style="background:${r.status === 'paid' ? '#dcfce7' : r.status === 'partial_paid' ? '#fef9c3' : '#f1f5f9'};color:${r.status === 'paid' ? '#166534' : r.status === 'partial_paid' ? '#854d0e' : '#475569'};padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;font-family:${ff}">${r.status}</span>
+          </td>
+          <td style="padding:10px 12px;text-align:right;color:#374151;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${fmtAmount(r.totalDue)}</td>
+          <td style="padding:10px 12px;text-align:right;color:#374151;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${fmtAmount(r.totalPaid)}</td>
+          <td style="padding:10px 12px;text-align:right;color:${r.balance > 0 ? '#b45309' : '#059669'};font-weight:700;font-family:${ff};border-top:1px solid #f1f5f9">${fmtAmount(r.balance)}</td>
+        </tr>`).join('')}
+      </table>`
+    : `<p style="color:#94a3b8;font-size:14px;margin:0;font-family:${ff}">No registrations yet.</p>`;
+
+  const payTableHtml = payRows.length
+    ? `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;font-size:13px">
+        <tr style="background:#f8fafc">
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Date</th>
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Payer</th>
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Type</th>
+          <th style="padding:10px 12px;text-align:left;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Method</th>
+          <th style="padding:10px 12px;text-align:right;color:#64748b;font-weight:700;font-family:${ff};font-size:12px;text-transform:uppercase;letter-spacing:0.4px">Amount</th>
+        </tr>
+        ${payRows.map((p, i) => `<tr style="background:${i % 2 === 0 ? '#ffffff' : '#f8fafc'}">
+          <td style="padding:10px 12px;color:#64748b;font-family:${ff};border-top:1px solid #f1f5f9;font-size:12px">${p.date}</td>
+          <td style="padding:10px 12px;color:#1e293b;font-weight:500;font-family:${ff};border-top:1px solid #f1f5f9">${p.payerName}${p.payerEmail ? `<br/><span style="font-size:11px;color:#94a3b8">${p.payerEmail}</span>` : ''}</td>
+          <td style="padding:10px 12px;border-top:1px solid #f1f5f9">
+            <span style="background:${p.isDonation ? '#eff6ff' : '#f0fdf4'};color:${p.isDonation ? '#1e40af' : '#166534'};padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;font-family:${ff}">${p.isDonation ? 'Donation' : 'Registration'}</span>
+          </td>
+          <td style="padding:10px 12px;color:#64748b;font-family:${ff};border-top:1px solid #f1f5f9">${p.method}</td>
+          <td style="padding:10px 12px;text-align:right;color:#059669;font-weight:700;font-family:${ff};border-top:1px solid #f1f5f9">${fmtAmount(p.amount)}</td>
+        </tr>`).join('')}
+      </table>`
+    : `<p style="color:#94a3b8;font-size:14px;margin:0;font-family:${ff}">No payments recorded yet.</p>`;
+
+  const body = `
+    <p style="font-size:20px;font-weight:800;color:#0f172a;margin:0 0 4px 0;font-family:${ff}">Daily Summary</p>
+    <p style="font-size:13px;color:#64748b;margin:0 0 4px 0;font-family:${ff}">${new Date(now).toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</p>
+    <p style="font-size:16px;font-weight:700;color:#1e293b;margin:0 0 24px 0;font-family:${ff}">${ev.title}</p>
+
+    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;margin:0 0 32px 0;text-align:center">
+      <tr>
+        ${statsRow('Total registrations', totalRegistrations)}
+        ${statsRow('Confirmed paid', paidCount, '#059669')}
+        ${statsRow('Awaiting payment', pendingCount, '#d97706')}
+        <td style="text-align:center;padding:16px">
+          <div style="font-size:24px;font-weight:800;color:#2563eb;font-family:${ff}">${fmtAmount(totalRevenue)}</div>
+          <div style="font-size:12px;color:#64748b;margin-top:4px;font-family:${ff}">Total collected</div>
+        </td>
+      </tr>
+    </table>
+
+    ${divider()}
+    <p style="font-size:16px;font-weight:700;color:#0f172a;margin:0 0 16px 0;font-family:${ff}">Registrations</p>
+    ${regTableHtml}
+
+    <p style="font-size:16px;font-weight:700;color:#0f172a;margin:32px 0 16px 0;font-family:${ff}">Payments &amp; Donations</p>
+    ${payTableHtml}
+
+    <p style="font-size:12px;color:#94a3b8;margin:24px 0 0 0;font-family:${ff}">
+      Event starts: ${fmtDate(ev.startDate)} &bull; Event ends: ${fmtDate(ev.endDate)}
+    </p>`;
+
+  const text = [
+    `Daily Summary — ${ev.title}`,
+    new Date(now).toLocaleDateString(),
+    '',
+    `Registrations: ${totalRegistrations} | Paid: ${paidCount} | Pending: ${pendingCount} | Revenue: ${fmtAmount(totalRevenue)}`,
+    '',
+    'Registrations:',
+    ...(regRows.length ? regRows.map(r => `  ${r.name} <${r.email}> — ${r.status} — due: ${fmtAmount(r.totalDue)} paid: ${fmtAmount(r.totalPaid)} balance: ${fmtAmount(r.balance)}`) : ['  (none)']),
+    '',
+    'Payments:',
+    ...(payRows.length ? payRows.map(p => `  ${p.date} — ${fmtAmount(p.amount)} via ${p.method} — ${p.isDonation ? 'Donation' : 'Registration'} — ${p.payerName}`) : ['  (none)']),
+  ].join('\n');
+
+  return { subject, text, html: emailWrapper(body) };
+}
+
+// ─── Send functions ───────────────────────────────────────────────────────────
+
+async function sendRegistrationEmails(registrationId) {
+  try {
+    const reg = await loadRegistrationFull(registrationId);
+    if (!reg) return;
+    const { shouldEmail, waText } = require('./notify');
+    const { buildWARegistration } = require('./waMessages');
+    const { computeRegistrationTotalDue } = require('./pricing');
+
+    const sends = [];
+    const totalDue  = computeRegistrationTotalDue(reg, new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+
+    // Email: only for real addresses (skip guest.local placeholders)
+    if (reg.user?.email && !reg.user.email.endsWith('@guest.local')) {
+      const msg = buildRegistrationConfirmation(reg, { isNew: true });
+      if (shouldEmail(reg.user)) sends.push(sendMail({ to: reg.user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    // WhatsApp: always attempt — waText checks canWhatsApp (preference + valid phone) internally
+    sends.push(waText(reg.user, buildWARegistration(reg, { isNew: true, totalDue, totalPaid, balance: Math.max(totalDue - totalPaid, 0) })));
+
+    const adminMsg = buildRegistrationAdminNotice(reg, { isNew: true });
+    if (adminMsg.to && adminMsg.to.length) {
+      sends.push(sendMail({ to: adminMsg.to.join(','), subject: adminMsg.subject, html: adminMsg.html, text: adminMsg.text }));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send registration emails:', e);
+  }
+}
+
+async function sendRegistrationUpdatedEmails(registrationId) {
+  try {
+    const reg = await loadRegistrationFull(registrationId);
+    if (!reg) return;
+    const { shouldEmail, waText } = require('./notify');
+    const { buildWARegistration } = require('./waMessages');
+    const { computeRegistrationTotalDue } = require('./pricing');
+
+    const sends = [];
+    const totalDue  = computeRegistrationTotalDue(reg, new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    if (reg.user?.email && !reg.user.email.endsWith('@guest.local')) {
+      const msg = buildRegistrationConfirmation(reg, { isNew: false });
+      if (shouldEmail(reg.user)) sends.push(sendMail({ to: reg.user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    sends.push(waText(reg.user, buildWARegistration(reg, { isNew: false, totalDue, totalPaid, balance: Math.max(totalDue - totalPaid, 0) })));
+    const adminMsg = buildRegistrationAdminNotice(reg, { isNew: false, isUpdated: true });
+    if (adminMsg.to && adminMsg.to.length) {
+      sends.push(sendMail({ to: adminMsg.to.join(','), subject: adminMsg.subject, html: adminMsg.html, text: adminMsg.text }));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send registration updated emails:', e);
+  }
+}
+
+async function sendSelfServiceRegistrationEmails(registrationId, { paymentUrl = null, formRequired = false, isNew = true } = {}) {
+  try {
+    const reg = await loadRegistrationFull(registrationId);
+    if (!reg) return;
+    const { shouldEmail, waText } = require('./notify');
+    const { buildWARegistration } = require('./waMessages');
+    const { computeRegistrationTotalDue } = require('./pricing');
+
+    const sends = [];
+    const totalDue  = computeRegistrationTotalDue(reg, new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    if (reg.user?.email && !reg.user.email.endsWith('@guest.local')) {
+      const msg = buildAdminInitiatedRegistrationConfirmation(reg, { yocoLink: paymentUrl, formRequired, isNew });
+      if (shouldEmail(reg.user)) sends.push(sendMail({ to: reg.user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    sends.push(waText(reg.user, buildWARegistration(reg, { isNew, totalDue, totalPaid, balance: Math.max(totalDue - totalPaid, 0) })));
+    const adminMsg = buildRegistrationAdminNotice(reg, { isNew, isUpdated: !isNew });
+    if (adminMsg.to && adminMsg.to.length) {
+      sends.push(sendMail({ to: adminMsg.to.join(','), subject: adminMsg.subject, html: adminMsg.html, text: adminMsg.text }));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send self-service registration emails:', e);
+  }
+}
+
+async function sendPaymentEmails(paymentId) {
+  try {
+    const payment = await loadPaymentFull(paymentId);
+    if (!payment) return;
+    const user = payment.registration?.user || payment.user;
+    const { shouldEmail, waText, waTextAny } = require('./notify');
+    const { buildWAPayment } = require('./waMessages');
+
+    const sends = [];
+    const hasValidEmail = user?.email && !user.email.endsWith('@guest.local') && !user.email.endsWith('@deleted.invalid');
+    if (hasValidEmail) {
+      const msg = buildPaymentReceipt(payment);
+      if (shouldEmail(user)) sends.push(sendMail({ to: user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    // WhatsApp: respect preference when email is available; use as unconditional fallback when it isn't
+    if (hasValidEmail) {
+      sends.push(waText(user, buildWAPayment(payment)));
+    } else {
+      sends.push(waTextAny(user, buildWAPayment(payment)));
+    }
+    const hasEvent = !!(payment.registration?.eventId || payment.eventId);
+    if (hasEvent) {
+      const adminMsg = buildPaymentAdminNotice(payment);
+      if (adminMsg.to && adminMsg.to.length) {
+        sends.push(sendMail({ to: adminMsg.to.join(','), subject: adminMsg.subject, html: adminMsg.html, text: adminMsg.text }));
+      }
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send payment emails:', e);
+  }
+}
+
+async function sendRefundEmail(refundPaymentId) {
+  try {
+    const payment = await loadPaymentFull(refundPaymentId);
+    if (!payment) return;
+
+    const user = payment.user;
+    if (!user?.email || user.email.endsWith('@guest.local')) return;
+
+    const msg = buildRefundEmail(payment);
+    const sends = [sendMail({ to: user.email, subject: msg.subject, html: msg.html, text: msg.text })];
+
+    const adminMsg = buildPaymentAdminNotice(payment);
+    if (adminMsg.to && adminMsg.to.length) {
+      sends.push(sendMail({ to: adminMsg.to.join(','), subject: `Refund: ${adminMsg.subject}`, html: adminMsg.html, text: adminMsg.text }));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send refund email:', e);
+  }
+}
+
+// Sent when staff apply a donation to someone's registration. Only the registrant is
+// notified (anonymously, per design) — the donor already received their donation-received
+// notification when the donation was originally made, so they are deliberately not emailed
+// again here, and any leftover/unassigned remainder from a partial allocation is silent too.
+async function sendDonationAssignmentEmails(paymentId) {
+  try {
+    const payment = await loadPaymentFull(paymentId);
+    if (!payment || !payment.registration) return;
+    const user = payment.registration.user;
+    const { shouldEmail, waText, waTextAny } = require('./notify');
+    const { buildWADonationAppliedToRegistrant } = require('./waMessages');
+
+    const sends = [];
+    const hasValidEmail = user?.email && !user.email.endsWith('@guest.local') && !user.email.endsWith('@deleted.invalid');
+    if (hasValidEmail) {
+      const msg = buildDonationAppliedToRegistrant(payment);
+      if (shouldEmail(user)) sends.push(sendMail({ to: user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    if (hasValidEmail) {
+      sends.push(waText(user, buildWADonationAppliedToRegistrant(payment)));
+    } else {
+      sends.push(waTextAny(user, buildWADonationAppliedToRegistrant(payment)));
+    }
+    const adminMsg = buildPaymentAdminNotice(payment);
+    if (adminMsg.to && adminMsg.to.length) {
+      sends.push(sendMail({ to: adminMsg.to.join(','), subject: adminMsg.subject, html: adminMsg.html, text: adminMsg.text }));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send donation-assignment emails:', e);
+  }
+}
+
+async function sendDailyEventSummaries(now = new Date()) {
+  try {
+    const today = new Date(now);
+    const notifyInclude = { createdBy: { select: { id: true, name: true, email: true } }, notifyRecipients: { select: { id: true, name: true, email: true } } };
+    let events = await prisma.event.findMany({
+      where: { isActive: true, startDate: { gte: today } },
+      include: notifyInclude,
+      orderBy: { startDate: 'asc' },
+    });
+
+    try {
+      events = await prisma.event.findMany({
+        where: { isActive: true, startDate: { gte: today }, goLiveAt: { lte: today } },
+        include: notifyInclude,
+        orderBy: { startDate: 'asc' },
+      });
+    } catch {}
+
+    await Promise.allSettled(events.map(async ev => {
+      const registrations = await prisma.registration.findMany({
+        where: { eventId: ev.id },
+        include: {
+          user: { select: { id: true, name: true, email: true, phoneNumber: true } },
+          registrationOptions: { include: { eventOption: { include: { earlyBirdTiers: true } } } },
+          payments: true,
+        },
+        orderBy: { createdAt: 'asc' },
+      });
+
+      const payments = await prisma.payment.findMany({
+        where: { OR: [{ eventId: ev.id }, { registration: { eventId: ev.id } }] },
+        include: {
+          user: { select: { id: true, name: true, email: true } },
+          registration: { select: { id: true, user: { select: { id: true, name: true, email: true } } } },
+        },
+        orderBy: { createdAt: 'asc' },
+      });
+
+      const { subject, text, html } = buildDailySummary(ev, registrations, payments, now);
+      const to = buildEventNotifyRecipientList(ev);
+      if (to.length) await sendMail({ to: to.join(','), subject, html, text });
+    }));
+  } catch (e) {
+    console.error('Failed to send daily event summaries:', e);
+  }
+}
+
+module.exports = {
+  sendRegistrationEmails,
+  sendRegistrationUpdatedEmails,
+  sendPaymentEmails,
+  sendDailyEventSummaries,
+  sendRefundEmail,
+  sendSelfServiceRegistrationEmails,
+  sendDonationAssignmentEmails,
+};
diff --git a/backend/src/utils/notify.js b/backend/src/utils/notify.js
new file mode 100644
index 0000000..0c7b5d3
--- /dev/null
+++ b/backend/src/utils/notify.js
@@ -0,0 +1,82 @@
+/**
+ * Routing helpers for sending notifications based on a user's
+ * notificationPreference (email | whatsapp | both).
+ *
+ * Security-critical messages (password reset, login alert, password changed,
+ * account closed) always send email regardless of preference, and additionally
+ * send a WhatsApp message when preference includes it.
+ *
+ * Informational messages (registration, payment, tickets) respect the
+ * preference fully.
+ */
+
+const { isValidZAPhone, sendText, sendPdf } = require('./whatsapp');
+
+/** Returns true when the user should receive a WhatsApp notification. */
+function canWhatsApp(user) {
+  if (!user) return false;
+  const pref = user.notificationPreference || 'email';
+  return (pref === 'whatsapp' || pref === 'both') && isValidZAPhone(user.phoneNumber);
+}
+
+/** Returns true when the user should receive an email notification. */
+function shouldEmail(user) {
+  if (!user) return false;
+  const pref = user.notificationPreference || 'email';
+  return pref === 'email' || pref === 'both';
+}
+
+/**
+ * Fire-and-forget WhatsApp text to a user.
+ * Silently skips if the user can't receive WhatsApp.
+ */
+async function waText(user, message) {
+  if (!canWhatsApp(user)) return;
+  try {
+    await sendText(user.phoneNumber, message);
+  } catch (e) {
+    console.warn('[notify] WhatsApp text failed:', e?.response?.data?.message || e.message);
+  }
+}
+
+/**
+ * Fire-and-forget WhatsApp PDF to a user.
+ * Silently skips if the user can't receive WhatsApp.
+ */
+async function waPdf(user, localPdfPath, filename, caption) {
+  if (!canWhatsApp(user)) return;
+  try {
+    await sendPdf(user.phoneNumber, localPdfPath, filename, caption);
+  } catch (e) {
+    console.warn('[notify] WhatsApp PDF failed:', e?.response?.data?.message || e.message);
+  }
+}
+
+/**
+ * Like waText but bypasses the notification preference check.
+ * Use as a fallback when email is not available (guest / no valid email),
+ * so the user still receives notifications via WhatsApp if they have a phone.
+ */
+async function waTextAny(user, message) {
+  if (!user || !isValidZAPhone(user.phoneNumber)) return;
+  try {
+    await sendText(user.phoneNumber, message);
+  } catch (e) {
+    console.warn('[notify] WhatsApp text (fallback) failed:', e?.response?.data?.message || e.message);
+  }
+}
+
+/**
+ * Like waPdf but bypasses the notification preference check.
+ * Use as a fallback when email is not available (guest / no valid email).
+ */
+async function waPdfAny(user, localPdfPath, filename, caption) {
+  if (!user || !isValidZAPhone(user.phoneNumber)) return;
+  try {
+    await sendPdf(user.phoneNumber, localPdfPath, filename, caption);
+  } catch (e) {
+    console.warn('[notify] WhatsApp PDF (fallback) failed:', e?.response?.data?.message || e.message);
+  }
+}
+
+module.exports = { canWhatsApp, shouldEmail, waText, waPdf, waTextAny, waPdfAny };
\ No newline at end of file
diff --git a/backend/src/utils/pricing.js b/backend/src/utils/pricing.js
new file mode 100644
index 0000000..8724c4d
--- /dev/null
+++ b/backend/src/utils/pricing.js
@@ -0,0 +1,248 @@
+/**
+ * Early-bird pricing utility
+ *
+ * Rules:
+ * - Base price is eventOption.price
+ * - resolveOptionPrice: picks the cheapest applicable tier, checking both deadline AND stock limits.
+ *   Used at registration-creation time and again at payment-initiation time.
+ * - getEffectiveUnitPrice: deadline-only check; used for line-item display in Yoco checkout and
+ *   as a fallback for legacy RegistrationOption rows that have no priceSnapshot.
+ * - computeRegistrationTotalDue: uses priceSnapshot when present (authoritative after
+ *   refreshPricingForRegistration runs), otherwise falls back to getEffectiveUnitPrice.
+ * - refreshPricingForRegistration: re-runs resolveOptionPrice for every RegistrationOption
+ *   that has an appliedTierId; updates priceSnapshot + appliedTierId in the DB if the tier
+ *   is now expired or its stock is exhausted.
+ */
+
+const prisma = require('../config/db');
+
+/**
+ * Compute effective unit price for an event option at a given time considering early-bird tiers.
+ * Only checks deadline (not stock). Used for display and as a legacy fallback.
+ *
+ * @param {object} eventOption - includes price:number and earlyBirdTiers?:Array<{deadline:string|Date, price:number}>
+ * @param {Date|string|null} referenceTime - usually the last payment time; if null, falls back to atTime
+ * @param {Date} atTime - payment/evaluation time (e.g., now or payment.createdAt)
+ * @returns {number}
+ */
+function getEffectiveUnitPrice(eventOption, referenceTime, atTime) {
+  if (!eventOption) return 0;
+  const base = Number(eventOption.price || 0);
+  const tiers = Array.isArray(eventOption.earlyBirdTiers) ? eventOption.earlyBirdTiers.slice() : [];
+  if (!tiers.length) return base;
+
+  const t = atTime ? new Date(atTime) : new Date();
+  // If no referenceTime (no payments yet), use atTime so early-bird applies based on "now"
+  const ref = referenceTime ? new Date(referenceTime) : t;
+
+  // Only tiers whose deadline is after BOTH reference and payment/evaluation times qualify
+  const applicable = tiers
+    .map(x => ({ ...x, deadline: new Date(x.deadline) }))
+    .filter(x => (ref < x.deadline) && (t < x.deadline))
+    .sort((a, b) => a.deadline.getTime() - b.deadline.getTime() || (a.order || 0) - (b.order || 0) || a.price - b.price);
+
+  if (applicable.length === 0) return base;
+  const chosen = applicable[0];
+  const price = Number(chosen.price);
+  if (!(price >= 0)) return base;
+  return price;
+}
+
+/**
+ * Resolve the best applicable early-bird tier price for an event option.
+ * Checks BOTH deadline AND stock limits. Cancelled registrations are excluded from stock counts.
+ * Tiers are sorted cheapest-first (best deal for the user); earliest deadline breaks ties.
+ *
+ * @param {object} option - EventOption with price, earlyBirdTiers[]
+ * @param {number} requestedQty - quantity being purchased
+ * @returns {Promise<{ price: number, tierId: string|null }>}
+ */
+async function resolveOptionPrice(option, requestedQty = 1) {
+  const now = new Date();
+  // Only option-level tiers (no variant association)
+  const tiers = (Array.isArray(option.earlyBirdTiers) ? option.earlyBirdTiers : [])
+    .filter(t => !t.variantId)
+    .slice();
+
+  // Sort cheapest-first; earliest deadline breaks ties
+  tiers.sort((a, b) => {
+    if (a.price !== b.price) return a.price - b.price;
+    return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
+  });
+
+  for (const tier of tiers) {
+    // Skip expired tiers
+    if (now >= new Date(tier.deadline)) continue;
+
+    // Check stock limit if one is set
+    if (tier.stockLimit > 0) {
+      const soldAgg = await prisma.registrationOption.aggregate({
+        where: {
+          appliedTierId: tier.id,
+          registration: { status: { not: 'cancelled' } }
+        },
+        _sum: { quantity: true }
+      });
+      const tierSold = soldAgg._sum?.quantity || 0;
+      if (tierSold + requestedQty > tier.stockLimit) continue; // tier exhausted — try next
+    }
+
+    return { price: tier.price, tierId: tier.id };
+  }
+
+  // No tier applicable — fall back to base option price
+  return { price: option.price, tierId: null };
+}
+
+/**
+ * Resolve the best applicable early-bird tier price for a specific variant.
+ * Checks tiers that have variantId matching the given variant.
+ * Falls back to variant.price (or option.price if variant has no override) when no tier applies.
+ *
+ * @param {object} option - EventOption with price, earlyBirdTiers[], variants[]
+ * @param {string} variantId
+ * @param {number} requestedQty
+ * @returns {Promise<{ price: number, tierId: string|null }>}
+ */
+async function resolveVariantTierPrice(option, variantId, requestedQty = 1) {
+  const now = new Date();
+  const variant = (option.variants || []).find(v => v.id === variantId);
+  const basePrice = (variant && variant.price !== null && variant.price !== undefined)
+    ? Number(variant.price)
+    : Number(option.price || 0);
+
+  const tiers = (Array.isArray(option.earlyBirdTiers) ? option.earlyBirdTiers : [])
+    .filter(t => t.variantId === variantId)
+    .slice();
+
+  if (!tiers.length) return { price: basePrice, tierId: null };
+
+  tiers.sort((a, b) => {
+    if (a.price !== b.price) return a.price - b.price;
+    return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
+  });
+
+  for (const tier of tiers) {
+    if (now >= new Date(tier.deadline)) continue;
+    if (tier.stockLimit > 0) {
+      const soldAgg = await prisma.registrationOption.aggregate({
+        where: { appliedTierId: tier.id, registration: { status: { not: 'cancelled' } } },
+        _sum: { quantity: true }
+      });
+      const tierSold = soldAgg._sum?.quantity || 0;
+      if (tierSold + requestedQty > tier.stockLimit) continue;
+    }
+    return { price: tier.price, tierId: tier.id };
+  }
+
+  return { price: basePrice, tierId: null };
+}
+
+/**
+ * Re-evaluate early-bird prices for all RegistrationOptions that have an appliedTierId.
+ * If a tier is now expired or its stock is exhausted, the next applicable tier (or base price)
+ * is resolved and priceSnapshot + appliedTierId are updated in the DB.
+ *
+ * Call this before processing any payment to ensure stock-based price forfeiture is enforced.
+ *
+ * @param {string} registrationId
+ * @returns {Promise<{ changed: boolean }>}
+ */
+async function refreshPricingForRegistration(registrationId) {
+  const registration = await prisma.registration.findUnique({
+    where: { id: registrationId },
+    include: {
+      registrationOptions: {
+        include: {
+          eventOption: { include: { earlyBirdTiers: true, variants: true } }
+        }
+      }
+    }
+  });
+  if (!registration) return { changed: false };
+
+  let anyChanged = false;
+
+  for (const ro of registration.registrationOptions) {
+    // Only refresh options that were priced via a tier
+    if (!ro.appliedTierId) continue;
+
+    // Find the currently applied tier
+    const currentTier = (ro.eventOption.earlyBirdTiers || []).find(t => t.id === ro.appliedTierId);
+
+    if (currentTier && new Date() < new Date(currentTier.deadline)) {
+      // The tier's deadline is still in the future — honor the locked price.
+      continue;
+    }
+
+    // Deadline has passed (or tier record missing) — resolve the next applicable tier
+    const resolved = ro.variantId
+      ? await resolveVariantTierPrice(ro.eventOption, ro.variantId, ro.quantity)
+      : await resolveOptionPrice(ro.eventOption, ro.quantity);
+
+    const tierChanged = resolved.tierId !== ro.appliedTierId;
+    const priceChanged = ro.priceSnapshot !== null && Math.abs(resolved.price - ro.priceSnapshot) > 0.001;
+
+    if (tierChanged || priceChanged) {
+      await prisma.registrationOption.update({
+        where: { id: ro.id },
+        data: {
+          priceSnapshot: resolved.price,
+          appliedTierId: resolved.tierId
+        }
+      });
+      anyChanged = true;
+    }
+  }
+
+  return { changed: anyChanged };
+}
+
+/**
+ * Compute total due for a registration at a given time.
+ *
+ * Uses priceSnapshot when present (authoritative — set at registration time and refreshed
+ * before payment via refreshPricingForRegistration). Falls back to getEffectiveUnitPrice
+ * for legacy rows without a snapshot.
+ *
+ * @param {object} registration - includes registrationOptions[].{priceSnapshot, quantity, eventOption}
+ *                                and optionally payments[]
+ * @param {Date} atTime - evaluation time (used for legacy fallback only)
+ * @returns {number}
+ */
+function computeRegistrationTotalDue(registration, atTime) {
+  if (!registration || !Array.isArray(registration.registrationOptions)) return 0;
+
+  // Determine the last payment time (used only for the legacy getEffectiveUnitPrice fallback)
+  let lastPaymentAt = null;
+  try {
+    if (registration.payments && Array.isArray(registration.payments) && registration.payments.length > 0) {
+      lastPaymentAt = new Date(Math.max(...registration.payments.map(p => new Date(p.createdAt).getTime())));
+    }
+  } catch {}
+
+  return registration.registrationOptions.reduce((sum, ro) => {
+    const qty = Number(ro.quantity || 0);
+    let unit;
+
+    if (ro.priceSnapshot !== null && ro.priceSnapshot !== undefined) {
+      // priceSnapshot is authoritative — set at registration creation and kept current
+      // by refreshPricingForRegistration at payment initiation time.
+      unit = ro.priceSnapshot;
+    } else {
+      // Fallback: legacy row without a snapshot — re-evaluate from tier deadlines
+      const eo = ro.eventOption || {};
+      unit = getEffectiveUnitPrice(eo, lastPaymentAt, atTime);
+    }
+
+    return sum + qty * unit;
+  }, 0);
+}
+
+module.exports = {
+  getEffectiveUnitPrice,
+  resolveOptionPrice,
+  resolveVariantTierPrice,
+  refreshPricingForRegistration,
+  computeRegistrationTotalDue,
+};
\ No newline at end of file
diff --git a/backend/src/utils/scheduledEmails.js b/backend/src/utils/scheduledEmails.js
new file mode 100644
index 0000000..94be64c
--- /dev/null
+++ b/backend/src/utils/scheduledEmails.js
@@ -0,0 +1,108 @@
+const fs = require('fs');
+const path = require('path');
+const { v4: uuidv4 } = require('uuid');
+
+const DATA_DIR = path.join(__dirname, '..', '..', 'data');
+const QUEUE_PATH = path.join(DATA_DIR, 'scheduled-emails.json');
+
+function ensureStore() {
+  try {
+    if (!fs.existsSync(DATA_DIR)) fs.mkdirSync(DATA_DIR, { recursive: true });
+    if (!fs.existsSync(QUEUE_PATH)) fs.writeFileSync(QUEUE_PATH, JSON.stringify({ jobs: [] }, null, 2), 'utf-8');
+  } catch (e) {
+    // Best-effort; throws will surface to caller
+  }
+}
+
+function loadAll() {
+  ensureStore();
+  try {
+    const raw = fs.readFileSync(QUEUE_PATH, 'utf-8');
+    const data = JSON.parse(raw);
+    const jobs = Array.isArray(data?.jobs) ? data.jobs : [];
+    return jobs;
+  } catch (e) {
+    return [];
+  }
+}
+
+function saveAll(jobs) {
+  ensureStore();
+  const payload = { jobs: Array.isArray(jobs) ? jobs : [] };
+  // Simple atomic-ish write
+  const tmp = QUEUE_PATH + '.tmp';
+  fs.writeFileSync(tmp, JSON.stringify(payload, null, 2), 'utf-8');
+  fs.renameSync(tmp, QUEUE_PATH);
+}
+
+/**
+ * Add a scheduled job
+ * @param {object} job { id?, eventId, createdById, scheduledAt: ISO string, payload: body for emailEventAttendees }
+ */
+function addJob(job) {
+  const now = new Date();
+  const id = job.id || uuidv4();
+  const rec = {
+    id,
+    eventId: job.eventId || null,
+    broadcast: !!job.broadcast,
+    createdById: job.createdById || null,
+    scheduledAt: job.scheduledAt,
+    createdAt: now.toISOString(),
+    status: 'queued', // queued | sending | sent | error
+    attempts: 0,
+    lastError: null,
+    payload: job.payload || {},
+  };
+  const jobs = loadAll();
+  jobs.push(rec);
+  saveAll(jobs);
+  return rec;
+}
+
+function listJobs(filter = {}) {
+  const jobs = loadAll();
+  // Basic filter support
+  return jobs.filter(j => {
+    if (filter.status && j.status !== filter.status) return false;
+    if (filter.eventId && j.eventId !== filter.eventId) return false;
+    return true;
+  });
+}
+
+function getDueJobs(now = new Date()) {
+  const jobs = loadAll();
+  const t = now instanceof Date ? now : new Date(now);
+  return jobs.filter(j => j.status === 'queued' && new Date(j.scheduledAt).getTime() <= t.getTime());
+}
+
+function updateJob(id, patch) {
+  const jobs = loadAll();
+  const idx = jobs.findIndex(j => j.id === id);
+  if (idx === -1) return null;
+  jobs[idx] = { ...jobs[idx], ...patch };
+  saveAll(jobs);
+  return jobs[idx];
+}
+
+function getJob(id) {
+  const jobs = loadAll();
+  return jobs.find(j => j.id === id) || null;
+}
+
+function deleteJob(id) {
+  const jobs = loadAll();
+  const filtered = jobs.filter(j => j.id !== id);
+  if (filtered.length === jobs.length) return false;
+  saveAll(filtered);
+  return true;
+}
+
+module.exports = {
+  addJob,
+  listJobs,
+  getDueJobs,
+  updateJob,
+  getJob,
+  deleteJob,
+};
diff --git a/backend/src/utils/settingsCache.js b/backend/src/utils/settingsCache.js
new file mode 100644
index 0000000..c3758e4
--- /dev/null
+++ b/backend/src/utils/settingsCache.js
@@ -0,0 +1,79 @@
+/**
+ * Lightweight in-process cache for AppSetting values.
+ * Refreshes every 60 seconds so changes made in the admin settings page
+ * take effect without a server restart.
+ * Falls back to environment variables when a key is not found in the DB.
+ *
+ * Encrypted keys (smtp_user, smtp_pass) are automatically decrypted on read.
+ */
+
+const prisma = require('../config/db');
+const { decrypt, isEncrypted } = require('./encryption');
+
+// Keys stored encrypted in the DB — decrypted transparently on read.
+const ENCRYPTED_KEYS = new Set(['smtp_user', 'smtp_pass']);
+
+let _cache = {};
+let _lastFetch = 0;
+const TTL_MS = 60 * 1000;
+
+async function refreshIfStale() {
+  const now = Date.now();
+  if (now - _lastFetch < TTL_MS && _lastFetch > 0) return;
+  try {
+    const rows = await prisma.appSetting.findMany();
+    const fresh = {};
+    for (const r of rows) fresh[r.key] = r.value;
+    _cache = fresh;
+    _lastFetch = now;
+  } catch {
+    // DB unreachable — keep existing cache; will retry next call
+  }
+}
+
+/**
+ * Internal getter that optionally decrypts encrypted keys.
+ * @param {string} key
+ * @param {string} [envFallback]
+ * @returns {string}
+ */
+function _getSync(key, envFallback = '') {
+  const v = _cache[key];
+  const raw = (v !== undefined && v !== null && v !== '') ? v : (envFallback || '');
+  if (ENCRYPTED_KEYS.has(key) && isEncrypted(raw)) {
+    try { return decrypt(raw); } catch { return ''; }
+  }
+  return raw;
+}
+
+/**
+ * Async getter — always checks for a stale cache before returning.
+ * @param {string} key
+ * @param {string} [envFallback]
+ * @returns {Promise<string>}
+ */
+async function getSetting(key, envFallback = '') {
+  await refreshIfStale();
+  return _getSync(key, envFallback);
+}
+
+/**
+ * Sync wrapper for use in synchronous functions.
+ * Uses the current in-memory snapshot; relies on the cache being warmed at startup.
+ */
+const getSettingSync = _getSync;
+
+/**
+ * Call once at startup to pre-warm the cache so synchronous callers get DB values.
+ */
+async function warmCache() {
+  await refreshIfStale();
+}
+
+/** Invalidate the cache and immediately re-warm it in the background. */
+function invalidate() {
+  _lastFetch = 0;
+  refreshIfStale().catch(() => {});
+}
+
+module.exports = { getSetting, getSettingSync, warmCache, invalidate, ENCRYPTED_KEYS };
\ No newline at end of file
diff --git a/backend/src/utils/ticketUtils.js b/backend/src/utils/ticketUtils.js
new file mode 100644
index 0000000..2da9ef0
--- /dev/null
+++ b/backend/src/utils/ticketUtils.js
@@ -0,0 +1,145 @@
+const prisma = require('../config/db');
+const { v4: uuidv4 } = require('uuid');
+
+/**
+ * Generate tickets for a registration when payment status is "paid".
+ *
+ * Rules:
+ *  - Exactly ONE ticket per registrationOption (keyed by eventOptionId).
+ *  - If duplicate registrationOptions exist for the same eventOptionId (old data),
+ *    consolidate them: merge quantities, keep the one with scan history, delete the rest.
+ *  - If duplicate ticket records exist for the same registrationOption (old data),
+ *    keep the primary (scanned one, or oldest), update its quantity, delete the rest.
+ *
+ * @param {string} registrationId
+ * @returns {Promise<Array>} newly-created ticket records (empty when all already existed)
+ */
+const generateTicketsForRegistration = async (registrationId) => {
+  try {
+    const registration = await prisma.registration.findUnique({
+      where: { id: registrationId },
+      include: {
+        registrationOptions: {
+          include: {
+            eventOption: true,
+            tickets: { include: { usages: true }, orderBy: { createdAt: 'asc' } }
+          }
+        },
+        event: true,
+        user: true
+      }
+    });
+
+    if (!registration) throw new Error('Registration not found');
+    if (registration.status !== 'paid') return [];
+
+    // If event has a required form, ensure sufficient responses exist
+    try {
+      const form = await prisma.eventForm.findUnique({ where: { eventId: registration.eventId } });
+      if (form && form.isRequired) {
+        const requiredCount = (registration.registrationOptions || [])
+          .filter(ro => ro.eventOption?.isMainTicket)
+          .reduce((s, ro) => s + (ro.quantity || 0), 0);
+        const responsesCount = await prisma.formResponse.count({ where: { registrationId } });
+        if (responsesCount < requiredCount) return [];
+      }
+    } catch (_) { /* form models unavailable — don't block */ }
+
+    // ── Step 1: Consolidate duplicate registrationOptions for the same (eventOptionId, variantId) ──
+    // Key on both fields so that different variants of the same option are never merged
+    const byOption = new Map();
+    for (const ro of registration.registrationOptions) {
+      const key = `${ro.eventOptionId}::${ro.variantId || ''}`;
+      if (!byOption.has(key)) byOption.set(key, []);
+      byOption.get(key).push(ro);
+    }
+
+    // For each group with duplicates, merge into the one that has tickets (or the first)
+    for (const [, group] of byOption) {
+      if (group.length <= 1) continue;
+
+      // Prefer the option that already has tickets
+      const withTickets = group.filter(ro => (ro.tickets || []).length > 0);
+      const primary = withTickets.length > 0 ? withTickets[0] : group[0];
+      const duplicates = group.filter(ro => ro.id !== primary.id);
+
+      // Move all tickets from duplicates to primary, then delete duplicate options
+      for (const dup of duplicates) {
+        for (const t of (dup.tickets || [])) {
+          await prisma.ticket.update({ where: { id: t.id }, data: { registrationOptionId: primary.id, updatedAt: new Date() } });
+        }
+        const totalMergedQty = duplicates.reduce((s, d) => s + (d.quantity || 0), 0);
+        await prisma.registrationOption.update({
+          where: { id: primary.id },
+          data: { quantity: (primary.quantity || 0) + totalMergedQty, }
+        });
+        await prisma.registrationOption.delete({ where: { id: dup.id } });
+      }
+
+      // Re-load the primary's current quantity after merge
+      const updated = await prisma.registrationOption.findUnique({ where: { id: primary.id } });
+      primary.quantity = updated?.quantity ?? primary.quantity;
+      // Reload tickets
+      primary.tickets = await prisma.ticket.findMany({
+        where: { registrationOptionId: primary.id },
+        include: { usages: true },
+        orderBy: { createdAt: 'asc' }
+      });
+    }
+
+    // ── Step 2: For each unique option, ensure exactly one ticket with correct qty ──
+    const generatedTickets = [];
+
+    // Re-read fresh list (some options may have been deleted above)
+    const freshOptions = await prisma.registrationOption.findMany({
+      where: { registrationId },
+      include: {
+        tickets: { include: { usages: true }, orderBy: { createdAt: 'asc' } }
+      }
+    });
+
+    for (const option of freshOptions) {
+      const targetQty = option.quantity || 1;
+      const existingTickets = option.tickets || [];
+
+      if (existingTickets.length === 0) {
+        // Create one ticket
+        const ticket = await prisma.ticket.create({
+          data: {
+            id: uuidv4(),
+            qrCode: uuidv4(),
+            registrationOptionId: option.id,
+            userId: registration.userId,
+            eventId: registration.eventId,
+            quantity: targetQty,
+            updatedAt: new Date()
+          }
+        });
+        generatedTickets.push(ticket);
+        continue;
+      }
+
+      // Pick primary: prefer scanned, otherwise oldest
+      const withUsages = existingTickets.filter(t => (t.usages || []).length > 0);
+      const primary = withUsages.length > 0 ? withUsages[0] : existingTickets[0];
+
+      // Update quantity on primary if needed
+      if (primary.quantity !== targetQty) {
+        await prisma.ticket.update({ where: { id: primary.id }, data: { quantity: targetQty, updatedAt: new Date() } });
+      }
+
+      // Delete unscanned duplicates
+      const dups = existingTickets.filter(t => t.id !== primary.id && (t.usages || []).length === 0);
+      if (dups.length > 0) {
+        await prisma.ticket.deleteMany({ where: { id: { in: dups.map(t => t.id) } } });
+      }
+    }
+
+    return generatedTickets;
+  } catch (error) {
+    console.error('Error generating tickets:', error);
+    throw error;
+  }
+};
+
+module.exports = { generateTicketsForRegistration };
\ No newline at end of file
diff --git a/backend/src/utils/waMessages.js b/backend/src/utils/waMessages.js
new file mode 100644
index 0000000..cd99fb8
--- /dev/null
+++ b/backend/src/utils/waMessages.js
@@ -0,0 +1,258 @@
+/**
+ * WhatsApp-formatted message builders.
+ *
+ * Styling reference: https://faq.whatsapp.com/539178204879377/
+ *   *bold*    _italic_    ~strikethrough~    ```monospace```
+ *   > blockquote    - unordered list    1. numbered list
+ *   # Heading 1    ## Heading 2    ### Heading 3
+ */
+
+function fmtAmount(amt) {
+  return `R${Number(amt || 0).toFixed(2)}`;
+}
+
+function fmtDateShort(d) {
+  try {
+    return new Date(d).toLocaleDateString('en-GB', {
+      weekday: 'long', day: 'numeric', month: 'long', year: 'numeric',
+    });
+  } catch { return String(d); }
+}
+
+const { getSettingSync } = require('./settingsCache');
+
+function getOrg() {
+  return {
+    name:  getSettingSync('org_name', process.env.ORG_NAME || 'Hope Events'),
+    email: process.env.EMAIL_FROM || process.env.EMAIL_USER || '',
+    url:   (process.env.FRONTEND_URL || process.env.APP_BASE_URL || 'http://localhost:3001').replace(/\/$/, ''),
+  };
+}
+
+// ─── Registration confirmation ────────────────────────────────────────────────
+
+/**
+ * @param {object} reg - full registration from loadRegistrationFull
+ * @param {{ isNew?: boolean, balance?: number, totalDue?: number, totalPaid?: number }} opts
+ */
+function buildWARegistration(reg, { isNew = true, balance, totalDue, totalPaid } = {}) {
+  const org = getOrg();
+  const eventTitle = reg.event?.title || 'the event';
+  const eventDate  = reg.event?.startDate ? fmtDateShort(reg.event.startDate) : '';
+  const name       = reg.user?.name || 'there';
+
+  const heading = isNew ? '🎉 *Registration Confirmed!*' : '✏️ *Registration Updated*';
+  const intro = isNew
+    ? `You're registered for *${eventTitle}*${eventDate ? ` on ${eventDate}` : ''}.`
+    : `Your registration for *${eventTitle}* has been updated.`;
+
+  const items = (reg.registrationOptions || [])
+    .map(ro => `- ${ro.eventOption?.name || 'Option'} ×${ro.quantity} — ${fmtAmount((ro.eventOption?.price || 0) * ro.quantity)}`)
+    .join('\n');
+
+  const paid    = totalPaid  ?? (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+  const due     = totalDue   ?? 0;
+  const bal     = balance    ?? Math.max(due - paid, 0);
+
+  const finLine = bal <= 0
+    ? `✅ *Fully paid — you're all set!*`
+    : `*Balance due:* ${fmtAmount(bal)}\n_Pay at ${org.url} or at the door._`;
+
+  return [
+    heading,
+    '',
+    `Hi ${name},`,
+    '',
+    intro,
+    '',
+    '*Your selections:*',
+    items || '—',
+    '',
+    `*Total:* ${fmtAmount(due)}   *Paid:* ${fmtAmount(paid)}`,
+    finLine,
+    '',
+    `_${org.name}_ | ${org.url}`,
+  ].join('\n');
+}
+
+// ─── Payment receipt ──────────────────────────────────────────────────────────
+
+function buildWAPayment(payment) {
+  const org        = getOrg();
+  const eventTitle = payment.registration?.event?.title || payment.event?.title || 'the event';
+  const name       = (payment.registration?.user || payment.user)?.name || 'there';
+  const amount     = fmtAmount(payment.amount);
+
+  const reg     = payment.registration;
+  let balLine   = '';
+  if (reg) {
+    const { computeRegistrationTotalDue } = require('./pricing');
+    const totalDue  = computeRegistrationTotalDue(reg, payment.createdAt || new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    const balance   = Math.max(totalDue - totalPaid, 0);
+    balLine = balance <= 0
+      ? `\n✅ *Fully paid!* Your tickets have been sent.`
+      : `\n*Remaining balance:* ${fmtAmount(balance)}\n_Pay the remainder at ${org.url} or at the door._`;
+  }
+
+  return [
+    `✅ *Payment Received*`,
+    '',
+    `Hi ${name},`,
+    '',
+    `We've received your payment of *${amount}* for *${eventTitle}*.`,
+    balLine,
+    '',
+    `_${org.name}_ | ${org.url}`,
+  ].join('\n');
+}
+
+// ─── Login notification ───────────────────────────────────────────────────────
+
+function buildWALogin({ name, when, location, userAgent }) {
+  const org = getOrg();
+  return [
+    `🔐 *New Login Detected*`,
+    '',
+    `Hi ${name || 'there'},`,
+    '',
+    `A new login to your *${org.name}* account was detected.`,
+    '',
+    `*Time:* ${when}`,
+    `*Location:* ${location}`,
+    `*Device:* ${userAgent}`,
+    '',
+    `> _Not you?_ Change your password immediately at ${org.url} or contact ${org.email}.`,
+    '',
+    `_If this was you, no action is needed._`,
+  ].join('\n');
+}
+
+// ─── Welcome ──────────────────────────────────────────────────────────────────
+
+function buildWAWelcome({ name, events }) {
+  const org  = getOrg();
+  const hasEvents = Array.isArray(events) && events.length > 0;
+
+  const eventsBlock = hasEvents
+    ? [
+        '*Upcoming events:*',
+        ...events.map(e =>
+          `- *${e.title}* — ${new Date(e.startDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}`
+        ),
+      ].join('\n')
+    : 'Keep an eye on our website for upcoming events.';
+
+  return [
+    `🎉 *Welcome to ${org.name}!*`,
+    '',
+    `Hi ${name || 'there'},`,
+    '',
+    `Your account is set up and ready. Use it to register for events, manage your bookings, and access your tickets.`,
+    '',
+    eventsBlock,
+    '',
+    `${org.url}`,
+  ].join('\n');
+}
+
+// ─── Account closed ───────────────────────────────────────────────────────────
+
+function buildWAAccountClosed({ name, dataDeleted }) {
+  const org = getOrg();
+  const detail = dataDeleted
+    ? 'All personal data associated with your account has been permanently deleted.'
+    : `Your account has been deactivated. To also delete your personal data, contact ${org.email}.`;
+
+  return [
+    `🔒 *Account Closed*`,
+    '',
+    `Hi ${name || 'there'},`,
+    '',
+    `Your *${org.name}* account has been successfully closed.`,
+    '',
+    detail,
+    '',
+    `_${org.name}_ | ${org.email}`,
+  ].join('\n');
+}
+
+// ─── Ticket delivery caption ──────────────────────────────────────────────────
+
+function buildWATicketCaption({ name, eventTitle, eventDate }) {
+  return [
+    `🎟️ *Your tickets for ${eventTitle}*`,
+    '',
+    `Hi ${name || 'there'}! Your tickets${eventDate ? ` for *${eventDate}*` : ''} are attached.`,
+    'Please show this PDF (printed or on your phone) at the event entrance.',
+  ].join('\n');
+}
+
+// ─── Refund notification ──────────────────────────────────────────────────────
+
+function buildWARefund(payment) {
+  const org        = getOrg();
+  const user       = payment.user;
+  const eventTitle = payment.registration?.event?.title || payment.event?.title || 'the event';
+  const amt        = fmtAmount(Math.abs(payment.amount || 0));
+  const name       = user?.name || 'there';
+
+  return [
+    `💸 *Refund Processed*`,
+    '',
+    `Hi ${name},`,
+    '',
+    `A refund of *${amt}* for *${eventTitle}* has been processed.`,
+    '',
+    `Refunds may take a few business days to appear depending on your bank.`,
+    '',
+    `_${org.name}_ | ${org.email}`,
+  ].join('\n');
+}
+
+// ─── Donation applied to a registration ────────────────────────────────────────
+//
+// Distinct from buildWAPayment: sent to the REGISTRANT when staff apply someone else's
+// donation to their registration — anonymous (no donor name), and never "payment received"
+// wording since they didn't pay anything themselves.
+
+function buildWADonationAppliedToRegistrant(payment) {
+  const org        = getOrg();
+  const reg        = payment.registration;
+  const eventTitle = reg?.event?.title || 'the event';
+  const name       = reg?.user?.name || 'there';
+  const amount     = fmtAmount(payment.amount);
+
+  let balLine = '';
+  if (reg) {
+    const { computeRegistrationTotalDue } = require('./pricing');
+    const totalDue  = computeRegistrationTotalDue(reg, payment.createdAt || new Date());
+    const totalPaid = (reg.payments || []).reduce((s, p) => s + (p.amount || 0), 0);
+    const balance   = Math.max(totalDue - totalPaid, 0);
+    balLine = balance <= 0
+      ? `\n✅ *Fully paid!* Your tickets have been sent.`
+      : `\n*Remaining balance:* ${fmtAmount(balance)}\n_Pay the remainder at ${org.url} or at the door._`;
+  }
+
+  return [
+    `🎁 *Donation Applied*`,
+    '',
+    `Hi ${name},`,
+    '',
+    `A donation of *${amount}* was applied to your registration for *${eventTitle}*.`,
+    balLine,
+    '',
+    `_${org.name}_ | ${org.url}`,
+  ].join('\n');
+}
+
+module.exports = {
+  buildWARegistration,
+  buildWAPayment,
+  buildWARefund,
+  buildWADonationAppliedToRegistrant,
+  buildWALogin,
+  buildWAWelcome,
+  buildWAAccountClosed,
+  buildWATicketCaption,
+};
\ No newline at end of file
diff --git a/backend/src/utils/whatsapp.js b/backend/src/utils/whatsapp.js
new file mode 100644
index 0000000..16237e6
--- /dev/null
+++ b/backend/src/utils/whatsapp.js
@@ -0,0 +1,294 @@
+const axios = require('axios');
+const path  = require('path');
+const fs    = require('fs');
+const { v4: uuidv4 } = require('uuid');
+
+const BASE = 'https://api.wawp.net/v2';
+
+// ─── Config cache (DB-backed, env fallback) ───────────────────────────────────
+
+let _configCache   = null;
+let _configCacheAt = 0;
+const CONFIG_TTL_MS = 30_000; // 30 s
+
+/**
+ * Load WAWP credentials from DB (AppSetting table), falling back to .env.
+ * Result is cached for 30 seconds so repeated calls don't hit the DB.
+ */
+async function getConfig() {
+  const now = Date.now();
+  if (_configCache && (now - _configCacheAt) < CONFIG_TTL_MS) return _configCache;
+
+  try {
+    const prisma = require('../config/db');
+    const rows = await prisma.appSetting.findMany({
+      where: { key: { in: ['WAWP_ACCESS_TOKEN', 'WAWP_INSTANCE_ID'] } },
+    });
+    const map = Object.fromEntries(rows.map(r => [r.key, r.value]));
+    _configCache = {
+      token:      map.WAWP_ACCESS_TOKEN || process.env.WAWP_ACCESS_TOKEN || '',
+      instanceId: map.WAWP_INSTANCE_ID  || process.env.WAWP_INSTANCE_ID  || '',
+    };
+  } catch {
+    // DB unavailable — fall back to env vars
+    _configCache = {
+      token:      process.env.WAWP_ACCESS_TOKEN || '',
+      instanceId: process.env.WAWP_INSTANCE_ID  || '',
+    };
+  }
+  _configCacheAt = now;
+  return _configCache;
+}
+
+/** Save WAWP credentials to DB and invalidate the cache. */
+async function setConfig(token, instanceId) {
+  const prisma = require('../config/db');
+  await prisma.$transaction([
+    prisma.appSetting.upsert({
+      where:  { key: 'WAWP_ACCESS_TOKEN' },
+      update: { value: token },
+      create: { key: 'WAWP_ACCESS_TOKEN', value: token },
+    }),
+    prisma.appSetting.upsert({
+      where:  { key: 'WAWP_INSTANCE_ID' },
+      update: { value: instanceId },
+      create: { key: 'WAWP_INSTANCE_ID', value: instanceId },
+    }),
+  ]);
+  _configCache = null; // force reload on next getConfig()
+}
+
+async function isConfigured() {
+  const { token, instanceId } = await getConfig();
+  return !!(token && instanceId);
+}
+
+// ─── SA phone normalisation ───────────────────────────────────────────────────
+
+/**
+ * Normalises any common South African phone format to 27xxxxxxxxx (11 digits).
+ * Handles: 0821234567  /  082 123 4567  /  +27821234567  /  +27 82 123 4567
+ * Returns null when the number cannot be resolved to a valid SA mobile.
+ */
+function normalizeZAPhone(raw) {
+  if (!raw) return null;
+  let digits = String(raw).replace(/\D/g, '');
+
+  // Local format: leading 0 + 9 digits (total 10)
+  if (digits.startsWith('0') && digits.length === 10) {
+    digits = '27' + digits.slice(1);
+  }
+
+  // Must now be exactly 11 digits starting with 27
+  if (/^27\d{9}$/.test(digits)) return digits;
+  return null;
+}
+
+/** Returns true when raw is a valid SA mobile number. */
+function isValidZAPhone(raw) {
+  return normalizeZAPhone(raw) !== null;
+}
+
+/** Converts a phone number to the WAWP chatId format (e.g. 27821234567@c.us). */
+function toChatId(raw) {
+  const n = normalizeZAPhone(raw);
+  return n ? `${n}@c.us` : null;
+}
+
+// ─── "Session not found" auto-recovery ───────────────────────────────────────
+
+/**
+ * Returns true when the WAWP error message indicates the session doesn't exist.
+ */
+function isSessionNotFound(e) {
+  const msg = (e?.response?.data?.message || e?.message || '').toLowerCase();
+  return msg.includes('session not found') || msg.includes('instance not found');
+}
+
+/**
+ * If the WAWP API reports "Session not found", clear the stale instance ID
+ * from the DB so the admin UI drops back to the Session Instance setup step.
+ *
+ * @param {Error} e - The error thrown by a WAWP API call
+ */
+async function handleSessionNotFound(e) {
+  if (!isSessionNotFound(e)) throw e; // not our problem — re-throw
+
+  console.warn('[whatsapp] Session not found — clearing instance ID from DB...');
+  const { token, instanceId } = await getConfig();
+
+  // Try to delete the stale session on WAWP (may fail — that's okay)
+  try {
+    await axios.post(`${BASE}/session/delete`, { access_token: token, instance_id: instanceId });
+  } catch (delErr) {
+    console.warn('[whatsapp] Delete stale session failed (ignored):', delErr?.response?.data?.message || delErr.message);
+  }
+
+  // Clear the instance ID from DB so the frontend goes back to Step 2
+  await setConfig(token, '');
+  console.info('[whatsapp] Instance ID cleared — admin must set up a new session instance.');
+
+  throw new Error('SESSION_NOT_FOUND');
+}
+
+// ─── Session management ───────────────────────────────────────────────────────
+
+async function getStatus() {
+  const { token, instanceId } = await getConfig();
+  try {
+    const res = await axios.post(`${BASE}/session/info`, { access_token: token, instance_id: instanceId });
+    return res.data;
+  } catch (e) {
+    await handleSessionNotFound(e);
+  }
+}
+
+async function startSession() {
+  const { token, instanceId } = await getConfig();
+  try {
+    const res = await axios.post(`${BASE}/session/start`, { access_token: token, instance_id: instanceId });
+    return res.data;
+  } catch (e) {
+    await handleSessionNotFound(e);
+  }
+}
+
+async function restartSession() {
+  const { token, instanceId } = await getConfig();
+  try {
+    const res = await axios.post(`${BASE}/session/restart`, { access_token: token, instance_id: instanceId });
+    return res.data;
+  } catch (e) {
+    await handleSessionNotFound(e);
+  }
+}
+
+async function logoutSession() {
+  const { token, instanceId } = await getConfig();
+  const res = await axios.post(`${BASE}/session/logout`, { access_token: token, instance_id: instanceId });
+  return res.data;
+}
+
+async function createInstance(name) {
+  const { token } = await getConfig();
+  const label = name || `hope-events-${Date.now()}`;
+  const res = await axios.post(`${BASE}/session/create`, { access_token: token, name: label });
+  const newInstanceId = res.data?.instance_id || res.data?.id;
+  if (!newInstanceId) throw new Error('Create instance returned no instance_id');
+  await setConfig(token, newInstanceId);
+  return { ...res.data, instance_id: newInstanceId };
+}
+
+async function deleteInstance() {
+  const { token, instanceId } = await getConfig();
+  if (!instanceId) throw new Error('No instance configured');
+  const res = await axios.post(`${BASE}/session/delete`, { access_token: token, instance_id: instanceId });
+  // Clear instance_id from DB after deletion
+  await setConfig(token, '');
+  return res.data;
+}
+
+async function getQr() {
+  const { token, instanceId } = await getConfig();
+  try {
+    const res = await axios.post(`${BASE}/auth/qr-image`, { access_token: token, instance_id: instanceId });
+    return res.data; // { qr: 'data:image/png;base64,...' }
+  } catch (e) {
+    await handleSessionNotFound(e);
+  }
+}
+
+async function requestPairingCode(phoneNumber) {
+  const { token, instanceId } = await getConfig();
+  const normalized = normalizeZAPhone(phoneNumber);
+  if (!normalized) throw new Error('Invalid South African phone number');
+  try {
+    const res = await axios.post(`${BASE}/auth/request-code`, {
+      access_token: token,
+      instance_id:  instanceId,
+      phone_number: normalized,
+    });
+    return res.data; // { code: 'ABCD-1234' }
+  } catch (e) {
+    await handleSessionNotFound(e);
+  }
+}
+
+// ─── Messaging ────────────────────────────────────────────────────────────────
+
+async function sendText(toPhone, message) {
+  if (!(await isConfigured())) return;
+  const chatId = toChatId(toPhone);
+  if (!chatId) { console.warn('[whatsapp] Invalid phone, skipping text:', toPhone); return; }
+  const { token, instanceId } = await getConfig();
+  await axios.post(`${BASE}/send/text`, {
+    access_token: token,
+    instance_id:  instanceId,
+    chatId,
+    message,
+  });
+}
+
+/**
+ * Copies a local PDF to a temporary public URL, sends it via WAWP,
+ * then schedules the temp file for deletion after 5 minutes.
+ */
+async function sendPdf(toPhone, localPdfPath, filename, caption) {
+  if (!(await isConfigured())) return;
+  const chatId = toChatId(toPhone);
+  if (!chatId) { console.warn('[whatsapp] Invalid phone, skipping PDF:', toPhone); return; }
+
+  const tempDir = path.join(__dirname, '../../public/uploads/tickets-temp');
+  if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir, { recursive: true });
+
+  const tempName = `${uuidv4()}.pdf`;
+  const tempPath = path.join(tempDir, tempName);
+  fs.copyFileSync(localPdfPath, tempPath);
+
+  const backendUrl = (process.env.BACKEND_URL || '').replace(/\/$/, '');
+  const isLocalhost = !backendUrl || /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/.test(backendUrl);
+  if (isLocalhost) {
+    try { fs.unlinkSync(tempPath); } catch {}
+    throw new Error(
+      `WhatsApp PDF delivery requires a publicly accessible backend URL. ` +
+      `BACKEND_URL is currently "${backendUrl || '(not set)'}". ` +
+      `Set BACKEND_URL to your public backend URL (e.g. https://api.yourdomain.com) in your .env file.`
+    );
+  }
+  const pdfUrl = `${backendUrl}/uploads/tickets-temp/${tempName}`;
+
+  const { token, instanceId } = await getConfig();
+  await axios.post(`${BASE}/send/pdf`, {
+    access_token: token,
+    instance_id:  instanceId,
+    chatId,
+    file: {
+      url:      pdfUrl,
+      filename: filename || 'tickets.pdf',
+      mimetype: 'application/pdf',
+    },
+    caption: caption || '',
+  });
+
+  // Clean up after 5 minutes — WAWP will have fetched the file by then
+  setTimeout(() => { try { fs.unlinkSync(tempPath); } catch {} }, 5 * 60 * 1000);
+}
+
+module.exports = {
+  getConfig,
+  setConfig,
+  normalizeZAPhone,
+  isValidZAPhone,
+  toChatId,
+  isConfigured,
+  getStatus,
+  startSession,
+  restartSession,
+  logoutSession,
+  createInstance,
+  deleteInstance,
+  getQr,
+  requestPairingCode,
+  sendText,
+  sendPdf,
+};
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..5ef6a52
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..f3bb132
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,318 @@
+# Hope Events — Frontend
+
+Next.js 15 (App Router) frontend for the Hope Events platform used by Hope Family Church (`events.hopehenley.co.za`).
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Tech Stack](#tech-stack)
+3. [Prerequisites](#prerequisites)
+4. [Installation](#installation)
+5. [Environment Variables](#environment-variables)
+6. [Running the App](#running-the-app)
+7. [Project Structure](#project-structure)
+8. [Pages & Routes](#pages--routes)
+9. [Authentication & Roles](#authentication--roles)
+10. [Payment Flow](#payment-flow)
+11. [Notifications](#notifications)
+12. [Deployment](#deployment)
+13. [Troubleshooting](#troubleshooting)
+
+---
+
+## Overview
+
+The frontend handles:
+- Public event listings and event detail pages
+- User registration, login, and account management
+- Attendee registration and Yoco checkout
+- Ticket viewing and delivery
+- Staff ticket scanning (QR scanner)
+- Supervisor tools: event management, payments, bulk messaging (email + WhatsApp), reports, at-the-door check-in
+- Admin tools: user management, WhatsApp instance management, form builder
+
+---
+
+## Tech Stack
+
+| Layer | Technology |
+|-------|-----------|
+| Framework | Next.js 15 (App Router, React 19) |
+| Language | TypeScript |
+| Styling | Tailwind CSS 3 |
+| UI Primitives | Radix UI |
+| Forms | React Hook Form + Zod |
+| Icons | Lucide React |
+| QR Scanning | `@zxing/browser`, `react-webcam` |
+| QR Generation | `qrcode` |
+| Date handling | `date-fns`, `react-day-picker` |
+
+---
+
+## Prerequisites
+
+- Node.js 18+
+- npm
+- A running backend API (see `../backend/README.md`)
+
+---
+
+## Installation
+
+```bash
+cd frontend
+npm install
+```
+
+---
+
+## Environment Variables
+
+Create `frontend/.env.local`:
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `NEXT_PUBLIC_API_URL` | Yes | Base URL of the backend API, e.g. `https://api.yourdomain.com` or `http://localhost:5000` for local dev |
+
+> **Organisation name, brand colour, logo, and contact email** are now stored in the database and managed via **Admin → Site Settings**. `NEXT_PUBLIC_APP_NAME`, `NEXT_PUBLIC_ORG_NAME`, `NEXT_PUBLIC_BRAND_COLOR`, and `NEXT_PUBLIC_CONTACT_EMAIL` are no longer needed and can be removed from your `.env.local`.
+
+---
+
+## Running the App
+
+```bash
+# Development (Turbopack)
+npm run dev
+
+# Production build + start
+npm run build
+npm start
+
+# Lint
+npm run lint
+```
+
+---
+
+## Project Structure
+
+```
+frontend/src/
+├── app/                    # Next.js App Router pages
+│   ├── (auth)/             # Login, register, forgot/reset password
+│   ├── [redirectUrl]/      # Event alias redirects
+│   ├── activate-account/   # Account activation from email link
+│   ├── dashboard/
+│   │   ├── layout.tsx      # Shared dashboard shell + nav
+│   │   ├── admin/          # Admin-only pages
+│   │   ├── supervisor/     # Supervisor + admin pages
+│   │   ├── staff/          # Staff + above pages
+│   │   └── user/           # All authenticated users
+│   ├── events/             # Public event listing + detail
+│   ├── forms/              # Public form submission
+│   ├── legal/              # Privacy policy, terms
+│   ├── payment/            # Payment success/failure/cancel
+│   ├── register/[eventId]/ # Event registration flow
+│   ├── registration/       # Post-registration success
+│   ├── reset-password/     # Password reset (token flow)
+│   ├── self-service/       # Guest self-service portal
+│   ├── set-banner/         # Quick banner editor (supervisor)
+│   └── layout.tsx          # Root layout
+├── components/             # Shared UI components
+├── hooks/                  # Custom React hooks (useAuth, etc.)
+└── lib/                    # Utilities (api.ts fetch wrapper, etc.)
+```
+
+---
+
+## Pages & Routes
+
+### Public
+
+| Route | Description |
+|-------|-------------|
+| `/` | Landing page |
+| `/events` | Public event listing — shows "Sold Out" button when all limited-stock options are exhausted; free events show "Register" without a price suffix |
+| `/events/[id]` | Event detail page — sold-out/registration-closed/not-yet-open states; zero-price options display "Free"; tiered low-stock badges (≤ 50 tickets: 20 %; 51–200: 15 %; 201–1 000: 10 %; 1 000+: 5 %) |
+| `/[redirectUrl]` | Event alias redirect |
+| `/register/[eventId]` | Registration flow — sold-out banner + disabled button when event is fully booked; tiered stock badges; variant qty controls; early-bird notice |
+| `/forms` | Public form submission |
+| `/legal/privacy` | Privacy policy |
+| `/legal/terms` | Terms of service |
+| `/lockdown-rules` | House rules page |
+| `/payment/success` | Yoco checkout success |
+| `/payment/failure` | Yoco checkout failure |
+| `/payment/cancel` | Yoco checkout cancelled |
+| `/registration/success` | Post-registration confirmation |
+| `/self-service` | Guest self-service (find tickets by email) |
+| `/activate-account` | Account activation via email link |
+| `/reset-password` | Password reset (token from email) |
+
+### Auth
+
+| Route | Description |
+|-------|-------------|
+| `/login` | Login form |
+| `/register` | Sign-up form |
+| `/forgot-password` | Request password reset |
+
+### User Dashboard — `/dashboard/user/`
+
+| Route | Description |
+|-------|-------------|
+| `/dashboard/user` | My registrations + tickets overview |
+| `/dashboard/user/profile` | Edit profile, notification preferences |
+| `/dashboard/user/pay` | Pay outstanding balance |
+| `/dashboard/user/donate` | Make a donation |
+| `/dashboard/user/forms` | Complete registration forms |
+| `/dashboard/user/reset-password` | Change password (authenticated) |
+
+### Staff Dashboard — `/dashboard/staff/`
+
+| Route | Description |
+|-------|-------------|
+| `/dashboard/staff` | Staff overview |
+| `/dashboard/staff/ticket-scanning` | QR code scanner for check-in |
+| `/dashboard/staff/event-tickets` | All tickets for an event |
+
+### Supervisor Dashboard — `/dashboard/supervisor/`
+
+| Route | Description |
+|-------|-------------|
+| `/dashboard/supervisor` | Supervisor overview + quick links |
+| `/dashboard/supervisor/events` | Create/edit/manage events — 6-step wizard (Basic Details, Items & Pricing, Sections, Form, Visibility, Attachments); form builder with up/down reorder, type badges, separate shortcut buttons for statement/heading fields; early-bird tiers with labelled deadline/price inputs; event image file upload with preview; attachments can be staged during creation (uploaded after save) |
+| `/dashboard/supervisor/event-options` | Manage ticket types / options |
+| `/dashboard/supervisor/payments` | View and manage payments |
+| `/dashboard/supervisor/manual` | Manual payment entry |
+| `/dashboard/supervisor/manual-registration` | Register an attendee manually |
+| `/dashboard/supervisor/at-the-door` | At-the-door check-in management |
+| `/dashboard/supervisor/email-attendees` | Bulk email + automations + broadcasts + scheduled |
+| `/dashboard/supervisor/whatsapp-attendees` | Bulk WhatsApp + automations + broadcasts + scheduled |
+| `/dashboard/supervisor/reports` | Generate/download/email reports |
+| `/dashboard/supervisor/forms` | Event form builder and response viewer — three modes: view responses (printable, page-break per submission), fill/edit responses, edit form structure; improved form builder with reorder buttons and type badges |
+| `/dashboard/supervisor/sections` | Manage event sections |
+| `/set-banner` | Quick banner editor |
+
+### Admin Dashboard — `/dashboard/admin/`
+
+| Route | Description |
+|-------|-------------|
+| `/dashboard/admin` | Admin overview |
+| `/dashboard/admin/users` | User management — list, inline edit, deactivate, role assignment, per-page selector (10/25/50/100), server-side search/filter by name/email/phone/role/status, "Delete data" button to anonymise a user's personal information |
+| `/dashboard/admin/registrations` | All registrations — filter by event, status, and fuzzy text search; expandable rows showing ticket options and form responses |
+| `/dashboard/admin/whatsapp` | WhatsApp instance management (WAWP) |
+| `/dashboard/admin/forms` | View all form responses (inherits supervisor/forms) |
+| `/dashboard/admin/settings` | Site Settings — organisation details, logo, brand colour, notification emails, SMTP delivery (with test connection; friendly errors + collapsible raw details on failure), legal page content |
+
+### Setup — `/setup`
+
+| Route | Description |
+|-------|-------------|
+| `/setup` | First-time setup wizard — shown automatically on a fresh deployment (empty database). Creates the first admin account and initial site settings in three steps: organisation details, admin account, branding. After completion, redirected to login. |
+
+---
+
+## Authentication & Roles
+
+Auth state is managed via the `useAuth` hook (`src/hooks/useAuth.ts`). The JWT is stored in `localStorage` and sent as a `Bearer` token on every API call via `src/lib/api.ts` (`apiFetch`).
+
+### Role access matrix
+
+| Page group | `user` | `staff` | `supervisor` | `admin` |
+|------------|--------|---------|--------------|---------|
+| Public pages | Yes | Yes | Yes | Yes |
+| `/dashboard/user/*` | Yes | Yes | Yes | Yes |
+| `/dashboard/staff/*` | — | Yes | Yes | Yes |
+| `/dashboard/supervisor/*` | — | — | Yes | Yes |
+| `/dashboard/admin/*` | — | — | — | Yes |
+
+Unauthenticated users are redirected to `/login`. Insufficient-role users see an in-page warning.
+
+### Notification preferences
+
+Users set their preference on the profile page:
+- `email` — email notifications only
+- `whatsapp` — WhatsApp notifications only
+- `both` — both channels
+
+The supervisor bulk-messaging pages show preference indicators in user/attendee dropdowns:
+- **Indigo badge** — email preference matches (email/both) on the email page
+- **Green badge** — WhatsApp preference matches (whatsapp/both) on the WA page
+- **Amber badge** — preference mismatch (will still receive message)
+
+A "Select Email/both" or "Select WhatsApp/both" quick-select button is available in each dropdown.
+
+---
+
+## Payment Flow
+
+1. User registers for a paid event → registration created with `status: pending`
+2. User clicks "Pay" → calls `POST /api/payments/yoco-checkout`
+3. Backend returns a Yoco `redirectUrl` → frontend opens it in a new tab
+4. User pays on Yoco's hosted page → Yoco sends webhook to backend
+5. Backend reconciles payment, updates registration status, generates and emails tickets
+6. User sees `/payment/success` and tickets appear in their dashboard
+
+Outstanding balances can be paid at any time from `/dashboard/user/pay`.
+
+---
+
+## Notifications
+
+### Bulk Email / WhatsApp (`email-attendees`, `whatsapp-attendees`)
+
+Both pages share the same feature set:
+
+- **Attendees tab** — send or schedule a message to attendees of a specific event; filter by payment status; templates: custom, payment reminder, event reminder, ticket delivery
+- **Automations tab** — schedule pre-event (1 week), final reminder (24/48 h), thank-you, and promo messages with smart default timing based on the event's dates
+- **Broadcasts tab** — send to a selected user list plus ad-hoc email addresses or phone numbers
+- **Scheduled tab** — view, edit (reschedule / update content), or cancel queued jobs
+
+Mismatch warnings appear when selected users prefer a different channel. Falling back to all attendees if no matching-preference attendees exist.
+
+The attendee selection dropdown is constrained to a fixed width (`max-w-xs` / `w-64` panel) so it does not grow to fill the page on wide screens.
+
+---
+
+## Deployment
+
+### Vercel (recommended)
+1. Push the `frontend/` directory to GitHub
+2. Create a Vercel project pointing to `frontend/`
+3. Set env var: `NEXT_PUBLIC_API_URL=https://your-api.domain.com`
+4. Deploy
+
+### Self-hosted (Node.js)
+```bash
+npm run build
+npm start   # port 3000 by default
+```
+
+Use nginx/Caddy as a reverse proxy.
+
+### PM2
+```bash
+pm2 start npm --name hope-events-frontend -- start
+pm2 save && pm2 startup
+```
+
+### Checklist
+- [ ] `NEXT_PUBLIC_API_URL` set to production backend URL
+- [ ] Backend `FRONTEND_URL` includes this frontend's origin
+- [ ] Yoco webhook URL reachable over HTTPS
+- [ ] `npm run build` completes without errors
+
+---
+
+## Troubleshooting
+
+| Symptom | Fix |
+|---------|-----|
+| 4xx/5xx API calls | Check `NEXT_PUBLIC_API_URL` is correct and reachable from the browser |
+| CORS errors | Confirm backend `FRONTEND_URL` includes your frontend origin |
+| Port conflict in dev | Next.js auto-selects 3001+ if 3000 is taken — keep `NEXT_PUBLIC_API_URL` pointing at the backend port |
+| Images not showing | Backend must serve `/uploads` and `public/uploads` must be writable |
+| Login loop | Clear `localStorage` and re-login; check `JWT_SECRET` on backend hasn't changed |
+| QR scanner not working | Browser requires camera permission; `@zxing/browser` requires HTTPS in production |
\ No newline at end of file
diff --git a/frontend/components.json b/frontend/components.json
new file mode 100644
index 0000000..3ad470b
--- /dev/null
+++ b/frontend/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
new file mode 100644
index 0000000..c85fb67
--- /dev/null
+++ b/frontend/eslint.config.mjs
@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
new file mode 100644
index 0000000..04bfdbb
--- /dev/null
+++ b/frontend/next.config.ts
@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  images: {
+    domains: ['images.unsplash.com'],
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+};
+
+export default nextConfig;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
new file mode 100644
index 0000000..c123363
--- /dev/null
+++ b/frontend/package-lock.json
@@ -0,0 +1,8232 @@
+{
+  "name": "hope-events-frontend",
+  "version": "1.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hope-events-frontend",
+      "version": "1.2",
+      "dependencies": {
+        "@hookform/resolvers": "^5.2.1",
+        "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
+        "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.2",
+        "@radix-ui/react-dialog": "^1.1.14",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
+        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-navigation-menu": "^1.2.13",
+        "@radix-ui/react-radio-group": "^1.3.7",
+        "@radix-ui/react-select": "^2.2.5",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slider": "^1.3.5",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-switch": "^1.2.5",
+        "@radix-ui/react-tabs": "^1.1.12",
+        "@radix-ui/react-toast": "^1.2.14",
+        "@radix-ui/react-tooltip": "^1.2.7",
+        "@zxing/browser": "^0.1.5",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "lucide-react": "^0.536.0",
+        "next": "15.4.5",
+        "qrcode": "^1.5.4",
+        "react": "19.1.0",
+        "react-day-picker": "^9.8.1",
+        "react-dom": "19.1.0",
+        "react-hook-form": "^7.62.0",
+        "react-webcam": "^7.2.0",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^4.0.15"
+      },
+      "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@types/node": "^20",
+        "@types/qrcode": "^1.5.5",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "autoprefixer": "^10.4.21",
+        "eslint": "^9",
+        "eslint-config-next": "15.4.5",
+        "postcss": "^8.5.6",
+        "tailwindcss": "3.4",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.3.1.tgz",
+      "integrity": "sha512-LnBOyuj+piItX/D5BWBSckBsuZyOt7Jg2obGNiObq7qjl1A2/8F+i4RS8/MmkSdnw6hOe6afrJLCWrUWZw5Mlw==",
+      "license": "MIT"
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.5.tgz",
+      "integrity": "sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.5.tgz",
+      "integrity": "sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.4.tgz",
+      "integrity": "sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
+      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.6",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.32.0.tgz",
+      "integrity": "sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
+      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.15.1",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
+      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.5.tgz",
+      "integrity": "sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.1.tgz",
+      "integrity": "sha512-u0+6X58gkjMcxur1wRWokA7XsiiBJ6aK17aPZxhkoYiK5J+HcTx0Vhu9ovXe6H+dVpO6cjrn2FkJTryXEMlryQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.3.tgz",
+      "integrity": "sha512-ryFMfvxxpQRsgZJqBd4wsttYQbCxsJksrv9Lw/v798JcQ8+w84mBWuXwl+TT0WJ/WrYOLaYpwQXi3sA9nTIaIg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.3.tgz",
+      "integrity": "sha512-yHpJYynROAj12TA6qil58hmPmAwxKKC7reUqtGLzsOHfP7/rniNGTL8tjWX6L3CTV4+5P4ypcS7Pp+7OB+8ihA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.0.tgz",
+      "integrity": "sha512-sBZmpwmxqwlqG9ueWFXtockhsxefaV6O84BMOrhtg/YqbTaRdqDE7hxraVE3y6gVM4eExmfzW4a8el9ArLeEiQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.0.tgz",
+      "integrity": "sha512-M64XVuL94OgiNHa5/m2YvEQI5q2cl9d/wk0qFTDVXcYzi43lxuiFTftMR1tOnFQovVXNZJ5TURSDK2pNe9Yzqg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.0.tgz",
+      "integrity": "sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.0.tgz",
+      "integrity": "sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.0.tgz",
+      "integrity": "sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.0.tgz",
+      "integrity": "sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.0.tgz",
+      "integrity": "sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.0.tgz",
+      "integrity": "sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.0.tgz",
+      "integrity": "sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.3.tgz",
+      "integrity": "sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.3.tgz",
+      "integrity": "sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.3.tgz",
+      "integrity": "sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.3.tgz",
+      "integrity": "sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.3.tgz",
+      "integrity": "sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.3.tgz",
+      "integrity": "sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.3.tgz",
+      "integrity": "sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.3.tgz",
+      "integrity": "sha512-+CyRcpagHMGteySaWos8IbnXcHgfDn7pO2fiC2slJxvNq9gDipYBN42/RagzctVRKgxATmfqOSulgZv5e1RdMg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.4.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.3.tgz",
+      "integrity": "sha512-MjnHPnbqMXNC2UgeLJtX4XqoVHHlZNd+nPt1kRPmj63wURegwBhZlApELdtxM2OIZDRv/DFtLcNhVbd1z8GYXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.3.tgz",
+      "integrity": "sha512-xuCdhH44WxuXgOM714hn4amodJMZl3OEvf0GVTm0BEyMeA2to+8HEdRPShH0SLYptJY1uBw+SCFP9WVQi1Q/cw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.3.tgz",
+      "integrity": "sha512-OWwz05d++TxzLEv4VnsTz5CmZ6mI6S05sfQGEMrNrQcOEERbX46332IvE7pO/EUiw7jUrrS40z/M7kPyjfl04g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.4.5.tgz",
+      "integrity": "sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-15.4.5.tgz",
+      "integrity": "sha512-YhbrlbEt0m4jJnXHMY/cCUDBAWgd5SaTa5mJjzOt82QwflAFfW/h3+COp2TfVSzhmscIZ5sg2WXt3MLziqCSCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.4.5.tgz",
+      "integrity": "sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.4.5.tgz",
+      "integrity": "sha512-CL6mfGsKuFSyQjx36p2ftwMNSb8PQog8y0HO/ONLdQqDql7x3aJb/wB+LA651r4we2pp/Ck+qoRVUeZZEvSurA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.4.5.tgz",
+      "integrity": "sha512-1hTVd9n6jpM/thnDc5kYHD1OjjWYpUJrJxY4DlEacT7L5SEOXIifIdTye6SQNNn8JDZrcN+n8AWOmeJ8u3KlvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.4.5.tgz",
+      "integrity": "sha512-4W+D/nw3RpIwGrqpFi7greZ0hjrCaioGErI7XHgkcTeWdZd146NNu1s4HnaHonLeNTguKnL2Urqvj28UJj6Gqw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.4.5.tgz",
+      "integrity": "sha512-N6Mgdxe/Cn2K1yMHge6pclffkxzbSGOydXVKYOjYqQXZYjLCfN/CuFkaYDeDHY2VBwSHyM2fUjYBiQCIlxIKDA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.4.5.tgz",
+      "integrity": "sha512-YZ3bNDrS8v5KiqgWE0xZQgtXgCTUacgFtnEgI4ccotAASwSvcMPDLua7BWLuTfucoRv6mPidXkITJLd8IdJplQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.4.5.tgz",
+      "integrity": "sha512-9Wr4t9GkZmMNcTVvSloFtjzbH4vtT4a8+UHqDoVnxA5QyfWe6c5flTH1BIWPGNWSUlofc8dVJAE7j84FQgskvQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.4.5.tgz",
+      "integrity": "sha512-voWk7XtGvlsP+w8VBz7lqp8Y+dYw/MTI4KeS0gTVtfdhdJ5QwhXLmNrndFOin/MDoCvUaLWMkYKATaCoUkt2/A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.11.tgz",
+      "integrity": "sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collapsible": "1.1.11",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.14.tgz",
+      "integrity": "sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz",
+      "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+      "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
+      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.13.tgz",
+      "integrity": "sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
+      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
+      "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.5.tgz",
+      "integrity": "sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz",
+      "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
+      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.14.tgz",
+      "integrity": "sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
+      "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rushstack/eslint-patch": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+      "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
+      "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.9.tgz",
+      "integrity": "sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.1.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
+      "integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.1.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
+      "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.39.0.tgz",
+      "integrity": "sha512-bhEz6OZeUR+O/6yx9Jk6ohX6H9JSFTaiY0v9/PuKT3oGK0rn0jNplLmyFUGV+a9gfYnVNwGDwS/UkLIuXNb2Rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.39.0",
+        "@typescript-eslint/type-utils": "8.39.0",
+        "@typescript-eslint/utils": "8.39.0",
+        "@typescript-eslint/visitor-keys": "8.39.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.39.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.39.0.tgz",
+      "integrity": "sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.39.0",
+        "@typescript-eslint/types": "8.39.0",
+        "@typescript-eslint/typescript-estree": "8.39.0",
+        "@typescript-eslint/visitor-keys": "8.39.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.39.0.tgz",
+      "integrity": "sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.39.0",
+        "@typescript-eslint/types": "^8.39.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.39.0.tgz",
+      "integrity": "sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.39.0",
+        "@typescript-eslint/visitor-keys": "8.39.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.39.0.tgz",
+      "integrity": "sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.39.0.tgz",
+      "integrity": "sha512-6B3z0c1DXVT2vYA9+z9axjtc09rqKUPRmijD5m9iv8iQpHBRYRMBcgxSiKTZKm6FwWw1/cI4v6em35OsKCiN5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.39.0",
+        "@typescript-eslint/typescript-estree": "8.39.0",
+        "@typescript-eslint/utils": "8.39.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.39.0.tgz",
+      "integrity": "sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.39.0.tgz",
+      "integrity": "sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.39.0",
+        "@typescript-eslint/tsconfig-utils": "8.39.0",
+        "@typescript-eslint/types": "8.39.0",
+        "@typescript-eslint/visitor-keys": "8.39.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.39.0.tgz",
+      "integrity": "sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.39.0",
+        "@typescript-eslint/types": "8.39.0",
+        "@typescript-eslint/typescript-estree": "8.39.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.39.0.tgz",
+      "integrity": "sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.39.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@zxing/browser": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.1.5.tgz",
+      "integrity": "sha512-4Lmrn/il4+UNb87Gk8h1iWnhj39TASEHpd91CwwSJtY5u+wa0iH9qS0wNLAWbNVYXR66WmT5uiMhZ7oVTrKfxw==",
+      "license": "MIT",
+      "optionalDependencies": {
+        "@zxing/text-encoding": "^0.9.0"
+      },
+      "peerDependencies": {
+        "@zxing/library": "^0.21.0"
+      }
+    },
+    "node_modules/@zxing/library": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.21.3.tgz",
+      "integrity": "sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ts-custom-error": "^3.2.1"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "license": "(Unlicense OR Apache-2.0)",
+      "optional": true
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.10.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+      "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.25.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
+      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001726",
+        "electron-to-chromium": "^1.5.173",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001787",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz",
+      "integrity": "sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.197",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.197.tgz",
+      "integrity": "sha512-m1xWB3g7vJ6asIFz+2pBUbq3uGmfmln1M9SSvBe4QIFWYrRHylP73zL/3nMjDmwz8V+1xAXQDfBd6+HPW0WvDQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "license": "MIT"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+      "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.32.0.tgz",
+      "integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.0",
+        "@eslint/core": "^0.15.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.32.0",
+        "@eslint/plugin-kit": "^0.3.4",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-15.4.5.tgz",
+      "integrity": "sha512-IMijiXaZ43qFB+Gcpnb374ipTKD8JIyVNR+6VsifFQ/LHyx+A9wgcgSIhCX5PYSjwOoSYD5LtNHKlM5uc23eww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "15.4.5",
+        "@rushstack/eslint-patch": "^1.10.3",
+        "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^5.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0 || ^9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+      "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+      "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+      "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+      "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "license": "ISC"
+    },
+    "node_modules/lucide-react": {
+      "version": "0.536.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz",
+      "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.2.tgz",
+      "integrity": "sha512-tWVJxJHmBWLy69PvO96TZMZDrzmw5KeiZBz3RHmiM2XZ9grBJ2WgMAFVVg25nqp3ZjTFUs2Ftw1JhscL3Teliw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "15.4.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.4.5.tgz",
+      "integrity": "sha512-nJ4v+IO9CPmbmcvsPebIoX3Q+S7f6Fu08/dEWu0Ttfa+wVwQRh9epcmsyCPjmL2b8MxC+CkBR97jgDhUUztI3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.4.5",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.4.5",
+        "@next/swc-darwin-x64": "15.4.5",
+        "@next/swc-linux-arm64-gnu": "15.4.5",
+        "@next/swc-linux-arm64-musl": "15.4.5",
+        "@next/swc-linux-x64-gnu": "15.4.5",
+        "@next/swc-linux-x64-musl": "15.4.5",
+        "@next/swc-win32-arm64-msvc": "15.4.5",
+        "@next/swc-win32-x64-msvc": "15.4.5",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-day-picker": {
+      "version": "9.8.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.1.tgz",
+      "integrity": "sha512-kMcLrp3PfN/asVJayVv82IjF3iLOOxuH5TNFWezX6lS/T8iVRFPTETpHl3TUSTH99IDMZLubdNPJr++rQctkEw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.2.0",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.62.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
+      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz",
+      "integrity": "sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-webcam": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/react-webcam/-/react-webcam-7.2.0.tgz",
+      "integrity": "sha512-xkrzYPqa1ag2DP+2Q/kLKBmCIfEx49bVdgCCCcZf88oF+0NPEbkwYk3/s/C7Zy0mhM8k+hpdNkBLzxg8H0aWcg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.2.0",
+        "react-dom": ">=16.2.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.3.tgz",
+      "integrity": "sha512-eX2IQ6nFohW4DbvHIOLRB3MHFpYqaqvXd3Tp5e/T/dSH83fxaNJQRvDMhASmkNTsNTVF2/OOopzRCt7xokgPfg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.4",
+        "semver": "^7.7.2"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.3",
+        "@img/sharp-darwin-x64": "0.34.3",
+        "@img/sharp-libvips-darwin-arm64": "1.2.0",
+        "@img/sharp-libvips-darwin-x64": "1.2.0",
+        "@img/sharp-libvips-linux-arm": "1.2.0",
+        "@img/sharp-libvips-linux-arm64": "1.2.0",
+        "@img/sharp-libvips-linux-ppc64": "1.2.0",
+        "@img/sharp-libvips-linux-s390x": "1.2.0",
+        "@img/sharp-libvips-linux-x64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.0",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.0",
+        "@img/sharp-linux-arm": "0.34.3",
+        "@img/sharp-linux-arm64": "0.34.3",
+        "@img/sharp-linux-ppc64": "0.34.3",
+        "@img/sharp-linux-s390x": "0.34.3",
+        "@img/sharp-linux-x64": "0.34.3",
+        "@img/sharp-linuxmusl-arm64": "0.34.3",
+        "@img/sharp-linuxmusl-x64": "0.34.3",
+        "@img/sharp-wasm32": "0.34.3",
+        "@img/sharp-win32-arm64": "0.34.3",
+        "@img/sharp-win32-ia32": "0.34.3",
+        "@img/sharp-win32-x64": "0.34.3"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+      "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+      "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+      "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.0.15.tgz",
+      "integrity": "sha512-2IVHb9h4Mt6+UXkyMs0XbfICUh1eUrlJJAOupBHUhLRnKkruawyDddYRCs0Eizt900ntIMk9/4RksYl+FgSpcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100644
index 0000000..e60cd77
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "hope-events-frontend",
+  "version": "1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@zxing/browser": "^0.1.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.536.0",
+    "next": "15.4.5",
+    "qrcode": "^1.5.4",
+    "react": "19.1.0",
+    "react-day-picker": "^9.8.1",
+    "react-dom": "19.1.0",
+    "react-hook-form": "^7.62.0",
+    "react-webcam": "^7.2.0",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.0.15"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9",
+    "eslint-config-next": "15.4.5",
+    "postcss": "^8.5.6",
+    "tailwindcss": "3.4",
+    "typescript": "^5"
+  }
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/file.svg b/frontend/public/file.svg
new file mode 100644
index 0000000..004145c
--- /dev/null
+++ b/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/public/globe.svg b/frontend/public/globe.svg
new file mode 100644
index 0000000..567f17b
--- /dev/null
+++ b/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/frontend/public/next.svg b/frontend/public/next.svg
new file mode 100644
index 0000000..5174b28
--- /dev/null
+++ b/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
new file mode 100644
index 0000000..7705396
--- /dev/null
+++ b/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/public/window.svg b/frontend/public/window.svg
new file mode 100644
index 0000000..b2b2a44
--- /dev/null
+++ b/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/frontend/src/app/(auth)/forgot-password/page.tsx b/frontend/src/app/(auth)/forgot-password/page.tsx
new file mode 100644
index 0000000..a16f977
--- /dev/null
+++ b/frontend/src/app/(auth)/forgot-password/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+import { useState } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { apiFetch } from "@/lib/api";
+
+export default function ForgotPasswordPage() {
+    const [email, setEmail] = useState("");
+    const [status, setStatus] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+
+    const submit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!email) return;
+        try {
+            setLoading(true);
+            setStatus(null);
+            const res: any = await apiFetch("/api/users/forgot", { method: "POST", body: { email } });
+            setStatus(res?.message || "If that email exists, a password reset link has been sent.");
+        } catch (err: any) {
+            try {
+                const parsed = JSON.parse(err?.message || "");
+                setStatus(parsed?.message || "Something went wrong");
+            } catch {
+                setStatus(err?.message || "Something went wrong");
+            }
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            <Navbar />
+            <main className="flex-1 px-4 py-10 max-w-md mx-auto w-full">
+                <div className="border rounded-xl p-6 bg-white shadow-sm">
+                    <h1 className="text-2xl font-semibold mb-4">Forgot your password?</h1>
+                    <p className="text-gray-700 mb-6">Enter your account email and we'll send you a link to reset your password.</p>
+                    <form onSubmit={submit} className="space-y-4">
+                        <div>
+                            <label className="block text-sm font-medium mb-1">Email</label>
+                            <input type="email" value={email} onChange={e => setEmail(e.target.value)} required className="w-full border rounded px-3 py-2" />
+                        </div>
+                        <button disabled={loading || !email} className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60">
+                            {loading ? "Sending..." : "Send reset link"}
+                        </button>
+                    </form>
+                    {status && <p className="text-sm text-gray-700 mt-4">{status}</p>}
+                </div>
+            </main>
+            <Footer />
+        </div>
+    );
+}
diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..ea3afae
--- /dev/null
+++ b/frontend/src/app/(auth)/login/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+import React, { Suspense } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { LoginForm } from "@/components/auth/LoginForm";
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 flex items-center justify-center p-6">
+        <div className="w-full max-w-md">
+          <h1 className="text-2xl font-semibold mb-4">Login</h1>
+          <Suspense fallback={<div />}>
+            <LoginForm />
+          </Suspense>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/(auth)/register/page.tsx b/frontend/src/app/(auth)/register/page.tsx
new file mode 100644
index 0000000..231f2e2
--- /dev/null
+++ b/frontend/src/app/(auth)/register/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+import React, { Suspense } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { RegisterForm } from "@/components/auth/RegisterForm";
+
+export default function RegisterPage() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 flex items-center justify-center p-6">
+        <div className="w-full max-w-md">
+          <h1 className="text-2xl font-semibold mb-4">Create Account</h1>
+          <Suspense fallback={<div />}>
+            <RegisterForm />
+          </Suspense>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/[redirectUrl]/page.tsx b/frontend/src/app/[redirectUrl]/page.tsx
new file mode 100644
index 0000000..7c7fb55
--- /dev/null
+++ b/frontend/src/app/[redirectUrl]/page.tsx
@@ -0,0 +1,45 @@
+import { redirect } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+export const revalidate = 60;
+
+export default async function EventRedirectPage({ params }: { params: Promise<{ redirectUrl: string }> }) {
+    const { redirectUrl } = await params;
+
+    let event: any = null;
+
+    try {
+        event = await apiFetch<any>(`/api/events/by-alias/${redirectUrl}`);
+    } catch (error) {
+        console.error("Failed to fetch event:", error);
+    }
+
+    if (!event || event.message?.toLowerCase().includes("not found")) {
+        return (
+            <main className="flex flex-col items-center justify-center min-h-screen text-center px-4">
+                <p className="text-6xl font-bold text-gray-200 mb-2">404</p>
+                <h1 className="text-2xl font-bold mb-2">Page Not Found</h1>
+                <p className="text-gray-500 mb-6">
+                    The page you&apos;re looking for doesn&apos;t exist.
+                </p>
+                <a href="/" className="text-blue-600 hover:underline transition-all duration-200">
+                    Back to Home &rarr;
+                </a>
+            </main>
+        );
+    }
+
+    if (event.isLive || event.isActive) {
+        redirect(`/events/${event.id}`);
+    }
+
+    return (
+        <main className="flex flex-col items-center justify-center min-h-screen text-center">
+            <h1 className="text-3xl font-bold mb-2">This event has ended</h1>
+            <p className="text-gray-600">Thanks for joining us! Stay tuned for the next one.</p>
+            <a href="/" className="mt-4 text-blue-600 hover:underline">
+                Back to Home &rarr;
+            </a>
+        </main>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/activate-account/page.tsx b/frontend/src/app/activate-account/page.tsx
new file mode 100644
index 0000000..598c990
--- /dev/null
+++ b/frontend/src/app/activate-account/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import React, { Suspense, useMemo, useState } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { apiFetch } from "@/lib/api";
+import { useSearchParams, useRouter } from "next/navigation";
+import { appName } from "@/lib/siteConfig";
+
+function ActivateAccountContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const token = search.get("token") || "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const canSubmit = useMemo(() => password.length >= 8 && password === confirm && !!token, [password, confirm, token]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    try {
+      setLoading(true);
+      setStatus(null);
+      const data = await apiFetch<any>("/api/users/activate", { method: "POST", body: { token, password } });
+      // Auto-login: save token and redirect to dashboard
+      if (data?.token) {
+        localStorage.setItem("token", data.token);
+      }
+      setStatus("Your account is now active. Redirecting…");
+      setTimeout(() => router.push("/dashboard"), 1500);
+    } catch (err: any) {
+      setStatus(err?.message || "Activation failed. The link may have expired.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 px-4 py-10 max-w-md mx-auto w-full">
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+          <h1 className="text-2xl font-semibold mb-2">Activate your account</h1>
+          <p className="text-gray-500 text-sm mb-5">Set a password to activate your {appName} account.</p>
+          {!token && <p className="text-red-600 mb-4">Missing or invalid activation link.</p>}
+          <form onSubmit={submit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Password</label>
+              <input type="password" value={password} onChange={e => setPassword(e.target.value)} required className="w-full border rounded px-3 py-2" />
+              <p className="text-xs text-gray-500 mt-1">At least 8 characters.</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Confirm Password</label>
+              <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)} required className="w-full border rounded px-3 py-2" />
+            </div>
+            {password && confirm && password !== confirm && (
+              <p className="text-xs text-red-600">Passwords do not match.</p>
+            )}
+            <button disabled={loading || !canSubmit} className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60 w-full py-2.5 font-medium">
+              {loading ? "Activating…" : "Activate my account"}
+            </button>
+          </form>
+          {status && <p className="text-sm text-gray-700 mt-4">{status}</p>}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default function ActivateAccountPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <ActivateAccountContent />
+    </Suspense>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/church_logo.jpg b/frontend/src/app/church_logo.jpg
new file mode 100644
index 0000000..5bfb94d
Binary files /dev/null and b/frontend/src/app/church_logo.jpg differ
diff --git a/frontend/src/app/dashboard/admin/cashup/[id]/page.tsx b/frontend/src/app/dashboard/admin/cashup/[id]/page.tsx
new file mode 100644
index 0000000..17d4409
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/cashup/[id]/page.tsx
@@ -0,0 +1,505 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import type { EventCost, EventCostType, EventFinancials, CashupMethod } from "@/types";
+
+const METHOD_LABELS: Record<CashupMethod, string> = { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
+const METHODS: CashupMethod[] = ["cash", "card", "eft", "other"];
+const ZAR_DENOMINATIONS = [200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1];
+
+function money(n: number | null | undefined): string {
+  return `R${Number(n || 0).toFixed(2)}`;
+}
+function denomLabel(v: number): string {
+  return v >= 1 ? `R${v}` : `${Math.round(v * 100)}c`;
+}
+
+type LineInput = { actualAmount: string; notes: string };
+
+export default function EventCashupPage() {
+  const params = useParams<{ id: string }>();
+  const eventId = params.id;
+  const router = useRouter();
+  const { token } = useAuth();
+
+  const [tab, setTab] = useState<"costs" | "reconciliation">("costs");
+  const [data, setData] = useState<EventFinancials | null>(null);
+  const [eventOptions, setEventOptions] = useState<{ id: string; name: string }[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const isClosed = data?.event?.cashupStatus === "closed";
+
+  const load = async () => {
+    if (!token || !eventId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const [financials, event] = await Promise.all([
+        apiFetch<EventFinancials>(`/api/cashups/event/${eventId}`, { authToken: token }),
+        apiFetch<any>(`/api/events/${eventId}`, { authToken: token })
+      ]);
+      setData(financials);
+      setEventOptions((event.eventOptions || []).map((o: any) => ({ id: o.id, name: o.name })));
+    } catch (e: any) {
+      setError(e?.message || "Failed to load cashup data");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, [token, eventId]);
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <button className="text-xs text-indigo-600 hover:underline" onClick={() => router.push("/dashboard/admin/cashup")}>← Back to cashup</button>
+          <h1 className="text-xl font-semibold mt-1">{data?.event?.title || "Event"} — Cashup</h1>
+        </div>
+        <span className={"text-xs px-2 py-1 rounded " + (isClosed ? "bg-rose-50 text-rose-700" : "bg-emerald-50 text-emerald-700")}>
+          {isClosed ? "Closed" : "Open"}
+        </span>
+      </div>
+
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded p-2">{error}</div>}
+
+      <div className="flex gap-2 border-b">
+        <button className={"px-3 py-2 text-sm " + (tab === "costs" ? "border-b-2 border-indigo-600 text-indigo-700 font-medium" : "text-gray-500")} onClick={() => setTab("costs")}>Costs</button>
+        <button className={"px-3 py-2 text-sm " + (tab === "reconciliation" ? "border-b-2 border-indigo-600 text-indigo-700 font-medium" : "text-gray-500")} onClick={() => setTab("reconciliation")}>Reconciliation</button>
+      </div>
+
+      {loading && <div className="text-sm text-gray-400">Loading…</div>}
+
+      {!loading && data && tab === "costs" && (
+        <CostsTab eventId={eventId} token={token || ""} costs={data.costs} eventOptions={eventOptions} isClosed={isClosed} onChanged={load} />
+      )}
+
+      {!loading && data && tab === "reconciliation" && (
+        <ReconciliationTab
+          eventId={eventId}
+          token={token || ""}
+          data={data}
+          busy={busy}
+          setBusy={setBusy}
+          setError={setError}
+          onChanged={load}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Costs tab ─────────────────────────────────────────────────────────────
+
+function CostsTab({ eventId, token, costs, eventOptions, isClosed, onChanged }: {
+  eventId: string; token: string; costs: EventCost[]; eventOptions: { id: string; name: string }[]; isClosed: boolean; onChanged: () => void;
+}) {
+  const [editingId, setEditingId] = useState<string | "new" | null>(null);
+  const [label, setLabel] = useState("");
+  const [costType, setCostType] = useState<EventCostType>("once_off");
+  const [amount, setAmount] = useState("");
+  const [eventOptionId, setEventOptionId] = useState("");
+  const [paidFromMethod, setPaidFromMethod] = useState<"" | CashupMethod>("");
+  const [notes, setNotes] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const startNew = () => {
+    setEditingId("new");
+    setLabel(""); setCostType("once_off"); setAmount(""); setEventOptionId(""); setPaidFromMethod(""); setNotes("");
+    setErr(null);
+  };
+
+  const startEdit = (c: EventCost) => {
+    setEditingId(c.id);
+    setLabel(c.label); setCostType(c.costType); setAmount(String(c.amount)); setEventOptionId(c.eventOptionId || ""); setPaidFromMethod(c.paidFromMethod || ""); setNotes(c.notes || "");
+    setErr(null);
+  };
+
+  const cancel = () => setEditingId(null);
+
+  const save = async () => {
+    if (!label.trim()) { setErr("Label is required"); return; }
+    if (!amount || isNaN(parseFloat(amount))) { setErr("Amount is required"); return; }
+    if (costType === "per_item" && !eventOptionId) { setErr("Select a ticket type for per-item costs"); return; }
+    setSaving(true);
+    setErr(null);
+    try {
+      const body = { label: label.trim(), costType, amount: parseFloat(amount), eventOptionId: costType === "per_item" ? eventOptionId : null, paidFromMethod: paidFromMethod || null, notes: notes || null };
+      if (editingId === "new") {
+        await apiFetch(`/api/events/${eventId}/costs`, { method: "POST", authToken: token, body });
+      } else {
+        await apiFetch(`/api/costs/${editingId}`, { method: "PUT", authToken: token, body });
+      }
+      setEditingId(null);
+      onChanged();
+    } catch (e: any) {
+      setErr(e?.message || "Failed to save cost");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (id: string) => {
+    if (!confirm("Delete this cost?")) return;
+    try {
+      await apiFetch(`/api/costs/${id}`, { method: "DELETE", authToken: token });
+      onChanged();
+    } catch (e: any) {
+      alert(e?.message || "Failed to delete cost");
+    }
+  };
+
+  const totalCosts = costs.reduce((sum, c) => sum + (c.total ?? c.amount), 0);
+
+  return (
+    <div className="bg-white border rounded-lg p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="text-sm font-medium">Event costs</div>
+        {!isClosed && editingId === null && (
+          <button className="text-xs px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={startNew}>+ Add cost</button>
+        )}
+      </div>
+
+      {isClosed && <div className="text-xs text-gray-500">This event is closed — costs can't be changed until it's reopened.</div>}
+
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 border-b">
+            <th className="py-1">Label</th>
+            <th className="py-1">Type</th>
+            <th className="py-1">Ticket type</th>
+            <th className="py-1">Paid from</th>
+            <th className="py-1 text-right">Amount</th>
+            <th className="py-1 text-right">Total</th>
+            {!isClosed && <th className="py-1"></th>}
+          </tr>
+        </thead>
+        <tbody>
+          {costs.map(c => (
+            <tr key={c.id} className="border-b last:border-0">
+              <td className="py-1.5">{c.label}</td>
+              <td className="py-1.5">{c.costType === "once_off" ? "Once-off" : "Per item"}</td>
+              <td className="py-1.5">{c.eventOption?.name || "—"}</td>
+              <td className="py-1.5 capitalize">{c.paidFromMethod || "—"}</td>
+              <td className="py-1.5 text-right">{money(c.amount)}</td>
+              <td className="py-1.5 text-right font-medium">{money(c.total ?? c.amount)}</td>
+              {!isClosed && (
+                <td className="py-1.5 text-right whitespace-nowrap">
+                  <button className="text-xs text-indigo-600 hover:underline mr-2" onClick={() => startEdit(c)}>Edit</button>
+                  <button className="text-xs text-red-600 hover:underline" onClick={() => remove(c.id)}>Delete</button>
+                </td>
+              )}
+            </tr>
+          ))}
+          {costs.length === 0 && (
+            <tr><td colSpan={7} className="py-3 text-gray-400 text-center">No costs added yet.</td></tr>
+          )}
+        </tbody>
+        {costs.length > 0 && (
+          <tfoot>
+            <tr>
+              <td colSpan={5} className="pt-2 text-right text-gray-500">Total costs</td>
+              <td className="pt-2 text-right font-semibold">{money(totalCosts)}</td>
+              {!isClosed && <td />}
+            </tr>
+          </tfoot>
+        )}
+      </table>
+
+      {editingId !== null && (
+        <div className="border rounded p-3 space-y-2 bg-gray-50">
+          {err && <div className="text-xs text-red-600">{err}</div>}
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Label</label>
+              <input className="w-full border rounded px-2 py-1.5 text-sm" value={label} onChange={e => setLabel(e.target.value)} placeholder="e.g. Venue hire" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Type</label>
+              <select className="w-full border rounded px-2 py-1.5 text-sm" value={costType} onChange={e => setCostType(e.target.value as EventCostType)}>
+                <option value="once_off">Once-off / overall</option>
+                <option value="per_item">Per item (ticket type)</option>
+              </select>
+            </div>
+            {costType === "per_item" && (
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Ticket type</label>
+                <select className="w-full border rounded px-2 py-1.5 text-sm" value={eventOptionId} onChange={e => setEventOptionId(e.target.value)}>
+                  <option value="">Select…</option>
+                  {eventOptions.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
+                </select>
+              </div>
+            )}
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Amount {costType === "per_item" ? "(per ticket)" : "(flat total)"}</label>
+              <input type="number" step="0.01" className="w-full border rounded px-2 py-1.5 text-sm" value={amount} onChange={e => setAmount(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Paid from (optional)</label>
+              <select className="w-full border rounded px-2 py-1.5 text-sm" value={paidFromMethod} onChange={e => setPaidFromMethod(e.target.value as any)}>
+                <option value="">Not from event takings</option>
+                {METHODS.map(m => <option key={m} value={m}>{METHOD_LABELS[m]}</option>)}
+              </select>
+              <p className="text-[10px] text-gray-400 mt-0.5">If this was paid out of the door takings (e.g. cash to a vendor), tag it so the Cashup report deducts it from that method's expected amount.</p>
+            </div>
+            <div className="col-span-2">
+              <label className="block text-xs text-gray-600 mb-1">Notes (optional)</label>
+              <input className="w-full border rounded px-2 py-1.5 text-sm" value={notes} onChange={e => setNotes(e.target.value)} />
+            </div>
+          </div>
+          <div className="flex gap-2 justify-end">
+            <button className="text-xs px-3 py-1.5 rounded border" onClick={cancel} disabled={saving}>Cancel</button>
+            <button className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={save} disabled={saving}>{saving ? "Saving…" : "Save"}</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Reconciliation tab ─────────────────────────────────────────────────────
+
+function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onChanged }: {
+  eventId: string; token: string; data: EventFinancials; busy: boolean;
+  setBusy: (b: boolean) => void; setError: (e: string | null) => void; onChanged: () => void;
+}) {
+  const isClosed = data.event.cashupStatus === "closed";
+  const draftLines = (data.event as any).cashupDraft?.lines as Array<{ method: string; actualAmount?: string | number; notes?: string; denominations?: { value: number; count: number }[] }> | undefined;
+
+  const initialLines: Record<CashupMethod, LineInput> = useMemo(() => {
+    const base: Record<CashupMethod, LineInput> = { cash: { actualAmount: "", notes: "" }, card: { actualAmount: "", notes: "" }, eft: { actualAmount: "", notes: "" }, other: { actualAmount: "", notes: "" } };
+    for (const l of draftLines || []) {
+      if (l.method in base) base[l.method as CashupMethod] = { actualAmount: l.actualAmount != null ? String(l.actualAmount) : "", notes: l.notes || "" };
+    }
+    return base;
+  }, [draftLines]);
+
+  const initialDenomCounts: Record<number, string> = useMemo(() => {
+    const cashLine = (draftLines || []).find(l => l.method === "cash");
+    const out: Record<number, string> = {};
+    for (const d of cashLine?.denominations || []) out[d.value] = String(d.count);
+    return out;
+  }, [draftLines]);
+
+  const [lines, setLines] = useState<Record<CashupMethod, LineInput>>(initialLines);
+  const [denomCounts, setDenomCounts] = useState<Record<number, string>>(initialDenomCounts);
+  const [closeNotes, setCloseNotes] = useState("");
+  const [reopenNotes, setReopenNotes] = useState("");
+
+  useEffect(() => { setLines(initialLines); setDenomCounts(initialDenomCounts); }, [initialLines, initialDenomCounts]);
+
+  const setLine = (method: CashupMethod, field: keyof LineInput, value: string) => {
+    setLines(prev => ({ ...prev, [method]: { ...prev[method], [field]: value } }));
+  };
+
+  const cashDenominationsPayload = () => ZAR_DENOMINATIONS
+    .map(value => ({ value, count: parseInt(denomCounts[value] || "0", 10) || 0 }))
+    .filter(d => d.count > 0);
+
+  const cashActualFromDenoms = cashDenominationsPayload().reduce((sum, d) => sum + d.value * d.count, 0);
+
+  const buildLinesPayload = () => METHODS.map(m => m === "cash"
+    ? { method: "cash", denominations: cashDenominationsPayload(), notes: lines.cash.notes || null }
+    : { method: m, actualAmount: lines[m].actualAmount === "" ? null : parseFloat(lines[m].actualAmount), notes: lines[m].notes || null });
+
+  const saveDraft = async () => {
+    setBusy(true); setError(null);
+    try {
+      await apiFetch(`/api/cashups/event/${eventId}/draft`, { method: "PUT", authToken: token, body: { lines: buildLinesPayload() } });
+      onChanged();
+    } catch (e: any) {
+      setError(e?.message || "Failed to save draft");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const closeWithCashup = async () => {
+    if (!confirm("Close this event with the entered reconciliation? This will count unallocated donations as profit and fully lock the event until it's reopened.")) return;
+    setBusy(true); setError(null);
+    try {
+      await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { lines: buildLinesPayload(), notes: closeNotes || null } });
+      onChanged();
+    } catch (e: any) {
+      setError(e?.message || "Failed to close event");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const quickClose = async () => {
+    if (!confirm("Quick close this event without a per-method cashup? System totals will be accepted as-is, unallocated donations will be counted as profit, and the event will be fully locked until it's reopened.")) return;
+    setBusy(true); setError(null);
+    try {
+      await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { notes: closeNotes || null } });
+      onChanged();
+    } catch (e: any) {
+      setError(e?.message || "Failed to close event");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const reopen = async () => {
+    if (!confirm("Reopen this event? Registrations, payments, refunds and donations will be allowed again.")) return;
+    setBusy(true); setError(null);
+    try {
+      await apiFetch(`/api/cashups/event/${eventId}/reopen`, { method: "POST", authToken: token, body: { notes: reopenNotes || null } });
+      onChanged();
+    } catch (e: any) {
+      setError(e?.message || "Failed to reopen event");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const reconciled = data.reconciled;
+
+  return (
+    <div className="space-y-4">
+      <div className="bg-white border rounded-lg p-4 space-y-3 overflow-auto">
+        <div className="text-sm font-medium">Cash-up reconciliation</div>
+        <table className="w-full text-sm min-w-[640px]">
+          <thead>
+            <tr className="text-left text-gray-500 border-b">
+              <th className="py-1">Method</th>
+              <th className="py-1 text-right">Income</th>
+              <th className="py-1 text-right">Costs from method</th>
+              <th className="py-1 text-right">Expected cash</th>
+              <th className="py-1 text-right">Actual</th>
+              <th className="py-1 text-right">Variance</th>
+              <th className="py-1">Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            {METHODS.map(m => {
+              const r = reconciled?.byMethod?.[m];
+              return (
+                <tr key={m} className="border-b last:border-0 align-top">
+                  <td className="py-1.5">{METHOD_LABELS[m]}</td>
+                  <td className="py-1.5 text-right">{money(data.paymentsByMethod[m])}</td>
+                  <td className="py-1.5 text-right">{money(data.costsByMethod[m])}</td>
+                  <td className="py-1.5 text-right">{money(data.expectedCashByMethod[m])}</td>
+                  <td className="py-1.5 text-right">
+                    {isClosed ? (
+                      money(r?.actual ?? null)
+                    ) : m === "cash" ? (
+                      money(cashActualFromDenoms)
+                    ) : (
+                      <input type="number" step="0.01" className="w-28 border rounded px-2 py-1 text-sm text-right" value={lines[m].actualAmount} onChange={e => setLine(m, "actualAmount", e.target.value)} />
+                    )}
+                  </td>
+                  <td className="py-1.5 text-right">
+                    {isClosed
+                      ? (r?.variance != null ? money(r.variance) : <span className="text-gray-400">not reconciled</span>)
+                      : (m === "cash"
+                        ? (cashActualFromDenoms > 0 ? money(cashActualFromDenoms - data.expectedCashByMethod[m]) : "—")
+                        : (lines[m].actualAmount !== "" ? money(parseFloat(lines[m].actualAmount) - data.expectedCashByMethod[m]) : "—"))}
+                  </td>
+                  <td className="py-1.5">
+                    {isClosed ? (r?.notes || "—") : (
+                      <input className="w-full border rounded px-2 py-1 text-sm" value={lines[m].notes} onChange={e => setLine(m, "notes", e.target.value)} />
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="bg-white border rounded-lg p-4 space-y-2">
+        <div className="text-sm font-medium">Cash denomination count</div>
+        {isClosed ? (
+          reconciled?.byMethod?.cash?.denominations?.length ? (
+            <table className="text-sm">
+              <tbody>
+                {reconciled.byMethod.cash.denominations.map(d => (
+                  <tr key={d.id}><td className="pr-4 py-0.5">{denomLabel(d.value)}</td><td className="pr-4 py-0.5">× {d.count}</td><td className="py-0.5 text-gray-500">{money(d.value * d.count)}</td></tr>
+                ))}
+              </tbody>
+            </table>
+          ) : <div className="text-xs text-gray-400">No denomination breakdown recorded for this cashup.</div>
+        ) : (
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+            {ZAR_DENOMINATIONS.map(v => (
+              <div key={v} className="flex items-center gap-2">
+                <span className="text-sm w-14">{denomLabel(v)}</span>
+                <span className="text-xs text-gray-400">×</span>
+                <input
+                  type="number"
+                  min={0}
+                  step={1}
+                  className="w-16 border rounded px-2 py-1 text-sm"
+                  value={denomCounts[v] || ""}
+                  onChange={e => setDenomCounts(prev => ({ ...prev, [v]: e.target.value }))}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="bg-white border rounded-lg p-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+        <div>
+          <div className="text-gray-500 text-xs">Donations counted as profit</div>
+          <div className="font-semibold">{money(data.unallocatedDonationsTotal)}</div>
+        </div>
+        <div>
+          <div className="text-gray-500 text-xs">Total costs</div>
+          <div className="font-semibold">{money(data.totalCosts)}</div>
+        </div>
+        <div>
+          <div className="text-gray-500 text-xs">Net profit</div>
+          <div className="font-semibold">{money(data.netProfit)}</div>
+        </div>
+      </div>
+
+      {!isClosed && (
+        <div className="bg-white border rounded-lg p-4 space-y-2">
+          <label className="block text-xs text-gray-600 mb-1">Notes for closing (optional)</label>
+          <input className="w-full border rounded px-2 py-1.5 text-sm" value={closeNotes} onChange={e => setCloseNotes(e.target.value)} />
+          <div className="flex flex-wrap gap-2 justify-end pt-1">
+            <button className="text-xs px-3 py-1.5 rounded border" disabled={busy} onClick={saveDraft}>Save draft</button>
+            <button className="text-xs px-3 py-1.5 rounded bg-amber-600 text-white hover:bg-amber-700" disabled={busy} onClick={quickClose}>Quick close (skip cashup)</button>
+            <button className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" disabled={busy} onClick={closeWithCashup}>Close event with cashup</button>
+          </div>
+        </div>
+      )}
+
+      {isClosed && (
+        <div className="bg-white border rounded-lg p-4 space-y-2">
+          <label className="block text-xs text-gray-600 mb-1">Notes for reopening (optional)</label>
+          <input className="w-full border rounded px-2 py-1.5 text-sm" value={reopenNotes} onChange={e => setReopenNotes(e.target.value)} />
+          <div className="flex justify-end">
+            <button className="text-xs px-3 py-1.5 rounded bg-rose-600 text-white hover:bg-rose-700" disabled={busy} onClick={reopen}>Reopen event</button>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white border rounded-lg p-4 space-y-2">
+        <div className="text-sm font-medium">History</div>
+        {data.history.length === 0 && <div className="text-xs text-gray-400">No close/reopen actions yet.</div>}
+        <ul className="space-y-1.5">
+          {data.history.map(h => (
+            <li key={h.id} className="text-xs border-b last:border-0 pb-1.5 flex items-center justify-between gap-3">
+              <span>
+                <span className="font-medium">{h.action === "closed" ? "Closed (full cashup)" : h.action === "quick_closed" ? "Quick closed" : "Reopened"}</span>
+                {" — "}{h.performedBy?.name || "Unknown"} — {new Date(h.createdAt).toLocaleString()}
+              </span>
+              {(h.action === "closed" || h.action === "quick_closed") && (
+                <span className="text-gray-500 shrink-0">Donations to profit {money(h.unallocatedDonationsTotal)} · Costs {money(h.totalCosts)}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/admin/cashup/page.tsx b/frontend/src/app/dashboard/admin/cashup/page.tsx
new file mode 100644
index 0000000..48c6cf8
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/cashup/page.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+export default function CashupLandingPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [showPast, setShowPast] = useState(true);
+  const [showInactive, setShowInactive] = useState(false);
+  const [showClosed, setShowClosed] = useState(false);
+
+  useEffect(() => {
+    if (!token) return;
+    (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const evs = await apiFetch<any[]>("/api/events/all?includePast=true&includeInactive=true", { authToken: token });
+        setEvents(Array.isArray(evs) ? evs : []);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token]);
+
+  const filtered = useMemo(() => {
+    const now = new Date();
+    return events
+      .filter(ev => showPast || !ev.endDate || new Date(ev.endDate) >= now)
+      .filter(ev => showInactive || ev.isActive !== false)
+      .filter(ev => showClosed || ev.cashupStatus !== "closed")
+      .filter(ev => !search.trim() || ev.title?.toLowerCase().includes(search.trim().toLowerCase()))
+      .sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());
+  }, [events, showPast, showInactive, showClosed, search]);
+
+  return (
+    <div className="max-w-3xl mx-auto space-y-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <h1 className="text-xl font-semibold">Post-event Cashup</h1>
+          <p className="text-sm text-gray-500 mt-1">Set costs, reconcile takings, and close out an event. Admin only.</p>
+        </div>
+        <button
+          type="button"
+          className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shrink-0"
+          onClick={() => router.push("/dashboard")}
+        >Back</button>
+      </div>
+
+      {error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded p-2">{error}</div>}
+
+      <div className="bg-white border rounded-lg p-3 flex flex-wrap items-center gap-3">
+        <input
+          className="border rounded px-3 py-1.5 text-sm flex-1 min-w-48"
+          placeholder="Search events…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+        <label className="flex items-center gap-1.5 text-sm text-gray-600">
+          <input type="checkbox" checked={showPast} onChange={e => setShowPast(e.target.checked)} /> Past events
+        </label>
+        <label className="flex items-center gap-1.5 text-sm text-gray-600">
+          <input type="checkbox" checked={showInactive} onChange={e => setShowInactive(e.target.checked)} /> Inactive events
+        </label>
+        <label className="flex items-center gap-1.5 text-sm text-gray-600">
+          <input type="checkbox" checked={showClosed} onChange={e => setShowClosed(e.target.checked)} /> Closed events
+        </label>
+      </div>
+
+      {loading && <div className="text-sm text-gray-400">Loading…</div>}
+
+      {!loading && (
+        <ul className="space-y-2">
+          {filtered.map(ev => {
+            const isClosed = ev.cashupStatus === "closed";
+            return (
+              <li
+                key={ev.id}
+                className="border rounded-lg p-3 bg-white hover:bg-indigo-50/40 cursor-pointer transition-colors flex items-center justify-between gap-3"
+                onClick={() => router.push(`/dashboard/admin/cashup/${ev.id}`)}
+              >
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-medium text-sm">{ev.title}</span>
+                    <span className={"text-[10px] px-1.5 py-0.5 rounded " + (isClosed ? "bg-rose-50 text-rose-700" : "bg-emerald-50 text-emerald-700")}>
+                      {isClosed ? "Closed" : "Open"}
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-500 mt-0.5">
+                    {ev.startDate ? new Date(ev.startDate).toLocaleDateString() : ""}{ev.endDate ? ` – ${new Date(ev.endDate).toLocaleDateString()}` : ""}
+                  </div>
+                </div>
+                <span className="text-xs text-indigo-600 shrink-0">Manage →</span>
+              </li>
+            );
+          })}
+          {filtered.length === 0 && <div className="text-sm text-gray-400">No events match the current filters.</div>}
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/admin/forms/page.tsx b/frontend/src/app/dashboard/admin/forms/page.tsx
new file mode 100644
index 0000000..70459aa
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/forms/page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import React from "react";
+import FormsBrowserPage from "@/app/dashboard/supervisor/forms/page";
+
+export default function AdminFormsBrowserPage() {
+  // Reuse the same component; admin also has access
+  return <FormsBrowserPage />;
+}
diff --git a/frontend/src/app/dashboard/admin/page.tsx b/frontend/src/app/dashboard/admin/page.tsx
new file mode 100644
index 0000000..4b130a5
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/page.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { useStableState } from "@/hooks/useStableState";
+import { useVisiblePolling } from "@/hooks/useVisiblePolling";
+
+export default function AdminDashboardPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const isAdmin = useMemo(() => (user?.role === "admin"), [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  // Everything this dashboard displays comes from one endpoint (/api/stats/admin) that
+  // computes it all server-side — no more separate calls plus a full payments/events pull
+  // just to reduce them down to a couple of numbers client-side.
+  // useStableState skips the re-render entirely when a poll returns identical data, and
+  // hasLoadedOnce below means "Refreshing…" only ever shows for the very first load —
+  // together these stop the stats panels from flickering on every 15s poll.
+  const [paymentStats, setPaymentStats] = useStableState<any | null>(null);
+  const [scanStats, setScanStats] = useStableState<any | null>(null);
+  const [activeEventsCount, setActiveEventsCount] = useStableState<number>(0);
+  const [recentScans, setRecentScans] = useStableState<any[]>([]);
+  const [loadingStats, setLoadingStats] = useState(false);
+  const hasLoadedOnce = useRef(false);
+
+  const loadStats = async () => {
+    if (!token) return;
+    const isFirstLoad = !hasLoadedOnce.current;
+    try {
+      if (isFirstLoad) setLoadingStats(true);
+      const data = await apiFetch<any>("/api/stats/admin", { authToken: token });
+      setScanStats(data.scanStats);
+      setPaymentStats(data.paymentStats);
+      setActiveEventsCount(data.activeEventsCount || 0);
+      setRecentScans(Array.isArray(data.recentScans) ? data.recentScans : []);
+    } catch (e) {
+      // ignore errors for dashboard summaries
+    } finally {
+      hasLoadedOnce.current = true;
+      if (isFirstLoad) setLoadingStats(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    loadStats();
+  }, [token]);
+
+  // Poll every 15s while the tab is visible; pause in the background and refetch
+  // immediately on return instead of leaving stale numbers up.
+  useVisiblePolling(() => {
+    if (!token) return;
+    loadStats();
+  }, 15000, !!token);
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Admin Dashboard{user ? ` — ${user.name}` : ""}</h1>
+        <div className="hidden sm:flex gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/users")}>Manage users</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/events")}>Manage events</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/registrations")}>Manage registrations</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/manual")}>Manual registration</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/payments")}>Payments</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/whatsapp")}>WhatsApp API</button>
+        </div>
+      </div>
+
+      {!isAdmin && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need admin access to use these tools.
+        </div>
+      )}
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+            <div className="text-lg font-semibold mb-2">Quick actions</div>
+            <div className="grid sm:grid-cols-3 gap-3">
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/users")}>
+                Manage users
+                <div className="text-xs text-white/90">Create, edit, change roles and passwords</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/events")}>
+                Manage events
+                <div className="text-xs text-white/90">Create, edit, and update ticket types</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/sections")}>Manage sections
+                <div className="text-xs text-white/90">Create sections and assign ticket types</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/registrations")}>
+                Manage registrations
+                <div className="text-xs text-white/90">Cancel, update status, and search registrations</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/manual")}>
+                Create manual registration
+                <div className="text-xs text-white/90">Register a guest and issue tickets</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/payments")}>
+                Record payment / donations
+                <div className="text-xs text-white/90">Manual payments and assignment</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/ticket-scanning")}>
+                Open scanner
+                <div className="text-xs text-white/90">Use your device camera to validate tickets</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/event-tickets")}>
+                Event tickets & printing
+                <div className="text-xs text-white/90">Browse event tickets and print lists</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/at-the-door")}>At the door
+                <div className="text-xs text-white/90">Walk-ins, payments, ticket printing</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/reports")}>
+                Reports
+                <div className="text-xs text-white/90">View, export, and email reports</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/forms")}>
+                Attendee forms
+                <div className="text-xs text-white/90">View submitted attendee forms</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/email-attendees")}>
+                Email attendees
+                <div className="text-xs text-white/90">Send message to attendees of an event</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/whatsapp-attendees")}>
+                WhatsApp attendees
+                <div className="text-xs text-white/90">Send WhatsApp message to event attendees</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/whatsapp")}>
+                Manage WhatsApp API
+                <div className="text-xs text-white/90">Manage the WhatsApp API config</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/admin/cashup")}>
+                Post-event Cashup
+                <div className="text-xs text-white/90">Set costs, reconcile takings, and close out events</div>
+              </button>
+            </div>
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg font-semibold">Recent scans</h2>
+              {loadingStats && <span className="text-xs text-gray-500">Refreshing…</span>}
+            </div>
+            <ul className="text-sm space-y-2 max-h-96 overflow-auto pr-2">
+              {recentScans.map((u: any) => (
+                <li key={u.id} className="border rounded p-2">
+                  <div className="flex justify-between">
+                    <div className="font-medium">{u.ticket?.event?.title || u.ticket?.eventId || 'Event'}</div>
+                    <div className="text-xs text-gray-500">{new Date(u.scannedAt).toLocaleString()}</div>
+                  </div>
+                  <div className="text-xs text-gray-600">{u.ticket?.registrationOption?.eventOption?.name || 'Ticket'} — #{String(u.ticket?.id || '').slice(0,8)}</div>
+                  <div className="text-xs text-gray-500">Scanned by: {u.scannedBy?.name || u.scannedById}</div>
+                </li>
+              ))}
+              {recentScans.length === 0 && <li className="text-gray-500">No scans yet.</li>}
+            </ul>
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg font-semibold">Payments</h2>
+              {loadingStats && <span className="text-xs text-gray-500">Refreshing…</span>}
+            </div>
+            {paymentStats ? (
+              <div className="grid grid-cols-3 gap-2 mb-3">
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Today</div>
+                  <div className="text-lg font-semibold">R{paymentStats.totalToday}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Past Week</div>
+                  <div className="text-lg font-semibold">R{paymentStats.totalWeek}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Past Month</div>
+                  <div className="text-lg font-semibold">R{paymentStats.totalMonth}</div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-gray-500">No payment data yet.</div>
+            )}
+
+            {scanStats?.byStaff?.length > 0 && (
+              <div className="mb-1">
+                <div className="text-sm font-medium mb-1">Today by staff</div>
+                <ul className="text-sm text-gray-700 space-y-1">
+                  {scanStats.byStaff.map((s: any) => (
+                    <li key={s.scannedById} className="flex justify-between">
+                      <span>{s.name || 'Staff'}</span>
+                      <span className="font-medium">{s.count}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <h2 className="text-lg font-semibold mb-3">Admin stats</h2>
+            {loadingStats && <div className="text-sm text-gray-500 mb-2">Loading…</div>}
+            <div className="space-y-2">
+              <div className="border rounded p-3 bg-white flex items-center justify-between">
+                <div>
+                  <div className="text-xs text-gray-500">Active events</div>
+                  <div className="text-lg font-semibold">{activeEventsCount}</div>
+                </div>
+                <button className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard/staff/event-tickets")}>View</button>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Revenue today</div>
+                <div className="text-lg font-semibold">R {(paymentStats?.totalToday || 0).toFixed(2)}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Donations today</div>
+                <div className="text-lg font-semibold">{paymentStats?.donationsToday || 0}</div>
+              </div>
+            </div>
+          </div>
+
+          <div className="text-sm text-gray-600 mt-6">
+            <p>As an admin you can access Supervisor and Staff tools. Use the quick actions above to jump to common tasks.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/admin/registrations/page.tsx b/frontend/src/app/dashboard/admin/registrations/page.tsx
new file mode 100644
index 0000000..7ec0d88
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/registrations/page.tsx
@@ -0,0 +1,350 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+const STATUS_OPTIONS = ["pending", "confirmed", "partial_paid", "paid", "cancelled"] as const;
+
+function fuzzyMatch(query: string, target: string): boolean {
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  if (t.includes(q)) return true;
+  const tokens = q.split(/\s+/).filter(Boolean);
+  return tokens.every(tok => t.includes(tok));
+}
+
+export default function AdminRegistrationsPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const isAdmin = useMemo(() => user?.role === "admin", [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [registrations, setRegistrations] = useState<any[]>([]);
+  const [events, setEvents] = useState<any[]>([]);
+  const [loadingRegs, setLoadingRegs] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  // Filters
+  const [query, setQuery] = useState("");
+  const [eventFilter, setEventFilter] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [includePastEvents, setIncludePastEvents] = useState(false);
+  const [includeInactiveEvents, setIncludeInactiveEvents] = useState(false);
+
+  // Expanded rows + form responses cache
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [formResponses, setFormResponses] = useState<Record<string, any[]>>({});
+  const [loadingForms, setLoadingForms] = useState<Set<string>>(new Set());
+
+  const loadRegistrations = async () => {
+    if (!token) return;
+    try {
+      setLoadingRegs(true);
+      const regs = await apiFetch<any[]>("/api/registrations", { authToken: token });
+      const list = Array.isArray(regs) ? regs.sort((a, b) => {
+        const eventCompare = (a.event?.startDate || a.eventId).localeCompare(b.event?.startDate || b.eventId);
+        if (eventCompare !== 0) return eventCompare;
+        return (a.user?.name || a.userId).localeCompare(b.user?.name || b.userId);
+      }) : [];
+      setRegistrations(list);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load registrations");
+    } finally {
+      setLoadingRegs(false);
+    }
+  };
+
+  const loadEvents = async () => {
+    if (!token) return;
+    try {
+      const params = new URLSearchParams();
+      if (includePastEvents) params.set("includePast", "true");
+      if (includeInactiveEvents) params.set("includeInactive", "true");
+      const qs = params.toString() ? `?${params.toString()}` : "";
+      const evs = await apiFetch<any[]>(`/api/events/all${qs}`, { authToken: token });
+      setEvents(Array.isArray(evs) ? evs.sort((a: any, b: any) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()) : []);
+    } catch {}
+  };
+
+  useEffect(() => {
+    loadRegistrations();
+  }, [token]);
+
+  useEffect(() => {
+    loadEvents();
+  }, [token, includePastEvents, includeInactiveEvents]);
+
+  const toggleExpand = async (reg: any) => {
+    const id = reg.id;
+    const next = new Set(expanded);
+    if (next.has(id)) {
+      next.delete(id);
+      setExpanded(next);
+      return;
+    }
+    next.add(id);
+    setExpanded(next);
+    // Load form responses if not cached
+    if (!formResponses[id] && !loadingForms.has(id)) {
+      setLoadingForms(prev => new Set(prev).add(id));
+      try {
+        const res = await apiFetch<any>(`/api/forms/responses?registrationId=${encodeURIComponent(id)}`, { authToken: token! });
+        const items = Array.isArray(res?.items) ? res.items : (Array.isArray(res) ? res : []);
+        setFormResponses(prev => ({ ...prev, [id]: items }));
+      } catch {
+        setFormResponses(prev => ({ ...prev, [id]: [] }));
+      } finally {
+        setLoadingForms(prev => { const s = new Set(prev); s.delete(id); return s; });
+      }
+    }
+  };
+
+  const cancelRegistration = async (reg: any) => {
+    if (!token) return;
+    setError(null); setInfo(null);
+    if (!confirm(`Cancel registration #${String(reg.id).slice(0, 8)} for ${reg.user?.name || reg.userId}?`)) return;
+    try {
+      await apiFetch(`/api/registrations/${encodeURIComponent(reg.id)}`, { method: "DELETE", authToken: token });
+      setInfo("Registration cancelled");
+      await loadRegistrations();
+    } catch (e: any) {
+      setError(e?.message || "Failed to cancel registration");
+    }
+  };
+
+  const updateStatus = async (reg: any, status: string) => {
+    if (!token) return;
+    setError(null); setInfo(null);
+    try {
+      await apiFetch(`/api/registrations/${encodeURIComponent(reg.id)}`, { method: "PUT", authToken: token, body: { status } });
+      setInfo("Status updated");
+      await loadRegistrations();
+    } catch (e: any) {
+      setError(e?.message || "Failed to update status");
+    }
+  };
+
+  const eventIds = useMemo(() => new Set(events.map((ev: any) => ev.id)), [events]);
+
+  const filtered = useMemo(() => {
+    return registrations.filter((r: any) => {
+      if (!eventIds.has(r.eventId)) return false;
+      if (eventFilter && r.eventId !== eventFilter) return false;
+      if (statusFilter && r.status !== statusFilter) return false;
+      if (!query.trim()) return true;
+      const haystack = [
+        r.id, r.user?.name, r.user?.email, r.user?.phoneNumber,
+        r.userId, r.event?.title, r.eventId, r.status,
+      ].map((x: any) => String(x || "")).join(" ");
+      return fuzzyMatch(query.trim(), haystack);
+    });
+  }, [registrations, query, eventFilter, statusFilter]);
+
+  const statusColor = (s: string) => {
+    if (s === "paid") return "text-green-700 bg-green-50";
+    if (s === "confirmed") return "text-blue-700 bg-blue-50";
+    if (s === "partial_paid") return "text-amber-700 bg-amber-50";
+    if (s === "cancelled") return "text-red-700 bg-red-50";
+    return "text-gray-700 bg-gray-50";
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Manage Registrations</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push('/dashboard')}>Back</button>
+      </div>
+
+      {!isAdmin && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need admin access to use this page.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{info}</div>}
+
+      {/* Filters */}
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-4">
+        <div className="flex flex-wrap gap-3 items-end">
+          <div className="flex-1 min-w-48">
+            <label className="block text-xs text-gray-600 mb-1">Search (name, email, phone, event, ID…)</label>
+            <input
+              className="w-full border rounded px-3 py-1.5 text-sm"
+              placeholder="Type to search…"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Event</label>
+            <select className="border rounded px-2 py-1.5 text-sm max-w-48" value={eventFilter} onChange={e => setEventFilter(e.target.value)}>
+              <option value="">All events</option>
+              {events.map(ev => (
+                <option key={ev.id} value={ev.id}>{ev.title}</option>
+              ))}
+            </select>
+            <div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
+              <label className="flex items-center gap-1 cursor-pointer">
+                <input type="checkbox" checked={includePastEvents} onChange={e => setIncludePastEvents(e.target.checked)} />
+                Past
+              </label>
+              <label className="flex items-center gap-1 cursor-pointer">
+                <input type="checkbox" checked={includeInactiveEvents} onChange={e => setIncludeInactiveEvents(e.target.checked)} />
+                Inactive
+              </label>
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Status</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
+              <option value="">All statuses</option>
+              {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}
+            </select>
+          </div>
+          <button className="text-sm px-2 py-1.5 rounded bg-gray-100 hover:bg-gray-200" onClick={loadRegistrations} disabled={loadingRegs}>
+            {loadingRegs ? "Loading…" : "Refresh"}
+          </button>
+        </div>
+        <div className="mt-2 text-xs text-gray-500">{filtered.length} of {registrations.length} registrations</div>
+      </div>
+
+      <div className="border rounded-xl bg-white shadow-sm">
+        <ul className="divide-y text-sm">
+          {filtered.map((r: any) => {
+            const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => {
+              const unit = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+                ? Number(opt.priceSnapshot)
+                : (opt.eventOption?.price || 0);
+              return sum + unit * (opt.quantity || 0);
+            }, 0);
+            const isExpanded = expanded.has(r.id);
+            const responses = formResponses[r.id];
+            const loadingResponse = loadingForms.has(r.id);
+
+            return (
+              <li key={r.id} className="hover:bg-gray-50">
+                <div className="p-3 cursor-pointer" onClick={() => toggleExpand(r)}>
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-medium">{r.user?.name || r.userId}</span>
+                        <span className="text-gray-400">—</span>
+                        <span className="text-gray-700">{r.event?.title || r.eventId}</span>
+                        <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${statusColor(r.status)}`}>{r.status}</span>
+                      </div>
+                      <div className="text-xs text-gray-500 mt-0.5">
+                        {r.user?.email && <span className="mr-2">{r.user.email}</span>}
+                        {r.user?.phoneNumber && <span className="mr-2">{r.user.phoneNumber}</span>}
+                        <span>R {totalDue.toFixed(2)}</span>
+                        <span className="ml-2 text-gray-400">#{String(r.id).slice(0, 8)}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0">
+                      <span className="text-xs text-gray-400">{new Date(r.createdAt).toLocaleDateString()}</span>
+                      <span className="text-gray-400 text-xs">{isExpanded ? "▲" : "▼"}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {isExpanded && (
+                  <div className="px-3 pb-3 bg-gray-50 border-t" onClick={e => e.stopPropagation()}>
+                    {/* Actions */}
+                    <div className="flex items-center gap-2 py-2 border-b border-gray-200 mb-3">
+                      <select
+                        className="px-2 py-1 text-xs rounded-lg border border-gray-300 bg-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60"
+                        value={r.status}
+                        onChange={e => updateStatus(r, e.target.value)}
+                        disabled={r.status === 'cancelled'}
+                      >
+                        {STATUS_OPTIONS.map(s => <option key={s} value={s}>{s}</option>)}
+                      </select>
+                      <button
+                        className="px-2 py-1 text-xs rounded bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
+                        onClick={() => cancelRegistration(r)}
+                        disabled={r.status === 'cancelled'}
+                      >
+                        Cancel registration
+                      </button>
+                    </div>
+
+                    {/* Ticket options */}
+                    {(r.registrationOptions || []).length > 0 && (
+                      <div className="mb-3">
+                        <div className="text-xs font-semibold text-gray-600 mb-1 uppercase tracking-wide">Ticket options</div>
+                        <div className="grid sm:grid-cols-2 gap-2">
+                          {r.registrationOptions.map((opt: any) => (
+                            <div key={opt.id} className="bg-white border rounded p-2 text-xs">
+                              <div className="font-medium">
+                                {opt.eventOption?.name || opt.eventOptionId}
+                                {opt.variant?.name && <span className="text-gray-500"> ({opt.variant.name})</span>}
+                              </div>
+                              <div className="text-gray-500">
+                                {(() => {
+                                  const unit = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+                                    ? Number(opt.priceSnapshot)
+                                    : (opt.variant?.price ?? opt.eventOption?.price ?? 0);
+                                  return `Qty: ${opt.quantity} × R ${unit.toFixed(2)} = R ${(unit * (opt.quantity || 0)).toFixed(2)}`;
+                                })()}
+                              </div>
+                              {opt.appliedTierId && (
+                                <div className="text-green-700 text-[10px] mt-0.5">Early-bird price applied</div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                        <div className="text-xs text-gray-700 mt-1 font-medium">Total: R {totalDue.toFixed(2)}</div>
+                      </div>
+                    )}
+
+                    {/* Form responses */}
+                    <div>
+                      <div className="text-xs font-semibold text-gray-600 mb-1 uppercase tracking-wide">Form responses</div>
+                      {loadingResponse ? (
+                        <div className="text-xs text-gray-400">Loading…</div>
+                      ) : !responses || responses.length === 0 ? (
+                        <div className="text-xs text-gray-400">No form responses submitted.</div>
+                      ) : (
+                        <div className="space-y-2">
+                          {responses.map((resp: any, idx: number) => (
+                            <div key={resp.id || idx} className="bg-white border rounded p-2">
+                              <div className="text-xs font-medium text-gray-600 mb-1">Response #{idx + 1}</div>
+                              <div className="grid sm:grid-cols-2 gap-1.5">
+                                {(resp.answers || []).map((a: any) => (
+                                  <div key={a.id} className="bg-gray-50 border rounded p-1.5 text-xs">
+                                    <div className="text-[10px] text-gray-500">{a.field?.label || a.fieldId}</div>
+                                    <div className="font-medium">{a.value}</div>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Metadata */}
+                    <div className="mt-2 text-[10px] text-gray-400">
+                      Registration ID: {r.id} · Created: {new Date(r.createdAt).toLocaleString()}
+                    </div>
+                  </div>
+                )}
+              </li>
+            );
+          })}
+          {filtered.length === 0 && (
+            <li className="p-4 text-gray-500 text-sm">{loadingRegs ? "Loading…" : "No registrations found."}</li>
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/admin/settings/page.tsx b/frontend/src/app/dashboard/admin/settings/page.tsx
new file mode 100644
index 0000000..b2aa25e
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/settings/page.tsx
@@ -0,0 +1,511 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch, API_BASE, resolveToApiOrigin } from "@/lib/api";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+
+type TabId = "organisation" | "branding" | "notifications" | "email" | "legal";
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: "organisation",  label: "Organisation"  },
+  { id: "branding",      label: "Branding"      },
+  { id: "notifications", label: "Notifications" },
+  { id: "email",         label: "Email"         },
+  { id: "legal",         label: "Legal"         },
+];
+
+const inputCls =
+  "w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400";
+
+function Field({
+  label, hint, required, children,
+}: {
+  label: string; hint?: string; required?: boolean; children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 mb-1">
+        {label} {required && <span className="text-red-500">*</span>}
+      </label>
+      {children}
+      {hint && <p className="text-xs text-gray-400 mt-1">{hint}</p>}
+    </div>
+  );
+}
+
+function SaveBar({
+  saving, onSave, result, onDismiss,
+}: {
+  saving: boolean;
+  onSave: () => void;
+  result: { ok: boolean; message: string } | null;
+  onDismiss: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-between pt-4 border-t mt-6 flex-wrap gap-3">
+      {result ? (
+        <span className={`text-sm flex items-center gap-1.5 ${result.ok ? "text-green-600" : "text-red-600"}`}>
+          {result.ok ? "✓" : "✗"} {result.message}
+          <button type="button" onClick={onDismiss} className="ml-1 text-gray-400 hover:text-gray-600 text-xs">×</button>
+        </span>
+      ) : (
+        <span />
+      )}
+      <button
+        type="button"
+        disabled={saving}
+        onClick={onSave}
+        className="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
+      >
+        {saving ? "Saving…" : "Save"}
+      </button>
+    </div>
+  );
+}
+
+export default function SiteSettingsPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+  const { reload: reloadSettings } = useSiteSettings();
+
+  const [activeTab, setActiveTab] = useState<TabId>("organisation");
+  const [loadingInitial, setLoadingInitial] = useState(true);
+
+  // Per-tab save state
+  const [saving, setSaving] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);
+
+  // ── Organisation ──
+  const [orgName, setOrgName] = useState("");
+  const [orgTagline, setOrgTagline] = useState("");
+  const [orgEmail, setOrgEmail] = useState("");
+  const [orgPhone, setOrgPhone] = useState("");
+  const [orgAddress, setOrgAddress] = useState("");
+  const [appBaseUrl, setAppBaseUrl] = useState("");
+
+  // ── Branding ──
+  const [accentColor, setAccentColor] = useState("#2563eb");
+  const [logoUrl, setLogoUrl] = useState("");
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  // ── Notifications ──
+  const [notifEmails, setNotifEmails] = useState("");
+
+  // ── SMTP ──
+  const [smtpHost, setSmtpHost] = useState("");
+  const [smtpPort, setSmtpPort] = useState("587");
+  const [smtpSecure, setSmtpSecure] = useState(false);
+  const [smtpFrom, setSmtpFrom] = useState("");
+  const [smtpUser, setSmtpUser] = useState("");
+  const [smtpPass, setSmtpPass] = useState("");
+  const [smtpPassSet, setSmtpPassSet] = useState(false);
+  const [smtpTesting, setSmtpTesting] = useState(false);
+  const [smtpTestResult, setSmtpTestResult] = useState<{ ok: boolean; message: string; raw?: string } | null>(null);
+
+  // ── Legal ──
+  const [legalOperatorName, setLegalOperatorName] = useState("");
+  const [legalIoName, setLegalIoName] = useState("");
+  const [legalIoEmail, setLegalIoEmail] = useState("");
+  const [legalWebsiteUrl, setLegalWebsiteUrl] = useState("");
+  const [legalEffectiveDate, setLegalEffectiveDate] = useState("");
+
+  // ── Load all settings once ────────────────────────────────────────────────
+  useEffect(() => {
+    if (!token) return;
+    apiFetch<Record<string, string>>("/api/settings/all", { authToken: token })
+      .then((s) => {
+        setOrgName(s.org_name || "");
+        setOrgTagline(s.org_tagline || "");
+        setOrgEmail(s.org_email || "");
+        setOrgPhone(s.org_phone || "");
+        setOrgAddress(s.org_address || "");
+        setAppBaseUrl(s.app_base_url || "");
+        setAccentColor(s.accent_color || "#2563eb");
+        setLogoUrl(s.logo_url || "");
+        setNotifEmails(s.reg_notification_emails || "");
+        setSmtpHost(s.smtp_host || "");
+        setSmtpPort(s.smtp_port || "587");
+        setSmtpSecure((s.smtp_secure || "").toLowerCase() === "true");
+        setSmtpFrom(s.smtp_from || "");
+        setSmtpUser(s.smtp_user || "");
+        setSmtpPassSet(!!s.smtp_pass && s.smtp_pass !== "");
+        setSmtpPass("");
+        setLegalOperatorName(s.legal_operator_name || "");
+        setLegalIoName(s.legal_io_name || "");
+        setLegalIoEmail(s.legal_io_email || "");
+        setLegalWebsiteUrl(s.legal_website_url || "");
+        setLegalEffectiveDate(s.legal_effective_date || "");
+      })
+      .catch((e: any) => setResult({ ok: false, message: e?.message || "Failed to load settings" }))
+      .finally(() => setLoadingInitial(false));
+  }, [token]);
+
+  // Clear result when switching tabs
+  const switchTab = (id: TabId) => { setActiveTab(id); setResult(null); };
+
+  // ── Save helpers ──────────────────────────────────────────────────────────
+  const save = async (updates: Record<string, string>) => {
+    if (!token) return;
+    setSaving(true);
+    setResult(null);
+    try {
+      await apiFetch("/api/settings", { method: "PUT", authToken: token, body: updates });
+      setResult({ ok: true, message: "Saved." });
+      reloadSettings();
+    } catch (e: any) {
+      setResult({ ok: false, message: e?.message || "Failed to save" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveOrganisation = () => save({
+    org_name:     orgName.trim(),
+    org_tagline:  orgTagline.trim(),
+    org_email:    orgEmail.trim(),
+    org_phone:    orgPhone.trim(),
+    org_address:  orgAddress.trim(),
+    app_base_url: appBaseUrl.trim(),
+  });
+
+  const saveBranding = async () => {
+    if (!token) return;
+    setSaving(true);
+    setResult(null);
+    try {
+      let finalLogoUrl = logoUrl;
+      if (logoFile) {
+        const fd = new FormData();
+        fd.append("image", logoFile);
+        const res = await fetch(`${API_BASE}/api/uploads/logo`, {
+          method: "POST",
+          headers: { Authorization: `Bearer ${token}` },
+          body: fd,
+        });
+        if (!res.ok) throw new Error("Logo upload failed");
+        const data = await res.json();
+        finalLogoUrl = data.url || logoUrl;
+      }
+      await apiFetch("/api/settings", {
+        method: "PUT", authToken: token,
+        body: { accent_color: accentColor, logo_url: finalLogoUrl },
+      });
+      setLogoUrl(finalLogoUrl);
+      setLogoFile(null);
+      setLogoPreview(null);
+      setResult({ ok: true, message: "Saved." });
+      reloadSettings();
+    } catch (e: any) {
+      setResult({ ok: false, message: e?.message || "Failed to save" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveNotifications = () => save({ reg_notification_emails: notifEmails.trim() });
+
+  const saveSmtp = async () => {
+    if (!token) return;
+    setSaving(true);
+    setResult(null);
+    try {
+      const updates: Record<string, string> = {
+        smtp_host:   smtpHost.trim(),
+        smtp_port:   smtpPort.trim(),
+        smtp_secure: smtpSecure ? "true" : "false",
+        smtp_from:   smtpFrom.trim(),
+        smtp_user:   smtpUser.trim(),
+      };
+      if (smtpPass.trim() !== "") updates.smtp_pass = smtpPass.trim();
+      await apiFetch("/api/settings", { method: "PUT", authToken: token, body: updates });
+      if (smtpPass.trim() !== "") { setSmtpPassSet(true); setSmtpPass(""); }
+      setResult({ ok: true, message: "Saved." });
+      reloadSettings();
+    } catch (e: any) {
+      setResult({ ok: false, message: e?.message || "Failed to save" });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveLegal = () => save({
+    legal_operator_name:  legalOperatorName.trim(),
+    legal_io_name:        legalIoName.trim(),
+    legal_io_email:       legalIoEmail.trim(),
+    legal_website_url:    legalWebsiteUrl.trim(),
+    legal_effective_date: legalEffectiveDate.trim(),
+  });
+
+  const handleTestSmtp = async () => {
+    if (!token) return;
+    setSmtpTesting(true);
+    setSmtpTestResult(null);
+    try {
+      await apiFetch("/api/settings/test-smtp", {
+        method: "POST",
+        authToken: token,
+        body: {
+          host:   smtpHost.trim(),
+          port:   smtpPort.trim(),
+          secure: smtpSecure,
+          from:   smtpFrom.trim(),
+          user:   smtpUser.trim(),
+          pass:   smtpPass.trim() !== "" ? smtpPass.trim() : "••••••••",
+        },
+      });
+      setSmtpTestResult({ ok: true, message: "Connection successful — check your inbox for a test email." });
+    } catch (e: any) {
+      setSmtpTestResult({ ok: false, message: e?.message || "SMTP test failed", raw: e?.data?.raw });
+    } finally {
+      setSmtpTesting(false);
+    }
+  };
+
+  if (loadingInitial) return <div className="p-6 text-sm text-gray-500">Loading settings…</div>;
+
+  const currentLogoSrc = logoPreview || (logoUrl ? resolveToApiOrigin(logoUrl) : null);
+
+  return (
+    <div className="max-w-3xl mx-auto w-full p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold">Site Settings</h1>
+          <p className="text-sm text-gray-500 mt-1">Configure your organisation, branding, email, and legal pages.</p>
+        </div>
+        <button
+          className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200"
+          onClick={() => router.push("/dashboard/admin")}
+        >
+          Back
+        </button>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex items-center gap-2 flex-wrap mb-6">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => switchTab(tab.id)}
+            className={`px-3 py-1.5 text-sm rounded border transition-colors ${
+              activeTab === tab.id
+                ? "bg-indigo-600 text-white border-indigo-600"
+                : "bg-white text-gray-800 border-gray-200 hover:bg-gray-50"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* ── Organisation ─────────────────────────────────────────────────── */}
+      {activeTab === "organisation" && (
+        <div className="space-y-4">
+          <Field label="Organisation name" required>
+            <input className={inputCls} placeholder="Hope Family Church"
+              value={orgName} onChange={e => setOrgName(e.target.value)} />
+          </Field>
+          <Field label="Tagline">
+            <input className={inputCls} placeholder="Connecting community through events"
+              value={orgTagline} onChange={e => setOrgTagline(e.target.value)} />
+          </Field>
+          <div className="grid sm:grid-cols-2 gap-4">
+            <Field label="Contact email">
+              <input type="email" className={inputCls} placeholder="admin@yourchurch.org"
+                value={orgEmail} onChange={e => setOrgEmail(e.target.value)} />
+            </Field>
+            <Field label="Phone">
+              <input className={inputCls} placeholder="+27 12 345 6789"
+                value={orgPhone} onChange={e => setOrgPhone(e.target.value)} />
+            </Field>
+          </div>
+          <Field label="Address">
+            <input className={inputCls} placeholder="123 Church St, City"
+              value={orgAddress} onChange={e => setOrgAddress(e.target.value)} />
+          </Field>
+          <Field label="Site URL" hint="The public URL of this site — used in email links (e.g. password reset, ticket delivery). e.g. https://events.yourchurch.org">
+            <input className={inputCls} placeholder="https://events.yourchurch.org"
+              value={appBaseUrl} onChange={e => setAppBaseUrl(e.target.value)} />
+          </Field>
+          <SaveBar saving={saving} onSave={saveOrganisation} result={result} onDismiss={() => setResult(null)} />
+        </div>
+      )}
+
+      {/* ── Branding ─────────────────────────────────────────────────────── */}
+      {activeTab === "branding" && (
+        <div className="space-y-5">
+          <Field label="Accent / brand colour">
+            <div className="flex items-center gap-3">
+              <input type="color" className="h-10 w-20 border rounded cursor-pointer"
+                value={accentColor} onChange={e => setAccentColor(e.target.value)} />
+              <input className={`${inputCls} font-mono`} placeholder="#2563eb"
+                value={accentColor} onChange={e => setAccentColor(e.target.value)} />
+            </div>
+            <div className="mt-2 h-6 rounded-lg transition-colors" style={{ background: accentColor }} />
+          </Field>
+
+          <Field label="Site logo" hint="PNG, JPG, SVG or WebP, max 2 MB. Displayed in the navigation bar.">
+            {currentLogoSrc && (
+              <div className="mb-3 flex items-center gap-3">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={currentLogoSrc} alt="Current logo" className="h-16 object-contain border rounded p-1 bg-gray-50" />
+                <button
+                  type="button"
+                  className="text-xs text-red-500 hover:text-red-700"
+                  onClick={() => { setLogoUrl(""); setLogoFile(null); setLogoPreview(null); if (fileRef.current) fileRef.current.value = ""; }}
+                >
+                  Remove
+                </button>
+              </div>
+            )}
+            <input ref={fileRef} type="file" accept="image/*" onChange={e => {
+              const file = e.target.files?.[0];
+              if (!file) return;
+              setLogoFile(file);
+              setLogoPreview(URL.createObjectURL(file));
+            }} className="text-sm" />
+          </Field>
+
+          <SaveBar saving={saving} onSave={saveBranding} result={result} onDismiss={() => setResult(null)} />
+        </div>
+      )}
+
+      {/* ── Notifications ─────────────────────────────────────────────────── */}
+      {activeTab === "notifications" && (
+        <div className="space-y-4">
+          <Field
+            label="Registration notification emails"
+            hint="Who gets notified when someone registers for an event. Separate multiple addresses with commas."
+          >
+            <input className={inputCls} placeholder="registrations@yourchurch.org, admin@yourchurch.org"
+              value={notifEmails} onChange={e => setNotifEmails(e.target.value)} />
+          </Field>
+          <SaveBar saving={saving} onSave={saveNotifications} result={result} onDismiss={() => setResult(null)} />
+        </div>
+      )}
+
+      {/* ── Email / SMTP ──────────────────────────────────────────────────── */}
+      {activeTab === "email" && (
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">
+            Outgoing email for tickets, payment confirmations, and account notifications.
+            Leave blank to use server environment variables. The password is stored encrypted.
+          </p>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            <Field label="SMTP host">
+              <input className={inputCls} placeholder="smtp.yourprovider.com"
+                value={smtpHost} onChange={e => setSmtpHost(e.target.value)} />
+            </Field>
+            <Field label="Port">
+              <input type="number" className={inputCls} placeholder="587"
+                value={smtpPort} onChange={e => setSmtpPort(e.target.value)} />
+            </Field>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <input type="checkbox" id="smtpSecure" checked={smtpSecure}
+              onChange={e => setSmtpSecure(e.target.checked)} className="rounded" />
+            <label htmlFor="smtpSecure" className="text-sm text-gray-700">Use TLS/SSL (port 465)</label>
+          </div>
+
+          <Field label="From address" hint="The address emails appear to come from.">
+            <input type="email" className={inputCls} placeholder="no-reply@yourchurch.org"
+              value={smtpFrom} onChange={e => setSmtpFrom(e.target.value)} />
+          </Field>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            <Field label="SMTP username">
+              <input type="email" className={inputCls} placeholder="mail@yourchurch.org"
+                value={smtpUser} onChange={e => setSmtpUser(e.target.value)} autoComplete="username" />
+            </Field>
+            <Field
+              label="SMTP password"
+              hint={smtpPassSet ? "Password is saved. Leave blank to keep it." : undefined}
+            >
+              <div className="relative">
+                <input type="password" className={inputCls}
+                  placeholder={smtpPassSet ? "Leave blank to keep current" : "Enter password"}
+                  value={smtpPass} onChange={e => setSmtpPass(e.target.value)} autoComplete="new-password" />
+                {smtpPassSet && smtpPass === "" && (
+                  <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-green-600 pointer-events-none">● saved</span>
+                )}
+              </div>
+            </Field>
+          </div>
+
+          {/* Test connection */}
+          <div className="pt-1 space-y-2">
+            <div className="flex items-center gap-3 flex-wrap">
+              <button
+                type="button"
+                disabled={smtpTesting || !smtpHost.trim()}
+                onClick={handleTestSmtp}
+                className="px-4 py-2 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 disabled:opacity-50 border"
+              >
+                {smtpTesting ? "Testing…" : "Test connection"}
+              </button>
+              {smtpTestResult && (
+                <span className={`text-sm ${smtpTestResult.ok ? "text-green-600" : "text-red-600"}`}>
+                  {smtpTestResult.ok ? "✓" : "✗"} {smtpTestResult.message}
+                </span>
+              )}
+            </div>
+            {smtpTestResult && !smtpTestResult.ok && smtpTestResult.raw && (
+              <details className="text-xs text-gray-500">
+                <summary className="cursor-pointer select-none hover:text-gray-700">Show technical details</summary>
+                <pre className="mt-1 p-2 bg-gray-100 rounded text-xs overflow-x-auto whitespace-pre-wrap break-all">{smtpTestResult.raw}</pre>
+              </details>
+            )}
+          </div>
+
+          <SaveBar saving={saving} onSave={saveSmtp} result={result} onDismiss={() => setResult(null)} />
+        </div>
+      )}
+
+      {/* ── Legal ─────────────────────────────────────────────────────────── */}
+      {activeTab === "legal" && (
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">
+            These values populate the Terms of Use and Privacy Policy pages automatically.
+          </p>
+
+          <Field label="Operator / responsible party"
+            hint='Shown in the "Owned and operated by" line of the Terms of Use.'>
+            <input className={inputCls} placeholder="Jane Smith on behalf of Example Church, City, South Africa"
+              value={legalOperatorName} onChange={e => setLegalOperatorName(e.target.value)} />
+          </Field>
+          <Field label="Website URL (without https://)">
+            <input className={inputCls} placeholder="events.yourchurch.org"
+              value={legalWebsiteUrl} onChange={e => setLegalWebsiteUrl(e.target.value)} />
+          </Field>
+          <Field label="Effective date">
+            <input className={inputCls} placeholder="April 2026"
+              value={legalEffectiveDate} onChange={e => setLegalEffectiveDate(e.target.value)} />
+          </Field>
+
+          <div className="border-t pt-4">
+            <p className="text-sm font-medium text-gray-700 mb-3">Information Officer (POPIA)</p>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <Field label="Full name">
+                <input className={inputCls} placeholder="Jane Smith"
+                  value={legalIoName} onChange={e => setLegalIoName(e.target.value)} />
+              </Field>
+              <Field label="Email">
+                <input type="email" className={inputCls} placeholder="io@yourchurch.org"
+                  value={legalIoEmail} onChange={e => setLegalIoEmail(e.target.value)} />
+              </Field>
+            </div>
+          </div>
+
+          <SaveBar saving={saving} onSave={saveLegal} result={result} onDismiss={() => setResult(null)} />
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/admin/users/page.tsx b/frontend/src/app/dashboard/admin/users/page.tsx
new file mode 100644
index 0000000..80380e6
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/users/page.tsx
@@ -0,0 +1,435 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+interface UserItem {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  phoneNumber?: string | null;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const roleOptions = ["user", "staff", "supervisor", "admin"] as const;
+type Role = typeof roleOptions[number];
+
+// Simple fuzzy: tolerate one missing/swapped char by checking if query chars appear in order
+function fuzzyMatch(query: string, target: string): boolean {
+  const q = query.toLowerCase();
+  const t = target.toLowerCase();
+  if (t.includes(q)) return true;
+  // token-based: all tokens must appear somewhere
+  const tokens = q.split(/\s+/).filter(Boolean);
+  return tokens.every(tok => t.includes(tok));
+}
+
+export default function AdminUsersPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const isAdmin = useMemo(() => user?.role === "admin", [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  // Data state
+  const [users, setUsers] = useState<UserItem[]>([]);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [pageSize, setPageSize] = useState(50);
+
+  // Search and filter state (server-side)
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [roleFilter, setRoleFilter] = useState<Role | "">("");
+  const [activeFilter, setActiveFilter] = useState<"" | "true" | "false">("");
+
+  // Debounce search
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedQuery(query), 350);
+    return () => clearTimeout(t);
+  }, [query]);
+
+  // Create form state
+  const [createOpen, setCreateOpen] = useState(false);
+  const [cName, setCName] = useState("");
+  const [cEmail, setCEmail] = useState("");
+  const [cPassword, setCPassword] = useState("");
+  const [cPhone, setCPhone] = useState("");
+  const [cRole, setCRole] = useState<Role>("user");
+  const [creating, setCreating] = useState(false);
+
+  // Inline edit state
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editData, setEditData] = useState<Partial<UserItem> & { password?: string }>({});
+  const [saving, setSaving] = useState(false);
+
+  const buildQuery = useCallback((p: number, ps = pageSize) => {
+    const qs = new URLSearchParams({ page: String(p), limit: String(ps) });
+    if (debouncedQuery.trim()) qs.set("search", debouncedQuery.trim());
+    if (roleFilter) qs.set("role", roleFilter);
+    if (activeFilter !== "") qs.set("isActive", activeFilter);
+    return `/api/users?${qs.toString()}`;
+  }, [debouncedQuery, roleFilter, activeFilter, pageSize]);
+
+  const loadUsers = useCallback(async (p = 1, ps = pageSize) => {
+    if (!token) return;
+    setError(null);
+    setFetching(true);
+    try {
+      const url = buildQuery(p, ps);
+      const res = await apiFetch<any>(url, { authToken: token });
+      setUsers(Array.isArray(res?.data) ? res.data : []);
+      setTotal(res?.total ?? 0);
+      setTotalPages(res?.pages ?? 1);
+      setPage(p);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load users");
+    } finally {
+      setFetching(false);
+    }
+  }, [token, buildQuery]);
+
+  // Initial load + reload on filter change
+  useEffect(() => { if (token) loadUsers(1); }, [token, debouncedQuery, roleFilter, activeFilter]);
+
+  const goToPage = (p: number) => loadUsers(p);
+
+  const handlePageSizeChange = (newSize: number) => {
+    setPageSize(newSize);
+    loadUsers(1, newSize);
+  };
+
+  const resetCreateForm = () => {
+    setCName(""); setCEmail(""); setCPassword(""); setCPhone(""); setCRole("user");
+  };
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!cEmail || !cPassword) { setError("Email and password are required"); return; }
+    try {
+      setCreating(true);
+      const created = await apiFetch<any>("/api/users", {
+        method: "POST",
+        body: { name: cName || cEmail.split("@")[0], email: cEmail, password: cPassword, phoneNumber: cPhone || undefined },
+      });
+      if (cRole && cRole !== "user" && created?.id) {
+        await apiFetch(`/api/users/${encodeURIComponent(created.id)}`, {
+          method: "PUT", authToken: token!, body: { role: cRole },
+        });
+      }
+      resetCreateForm();
+      setCreateOpen(false);
+      await loadUsers(page);
+    } catch (e: any) {
+      setError(e?.message || "Failed to create user");
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const startEdit = (u: UserItem) => { setEditingId(u.id); setEditData({ ...u, password: "" }); };
+  const cancelEdit = () => { setEditingId(null); setEditData({}); };
+
+  const saveEdit = async () => {
+    if (!editingId) return;
+    try {
+      setSaving(true);
+      const payload: any = {
+        name: editData.name,
+        email: editData.email,
+        role: editData.role,
+        phoneNumber: editData.phoneNumber || null,
+        isActive: editData.isActive,
+      };
+      if (editData.password && editData.password.trim().length > 0) {
+        payload.password = editData.password.trim();
+      }
+      await apiFetch(`/api/users/${encodeURIComponent(editingId)}`, {
+        method: "PUT", authToken: token!, body: payload,
+      });
+      setEditingId(null);
+      setEditData({});
+      await loadUsers(page);
+    } catch (e: any) {
+      setError(e?.message || "Failed to save user");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const revokeUserSessions = async (id: string, name: string) => {
+    if (!confirm(`Revoke all active sessions for ${name}? They will be signed out on all devices.`)) return;
+    try {
+      await apiFetch(`/api/users/${encodeURIComponent(id)}/revoke-sessions`, { method: "POST", authToken: token! });
+    } catch (e: any) {
+      setError(e?.message || "Failed to revoke sessions");
+    }
+  };
+
+  const deactivate = async (id: string) => {
+    if (!confirm("Deactivate this user? Their account will be disabled.")) return;
+    try {
+      await apiFetch(`/api/users/${encodeURIComponent(id)}`, { method: "DELETE", authToken: token! });
+      await loadUsers(page);
+    } catch (e: any) {
+      setError(e?.message || "Failed to deactivate user");
+    }
+  };
+
+  const deleteUserData = async (id: string, name: string) => {
+    if (!confirm(`Delete personal data for "${name}"?\n\nThis will set their name to "Deleted User", clear their email and phone number, and deactivate the account. This action cannot be undone.`)) return;
+    try {
+      await apiFetch(`/api/users/${encodeURIComponent(id)}/anonymize`, { method: "POST", authToken: token! });
+      await loadUsers(page);
+    } catch (e: any) {
+      setError(e?.message || "Failed to delete user data");
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">User Management</h1>
+        <div className="flex gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard")}>Back</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={() => setCreateOpen(v => !v)}>
+            {createOpen ? "Close" : "Create user"}
+          </button>
+        </div>
+      </div>
+
+      {!isAdmin && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need admin access to manage users.
+        </div>
+      )}
+
+      {error && <div className="mb-3 p-3 border rounded bg-red-50 text-red-800 text-sm">{error}</div>}
+
+      {createOpen && (
+        <form onSubmit={handleCreate} className="border rounded-xl p-4 bg-white shadow-sm mb-6 grid sm:grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Name</label>
+            <input className="w-full border rounded px-3 py-2" value={cName} onChange={e => setCName(e.target.value)} />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Email</label>
+            <input type="email" className="w-full border rounded px-3 py-2" value={cEmail} onChange={e => setCEmail(e.target.value)} required />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Password</label>
+            <input type="password" className="w-full border rounded px-3 py-2" value={cPassword} onChange={e => setCPassword(e.target.value)} required />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Phone</label>
+            <input className="w-full border rounded px-3 py-2" value={cPhone} onChange={e => setCPhone(e.target.value)} />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Role</label>
+            <select className="w-full border rounded px-3 py-2" value={cRole} onChange={e => setCRole(e.target.value as Role)}>
+              {roleOptions.map(r => <option key={r} value={r}>{r}</option>)}
+            </select>
+          </div>
+          <div className="flex items-end">
+            <button disabled={creating} className="px-3 py-2 rounded bg-indigo-600 text-white disabled:opacity-50" type="submit">
+              {creating ? "Creating…" : "Create"}
+            </button>
+          </div>
+        </form>
+      )}
+
+      <div className="border rounded-xl p-4 bg-white shadow-sm">
+        {/* Filters row */}
+        <div className="flex flex-wrap items-end gap-3 mb-4">
+          <div className="flex-1 min-w-48">
+            <label className="block text-xs text-gray-600 mb-1">Search (name, email, phone)</label>
+            <input
+              className="w-full border rounded px-3 py-1.5 text-sm"
+              placeholder="Type to search…"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Role</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={roleFilter} onChange={e => setRoleFilter(e.target.value as Role | "")}>
+              <option value="">All roles</option>
+              {roleOptions.map(r => <option key={r} value={r}>{r}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Status</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={activeFilter} onChange={e => setActiveFilter(e.target.value as "" | "true" | "false")}>
+              <option value="">Active &amp; inactive</option>
+              <option value="true">Active only</option>
+              <option value="false">Inactive only</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Per page</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={pageSize} onChange={e => handlePageSizeChange(Number(e.target.value))}>
+              <option value={10}>10</option>
+              <option value={25}>25</option>
+              <option value={50}>50</option>
+              <option value={100}>100</option>
+            </select>
+          </div>
+          <button className="text-sm px-2 py-1.5 rounded bg-gray-100 hover:bg-gray-200" onClick={() => loadUsers(page)} disabled={fetching}>
+            {fetching ? "Refreshing…" : "Refresh"}
+          </button>
+        </div>
+
+        <div className="text-xs text-gray-500 mb-2">
+          {total} user{total !== 1 ? "s" : ""} total
+          {total > 0 && ` — page ${page} of ${totalPages}`}
+        </div>
+
+        <div className="overflow-auto">
+          <table className="min-w-full text-sm">
+            <thead>
+              <tr className="text-left text-gray-600 border-b">
+                <th className="p-2">Name</th>
+                <th className="p-2">Email</th>
+                <th className="p-2">Role</th>
+                <th className="p-2">Phone</th>
+                <th className="p-2">Active</th>
+                <th className="p-2">Password</th>
+                <th className="p-2">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map(u => (
+                <tr key={u.id} className="border-t hover:bg-gray-50">
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <input className="border rounded px-2 py-1 w-44" value={editData.name || ""} onChange={e => setEditData(d => ({ ...d, name: e.target.value }))} />
+                    ) : (
+                      <span className={`font-medium ${!u.isActive ? "text-gray-400" : ""}`}>{u.name}</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <input className="border rounded px-2 py-1 w-60" value={editData.email || ""} onChange={e => setEditData(d => ({ ...d, email: e.target.value }))} />
+                    ) : (
+                      <span className={u.email?.endsWith("@deleted.local") ? "text-gray-400 italic" : ""}>{u.email}</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <select className="border rounded px-2 py-1" value={(editData.role as Role) || (u.role as Role)} onChange={e => setEditData(d => ({ ...d, role: e.target.value }))}>
+                        {roleOptions.map(r => <option key={r} value={r}>{r}</option>)}
+                      </select>
+                    ) : (
+                      <span className="capitalize">{u.role}</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <input className="border rounded px-2 py-1 w-36" value={editData.phoneNumber || ""} onChange={e => setEditData(d => ({ ...d, phoneNumber: e.target.value }))} />
+                    ) : (
+                      <span>{u.phoneNumber || ""}</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <input type="checkbox" checked={!!editData.isActive} onChange={e => setEditData(d => ({ ...d, isActive: e.target.checked }))} />
+                    ) : (
+                      <span className={u.isActive ? "text-green-700" : "text-gray-400"}>{u.isActive ? "Yes" : "No"}</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <input type="password" placeholder="Set new password" className="border rounded px-2 py-1 w-44" value={editData.password || ""} onChange={e => setEditData(d => ({ ...d, password: e.target.value }))} />
+                    ) : (
+                      <span className="text-gray-400">—</span>
+                    )}
+                  </td>
+                  <td className="p-2">
+                    {editingId === u.id ? (
+                      <div className="flex gap-2">
+                        <button className="px-2 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200" onClick={cancelEdit} disabled={saving}>Cancel</button>
+                        <button className="px-2 py-1 text-xs rounded bg-blue-600 text-white disabled:opacity-50" onClick={saveEdit} disabled={saving}>{saving ? "Saving…" : "Save"}</button>
+                      </div>
+                    ) : (
+                      <div className="flex gap-1 flex-wrap">
+                        <button className="px-2 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200" onClick={() => startEdit(u)}>Edit</button>
+                        <button className="px-2 py-1 text-xs rounded bg-amber-500 text-white hover:bg-amber-600" onClick={() => revokeUserSessions(u.id, u.name)} title="Sign out all devices">Sessions</button>
+                        <button className="px-2 py-1 text-xs rounded bg-orange-500 text-white hover:bg-orange-600" onClick={() => deactivate(u.id)} title="Deactivate account">Deactivate</button>
+                        <button className="px-2 py-1 text-xs rounded bg-red-700 text-white hover:bg-red-800" onClick={() => deleteUserData(u.id, u.name)} title="Erase personal data">Delete data</button>
+                      </div>
+                    )}
+                  </td>
+                </tr>
+              ))}
+              {users.length === 0 && !fetching && (
+                <tr>
+                  <td className="p-3 text-gray-500" colSpan={7}>No users found.</td>
+                </tr>
+              )}
+              {fetching && (
+                <tr>
+                  <td className="p-3 text-gray-400" colSpan={7}>Loading…</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4 text-sm">
+            <span className="text-gray-500">Page {page} of {totalPages}</span>
+            <div className="flex gap-1">
+              <button
+                className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+                disabled={page <= 1 || fetching}
+                onClick={() => goToPage(page - 1)}
+              >
+                ← Prev
+              </button>
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter(p => p === 1 || p === totalPages || Math.abs(p - page) <= 1)
+                .reduce<(number | "…")[]>((acc, p, i, arr) => {
+                  if (i > 0 && (p as number) - (arr[i - 1] as number) > 1) acc.push("…");
+                  acc.push(p);
+                  return acc;
+                }, [])
+                .map((p, i) =>
+                  p === "…" ? (
+                    <span key={`ellipsis-${i}`} className="px-2 py-1 text-gray-400">…</span>
+                  ) : (
+                    <button
+                      key={p}
+                      className={`px-2 py-1 rounded ${page === p ? "bg-indigo-600 text-white" : "bg-gray-100 hover:bg-gray-200"}`}
+                      disabled={fetching}
+                      onClick={() => goToPage(p as number)}
+                    >
+                      {p}
+                    </button>
+                  )
+                )}
+              <button
+                className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+                disabled={page >= totalPages || fetching}
+                onClick={() => goToPage(page + 1)}
+              >
+                Next →
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/admin/whatsapp/page.tsx b/frontend/src/app/dashboard/admin/whatsapp/page.tsx
new file mode 100644
index 0000000..0f00b17
--- /dev/null
+++ b/frontend/src/app/dashboard/admin/whatsapp/page.tsx
@@ -0,0 +1,830 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type WAStatus =
+  | "WORKING"
+  | "CONNECTED"
+  | "SCAN_QR_CODE"
+  | "STARTING"
+  | "FAILED"
+  | "STOPPED"
+  | string;
+
+interface ConfigResponse {
+  tokenMasked: string;
+  instanceId:  string;
+  hasToken:    boolean;
+  hasInstance: boolean;
+  configured:  boolean;
+}
+
+interface StatusResponse {
+  status:   WAStatus;
+  message?: string;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const STATUS_COLORS: Record<string, string> = {
+  WORKING:      "bg-green-100 text-green-800 border-green-300",
+  CONNECTED:    "bg-green-100 text-green-800 border-green-300",
+  SCAN_QR_CODE: "bg-yellow-100 text-yellow-800 border-yellow-300",
+  STARTING:     "bg-blue-100 text-blue-800 border-blue-300",
+  FAILED:       "bg-red-100 text-red-800 border-red-300",
+  STOPPED:      "bg-gray-100 text-gray-700 border-gray-300",
+};
+
+const STATUS_ICONS: Record<string, string> = {
+  WORKING:      "🟢",
+  CONNECTED:    "🟢",
+  SCAN_QR_CODE: "📷",
+  STARTING:     "🔄",
+  FAILED:       "🔴",
+  STOPPED:      "⚫",
+};
+
+const ACTIVE_STATUSES = new Set(["WORKING", "CONNECTED"]);
+const POLLING_STATUSES = new Set(["STARTING", "SCAN_QR_CODE", "FAILED", "STOPPED"]);
+
+function Spinner() {
+  return (
+    <svg
+      className="animate-spin h-4 w-4 text-indigo-600"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}
+
+function Alert({
+  type,
+  children,
+}: {
+  type: "ok" | "err" | "info";
+  children: React.ReactNode;
+}) {
+  const cls =
+    type === "ok"
+      ? "bg-green-50 text-green-800 border-green-200"
+      : type === "err"
+      ? "bg-red-50 text-red-800 border-red-200"
+      : "bg-blue-50 text-blue-800 border-blue-200";
+  return (
+    <div className={`p-3 rounded-lg text-sm border ${cls}`}>{children}</div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function WhatsAppAdminPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+  const isAdmin = useMemo(() => user?.role === "admin", [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user || !isAdmin) router.replace("/dashboard");
+  }, [user, loading, isAdmin, router]);
+
+  // ── Config state (drives wizard steps) ──────────────────────────────────────
+  const [cfg, setCfg] = useState<ConfigResponse | null>(null);
+  const [cfgLoading, setCfgLoading] = useState(true);
+
+  // Derived wizard step: 1 = no token, 2 = token but no instance, 3 = fully configured
+  const step = !cfg ? 0 : !cfg.hasToken ? 1 : !cfg.hasInstance ? 2 : 3;
+
+  // ── Step 1 inputs ────────────────────────────────────────────────────────────
+  const [inputToken, setInputToken] = useState("");
+  const [savingToken, setSavingToken] = useState(false);
+
+  // ── Step 2 inputs ────────────────────────────────────────────────────────────
+  const [instanceMode, setInstanceMode] = useState<"enter" | "create">("create");
+  const [inputInstanceId, setInputInstanceId] = useState("");
+  const [savingInstance, setSavingInstance] = useState(false);
+
+  // ── Step 3: session state ────────────────────────────────────────────────────
+  const [status, setStatus]       = useState<WAStatus | null>(null);
+  const [statusMsg, setStatusMsg] = useState<string | null>(null);
+  const [qrSrc, setQrSrc]         = useState<string | null>(null);
+  const [pairingPhone, setPairingPhone] = useState("");
+
+  // ── Shared action feedback ───────────────────────────────────────────────────
+  const [actionMsg, setActionMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [busy, setBusy]           = useState<string | null>(null);
+
+  // ── Load config ──────────────────────────────────────────────────────────────
+  const fetchConfig = useCallback(async () => {
+    if (!token) return;
+    try {
+      const res = await apiFetch<ConfigResponse>("/api/whatsapp/config", { authToken: token });
+      setCfg(res);
+    } catch {
+      // network error — leave cfg null, user sees loading state
+    } finally {
+      setCfgLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => { fetchConfig(); }, [fetchConfig]);
+
+  // ── Status fetch (step 3 only) ───────────────────────────────────────────────
+  const fetchStatus = useCallback(async () => {
+    if (!token || step !== 3) return;
+    try {
+      const res = await apiFetch<StatusResponse>("/api/whatsapp/status", { authToken: token });
+      setStatus(res.status ?? null);
+      setStatusMsg(res.message ?? null);
+    } catch (e: any) {
+      // Re-fetch config — if the session was not found, backend clears the
+      // instance ID and the step recomputes to 2 (Session Instance setup).
+      await fetchConfig();
+      setStatus("FAILED");
+      setStatusMsg(null);
+    }
+  }, [token, step, fetchConfig]);
+
+  useEffect(() => { if (step === 3) fetchStatus(); }, [step, fetchStatus]);
+
+  // Auto-poll status when not stable
+  useEffect(() => {
+    if (step !== 3 || status === null) return;
+    if (ACTIVE_STATUSES.has(status)) return;
+    const id = setInterval(fetchStatus, 5_000);
+    return () => clearInterval(id);
+  }, [step, status, fetchStatus]);
+
+  // ── QR fetch ─────────────────────────────────────────────────────────────────
+  const fetchQr = useCallback(async () => {
+    if (!token) return;
+    try {
+      const res = await apiFetch<{ qr?: string }>("/api/whatsapp/qr", { authToken: token });
+      if (res.qr) setQrSrc(`data:image/png;base64,${res.qr}`);
+    } catch {
+      setQrSrc(null);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (status === "SCAN_QR_CODE") { fetchQr(); }
+    else { setQrSrc(null); }
+  }, [status, fetchQr]);
+
+  // Auto-refresh QR every 20s while waiting
+  useEffect(() => {
+    if (status !== "SCAN_QR_CODE") return;
+    const id = setInterval(fetchQr, 20_000);
+    return () => clearInterval(id);
+  }, [status, fetchQr]);
+
+  // ── Generic session action ───────────────────────────────────────────────────
+  const doAction = async (action: string, body?: object) => {
+    if (!token) return;
+    setBusy(action);
+    setActionMsg(null);
+    try {
+      const res = await apiFetch<any>(`/api/whatsapp/${action}`, {
+        method: "POST",
+        authToken: token,
+        body,
+      });
+      setActionMsg({ type: "ok", text: res?.message || `${action} successful.` });
+      await fetchStatus();
+      await fetchConfig();
+    } catch (e: any) {
+      let msg = e?.message || `${action} failed.`;
+      try { msg = JSON.parse(msg)?.message || msg; } catch {}
+      // SESSION_NOT_FOUND: backend cleared the instance ID — re-fetch config so
+      // the wizard steps back to Step 2; no need to show an error message.
+      await fetchConfig();
+      if (!msg.includes("SESSION_NOT_FOUND")) {
+        setActionMsg({ type: "err", text: msg });
+      }
+      await fetchStatus();
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  // ─── Step 1: Save token ──────────────────────────────────────────────────────
+  const saveToken = async () => {
+    if (!inputToken.trim()) {
+      setActionMsg({ type: "err", text: "Please enter your WAWP access token." });
+      return;
+    }
+    setSavingToken(true);
+    setActionMsg(null);
+    try {
+      await apiFetch("/api/whatsapp/config", {
+        method: "POST",
+        authToken: token!,
+        body: { token: inputToken.trim(), instanceId: "" },
+      });
+      setInputToken("");
+      await fetchConfig();
+    } catch (e: any) {
+      setActionMsg({ type: "err", text: e?.message || "Failed to save token." });
+    } finally {
+      setSavingToken(false);
+    }
+  };
+
+  // ─── Step 2: Enter existing instance ID ──────────────────────────────────────
+  const saveInstanceId = async () => {
+    if (!inputInstanceId.trim()) {
+      setActionMsg({ type: "err", text: "Please enter the Instance ID." });
+      return;
+    }
+    setSavingInstance(true);
+    setActionMsg(null);
+    try {
+      await apiFetch("/api/whatsapp/config", {
+        method: "POST",
+        authToken: token!,
+        body: { token: "", instanceId: inputInstanceId.trim() },
+        // token left blank → backend keeps existing token
+      });
+      setInputInstanceId("");
+      await fetchConfig();
+    } catch (e: any) {
+      setActionMsg({ type: "err", text: e?.message || "Failed to save Instance ID." });
+    } finally {
+      setSavingInstance(false);
+    }
+  };
+
+  // ─── Step 2: Create new instance ─────────────────────────────────────────────
+  const createInstance = async () => {
+    setSavingInstance(true);
+    setActionMsg(null);
+    try {
+      const res = await apiFetch<any>("/api/whatsapp/create-instance", {
+        method: "POST",
+        authToken: token!,
+      });
+      setActionMsg({ type: "ok", text: res?.message || "Instance created." });
+      await fetchConfig();
+    } catch (e: any) {
+      setActionMsg({ type: "err", text: e?.message || "Failed to create instance." });
+    } finally {
+      setSavingInstance(false);
+    }
+  };
+
+  // ─── Pairing code ────────────────────────────────────────────────────────────
+  const requestPairingCode = async () => {
+    if (!pairingPhone.trim()) {
+      setActionMsg({ type: "err", text: "Enter your phone number first." });
+      return;
+    }
+    await doAction("request-code", { phoneNumber: pairingPhone.trim() });
+  };
+
+  // ─── Reset credentials (go back to step 1) ───────────────────────────────────
+  const resetToken = async () => {
+    if (!confirm("This will clear your saved access token. You will need to re-enter it. Continue?")) return;
+    try {
+      await apiFetch("/api/whatsapp/config", {
+        method: "POST",
+        authToken: token!,
+        body: { token: "_clear_", instanceId: "" },
+      });
+    } catch {}
+    // Force a re-read — even if the above fails, clear local state
+    setCfg(prev => prev ? { ...prev, hasToken: false, hasInstance: false, configured: false, tokenMasked: "", instanceId: "" } : null);
+  };
+
+  // ────────────────────────────────────────────────────────────────────────────
+  // Render
+  // ────────────────────────────────────────────────────────────────────────────
+
+  if (loading || cfgLoading) {
+    return (
+      <div className="max-w-xl mx-auto w-full p-6 flex items-center gap-2 text-sm text-gray-500">
+        <Spinner /> Loading…
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-xl mx-auto w-full p-6 space-y-6">
+      {/* Back button */}
+      <button
+        onClick={() => router.push("/dashboard")}
+        className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+          <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
+        </svg>
+        Back
+      </button>
+
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <span className="text-3xl">💬</span>
+        <div>
+          <h1 className="text-2xl font-semibold leading-tight">WhatsApp Integration</h1>
+          <p className="text-sm text-gray-500">Powered by WAWP</p>
+        </div>
+      </div>
+
+      {/* Step indicator */}
+      <StepIndicator step={step} />
+
+      {/* Global action message */}
+      {actionMsg && (
+        <Alert type={actionMsg.type}>{actionMsg.text}</Alert>
+      )}
+
+      {/* ── STEP 1: Enter access token ──────────────────────────────────────── */}
+      {step === 1 && (
+        <section className="border rounded-xl p-6 bg-white shadow-sm space-y-4">
+          <h2 className="text-lg font-semibold">Step 1 — Enter your WAWP Access Token</h2>
+          <p className="text-sm text-gray-600">
+            Your access token is found in your WAWP account dashboard at{" "}
+            <a
+              href="https://app.wawp.net"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-600 hover:underline"
+            >
+              app.wawp.net
+            </a>
+            .
+          </p>
+          <div className="space-y-2">
+            <label className="block text-xs font-medium text-gray-700">Access Token</label>
+            <input
+              type="password"
+              value={inputToken}
+              onChange={e => setInputToken(e.target.value)}
+              onKeyDown={e => e.key === "Enter" && saveToken()}
+              placeholder="Paste your WAWP access token"
+              className="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <button
+            onClick={saveToken}
+            disabled={savingToken}
+            className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+          >
+            {savingToken && <Spinner />}
+            {savingToken ? "Saving…" : "Save Token & Continue"}
+          </button>
+        </section>
+      )}
+
+      {/* ── STEP 2: Instance ID ─────────────────────────────────────────────── */}
+      {step === 2 && (
+        <section className="border rounded-xl p-6 bg-white shadow-sm space-y-5">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">Step 2 — Set Up Session Instance</h2>
+            <span className="text-xs text-gray-400 font-mono bg-gray-100 px-2 py-0.5 rounded">
+              Token: {cfg?.tokenMasked}
+            </span>
+          </div>
+          <p className="text-sm text-gray-600">
+            You need a WAWP session instance. Either create a brand-new one, or enter an
+            existing Instance ID.
+          </p>
+
+          {/* Tab toggle */}
+          <div className="flex rounded-lg border overflow-hidden text-sm font-medium">
+            <button
+              onClick={() => setInstanceMode("create")}
+              className={`flex-1 px-4 py-2.5 transition-colors ${
+                instanceMode === "create"
+                  ? "bg-indigo-600 text-white"
+                  : "bg-white text-gray-600 hover:bg-gray-50"
+              }`}
+            >
+              Create new instance
+            </button>
+            <button
+              onClick={() => setInstanceMode("enter")}
+              className={`flex-1 px-4 py-2.5 border-l transition-colors ${
+                instanceMode === "enter"
+                  ? "bg-indigo-600 text-white"
+                  : "bg-white text-gray-600 hover:bg-gray-50"
+              }`}
+            >
+              Enter existing ID
+            </button>
+          </div>
+
+          {instanceMode === "create" && (
+            <div className="space-y-3">
+              <p className="text-sm text-gray-600">
+                Click below to create a new WAWP session. The Instance ID will be saved
+                automatically.
+              </p>
+              <button
+                onClick={createInstance}
+                disabled={savingInstance}
+                className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+              >
+                {savingInstance && <Spinner />}
+                {savingInstance ? "Creating…" : "Create Instance"}
+              </button>
+            </div>
+          )}
+
+          {instanceMode === "enter" && (
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Instance ID
+                </label>
+                <input
+                  type="text"
+                  value={inputInstanceId}
+                  onChange={e => setInputInstanceId(e.target.value)}
+                  onKeyDown={e => e.key === "Enter" && saveInstanceId()}
+                  placeholder="e.g. BF14B761C364"
+                  className="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+              </div>
+              <button
+                onClick={saveInstanceId}
+                disabled={savingInstance}
+                className="flex items-center gap-2 px-5 py-2.5 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+              >
+                {savingInstance && <Spinner />}
+                {savingInstance ? "Saving…" : "Save & Continue"}
+              </button>
+            </div>
+          )}
+
+          <button
+            onClick={resetToken}
+            className="text-xs text-gray-400 hover:text-red-500 hover:underline"
+          >
+            ← Change access token
+          </button>
+        </section>
+      )}
+
+      {/* ── STEP 3: Full management ─────────────────────────────────────────── */}
+      {step === 3 && (
+        <>
+          {/* Status card */}
+          <section className="border rounded-xl p-5 bg-white shadow-sm space-y-3">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Session Status</h2>
+              <button
+                onClick={fetchStatus}
+                className="text-xs text-indigo-600 hover:underline"
+              >
+                Refresh
+              </button>
+            </div>
+
+            {status === null ? (
+              <div className="flex items-center gap-2 text-sm text-gray-500">
+                <Spinner /> Fetching status…
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <span className="text-lg">{STATUS_ICONS[status] ?? "⚪"}</span>
+                <span
+                  className={`inline-flex items-center px-3 py-1 rounded-full border text-sm font-semibold ${
+                    STATUS_COLORS[status] ?? "bg-gray-100 text-gray-700 border-gray-300"
+                  }`}
+                >
+                  {status}
+                </span>
+              </div>
+            )}
+
+            {statusMsg && <p className="text-xs text-gray-500">{statusMsg}</p>}
+
+            {status === "FAILED" && (
+              <Alert type="err">
+                The session has failed. The system will attempt to auto-restart. You can also
+                restart manually below.
+              </Alert>
+            )}
+
+            {status && POLLING_STATUSES.has(status) && (
+              <p className="text-xs text-gray-400 flex items-center gap-1">
+                <Spinner /> Auto-refreshing every 5 seconds…
+              </p>
+            )}
+
+            {/* Config info strip */}
+            <div className="flex flex-wrap gap-3 pt-2 border-t text-xs text-gray-500">
+              <span>
+                Token: <span className="font-mono">{cfg?.tokenMasked || "—"}</span>
+              </span>
+              <span>
+                Instance: <span className="font-mono">{cfg?.instanceId || "—"}</span>
+              </span>
+            </div>
+          </section>
+
+          {/* QR Code */}
+          {status === "SCAN_QR_CODE" && (
+            <section className="border rounded-xl p-5 bg-white shadow-sm space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold">Scan QR Code</h2>
+                <button
+                  onClick={fetchQr}
+                  className="text-xs text-indigo-600 hover:underline"
+                >
+                  Refresh QR
+                </button>
+              </div>
+              <p className="text-sm text-gray-600">
+                Open WhatsApp → Linked Devices → Link a Device, then scan the code below.
+              </p>
+              {qrSrc ? (
+                <img
+                  src={qrSrc}
+                  alt="WhatsApp QR Code"
+                  className="w-56 h-56 border rounded-lg"
+                />
+              ) : (
+                <div className="flex items-center gap-2 text-sm text-gray-400">
+                  <Spinner /> Loading QR…
+                </div>
+              )}
+              <p className="text-xs text-gray-400">
+                QR codes expire after ~20 seconds — click Refresh QR if it stops working.
+              </p>
+            </section>
+          )}
+
+          {/* Pairing code */}
+          {status === "SCAN_QR_CODE" && (
+            <section className="border rounded-xl p-5 bg-white shadow-sm space-y-4">
+              <h2 className="text-lg font-semibold">Link by Phone Number Instead</h2>
+              <p className="text-sm text-gray-600">
+                Enter your WhatsApp number (SA format, e.g. 082 123 4567) to receive a pairing
+                code on your phone.
+              </p>
+              <div className="flex gap-2">
+                <input
+                  type="tel"
+                  value={pairingPhone}
+                  onChange={e => setPairingPhone(e.target.value)}
+                  placeholder="082 123 4567"
+                  className="flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+                <button
+                  onClick={requestPairingCode}
+                  disabled={busy === "request-code"}
+                  className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+                >
+                  {busy === "request-code" && <Spinner />}
+                  {busy === "request-code" ? "Sending…" : "Send code"}
+                </button>
+              </div>
+            </section>
+          )}
+
+          {/* Session controls */}
+          <section className="border rounded-xl p-5 bg-white shadow-sm space-y-4">
+            <h2 className="text-lg font-semibold">Session Controls</h2>
+            <div className="flex flex-wrap gap-3">
+              <ActionButton
+                label="Start"
+                busyLabel="Starting…"
+                isBusy={busy === "start"}
+                disabled={!!busy}
+                color="green"
+                onClick={() => doAction("start")}
+              />
+              <ActionButton
+                label="Restart"
+                busyLabel="Restarting…"
+                isBusy={busy === "restart"}
+                disabled={!!busy}
+                color="amber"
+                onClick={() => doAction("restart")}
+              />
+              <ActionButton
+                label="Logout"
+                busyLabel="Logging out…"
+                isBusy={busy === "logout"}
+                disabled={!!busy}
+                color="red-outline"
+                onClick={() => {
+                  if (!confirm("This will log out the linked WhatsApp account. Are you sure?")) return;
+                  doAction("logout");
+                }}
+              />
+            </div>
+          </section>
+
+          {/* Instance management */}
+          <section className="border rounded-xl p-5 bg-white shadow-sm space-y-4">
+            <h2 className="text-lg font-semibold">Instance Management</h2>
+            <p className="text-sm text-gray-600">
+              Create a brand-new instance or permanently delete the current one. Deleting will
+              require you to set up a new instance.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <ActionButton
+                label="Create New Instance"
+                busyLabel="Creating…"
+                isBusy={busy === "create-instance"}
+                disabled={!!busy}
+                color="blue"
+                onClick={() => doAction("create-instance")}
+              />
+              <ActionButton
+                label="Delete Instance"
+                busyLabel="Deleting…"
+                isBusy={busy === "delete-instance"}
+                disabled={!!busy}
+                color="red-outline"
+                onClick={() => {
+                  if (!confirm("This will PERMANENTLY delete the instance. You'll need to create a new one. Are you sure?")) return;
+                  doAction("delete-instance");
+                }}
+              />
+            </div>
+          </section>
+
+          {/* Update credentials */}
+          <details className="border rounded-xl bg-white shadow-sm">
+            <summary className="p-5 cursor-pointer text-sm font-semibold text-gray-700 select-none list-none flex items-center justify-between">
+              <span>Update Credentials</span>
+              <span className="text-gray-400 text-xs">expand ▾</span>
+            </summary>
+            <div className="px-5 pb-5 space-y-3 border-t pt-4">
+              <p className="text-sm text-gray-600">
+                Change your WAWP access token or Instance ID. Leave a field blank to keep the
+                current value.
+              </p>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  New Access Token
+                </label>
+                <input
+                  type="password"
+                  value={inputToken}
+                  onChange={e => setInputToken(e.target.value)}
+                  placeholder="Leave blank to keep current token"
+                  className="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  New Instance ID
+                </label>
+                <input
+                  type="text"
+                  value={inputInstanceId}
+                  onChange={e => setInputInstanceId(e.target.value)}
+                  placeholder="Leave blank to keep current instance"
+                  className="w-full border rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+              </div>
+              <button
+                onClick={async () => {
+                  if (!inputToken.trim() && !inputInstanceId.trim()) {
+                    setActionMsg({ type: "err", text: "Enter at least one field to update." });
+                    return;
+                  }
+                  setSavingToken(true);
+                  setActionMsg(null);
+                  try {
+                    await apiFetch("/api/whatsapp/config", {
+                      method: "POST",
+                      authToken: token!,
+                      body: {
+                        token:      inputToken.trim() || undefined,
+                        instanceId: inputInstanceId.trim() || undefined,
+                      },
+                    });
+                    setActionMsg({ type: "ok", text: "Credentials updated." });
+                    setInputToken("");
+                    setInputInstanceId("");
+                    await fetchConfig();
+                  } catch (e: any) {
+                    setActionMsg({ type: "err", text: e?.message || "Failed to update." });
+                  } finally {
+                    setSavingToken(false);
+                  }
+                }}
+                disabled={savingToken}
+                className="flex items-center gap-2 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+              >
+                {savingToken && <Spinner />}
+                {savingToken ? "Saving…" : "Save Changes"}
+              </button>
+            </div>
+          </details>
+        </>
+      )}
+
+      <p className="text-xs text-gray-400 text-center">
+        WhatsApp notifications powered by{" "}
+        <a
+          href="https://wawp.net"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:underline"
+        >
+          WAWP
+        </a>
+        . Session auto-recovers on failure; admin alert sent if recovery fails.
+      </p>
+    </div>
+  );
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function StepIndicator({ step }: { step: number }) {
+  const steps = [
+    { n: 1, label: "Access Token" },
+    { n: 2, label: "Session Instance" },
+    { n: 3, label: "Connected" },
+  ];
+  return (
+    <div className="flex items-center gap-0">
+      {steps.map((s, i) => {
+        const done    = step > s.n;
+        const current = step === s.n;
+        return (
+          <React.Fragment key={s.n}>
+            <div className="flex flex-col items-center">
+              <div
+                className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors ${
+                  done
+                    ? "bg-green-500 border-green-500 text-white"
+                    : current
+                    ? "bg-indigo-600 border-indigo-600 text-white"
+                    : "bg-white border-gray-300 text-gray-400"
+                }`}
+              >
+                {done ? "✓" : s.n}
+              </div>
+              <span
+                className={`text-xs mt-1 font-medium ${
+                  done || current ? "text-gray-700" : "text-gray-400"
+                }`}
+              >
+                {s.label}
+              </span>
+            </div>
+            {i < steps.length - 1 && (
+              <div
+                className={`flex-1 h-0.5 mb-5 mx-1 transition-colors ${
+                  done ? "bg-green-400" : "bg-gray-200"
+                }`}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+type ButtonColor = "green" | "amber" | "blue" | "red-outline";
+
+function ActionButton({
+  label,
+  busyLabel,
+  isBusy,
+  disabled,
+  color,
+  onClick,
+}: {
+  label: string;
+  busyLabel: string;
+  isBusy: boolean;
+  disabled: boolean;
+  color: ButtonColor;
+  onClick: () => void;
+}) {
+  const base = "flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50 transition-colors";
+  const colors: Record<ButtonColor, string> = {
+    green:       "bg-green-600 text-white hover:bg-green-700",
+    amber:       "bg-amber-500 text-white hover:bg-amber-600",
+    blue:        "bg-blue-600 text-white hover:bg-blue-700",
+    "red-outline": "border border-red-600 text-red-600 hover:bg-red-50",
+  };
+  return (
+    <button onClick={onClick} disabled={disabled} className={`${base} ${colors[color]}`}>
+      {isBusy && <Spinner />}
+      {isBusy ? busyLabel : label}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..bd60444
--- /dev/null
+++ b/frontend/src/app/dashboard/layout.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { usePathname, useRouter } from "next/navigation";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { Sidebar, MobileSidebar } from "@/components/layout/Sidebar";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Redirect unauthenticated users to login
+  useEffect(() => {
+    if (loading) return;
+    if (!user) {
+      router.replace("/login");
+    }
+  }, [user, loading, router]);
+
+  // Role-based route guard within /dashboard
+  useEffect(() => {
+    if (loading) return;
+    if (!user) return; // handled above
+    if (!pathname || !pathname.startsWith("/dashboard")) return;
+
+    const role = user.role || "user";
+
+    // Determine allowed prefixes and default destination per role
+    let allowed: string[] = ["/dashboard/user"]; // everyone can access user dashboard
+    let dest = "/dashboard/user";
+
+    if (role === "admin") {
+      allowed = ["/dashboard/admin", "/dashboard/user"];
+      dest = "/dashboard/admin";
+    } else if (role === "supervisor") {
+      allowed = ["/dashboard/supervisor", "/dashboard/user"];
+      dest = "/dashboard/supervisor";
+    } else if (role === "staff") {
+      allowed = ["/dashboard/staff", "/dashboard/user"];
+      dest = "/dashboard/staff";
+    }
+
+    // Allow admin to access supervisor and staff subpages (but not their root dashboards)
+    const isAllowed =
+      allowed.some(prefix => pathname === prefix || pathname.startsWith(prefix + "/")) ||
+      (role === "admin" && (pathname.startsWith("/dashboard/supervisor/") || pathname.startsWith("/dashboard/staff/"))) ||
+      (role === "supervisor" && pathname.startsWith("/dashboard/staff/"));
+
+    if (!isAllowed && pathname !== dest) {
+      router.replace(dest);
+    }
+  }, [pathname, user, loading, router]);
+
+  // Don't render protected content until auth state is known
+  if (loading || !user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-sm text-gray-400">Loading…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <div className="flex-1 flex flex-col md:flex-row">
+        {/* Mobile dropdown navigation */}
+        <MobileSidebar />
+        {/* Desktop sidebar */}
+        <div className="hidden md:block">
+          <Sidebar />
+        </div>
+        <main className="flex-1 p-6 bg-gray-50">{children}</main>
+      </div>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/page.tsx b/frontend/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..b38175d
--- /dev/null
+++ b/frontend/src/app/dashboard/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+import React, { useEffect } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+
+export default function DashboardIndex() {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading) return; // wait for auth to initialize
+    if (!user) {
+      router.replace("/login");
+      return;
+    }
+    // Role-aware routing
+    const role = user.role || "user";
+    if (role === "admin") router.replace("/dashboard/admin");
+    else if (role === "supervisor") router.replace("/dashboard/supervisor");
+    else if (role === "staff") router.replace("/dashboard/staff");
+    else router.replace("/dashboard/user");
+  }, [router, user, loading]);
+
+  // This route only ever exists to redirect elsewhere (login now goes straight to the role
+  // dashboard — see LoginForm — so this mainly serves bookmarks/direct links); show a deliberate
+  // loading state instead of a blank screen while that redirect is worked out.
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="text-sm text-gray-400">Loading…</div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/staff/event-tickets/page.tsx b/frontend/src/app/dashboard/staff/event-tickets/page.tsx
new file mode 100644
index 0000000..7d7fd85
--- /dev/null
+++ b/frontend/src/app/dashboard/staff/event-tickets/page.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import { useRouter, useSearchParams } from "next/navigation";
+import { formatDate } from "@/lib/date";
+import { QrImage } from "@/components/shared/QrImage";
+
+function EventTicketsContent() {
+  const { token, user } = useAuth();
+  const params = useSearchParams();
+  const router = useRouter();
+
+  const paramEventId = params.get("eventId") || "";
+  const paramUserId = params.get("userId") || "";
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [eventId, setEventId] = useState<string>(paramEventId);
+  const [tickets, setTickets] = useState<any[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const [selectedUserId, setSelectedUserId] = useState<string>(paramUserId);
+  const [selectedVariantId, setSelectedVariantId] = useState<string>("");
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor" || role === "staff";
+  }, [user]);
+
+  // Load events for dropdown
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        const evs = await apiFetch<any[]>("/api/events/all", { authToken: token });
+        const now = Date.now();
+        const active = (evs || []).filter((ev) => {
+          const t = new Date(ev.endDate).getTime();
+          return !isNaN(t) && t > now;
+        });
+        active.sort(
+            (a, b) =>
+                new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+        );
+        setEvents(active);
+        if (!paramEventId && active.length > 0) {
+          setEventId(active[0].id);
+          router.replace(
+              `?eventId=${encodeURIComponent(active[0].id)}${
+                  selectedUserId ? `&userId=${encodeURIComponent(selectedUserId)}` : ""
+              }`
+          );
+        }
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      }
+    })();
+  }, [token]);
+
+  // Sync params → state
+  useEffect(() => {
+    if (paramEventId && paramEventId !== eventId) setEventId(paramEventId);
+    if (paramUserId && paramUserId !== selectedUserId)
+      setSelectedUserId(paramUserId);
+  }, [paramEventId, paramUserId]);
+
+  // Load tickets when event changes
+  useEffect(() => {
+    (async () => {
+      if (!token || !eventId) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const list = await apiFetch<any[]>(
+            `/api/tickets/event/${encodeURIComponent(eventId)}`,
+            { authToken: token }
+        );
+        setTickets(list);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load tickets");
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token, eventId]);
+
+  // Build variants list for filter (only variants present in current event's tickets)
+  const variantsList = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const t of tickets) {
+      const v = t.registrationOption?.variant;
+      if (v?.id) map.set(v.id, v.name);
+    }
+    return Array.from(map.entries())
+        .map(([id, name]) => ({ id, name }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+  }, [tickets]);
+
+  // Build users list depending on event selection
+  const usersList = useMemo(() => {
+    let source = [...tickets];
+    if (eventId) {
+      source = source.filter((t) => String(t.eventId) === String(eventId));
+    }
+    const map = new Map<string, string>();
+    for (const t of source) {
+      const uid = t.user?.id || t.userId;
+      if (!uid) continue;
+      const name = t.user?.name || t.user?.email || String(uid);
+      if (!map.has(String(uid))) map.set(String(uid), name);
+    }
+    return Array.from(map.entries())
+        .map(([id, name]) => ({ id, name }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+  }, [tickets, eventId]);
+
+  // Filter tickets by event + user + variant
+  const filteredTickets = useMemo(() => {
+    let list = [...tickets];
+    if (eventId) {
+      list = list.filter((t) => String(t.eventId) === String(eventId));
+    }
+    if (selectedUserId) {
+      list = list.filter(
+          (t) => String(t.user?.id || t.userId) === String(selectedUserId)
+      );
+    }
+    if (selectedVariantId) {
+      list = list.filter(
+          (t) => String(t.registrationOption?.variant?.id || "") === String(selectedVariantId)
+      );
+    }
+    return list;
+  }, [tickets, eventId, selectedUserId, selectedVariantId]);
+
+  // Printing helpers
+  const buildTicketHtmlCard = (t: any) => {
+    const eventTitle = t.event?.title || t.eventId || "Event";
+    const eventDate = t.event?.startDate ? new Date(t.event.startDate) : null;
+    const optBase = t.registrationOption?.eventOption?.name || "Ticket";
+    const optVariant = t.registrationOption?.variant?.name;
+    const type = optVariant ? `${optBase} — ${optVariant}` : optBase;
+    const qty = t.quantity || 1;
+    const holder = t.user?.name || t.userId || "";
+    const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(
+        t.qrCode || t.id
+    )}`;
+    const dateStr = eventDate ? formatDate(eventDate) : "";
+    return `
+      <div class="ticket">
+        <div class="evt">${eventTitle}</div>
+        ${dateStr ? `<div class="date">${dateStr}</div>` : ""}
+        <div class="type">${type}</div>
+        <div class="qty">Qty: <strong>${qty}</strong></div>
+        <div class="qrwrap"><img src="${qrSrc}" alt="QR" /></div>
+        <div class="meta">ID: ${t.id}</div>
+        ${holder ? `<div class="meta">${holder}</div>` : ""}
+      </div>
+    `;
+  };
+
+  const openPrintWindow = (pagesHtml: string) => {
+    const w = window.open("", "_blank");
+    if (!w) return;
+    w.document.write(`<!doctype html><html><head><title>Tickets</title>
+      <style>
+        @page { size: A4; margin: 10mm; }
+        * { box-sizing: border-box; }
+        body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
+        .page {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(4, 1fr);
+          height: 277mm;
+          gap: 6mm;
+          page-break-after: always;
+          break-after: page;
+        }
+        .page:last-child { page-break-after: avoid; break-after: avoid; }
+        .ticket { border: 1px solid #000; padding: 5mm; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
+        .evt { font-weight: bold; font-size: 14px; }
+        .type { font-size: 12px; margin-top: 2mm; }
+        .qty { font-size: 11px; margin-top: 1mm; }
+        .date { font-size: 10px; color: #555; margin-top: 1mm; }
+        .qrwrap { display: flex; justify-content: center; margin: 2mm 0; }
+        .qrwrap img { width: 30mm; height: 30mm; }
+        .meta { font-size: 10px; text-align: center; }
+      </style>
+    </head><body>
+      ${pagesHtml}
+      <script>
+        (function(){
+          function printWhenReady(){
+            var imgs = Array.prototype.slice.call(document.images);
+            if(imgs.length === 0){ window.print(); return; }
+            var remaining = imgs.length;
+            function done(){ remaining--; if(remaining <= 0){ setTimeout(function(){ window.print(); }, 100); } }
+            imgs.forEach(function(img){
+              if (img.complete) { done(); }
+              else {
+                img.addEventListener('load', done, { once: true });
+                img.addEventListener('error', done, { once: true });
+              }
+            });
+          }
+          if (document.readyState === 'complete') printWhenReady();
+          else window.addEventListener('load', printWhenReady);
+        })();
+      </script>
+    </body></html>`);
+    w.document.close();
+    w.focus();
+  };
+
+  const printTickets = (ticketList: any[]) => {
+    if (!ticketList || ticketList.length === 0) return;
+    // Chunk into pages of 8 (2 columns × 4 rows per A4 sheet)
+    const PAGE_SIZE = 8;
+    const pages: string[] = [];
+    for (let i = 0; i < ticketList.length; i += PAGE_SIZE) {
+      const chunk = ticketList.slice(i, i + PAGE_SIZE);
+      pages.push(`<div class="page">${chunk.map(buildTicketHtmlCard).join("")}</div>`);
+    }
+    openPrintWindow(pages.join(""));
+  };
+
+  return (
+      <div className="max-w-6xl mx-auto w-full p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h1 className="text-2xl font-semibold">Event Tickets</h1>
+          <button
+              className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm"
+              onClick={() => router.push("/dashboard")}
+          >
+            Back
+          </button>
+        </div>
+        <p className="text-sm text-gray-600 mb-4">
+          View and print tickets for an event.
+        </p>
+
+        {!canView && (
+            <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+              You need staff, supervisor, or admin access to view this page.
+            </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row sm:flex-wrap sm:items-center gap-2 mb-4">
+          <label className="text-sm text-gray-700 shrink-0">Event</label>
+          <select
+              className="border rounded px-3 py-2 w-full sm:w-64 max-w-full"
+              value={eventId}
+              onChange={(e) => {
+                const v = e.target.value;
+                setEventId(v);
+                setSelectedUserId("");
+                router.replace(
+                    `?eventId=${encodeURIComponent(v)}${
+                        selectedUserId
+                            ? `&userId=${encodeURIComponent(selectedUserId)}`
+                            : ""
+                    }`
+                );
+              }}
+          >
+            <option value="">All events</option>
+            {events.map((ev) => (
+                <option key={ev.id} value={ev.id}>
+                  {ev.title}
+                </option>
+            ))}
+          </select>
+
+          <label className="text-sm text-gray-700 sm:ml-4 shrink-0">User</label>
+          <select
+              className="border rounded px-3 py-2 w-full sm:w-64 max-w-full"
+              value={selectedUserId}
+              onChange={(e) => {
+                const v = e.target.value;
+                setSelectedUserId(v);
+                router.replace(
+                    `?eventId=${encodeURIComponent(eventId || "")}${
+                        v ? `&userId=${encodeURIComponent(v)}` : ""
+                    }`
+                );
+              }}
+              disabled={usersList.length === 0}
+          >
+            <option value="">All users</option>
+            {usersList.map((u) => (
+                <option key={u.id} value={u.id}>
+                  {u.name}
+                </option>
+            ))}
+          </select>
+
+          {variantsList.length > 0 && (
+              <>
+                <label className="text-sm text-gray-700 sm:ml-4 shrink-0">Variant</label>
+                <select
+                    className="border rounded px-3 py-2 w-full sm:w-48 max-w-full"
+                    value={selectedVariantId}
+                    onChange={(e) => setSelectedVariantId(e.target.value)}
+                >
+                  <option value="">All variants</option>
+                  {variantsList.map((v) => (
+                      <option key={v.id} value={v.id}>{v.name}</option>
+                  ))}
+                </select>
+              </>
+          )}
+
+          {filteredTickets.length > 0 && (
+              <div className="flex gap-2">
+                <button
+                    onClick={() => printTickets(filteredTickets)}
+                    className="px-3 py-2 border rounded"
+                >
+                  Print all
+                </button>
+                <button
+                    onClick={() =>
+                        printTickets(filteredTickets.filter((t) => !t.isUsed))
+                    }
+                    className="px-3 py-2 bg-blue-600 text-white rounded"
+                >
+                  Print unused
+                </button>
+              </div>
+          )}
+        </div>
+
+        {loading && <div>Loading...</div>}
+        {error && <div className="text-red-600 text-sm">{error}</div>}
+
+        {filteredTickets.length > 0 && (
+            <div className="mb-3 text-sm text-gray-700">
+          <span className="mr-3">
+            Total tickets: {filteredTickets.length}
+          </span>
+              <span className="mr-3">
+            Used: {filteredTickets.filter((t) => t.isUsed).length}
+          </span>
+              <span>
+            Unused: {filteredTickets.filter((t) => !t.isUsed).length}
+          </span>
+            </div>
+        )}
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {filteredTickets.map((t) => {
+            const eventDate = t.event?.startDate
+                ? new Date(t.event.startDate)
+                : null;
+            const optBase = t.registrationOption?.eventOption?.name || "Ticket";
+            const optVariant = t.registrationOption?.variant?.name;
+            const type = optVariant ? `${optBase} — ${optVariant}` : optBase;
+            return (
+                <div
+                    key={t.id}
+                    className="border rounded-xl p-3 space-y-2 bg-white shadow-sm"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="font-medium">
+                      {t.event?.title || t.eventId}
+                    </div>
+                    {eventDate && (
+                        <span className="text-xs text-gray-500">
+                    {formatDate(eventDate)}
+                  </span>
+                    )}
+                  </div>
+                  <div className="text-sm text-gray-700">{type}</div>
+                  <div className="flex justify-center">
+                    <QrImage value={t.qrCode || t.id} size={120} className="w-28 h-28" />
+                  </div>
+                  <div className="text-center text-xs text-gray-500">
+                    #{String(t.id).slice(0, 8)} •{" "}
+                    {t.isUsed ? "Used" : "Unused"}
+                  </div>
+                </div>
+            );
+          })}
+        </div>
+      </div>
+  );
+}
+
+export default function EventTicketsPage() {
+  return (
+      <Suspense fallback={<div className="p-6">Loading...</div>}>
+        <EventTicketsContent />
+      </Suspense>
+  );
+}
diff --git a/frontend/src/app/dashboard/staff/page.tsx b/frontend/src/app/dashboard/staff/page.tsx
new file mode 100644
index 0000000..c80ea4a
--- /dev/null
+++ b/frontend/src/app/dashboard/staff/page.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { useStableState } from "@/hooks/useStableState";
+import { useVisiblePolling } from "@/hooks/useVisiblePolling";
+
+export default function StaffDashboardPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  // Access control (staff/supervisor/admin)
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor" || role === "staff";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  // Stats and recent scans for quick overview — both come from one endpoint
+  // (/api/stats/staff) instead of two separate calls. useStableState skips re-renders when
+  // a poll returns identical data, and hasLoadedOnce below means "Refreshing…" only shows
+  // on the very first load — together these stop the stats panel from flickering.
+  const [stats, setStats] = useStableState<any | null>(null);
+  const [recentScans, setRecentScans] = useStableState<any[]>([]);
+  const [loadingStats, setLoadingStats] = useState(false);
+  const hasLoadedOnce = useRef(false);
+
+  const loadStats = async () => {
+    if (!token) return;
+    const isFirstLoad = !hasLoadedOnce.current;
+    try {
+      if (isFirstLoad) setLoadingStats(true);
+      const data = await apiFetch<any>("/api/stats/staff", { authToken: token });
+      setStats(data.scanStats);
+      setRecentScans(Array.isArray(data.recentScans) ? data.recentScans : []);
+    } catch (e) {
+      // ignore
+    } finally {
+      hasLoadedOnce.current = true;
+      if (isFirstLoad) setLoadingStats(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    loadStats();
+  }, [token]);
+
+  // Poll every 10s while the tab is visible; pause in the background and refetch
+  // immediately on return instead of leaving stale numbers up.
+  useVisiblePolling(() => {
+    if (!token) return;
+    loadStats();
+  }, 10000, !!token);
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Staff Dashboard{user ? ` — ${user.name}` : ""}</h1>
+        <div className="hidden sm:flex gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/ticket-scanning")}>Open scanner</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/event-tickets")}>Event tickets</button>
+        </div>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need staff, supervisor, or admin access to use staff tools.
+        </div>
+      )}
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+            <div className="text-lg font-semibold mb-2">Quick actions</div>
+            <div className="grid sm:grid-cols-2 gap-3">
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/ticket-scanning")}>Scan tickets
+                <div className="text-xs text-white/90">Use your device camera to validate tickets</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/event-tickets")}>Event tickets & printing
+                <div className="text-xs text-white/90">Browse event tickets and print lists</div>
+              </button>
+            </div>
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg font-semibold">Recent scans</h2>
+              {loadingStats && <span className="text-xs text-gray-500">Refreshing…</span>}
+            </div>
+            <ul className="text-sm space-y-2 max-h-96 overflow-auto pr-2">
+              {recentScans.map((u: any) => (
+                <li key={u.id} className="border rounded p-2">
+                  <div className="flex justify-between">
+                    <div className="font-medium">{u.ticket?.event?.title || u.ticket?.eventId || 'Event'}</div>
+                    <div className="text-xs text-gray-500">{new Date(u.scannedAt).toLocaleString()}</div>
+                  </div>
+                  <div className="text-xs text-gray-600">{u.ticket?.registrationOption?.eventOption?.name || 'Ticket'} — #{String(u.ticket?.id || '').slice(0,8)}</div>
+                  <div className="text-xs text-gray-500">Scanned by: {u.scannedBy?.name || u.scannedById}</div>
+                </li>
+              ))}
+              {recentScans.length === 0 && <li className="text-gray-500">No scans yet.</li>}
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <h2 className="text-lg font-semibold mb-3">Scanner stats</h2>
+            {loadingStats && <div className="text-sm text-gray-500 mb-2">Loading stats…</div>}
+            {stats && (
+              <div className="grid grid-cols-3 gap-2 mb-3">
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Today</div>
+                  <div className="text-lg font-semibold">{stats.totalToday}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">My scans</div>
+                  <div className="text-lg font-semibold">{stats.myToday}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Last hour</div>
+                  <div className="text-lg font-semibold">{stats.lastHour}</div>
+                </div>
+              </div>
+            )}
+
+            {stats?.byStaff?.length > 0 && (
+              <div className="mb-1">
+                <div className="text-sm font-medium mb-1">Today by staff</div>
+                <ul className="text-sm text-gray-700 space-y-1">
+                  {stats.byStaff.map((s: any) => (
+                    <li key={s.scannedById} className="flex justify-between">
+                      <span>{s.name || 'Staff'}</span>
+                      <span className="font-medium">{s.count}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/staff/ticket-scanning/page.tsx b/frontend/src/app/dashboard/staff/ticket-scanning/page.tsx
new file mode 100644
index 0000000..98364ad
--- /dev/null
+++ b/frontend/src/app/dashboard/staff/ticket-scanning/page.tsx
@@ -0,0 +1,487 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { QRScanner, QRScannerHandle } from "@/components/qr/QRScanner";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import { useRouter } from "next/navigation";
+
+export default function TicketScanningPage() {
+  const router = useRouter();
+  const scannerRef = useRef<QRScannerHandle>(null);
+  const [lastResult, setLastResult] = useState<string | null>(null);
+  const [scanInfo, setScanInfo] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [alreadyUsedModal, setAlreadyUsedModal] = useState<{ message: string; ticket?: any } | null>(null);
+  const [errorModal, setErrorModal] = useState<string | null>(null);
+  const { token, user } = useAuth();
+  const [recentScans, setRecentScans] = useState<any[]>([]);
+  const [stats, setStats] = useState<any | null>(null);
+  const [loadingStats, setLoadingStats] = useState<boolean>(false);
+  const [successModal, setSuccessModal] = useState<{
+    optionName: string;
+    ticketId: string;
+    eventTitle: string;
+    qtyRedeemed: number;
+    remaining: number;
+    total: number;
+  } | null>(null);
+
+  // Confirm step state
+  const [confirmModal, setConfirmModal] = useState<{
+    qrCode: string;
+    ticket: any;
+    remaining: number;
+  } | null>(null);
+  const [confirmQty, setConfirmQty] = useState(1);
+  const [confirmQtyRaw, setConfirmQtyRaw] = useState("1");
+
+  // Event selection state
+  const [allEvents, setAllEvents] = useState<any[]>([]);
+  const [includePastEvents, setIncludePastEvents] = useState(false);
+  const [selectedEventId, setSelectedEventId] = useState<string>("all");
+  const [loadingEvents, setLoadingEvents] = useState<boolean>(false);
+  const [sections, setSections] = useState<any[]>([]);
+  const [selectedSectionId, setSelectedSectionId] = useState<string>("all");
+  const [loadingSections, setLoadingSections] = useState(false);
+
+  // All events from API (including past); frontend filters to 12h window or all past
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        setLoadingEvents(true);
+        const evs = await apiFetch<any[]>("/api/events/all?includePast=true", { authToken: token });
+        const sorted = (evs || []).sort((a, b) => new Date(a.endDate).getTime() - new Date(b.endDate).getTime());
+        setAllEvents(sorted);
+      } catch (e: any) {
+        // non-fatal
+      } finally {
+        setLoadingEvents(false);
+      }
+    })();
+  }, [token]);
+
+  const events = useMemo(() => {
+    if (includePastEvents) return allEvents;
+    const cutoff = Date.now() - 12 * 60 * 60 * 1000;
+    return allEvents.filter(ev => {
+      const t = new Date(ev.endDate).getTime();
+      return !isNaN(t) && t >= cutoff;
+    });
+  }, [allEvents, includePastEvents]);
+
+  useEffect(() => {
+    (async () => {
+      if (!token || !selectedEventId || selectedEventId === "all") {
+        setSections([]);
+        setSelectedSectionId("all");
+        return;
+      }
+      try {
+        setLoadingSections(true);
+        const list = await apiFetch<any[]>(`/api/sections?eventId=${selectedEventId}`, { authToken: token });
+        setSections(Array.isArray(list) ? list : []);
+        setSelectedSectionId("all");
+      } catch {
+        setSections([]);
+      } finally {
+        setLoadingSections(false);
+      }
+    })();
+  }, [selectedEventId, token]);
+
+  // Bug fix: stop the scanner when the event or section filter changes so stale scan
+  // context is never used. The user must press "Scan Ticket" again to resume.
+  const isFirstFilterRender = useRef(true);
+  useEffect(() => {
+    if (isFirstFilterRender.current) { isFirstFilterRender.current = false; return; }
+    scannerRef.current?.stop();
+  }, [selectedEventId, selectedSectionId]);
+
+  async function handleResult(text: string) {
+    setLastResult(text);
+    setError(null);
+    setScanInfo(null);
+    try {
+      if (!token) {
+        setErrorModal("Please login as staff to scan tickets.");
+        return;
+      }
+
+      // Always preview first to validate the ticket before showing confirm step
+      // Uses the lightweight scan-preview endpoint (only fetches fields needed for the confirm modal)
+      let preview: any;
+      try {
+        preview = await apiFetch<any>(`/api/tickets/scan-preview/${encodeURIComponent(text)}`, { authToken: token });
+      } catch (pe: any) {
+        setErrorModal(pe?.message || 'Failed to validate ticket');
+        return;
+      }
+
+      // Validate event
+      if (selectedEventId && selectedEventId !== "all") {
+        const ticketEventId = preview?.event?.id || preview?.eventId;
+        if (ticketEventId && ticketEventId !== selectedEventId) {
+          const eventTitle = preview?.event?.title || 'Event';
+          setErrorModal(`This ticket is for a different event: ${eventTitle}`);
+          return;
+        }
+
+        // Validate section
+        if (selectedSectionId !== "all") {
+          const ticketOptionId = preview?.registrationOption?.eventOption?.id || preview?.eventOptionId;
+          if (!ticketOptionId) {
+            setErrorModal("Unable to determine ticket type");
+            return;
+          }
+          const section = sections.find(s => s.id === selectedSectionId);
+          const allowedOptionIds = (section?.allowedOptions || []).map((o: any) => o.eventOptionId);
+          if (!allowedOptionIds.includes(ticketOptionId)) {
+            setErrorModal("This ticket is not valid for this section");
+            return;
+          }
+        }
+      }
+
+      // Compute remaining qty
+      const ticketQty = preview?.quantity || 1;
+      const totalRedeemed = (preview?.usages || []).reduce((s: number, u: any) => s + (u.quantityRedeemed || 1), 0);
+      const remaining = ticketQty - totalRedeemed;
+
+      if (remaining <= 0) {
+        setAlreadyUsedModal({ message: 'Ticket has already been fully used', ticket: preview });
+        return;
+      }
+
+      // Show confirm step
+      setConfirmQty(remaining);
+      setConfirmQtyRaw(String(remaining));
+      setConfirmModal({ qrCode: text, ticket: preview, remaining });
+    } catch (e: any) {
+      setErrorModal(e?.message || "Failed to scan ticket");
+    }
+  }
+
+  async function commitScan() {
+    if (!confirmModal || !token) return;
+
+    // Capture everything before clearing modal state
+    const { qrCode, ticket, remaining } = confirmModal;
+    const qty = confirmQty;
+    const baseName = ticket?.registrationOption?.eventOption?.name || "Ticket";
+    const variantName = ticket?.registrationOption?.variant?.name;
+    const optionName = variantName ? `${baseName} — ${variantName}` : baseName;
+    const eventTitle = ticket?.event?.title || 'Event';
+    const idPart = ticket?.id ? String(ticket.id).slice(0, 6) : '';
+    const newRemaining = remaining - qty;
+
+    // Show success immediately — we already have all the data from the preview step.
+    // The actual write happens in the background so the user sees an instant response.
+    setConfirmModal(null);
+    setScanInfo(`Ticket #${idPart} — ${optionName} — ${eventTitle}`);
+    setSuccessModal({
+      optionName,
+      ticketId: idPart,
+      eventTitle,
+      qtyRedeemed: qty,
+      remaining: newRemaining,
+      total: ticket?.quantity || 1,
+    });
+
+    // Background write — reverse the optimistic update on failure
+    try {
+      const url = `/api/tickets/scan/${encodeURIComponent(qrCode)}${
+        selectedEventId && selectedEventId !== "all" ? `?eventId=${encodeURIComponent(selectedEventId)}` : ''
+      }`;
+      await apiFetch<any>(url, {
+        method: "POST",
+        authToken: token,
+        body: { qty },
+      });
+      refreshStatsAndRecent();
+    } catch (e: any) {
+      setSuccessModal(null);
+      setScanInfo(null);
+      const raw = e?.message || "Failed to scan ticket";
+      try {
+        const parsed = JSON.parse(raw);
+        const msg: string | undefined = parsed?.message;
+        if (msg && /already\s*(been)?\s*used/i.test(msg)) {
+          setAlreadyUsedModal({ message: msg, ticket: parsed?.ticket });
+          return;
+        }
+        setErrorModal(msg || raw);
+      } catch {
+        setErrorModal(raw);
+      }
+    }
+  }
+
+  const loadRecent = async () => {
+    if (!token) return;
+    try {
+      const list = await apiFetch<any[]>(`/api/tickets/scans/recent?limit=10`, { authToken: token });
+      setRecentScans(list);
+    } catch {}
+  };
+  const loadStats = async () => {
+    if (!token) return;
+    try {
+      setLoadingStats(true);
+      const s = await apiFetch<any>(`/api/tickets/scans/stats`, { authToken: token });
+      setStats(s);
+    } catch {} finally {
+      setLoadingStats(false);
+    }
+  };
+  const refreshStatsAndRecent = () => { loadRecent(); loadStats(); };
+  useEffect(() => {
+    refreshStatsAndRecent();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-4">
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-2xl font-semibold">Ticket Scanning</h1>
+            <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+          </div>
+          <p className="text-sm text-gray-600 mb-4">
+            Use the button to start/stop scanning. The back camera will be used when available.
+          </p>
+
+          {/* Event filter */}
+          <div className="flex flex-col sm:flex-row sm:flex-wrap sm:items-center gap-2 mb-3">
+            <label className="text-sm text-gray-700 shrink-0">Event</label>
+            <select
+              className="border rounded px-3 py-2 w-full sm:w-56 max-w-full"
+              value={selectedEventId}
+              onChange={(e) => setSelectedEventId(e.target.value)}
+            >
+              <option value="all">All events</option>
+              {events.map((ev) => (
+                <option key={ev.id} value={ev.id}>{ev.title}</option>
+              ))}
+            </select>
+            <label className="flex items-center gap-1.5 text-sm text-gray-600 cursor-pointer">
+              <input type="checkbox" checked={includePastEvents} onChange={e => setIncludePastEvents(e.target.checked)} />
+              Include past events
+            </label>
+            {loadingEvents && <span className="text-xs text-gray-500">Loading events…</span>}
+          </div>
+          {sections.length > 0 && (
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 mb-3">
+              <label className="text-sm text-gray-700 shrink-0">Section</label>
+              <select
+                className="border rounded px-3 py-2 w-full sm:w-56 max-w-full"
+                value={selectedSectionId}
+                onChange={(e) => setSelectedSectionId(e.target.value)}
+              >
+                <option value="all">All sections</option>
+                {sections.map(section => (
+                  <option key={section.id} value={section.id}>{section.name}</option>
+                ))}
+              </select>
+              {loadingSections && <span className="text-xs text-gray-500">Loading sections…</span>}
+            </div>
+          )}
+
+          <QRScanner
+            ref={scannerRef}
+            onResult={handleResult}
+            paused={!!(confirmModal || alreadyUsedModal || errorModal || successModal)}
+          />
+
+          {scanInfo && (
+            <div className="mt-2 p-3 border rounded bg-green-50 text-green-800 text-sm">{scanInfo}</div>
+          )}
+          {error && (
+            <div className="mt-2 p-3 border rounded bg-red-50 text-red-800 text-sm">{error}</div>
+          )}
+        </div>
+
+        <div>
+          <h2 className="text-xl font-semibold mb-3">Scanner Stats</h2>
+          {loadingStats && <div className="text-sm text-gray-500 mb-2">Loading stats…</div>}
+          {stats && (
+            <div className="grid grid-cols-3 gap-2 mb-3">
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Today</div>
+                <div className="text-lg font-semibold">{stats.totalToday}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">My scans</div>
+                <div className="text-lg font-semibold">{stats.myToday}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Last hour</div>
+                <div className="text-lg font-semibold">{stats.lastHour}</div>
+              </div>
+            </div>
+          )}
+
+          {stats?.byStaff?.length > 0 && (
+            <div className="mb-4">
+              <div className="text-sm font-medium mb-1">Today by staff</div>
+              <ul className="text-sm text-gray-700 space-y-1">
+                {stats.byStaff.map((s: any) => (
+                  <li key={s.scannedById} className="flex justify-between">
+                    <span>{s.name || 'Staff'}</span>
+                    <span className="font-medium">{s.count}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          <h3 className="text-lg font-semibold mb-2">Last 10 scans</h3>
+          <ul className="text-sm space-y-2 max-h-80 overflow-auto pr-2">
+            {recentScans.map((u: any) => (
+              <li key={u.id} className="border rounded p-2 bg-white">
+                <div className="flex justify-between">
+                  <div className="font-medium">{u.ticket?.event?.title || 'Event'}</div>
+                  <div className="text-xs text-gray-500">{new Date(u.scannedAt).toLocaleString()}</div>
+                </div>
+                <div className="text-xs text-gray-600">
+                  {u.ticket?.registrationOption?.eventOption?.name || 'Ticket'}{u.ticket?.registrationOption?.variant?.name ? ` — ${u.ticket.registrationOption.variant.name}` : ''}
+                  {u.quantityRedeemed && u.quantityRedeemed > 1 ? ` ×${u.quantityRedeemed}` : ''}
+                  {' — '}#{String(u.ticket?.id || '').slice(0,8)}
+                </div>
+                <div className="text-xs text-gray-500">Scanned by: {u.scannedBy?.name || u.scannedById}</div>
+              </li>
+            ))}
+            {recentScans.length === 0 && <li className="text-gray-500">No scans yet.</li>}
+          </ul>
+        </div>
+      </div>
+
+      {/* ── Confirm scan modal ───────────────────────────────────────────── */}
+      {confirmModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded-xl shadow-lg max-w-md w-full p-6">
+            <h3 className="text-lg font-semibold mb-1 text-indigo-700">Confirm Scan</h3>
+            <p className="text-sm text-gray-500 mb-4">Review the ticket details before confirming.</p>
+
+            <div className="bg-gray-50 border rounded-lg p-4 mb-4 space-y-1 text-sm">
+              <div><span className="font-medium">Ticket type:</span> {confirmModal.ticket?.registrationOption?.eventOption?.name || 'Ticket'}{confirmModal.ticket?.registrationOption?.variant?.name ? ` — ${confirmModal.ticket.registrationOption.variant.name}` : ''}</div>
+              <div><span className="font-medium">Event:</span> {confirmModal.ticket?.event?.title || '—'}</div>
+              <div><span className="font-medium">Holder:</span> {confirmModal.ticket?.user?.name || confirmModal.ticket?.registrationOption?.registration?.user?.name || '—'}</div>
+              <div><span className="font-medium">Qty on ticket:</span> {confirmModal.ticket?.quantity || 1}</div>
+              <div><span className="font-medium">Remaining:</span> <span className={confirmModal.remaining < (confirmModal.ticket?.quantity || 1) ? 'text-amber-600 font-semibold' : 'text-green-700 font-semibold'}>{confirmModal.remaining}</span></div>
+            </div>
+
+            {(confirmModal.ticket?.quantity || 1) > 1 && (
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700 mb-1">Qty to redeem (max {confirmModal.remaining})</label>
+                <input
+                  type="text"
+                  inputMode="numeric"
+                  min={1}
+                  max={confirmModal.remaining}
+                  className="w-24 border rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+                  value={confirmQtyRaw}
+                  onChange={e => setConfirmQtyRaw(e.target.value)}
+                  onBlur={() => {
+                    const parsed = parseInt(confirmQtyRaw, 10);
+                    const clamped = isNaN(parsed) ? 1 : Math.min(confirmModal.remaining, Math.max(1, parsed));
+                    setConfirmQty(clamped);
+                    setConfirmQtyRaw(String(clamped));
+                  }}
+                />
+              </div>
+            )}
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => setConfirmModal(null)}
+                className="flex-1 px-4 py-2 rounded-lg border text-sm font-medium text-gray-700 hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={commitScan}
+                className="flex-1 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-semibold hover:bg-indigo-700"
+              >
+                Confirm Scan
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Already used modal ───────────────────────────────────────────── */}
+      {alreadyUsedModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded shadow-lg max-w-md w-full p-5">
+            <h3 className="text-lg font-semibold mb-2 text-red-600">Ticket Already Scanned</h3>
+            <p className="text-sm text-gray-700 mb-3">{alreadyUsedModal.message}</p>
+            {alreadyUsedModal.ticket && (
+              <div className="text-xs text-gray-600 bg-gray-50 p-3 rounded border">
+                <div><span className="font-medium">Ticket ID:</span> {alreadyUsedModal.ticket.id}</div>
+                {alreadyUsedModal.ticket.event?.title && (
+                  <div><span className="font-medium">Event:</span> {alreadyUsedModal.ticket.event.title}</div>
+                )}
+                {Array.isArray(alreadyUsedModal.ticket.usages) && alreadyUsedModal.ticket.usages.length > 0 && (
+                  <div className="mt-2">
+                    <div className="font-medium">Usages:</div>
+                    <ul className="list-disc ml-5 mt-1 max-h-32 overflow-auto">
+                      {alreadyUsedModal.ticket.usages.map((u: any) => (
+                        <li key={u.id}>{new Date(u.scannedAt).toLocaleString()}{u.quantityRedeemed > 1 ? ` (×${u.quantityRedeemed})` : ''}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+            <div className="mt-4 flex justify-end">
+              <button className="px-4 py-2 rounded bg-red-600 text-white" onClick={() => setAlreadyUsedModal(null)}>OK</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Error modal ──────────────────────────────────────────────────── */}
+      {errorModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded shadow-lg max-w-md w-full p-5">
+            <h3 className="text-lg font-semibold mb-2 text-red-600">Scan Error</h3>
+            <p className="text-sm text-gray-700 mb-3">{errorModal}</p>
+            <div className="mt-4 flex justify-end">
+              <button className="px-4 py-2 rounded bg-red-600 text-white" onClick={() => setErrorModal(null)}>OK</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ── Success modal ────────────────────────────────────────────────── */}
+      {successModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-white rounded-xl shadow-lg max-w-md w-full p-6">
+            <h3 className="text-lg font-semibold mb-4 text-green-600">Scan Successful</h3>
+
+            <div className="text-3xl font-bold text-center text-gray-900 mb-2">
+              {successModal.optionName}
+            </div>
+
+            <div className="text-sm text-center text-gray-600 mb-3">
+              #{successModal.ticketId} — {successModal.eventTitle}
+            </div>
+
+            {successModal.total > 1 && (
+              <div className={`text-center text-sm font-medium mb-4 ${successModal.remaining > 0 ? 'text-amber-600' : 'text-green-700'}`}>
+                {successModal.qtyRedeemed} redeemed · {successModal.remaining} remaining of {successModal.total}
+              </div>
+            )}
+
+            <div className="flex justify-center">
+              <button className="px-6 py-2 rounded bg-green-600 text-white" onClick={() => setSuccessModal(null)}>OK</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/supervisor/at-the-door/page.tsx b/frontend/src/app/dashboard/supervisor/at-the-door/page.tsx
new file mode 100644
index 0000000..d0aa52d
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/at-the-door/page.tsx
@@ -0,0 +1,1872 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { scoreUser } from "@/lib/fuzzyMatch";
+
+type Mode = "registration" | "payment" | "tickets" | "refund";
+
+// ─── Fuzzy search helpers ─────────────────────────────────────────────────────
+
+function fuzzyFilterRegs(allRegs: any[], search: string): any[] {
+    if (!search) return allRegs;
+    if (search.length === 1) {
+        const q = search.toLowerCase();
+        return allRegs.filter(r =>
+            String(r.user?.name || "").toLowerCase().includes(q) ||
+            String(r.user?.email || "").toLowerCase().includes(q) ||
+            String(r.user?.phoneNumber || "").includes(q)
+        );
+    }
+    return allRegs
+        .map(r => ({ r, score: scoreUser(r.user || {}, search) }))
+        .filter(x => x.score >= 0.45)
+        .sort((a, b) => b.score - a.score)
+        .map(x => x.r);
+}
+
+// ─── Pricing helpers ─────────────────────────────────────────────────────────
+
+function effectiveOptionUnit(opt: any): number {
+    const base = opt.price || 0;
+    const tiers = (Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : []).filter((t: any) => !t.variantId);
+    if (!tiers.length) return base;
+    const now = new Date();
+    const hit = tiers
+        .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+        .filter((t: any) => now < t.deadline)
+        .sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
+    return hit.length ? hit[0].price : base;
+}
+
+function effectiveVariantUnit(opt: any, variant: any): number {
+    const base = variant.price !== null && variant.price !== undefined ? variant.price : opt.price || 0;
+    const allTiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : [];
+    const vtiers = allTiers.filter((t: any) => t.variantId === variant.id);
+    const tiers = vtiers.length ? vtiers : allTiers.filter((t: any) => !t.variantId);
+    if (!tiers.length) return base;
+    const now = new Date();
+    const hit = tiers
+        .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+        .filter((t: any) => now < t.deadline)
+        .sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
+    return hit.length ? hit[0].price : base;
+}
+
+function initQuantities(eventOptions: any[]): Record<string, number> {
+    const map: Record<string, number> = {};
+    (eventOptions || []).forEach((o: any) => {
+        if ((o.variants || []).length > 0) {
+            (o.variants as any[]).forEach((v: any) => { map[`${o.id}::${v.id}`] = 0; });
+        } else {
+            map[o.id] = 0;
+        }
+    });
+    return map;
+}
+
+function ticketLabel(t: any): string {
+    const opt = t.registrationOption?.eventOption?.name || "Ticket";
+    const variant = t.registrationOption?.variant?.name;
+    return variant ? `${opt} — ${variant}` : opt;
+}
+
+export default function AtTheDoorPage() {
+    const { user, loading, token } = useAuth();
+    const router = useRouter();
+    const [events, setEvents] = useState<any[]>([]);
+    const [eventId, setEventId] = useState("");
+
+    const [eventOptions, setEventOptions] = useState<any[]>([]);
+    const [showOptionsModal, setShowOptionsModal] = useState(false);
+    const [pendingUser, setPendingUser] = useState<any | null>(null);
+    const [pendingEditReg, setPendingEditReg] = useState<any | null>(null);
+    const [confirming, setConfirming] = useState(false);
+    const [quantities, setQuantities] = useState<Record<string, number>>({});
+    // Already-issued ticket quantity per option/variant, keyed like `quantities` — a
+    // registration being edited can never drop an item below this (tickets are never
+    // deleted or shrunk, only ever grown, once paid).
+    const [minQuantities, setMinQuantities] = useState<Record<string, number>>({});
+
+    const [showDonationModal, setShowDonationModal] = useState(false);
+    const [donationUser, setDonationUser] = useState<any | null>(null);
+
+    const [showNewAttendeeModal, setShowNewAttendeeModal] = useState(false);
+    const [newAttendeeSeed, setNewAttendeeSeed] = useState("");
+
+    useEffect(() => {
+        if (!token) return;
+        (async () => {
+            try {
+                const evs = await apiFetch<any[]>("/api/events/all", { authToken: token });
+                const now = Date.now();
+
+                const active = (evs || []).filter(ev => {
+                    const t = new Date(ev.endDate).getTime();
+                    // Registrations/payments are rejected server-side for closed (cashed-up)
+                    // events — don't offer them here.
+                    return !isNaN(t) && t > now && ev.cashupStatus !== 'closed';
+                });
+
+                active.sort(
+                    (a, b) =>
+                        new Date(a.startDate).getTime() -
+                        new Date(b.startDate).getTime()
+                );
+
+                setEvents(active);
+
+                if (active.length > 0) {
+                    setEventId(active[0].id); // default
+                }
+            } catch {}
+        })();
+    }, [token]);
+
+    useEffect(() => {
+        if (!token || !eventId) return;
+
+        (async () => {
+            try {
+                const ev = await apiFetch(`/api/events/${eventId}`, {
+                    authToken: token
+                });
+
+                setEventOptions(ev.options || ev.eventOptions || []);
+            } catch {
+                setEventOptions([]);
+            }
+        })();
+    }, [eventId, token]);
+
+    const canView = useMemo(() => {
+        const role = user?.role;
+        return role === "admin" || role === "supervisor" || role === "staff";
+    }, [user]);
+
+    useEffect(() => {
+        if (loading) return;
+        if (!user) router.replace("/login");
+    }, [user, loading]);
+
+    const [mode, setMode] = useState<Mode>("registration");
+
+    const [activeRegistration, setActiveRegistration] = useState<any | null>(null);
+    const [info, setInfo] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!info) return;
+
+        const id = setTimeout(() => {
+            setInfo(null);
+        }, 10000); // ⏱ disappears after 5s
+
+        return () => clearTimeout(id);
+
+    }, [info]);
+
+    useEffect(() => {
+        if (!error) return;
+
+        const id = setTimeout(() => {
+            setError(null);
+        }, 15000); // errors linger slightly longer
+
+        return () => clearTimeout(id);
+
+    }, [error]);
+
+    const handleRegistrationCreated = (registration: any) => {
+        setActiveRegistration(registration);
+        setMode("payment"); // 🚀 Jump automatically
+    };
+
+    const handleRegistrationSelected = (registration: any) => {
+        setActiveRegistration(registration);
+    };
+
+    useEffect(() => {
+        if (!activeRegistration) return;
+
+        const id = setTimeout(() => {
+            setMode("payment");
+        }, 0);
+
+        return () => clearTimeout(id);
+
+    }, [activeRegistration]);
+
+    const confirmRegistration = async () => {
+        if (confirming) return;
+
+        const opts = Object.entries(quantities)
+            .filter(([, qty]) => qty > 0)
+            .map(([key, quantity]) => {
+                const [eventOptionId, variantId] = key.split("::");
+                return { eventOptionId, quantity, ...(variantId ? { variantId } : {}) };
+            });
+
+        if (!opts.length) {
+            setError("Select at least one item");
+            return;
+        }
+
+        for (const [key, minQty] of Object.entries(minQuantities)) {
+            if (minQty > 0 && (quantities[key] || 0) < minQty) {
+                const [eventOptionId, variantId] = key.split("::");
+                const opt = eventOptions.find((o: any) => o.id === eventOptionId);
+                const variant = variantId ? (opt?.variants || []).find((v: any) => v.id === variantId) : null;
+                const label = variant ? `${opt?.name || "item"} (${variant.name})` : (opt?.name || "item");
+                setError(`Cannot reduce "${label}" below the ${minQty} already issued`);
+                return;
+            }
+        }
+
+        setConfirming(true);
+        try {
+            if (pendingEditReg) {
+                // Edit existing registration — replace options via PUT
+                const res = await apiFetch(`/api/registrations/${pendingEditReg.id}/options`, {
+                    method: "PUT",
+                    authToken: token,
+                    body: { options: opts }
+                });
+                setShowOptionsModal(false);
+                setPendingEditReg(null);
+                setInfo("Registration updated");
+                handleRegistrationSelected(res);
+            } else if (pendingUser) {
+                // New attendee
+                const res = await apiFetch("/api/registrations/manual", {
+                    method: "POST",
+                    authToken: token,
+                    body: {
+                        eventId,
+                        guestOnly: pendingUser.guestOnly,
+                        user: {
+                            name: pendingUser.name,
+                            ...(pendingUser.email ? { email: pendingUser.email } : {}),
+                            ...(pendingUser.phone ? { phoneNumber: pendingUser.phone } : {}),
+                        },
+                        options: opts,
+                        notificationPreference: pendingUser.notifPref,
+                    }
+                });
+                setShowOptionsModal(false);
+                handleRegistrationCreated(res);
+            }
+        } catch (e: any) {
+            setError(e?.message || "Failed");
+        } finally {
+            setConfirming(false);
+        }
+    };
+
+    // Opens the new-attendee modal (pre-filled with whatever the user typed in search)
+    const handleShowNewAttendee = (seed: string) => {
+        setNewAttendeeSeed(seed);
+        setShowNewAttendeeModal(true);
+    };
+
+    // Called when NewAttendeeModal is confirmed — proceed to options selection
+    const handleNewAttendeeConfirm = ({ name, email, phone, notifPref }: { name: string; email: string; phone: string; notifPref: "email" | "whatsapp" | "both" }) => {
+        const qtyMap = initQuantities(eventOptions);
+        // Default main ticket to 1 (first variant if variants exist)
+        eventOptions.forEach(o => {
+            if (!o.isMainTicket) return;
+            if ((o.variants || []).length > 0) {
+                qtyMap[`${o.id}::${(o.variants as any[])[0].id}`] = 1;
+            } else {
+                qtyMap[o.id] = 1;
+            }
+        });
+        setQuantities(qtyMap);
+        setMinQuantities({});
+        setPendingUser({ guestOnly: true, name, email: email || null, phone: phone || null, notifPref });
+        setPendingEditReg(null);
+        setShowNewAttendeeModal(false);
+        setShowOptionsModal(true);
+    };
+
+    // Edit an existing registration — pre-fill with current quantities.
+    // Re-fetches the registration fresh rather than trusting the (possibly up to 5-minutes-stale,
+    // see DoorRegistrationPanel's polling interval) cached search-result snapshot, so the
+    // already-issued-ticket floor below is always computed from current data.
+    const handleEditRegistration = async (reg: any) => {
+        let freshReg = reg;
+        try {
+            freshReg = await apiFetch<any>(`/api/registrations/${reg.id}`, { authToken: token });
+        } catch (e: any) {
+            setError(e?.message || "Failed to load latest registration data");
+            return;
+        }
+
+        const qtyMap = initQuantities(eventOptions);
+        const regOptions = freshReg.registrationOptions || freshReg.options || [];
+        regOptions.forEach((ro: any) => {
+            const key = ro.variantId ? `${ro.eventOptionId}::${ro.variantId}` : ro.eventOptionId;
+            if (key in qtyMap) qtyMap[key] = ro.quantity || 0;
+        });
+
+        // Already-issued ticket quantity per option/variant — floor for the edit below
+        const minQtyMap: Record<string, number> = {};
+        regOptions.forEach((ro: any) => {
+            const key = ro.variantId ? `${ro.eventOptionId}::${ro.variantId}` : ro.eventOptionId;
+            const issuedQty = (ro.tickets || []).reduce((s: number, t: any) => s + (t.quantity || 0), 0);
+            if (issuedQty > 0) minQtyMap[key] = (minQtyMap[key] || 0) + issuedQty;
+        });
+
+        setQuantities(qtyMap);
+        setMinQuantities(minQtyMap);
+        setPendingEditReg(freshReg);
+        setPendingUser(null);
+        setShowOptionsModal(true);
+    };
+
+    const handlePaymentCaptured = async (registration?: any, partial?: boolean) => {
+
+        if (partial && registration) {
+            setActiveRegistration(registration);
+            setInfo("Partial payment recorded");
+            return;
+        }
+
+        if (!registration && !activeRegistration) return;
+
+        const reg = registration || activeRegistration;
+
+        try {
+            const res = await apiFetch<any>("/api/tickets/generate", {
+                method: "POST",
+                authToken: token,
+                body: {
+                    registrationId: reg.id
+                }
+            });
+
+            const tickets = res?.tickets || [];
+
+            if (tickets.length) {
+                printTickets(tickets);
+            }
+
+            setInfo("Payment recorded & tickets printed");
+            setActiveRegistration(null);
+            setMode("registration");
+
+        } catch (e: any) {
+            setError(e?.message || "Tickets failed to generate");
+        }
+    };
+
+    const handleDonation = (user?: any) => {
+        setDonationUser(user || null); // null = anonymous
+        setShowDonationModal(true);
+    };
+
+    const buildTicketHtmlCard = (t: any) => {
+        const eventTitle =
+            t.event?.title ||
+            t.registrationOption?.registration?.event?.title ||
+            "Event";
+
+        const ticketType = ticketLabel(t);
+        const qty = t.quantity || 1;
+        const holder =
+            t.user?.name ||
+            t.registrationOption?.registration?.user?.name ||
+            "";
+        const qrValue = t.qrCode || t.id;
+        const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrValue)}`;
+
+        return `<div class="ticket">
+  <div class="top">
+    <div class="evt">${eventTitle}</div>
+    <div class="type">${ticketType}</div>
+    ${holder ? `<div class="holder">${holder}</div>` : ""}
+    <div class="qty">Qty: <strong>${qty}</strong></div>
+  </div>
+  <div class="qrwrap"><img src="${qrSrc}" alt="QR" /></div>
+  <div class="meta">${t.id}</div>
+</div>`;
+    };
+
+    const openPrintWindow = (cardsHtml: string) => {
+        const w = window.open("", "_blank");
+        if (!w) return;
+        w.document.write(`<!doctype html><html><head><style>
+  @page { size: A4; margin: 8mm; }
+  * { box-sizing: border-box; }
+  body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background: #fff; }
+  .page {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width: 194mm;
+    height: 281mm;
+    gap: 4mm;
+    page-break-after: always;
+    break-after: page;
+  }
+  .page:last-child { page-break-after: avoid; break-after: avoid; }
+  .ticket {
+    border: 1.5px solid #222;
+    border-radius: 3mm;
+    padding: 5mm;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    min-height: 0;
+  }
+  .top { flex: 0 0 auto; }
+  .evt { font-weight: bold; font-size: 13pt; line-height: 1.2; }
+  .type { font-size: 11pt; margin-top: 2mm; color: #333; }
+  .holder { font-size: 10pt; margin-top: 1mm; color: #555; }
+  .qty { font-size: 10pt; margin-top: 1mm; }
+  .qrwrap { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; padding: 3mm 0; }
+  .qrwrap img { width: 48mm; height: 48mm; display: block; }
+  .meta { font-size: 7pt; color: #777; text-align: center; flex: 0 0 auto; word-break: break-all; }
+</style></head><body>${cardsHtml}<script>
+(function(){
+  function go(){
+    var imgs=Array.prototype.slice.call(document.images);
+    if(!imgs.length){window.print();return;}
+    var n=imgs.length;
+    function done(){if(--n<=0)setTimeout(function(){window.print();},150);}
+    imgs.forEach(function(i){if(i.complete)done();else{i.addEventListener('load',done,{once:true});i.addEventListener('error',done,{once:true});}});
+  }
+  if(document.readyState==='complete')go();else window.addEventListener('load',go);
+})();
+</script></body></html>`);
+        w.document.close();
+    };
+
+    const printTickets = (tickets: any[]) => {
+        if (!tickets?.length) return;
+        // 4 per A4 page (2 columns × 2 rows)
+        const PAGE_SIZE = 4;
+        const pages: string[] = [];
+        for (let i = 0; i < tickets.length; i += PAGE_SIZE) {
+            const chunk = tickets.slice(i, i + PAGE_SIZE);
+            pages.push(`<div class="page">${chunk.map(buildTicketHtmlCard).join("")}</div>`);
+        }
+        openPrintWindow(pages.join(""));
+    };
+
+
+    return (
+        <div className="max-w-6xl mx-auto w-full p-4 sm:p-6">
+
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
+                <h1 className="text-2xl font-semibold shrink-0">At The Door</h1>
+                <select
+                    className="border rounded px-3 py-2 text-sm w-full sm:w-72 max-w-full"
+                    value={eventId}
+                    onChange={e => setEventId(e.target.value)}
+                >
+                    <option value="">Select event…</option>
+                    {events.map(ev => (
+                        <option key={ev.id} value={ev.id}>
+                            {ev.title}
+                        </option>
+                    ))}
+                </select>
+                <button
+                    className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 shrink-0 self-start sm:self-auto"
+                    onClick={() => router.push("/dashboard")}
+                >
+                    Back
+                </button>
+            </div>
+
+            {!canView && (
+                <div className="p-3 border rounded bg-yellow-50 text-sm mb-4">
+                    Access denied.
+                </div>
+            )}
+
+            {error && (
+                <div className="p-3 mb-3 border rounded bg-red-100 text-red-700 text-sm animate-pulse">
+                    {error}
+                </div>
+            )}
+
+            {info && (
+                <div className="p-3 mb-3 border rounded bg-emerald-100 text-emerald-700 text-sm">
+                    {info}
+                </div>
+            )}
+
+            {/* Mode Buttons */}
+            <div className="flex gap-2 mb-4 flex-wrap">
+                {(["registration", "payment", "tickets", "refund"] as Mode[]).map(m => (
+                    <button
+                        key={m}
+                        onClick={() => setMode(m)}
+                        className={`px-4 py-2 rounded text-sm font-medium border ${
+                            mode === m
+                                ? m === "refund"
+                                    ? "bg-red-600 text-white border-red-600"
+                                    : "bg-indigo-600 text-white border-indigo-600"
+                                : "bg-white hover:bg-gray-50"
+                        }`}
+                    >
+                        {m.toUpperCase()}
+                    </button>
+                ))}
+            </div>
+
+            {/* ✅ Panels */}
+            {mode === "registration" && (
+                <DoorRegistrationPanel
+                    token={token}
+                    eventId={eventId}
+                    onCreated={handleRegistrationCreated}
+                    onSelected={handleRegistrationSelected}
+                    onEditRegistration={handleEditRegistration}
+                    onNewAttendee={handleShowNewAttendee}
+                    onDonation={handleDonation}
+                    setError={setError}
+                />
+            )}
+
+            {mode === "payment" && (
+                <DoorPaymentPanel
+                    token={token}
+                    registration={activeRegistration}
+                    onSuccess={handlePaymentCaptured}
+                    setError={setError}
+                />
+            )}
+
+            {mode === "tickets" && (
+                <DoorTicketsPanel token={token} eventId={eventId} />
+            )}
+
+            {mode === "refund" && (
+                <DoorRefundPanel token={token} eventId={eventId} setError={setError} setInfo={setInfo} />
+            )}
+            <OptionsModal
+                open={showOptionsModal}
+                onClose={() => { setShowOptionsModal(false); setPendingEditReg(null); }}
+                options={eventOptions}
+                quantities={quantities}
+                setQuantities={setQuantities}
+                minQuantities={minQuantities}
+                onConfirm={confirmRegistration}
+                confirming={confirming}
+                isEdit={!!pendingEditReg}
+                totalPaid={(pendingEditReg?.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0)}
+            />
+            <DonationModal
+                open={showDonationModal}
+                onClose={() => setShowDonationModal(false)}
+                user={donationUser}
+                token={token}
+                eventId={eventId}
+                setError={setError}
+            />
+            <NewAttendeeModal
+                open={showNewAttendeeModal}
+                onClose={() => setShowNewAttendeeModal(false)}
+                seed={newAttendeeSeed}
+                onConfirm={handleNewAttendeeConfirm}
+            />
+        </div>
+    );
+}
+
+function DoorRegistrationPanel({ token, eventId, onCreated, onSelected, onEditRegistration, onNewAttendee, onDonation, setError }: any) {
+    const [search, setSearch] = useState("");
+    const [allRegs, setAllRegs] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    // Load registrations for this event — once on mount/eventId change, then every 5 min
+    useEffect(() => {
+        if (!token || !eventId) return;
+        let cancelled = false;
+
+        const load = async () => {
+            try {
+                setLoading(true);
+                const regs = await apiFetch<any[]>(`/api/registrations/event/${eventId}`, { authToken: token });
+                if (!cancelled) setAllRegs(regs || []);
+            } catch {
+                if (!cancelled) setAllRegs([]);
+            } finally {
+                if (!cancelled) setLoading(false);
+            }
+        };
+
+        load();
+        const timer = setInterval(load, 300000);
+        return () => { cancelled = true; clearInterval(timer); };
+    }, [token, eventId]);
+
+    const results = fuzzyFilterRegs(allRegs, search);
+
+    return (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+
+            <div className="flex items-center justify-between mb-3">
+                <div className="text-lg font-semibold">Find / Register</div>
+                <button
+                    onClick={async () => {
+                        if (!token || !eventId) return;
+                        try {
+                            setLoading(true);
+                            const regs = await apiFetch<any[]>(`/api/registrations/event/${eventId}`, { authToken: token });
+                            setAllRegs(regs || []);
+                        } catch {} finally { setLoading(false); }
+                    }}
+                    className="text-xs px-2 py-1 rounded border hover:bg-gray-50"
+                >
+                    {loading ? "Loading…" : "Refresh"}
+                </button>
+            </div>
+
+            <input
+                className="w-full border rounded px-3 py-3 text-lg"
+                placeholder="Name, email or phone…"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                autoFocus
+            />
+
+            <div className="mt-3 space-y-2 max-h-96 overflow-auto">
+
+                {results.map(r => (
+                    <div key={r.id} className="border rounded p-3">
+                        <div className="flex justify-between items-center">
+                            <div>
+                                <div className="font-medium text-sm">{r.user?.name || "Guest"}</div>
+                                <div className="text-xs text-gray-500">
+                                    {r.user?.email && !r.user.email.endsWith("@guest.local") ? r.user.email : ""}
+                                    {r.user?.phoneNumber ? ` · ${r.user.phoneNumber}` : ""}
+                                </div>
+                                <div className="text-xs text-gray-400">
+                                    {r.status === "paid" ? "PAID ✅" : `UNPAID · ${r.status}`}
+                                </div>
+                            </div>
+                            <div className="flex gap-2">
+                                <button onClick={() => onSelected(r)} className="px-2 py-1 text-xs rounded bg-indigo-600 text-white">Open</button>
+                                <button onClick={() => onEditRegistration(r)} className="px-2 py-1 text-xs rounded bg-emerald-600 text-white">Edit</button>
+                                <button onClick={() => onDonation(r.user)} className="px-2 py-1 text-xs rounded bg-amber-500 text-white">Donation</button>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+
+                {/* New attendee row */}
+                <div
+                    className="border rounded p-3 flex justify-between items-center bg-emerald-50 hover:bg-emerald-100 cursor-pointer"
+                    onClick={() => onNewAttendee(search)}
+                >
+                    <div className="font-medium text-sm text-emerald-800">
+                        {search ? `New attendee "${search}"…` : "New attendee…"}
+                    </div>
+                    <div className="text-xs text-emerald-600 font-medium">+ Register</div>
+                </div>
+
+                {!loading && allRegs.length === 0 && (
+                    <div className="text-sm text-gray-500">No registrations yet for this event.</div>
+                )}
+            </div>
+
+            <button
+                onClick={() => onDonation()}
+                className="w-full py-3 rounded bg-amber-500 text-white font-semibold mt-3"
+            >
+                Anonymous Donation
+            </button>
+        </div>
+    );
+}
+
+function DoorPaymentPanel({ token, registration, onSuccess, setError }: any) {
+    const [amount, setAmount] = useState("");
+    const [method, setMethod] = useState("card");
+    const [saving, setSaving] = useState(false);
+    const [showRefund, setShowRefund] = useState(false);
+    const [showSendTickets, setShowSendTickets] = useState(false);
+
+    if (!registration) {
+        return (
+            <div className="border rounded-xl p-6 bg-white shadow-sm text-sm text-gray-500">
+                No registration selected
+            </div>
+        );
+    }
+
+    const options = registration.options || registration.registrationOptions || [];
+    const payments = registration.payments || [];
+
+    const totalValue = options.reduce((sum: number, opt: any) => {
+        // Use priceSnapshot (authoritative backend price, variant-aware) if available
+        const price = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+            ? Number(opt.priceSnapshot)
+            : (opt.eventOption?.price ?? opt.price ?? 0);
+        const qty = opt.quantity || 0;
+        return sum + price * qty;
+    }, 0);
+
+    const paidValue = payments.reduce(
+        (sum: number, p: any) => sum + (p.amount || 0),
+        0
+    );
+
+    const balance = Math.max(0, totalValue - paidValue);
+
+    const save = async () => {
+        if (!balance) {
+            setError("Nothing due on this registration");
+            return;
+        }
+
+        try {
+            setSaving(true);
+
+            await apiFetch("/api/payments", {
+                method: "POST",
+                authToken: token,
+                body: {
+                    registrationId: registration.id,
+                    amount: parseFloat(amount),
+                    method
+                }
+            });
+
+            const updated = await apiFetch(`/api/registrations/${registration.id}`, {
+                authToken: token
+            });
+
+            const updatedOptions = updated.options || updated.registrationOptions || [];
+            const updatedPayments = updated.payments || [];
+
+            const totalValue = updatedOptions.reduce((sum: number, opt: any) => {
+                const price = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+                    ? Number(opt.priceSnapshot)
+                    : (opt.eventOption?.price ?? opt.price ?? 0);
+                return sum + price * (opt.quantity || 0);
+            }, 0);
+
+            const paidValue = updatedPayments.reduce(
+                (sum: number, p: any) => sum + (p.amount || 0),
+                0
+            );
+
+            const updatedBalance = Math.max(0, totalValue - paidValue);
+
+            if (updatedBalance === 0) {
+                onSuccess(updated);  // 🎯 ONLY NOW generate tickets
+            } else {
+                onSuccess(updated, true); // 🎯 partial payment flow
+            }
+
+        } catch (e: any) {
+            setError(e?.message || "Payment failed");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+
+            <div className="text-xl font-semibold mb-4">Payment</div>
+
+            {/* ✅ User */}
+            <div className="mb-4">
+                <div className="text-lg font-semibold">
+                    {registration.user?.name || "Guest"}
+                </div>
+            </div>
+
+            {/* ✅ BIG MONEY BLOCK 😌🔥 */}
+            <div className="grid grid-cols-3 gap-3 mb-5">
+
+                <div className="border rounded-lg p-3 text-center">
+                    <div className="text-xs text-gray-500">TOTAL</div>
+                    <div className="text-lg font-semibold">
+                        R {totalValue.toFixed(2)}
+                    </div>
+                </div>
+
+                <div className="border rounded-lg p-3 text-center">
+                    <div className="text-xs text-gray-500">PAID</div>
+                    <div className="text-lg font-semibold">
+                        R {paidValue.toFixed(2)}
+                    </div>
+                </div>
+
+                <div className="border rounded-lg p-3 text-center bg-emerald-50">
+                    <div className="text-xs text-gray-500">DUE</div>
+                    <div className="text-2xl font-bold text-emerald-600">
+                        R {balance.toFixed(2)}
+                    </div>
+                </div>
+
+            </div>
+
+            {/* ✅ Amount + Full Pay */}
+            <div className="flex gap-2">
+
+                <input
+                    className="flex-1 border rounded px-3 py-4 text-2xl font-semibold"
+                    placeholder="Amount"
+                    type="number"
+                    value={amount}
+                    onChange={e => setAmount(e.target.value)}
+                    autoFocus
+                />
+
+                {balance > 0 && (
+                    <button
+                        onClick={() => setAmount(String(balance))}
+                        className="px-4 rounded bg-indigo-600 text-white text-sm font-medium"
+                    >
+                        Full
+                    </button>
+                )}
+
+            </div>
+
+            {/* ✅ Method */}
+            <select
+                className="w-full border rounded px-3 py-3 mt-3 text-lg"
+                value={method}
+                onChange={e => setMethod(e.target.value)}
+            >
+                <option value="card">Card</option>
+                <option value="cash">Cash</option>
+                <option value="eft">EFT</option>
+            </select>
+
+            {/* Capture — only show when there's a balance */}
+            {balance > 0 && (
+                <button
+                    onClick={save}
+                    disabled={saving || !amount}
+                    className="mt-4 w-full py-4 rounded bg-emerald-600 text-white text-lg font-semibold disabled:opacity-60"
+                >
+                    {saving ? "Saving…" : "Capture Payment"}
+                </button>
+            )}
+
+            {/* Print / Send — show when fully paid */}
+            {balance === 0 && (
+                <div className="mt-4 flex gap-2">
+                    <button
+                        onClick={() => onSuccess(registration)}
+                        className="flex-1 py-3 rounded bg-indigo-600 text-white text-sm font-medium"
+                    >
+                        Print Tickets
+                    </button>
+                    <button
+                        onClick={() => setShowSendTickets(true)}
+                        className="flex-1 py-3 rounded bg-green-600 text-white text-sm font-medium"
+                    >
+                        Send Tickets
+                    </button>
+                </div>
+            )}
+
+            {/* Refund */}
+            {paidValue > 0 && (
+                <button
+                    onClick={() => setShowRefund(true)}
+                    className="mt-2 w-full py-2 rounded border border-red-300 text-red-600 text-sm hover:bg-red-50"
+                >
+                    Issue Refund
+                </button>
+            )}
+
+            <RefundModal
+                open={showRefund}
+                onClose={() => setShowRefund(false)}
+                token={token}
+                registration={registration}
+                maxRefund={paidValue}
+                onRefunded={(updated: any) => {
+                    setShowRefund(false);
+                    onSuccess(updated, true);
+                }}
+                setError={setError}
+            />
+
+            <SendTicketsModal
+                open={showSendTickets}
+                onClose={() => setShowSendTickets(false)}
+                token={token}
+                registration={registration}
+                setError={setError}
+                setInfo={() => {}}
+            />
+        </div>
+    );
+}
+
+function DoorTicketsPanel({ token, eventId }: any) {
+    const [search, setSearch] = useState("");
+    const [allTickets, setAllTickets] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [sendTarget, setSendTarget] = useState<any | null>(null);
+
+    // Load all tickets for the event once
+    useEffect(() => {
+        if (!token || !eventId) return;
+        (async () => {
+            try {
+                setLoading(true);
+                const res = await apiFetch<any>(`/api/tickets/event/${eventId}`, { authToken: token });
+                setAllTickets(res?.tickets || res?.data || (Array.isArray(res) ? res : []));
+            } catch {
+                setAllTickets([]);
+            } finally {
+                setLoading(false);
+            }
+        })();
+    }, [token, eventId]);
+
+    const tickets = !search
+        ? allTickets
+        : (() => {
+            const q = search.toLowerCase();
+            const byId = allTickets.filter(t =>
+                String(t.id).toLowerCase().includes(q) ||
+                String(t.qrCode || "").toLowerCase().includes(q)
+            );
+            if (byId.length > 0) return byId;
+            if (search.length < 2) return allTickets.filter(t =>
+                String(t.user?.name || "").toLowerCase().includes(q) ||
+                String(t.user?.email || "").toLowerCase().includes(q)
+            );
+            return allTickets
+                .map(t => ({ t, score: scoreUser(t.user || {}, search) }))
+                .filter(x => x.score >= 0.45)
+                .sort((a, b) => b.score - a.score)
+                .map(x => x.t);
+        })();
+
+    const load = async () => {
+        if (!token || !eventId) return;
+        try {
+            setLoading(true);
+            const res = await apiFetch<any>(`/api/tickets/event/${eventId}`, { authToken: token });
+            setAllTickets(res?.tickets || res?.data || (Array.isArray(res) ? res : []));
+        } catch {
+            setAllTickets([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const print = (ticket: any) => {
+        const w = window.open("", "_blank");
+        if (!w) return;
+        const eventTitle = ticket.event?.title || ticket.eventId || "Event";
+        const eventDate = ticket.event?.startDate ? new Date(ticket.event.startDate) : null;
+        const dateStr = eventDate ? eventDate.toLocaleDateString("en-ZA", { day: "numeric", month: "long", year: "numeric" }) : "";
+        const type = ticketLabel(ticket);
+        const qty = ticket.quantity || 1;
+        const holder = ticket.user?.name || ticket.userId || "";
+        const qrData = encodeURIComponent(ticket.qrCode || ticket.id);
+        const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${qrData}`;
+
+        w.document.write(`<!doctype html><html><head><title>Ticket</title>
+<style>
+  @page { size: A6; margin: 6mm; }
+  * { box-sizing: border-box; }
+  body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
+  .ticket { border: 1.5px solid #222; border-radius: 3mm; padding: 5mm; height: calc(148mm - 12mm); display: flex; flex-direction: column; justify-content: space-between; }
+  .evt { font-weight: bold; font-size: 15pt; line-height: 1.2; }
+  .date { font-size: 10pt; color: #555; margin-top: 2mm; }
+  .type { font-size: 12pt; margin-top: 2mm; color: #222; }
+  .holder { font-size: 10pt; margin-top: 1mm; color: #555; }
+  .qty { font-size: 10pt; margin-top: 1mm; }
+  .qrwrap { display: flex; justify-content: center; align-items: center; flex: 1; }
+  .qrwrap img { width: 55mm; height: 55mm; display: block; }
+  .meta { font-size: 9pt; text-align: center; color: #666; word-break: break-all; }
+</style>
+</head><body>
+<div class="ticket">
+  <div>
+    <div class="evt">${eventTitle}</div>
+    ${dateStr ? `<div class="date">${dateStr}</div>` : ""}
+    <div class="type">${type}</div>
+    ${holder ? `<div class="holder">${holder}</div>` : ""}
+    <div class="qty">Qty: <strong>${qty}</strong></div>
+  </div>
+  <div class="qrwrap"><img src="${qrSrc}" alt="QR" /></div>
+  <div class="meta">${ticket.id}</div>
+</div>
+<script>
+(function(){
+  function go(){
+    var imgs=Array.prototype.slice.call(document.images);
+    if(!imgs.length){window.print();return;}
+    var n=imgs.length;
+    function done(){if(--n<=0)setTimeout(function(){window.print();},150);}
+    imgs.forEach(function(i){if(i.complete)done();else{i.addEventListener('load',done,{once:true});i.addEventListener('error',done,{once:true});}});
+  }
+  if(document.readyState==='complete')go();else window.addEventListener('load',go);
+})();
+</script>
+</body></html>`);
+        w.document.close();
+        w.focus();
+    };
+
+    return (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+                <div className="text-lg font-semibold">Tickets</div>
+                <button onClick={load} className="text-xs px-2 py-1 rounded border hover:bg-gray-50">
+                    {loading ? "Loading…" : "Refresh"}
+                </button>
+            </div>
+
+            <div className="flex gap-2">
+                <input
+                    className="flex-1 border rounded px-3 py-3 text-lg"
+                    placeholder="Filter by name, phone or ticket ID…"
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    autoFocus
+                />
+            </div>
+
+            {loading && (
+                <div className="text-sm text-gray-500 mt-2">
+                    Searching…
+                </div>
+            )}
+
+            <div className="mt-3 space-y-2 max-h-96 overflow-auto">
+                {tickets.map(t => (
+                    <div
+                        key={t.id}
+                        className="border rounded p-2 flex justify-between items-center"
+                    >
+                        <div className="text-sm">
+                            <div className="font-medium">
+                                {t.user?.name || "Guest"}
+                            </div>
+                            <div className="text-xs text-gray-500">
+                                {ticketLabel(t)}
+                            </div>
+                        </div>
+
+                        <div className="flex gap-1">
+                            <button
+                                onClick={() => print(t)}
+                                className="px-3 py-1 text-xs rounded bg-emerald-600 text-white"
+                            >
+                                Print
+                            </button>
+                            <button
+                                onClick={() => setSendTarget(t)}
+                                className="px-3 py-1 text-xs rounded bg-green-600 text-white"
+                            >
+                                Send
+                            </button>
+                        </div>
+                    </div>
+                ))}
+
+                {!loading && tickets.length === 0 && (
+                    <div className="text-sm text-gray-500">
+                        No tickets found
+                    </div>
+                )}
+            </div>
+
+            {sendTarget && (
+                <SendTicketsModal
+                    open={true}
+                    onClose={() => setSendTarget(null)}
+                    token={token}
+                    registration={{
+                        id: sendTarget.registrationOption?.registration?.id || sendTarget.registrationOption?.registrationId,
+                        user: sendTarget.user,
+                    }}
+                    setError={() => {}}
+                    setInfo={() => {}}
+                />
+            )}
+        </div>
+    );
+}
+
+function OptionsModal({ open, onClose, options, quantities, setQuantities, minQuantities = {}, onConfirm, confirming, isEdit, totalPaid = 0 }: any) {
+    if (!open) return null;
+
+    const safeOptions: any[] = options || [];
+
+    const total = safeOptions.reduce((sum: number, o: any) => {
+        if ((o.variants || []).length > 0) {
+            return sum + (o.variants as any[]).reduce((vs: number, v: any) =>
+                vs + (quantities[`${o.id}::${v.id}`] || 0) * effectiveVariantUnit(o, v), 0);
+        }
+        return sum + (quantities[o.id] || 0) * effectiveOptionUnit(o);
+    }, 0);
+
+    const belowPaid = isEdit && total < totalPaid;
+    const belowIssued = isEdit && Object.entries(minQuantities).some(
+        ([key, minQty]: [string, any]) => minQty > 0 && (quantities[key] || 0) < minQty
+    );
+
+    const stepper = (key: string, delta: number) =>
+        setQuantities((q: Record<string, number>) => ({ ...q, [key]: Math.max(minQuantities[key] || 0, (q[key] || 0) + delta) }));
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-2xl w-full max-w-2xl shadow-xl flex flex-col max-h-[90vh] overflow-hidden">
+
+                {/* Header */}
+                <div className="p-5 border-b flex-shrink-0">
+                    <div className="text-xl font-semibold">
+                        {isEdit ? "Edit Registration" : "Select Items"}
+                    </div>
+                    {isEdit && totalPaid > 0 && (
+                        <div className="text-sm text-gray-500 mt-1">
+                            Already paid: <strong>R {Number(totalPaid).toFixed(2)}</strong> — new total must be at least this amount.
+                        </div>
+                    )}
+                </div>
+
+                {/* Scrollable Content */}
+                <div className="flex-1 overflow-y-auto overscroll-contain p-5 space-y-3">
+                    {safeOptions.map((opt: any) => {
+                        const hasVariants = (opt.variants || []).length > 0;
+                        if (hasVariants) {
+                            return (
+                                <div key={opt.id} className="border rounded-xl overflow-hidden">
+                                    <div className="px-4 py-2 bg-gray-50 border-b font-medium text-sm">
+                                        {opt.name}
+                                        {opt.isMainTicket && <span className="ml-1.5 text-xs text-blue-600 font-normal">• Main</span>}
+                                    </div>
+                                    {(opt.variants as any[]).map((v: any) => {
+                                        const unit = effectiveVariantUnit(opt, v);
+                                        const basePrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
+                                        const key = `${opt.id}::${v.id}`;
+                                        const minQty = minQuantities[key] || 0;
+                                        return (
+                                            <div key={v.id} className="flex items-center justify-between px-4 py-2.5 border-b last:border-b-0">
+                                                <div>
+                                                    <div className="text-sm">{v.name}</div>
+                                                    <div className="text-xs text-gray-500">
+                                                        R {unit.toFixed(2)}
+                                                        {unit < basePrice && basePrice > 0 && <span className="ml-1 text-green-600">(early bird)</span>}
+                                                    </div>
+                                                    {minQty > 0 && <div className="text-xs text-gray-400">{minQty} already issued</div>}
+                                                </div>
+                                                <div className="flex items-center gap-3">
+                                                    <button onClick={() => stepper(key, -1)} disabled={(quantities[key] || 0) <= minQty} className="w-8 h-8 border rounded flex items-center justify-center text-lg font-bold disabled:opacity-40">–</button>
+                                                    <div className="w-6 text-center text-base font-semibold">{quantities[key] || 0}</div>
+                                                    <button onClick={() => stepper(key, 1)} className="w-8 h-8 border rounded flex items-center justify-center text-lg font-bold bg-emerald-50 border-emerald-300 text-emerald-700">+</button>
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            );
+                        }
+                        const unit = effectiveOptionUnit(opt);
+                        const minQty = minQuantities[opt.id] || 0;
+                        return (
+                            <div key={opt.id} className="border rounded-xl p-3">
+                                <div className="font-medium">{opt.name}</div>
+                                <div className="text-xs text-gray-500">
+                                    R {unit.toFixed(2)}
+                                    {unit < opt.price && opt.price > 0 && <span className="ml-1 text-green-600">(early bird, was R {opt.price.toFixed(2)})</span>}
+                                    {opt.isMainTicket ? " • Main" : ""}
+                                </div>
+                                {minQty > 0 && <div className="text-xs text-gray-400">{minQty} already issued</div>}
+                                <div className="flex gap-3 items-center mt-2">
+                                    <button onClick={() => stepper(opt.id, -1)} disabled={(quantities[opt.id] || 0) <= minQty} className="w-8 h-8 border rounded flex items-center justify-center text-lg font-bold disabled:opacity-40">–</button>
+                                    <div className="w-6 text-center text-lg font-semibold">{quantities[opt.id] || 0}</div>
+                                    <button onClick={() => stepper(opt.id, 1)} className="w-8 h-8 border rounded flex items-center justify-center text-lg font-bold bg-emerald-50 border-emerald-300 text-emerald-700">+</button>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {/* Footer */}
+                <div className="p-4 border-t flex-shrink-0 bg-white">
+                    {belowPaid && (
+                        <div className="mb-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+                            New total (R {total.toFixed(2)}) is less than amount already paid (R {Number(totalPaid).toFixed(2)}). Please increase the selection.
+                        </div>
+                    )}
+                    {belowIssued && (
+                        <div className="mb-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
+                            One or more items are below the quantity already issued as tickets. Please increase the selection.
+                        </div>
+                    )}
+                    <div className="flex justify-between items-center">
+                        <div className="text-lg font-semibold">Total: R {total.toFixed(2)}</div>
+                        <div className="flex gap-2">
+                            <button onClick={onClose} className="px-4 py-2 border rounded" disabled={confirming}>
+                                Cancel
+                            </button>
+                            <button
+                                onClick={onConfirm}
+                                disabled={confirming || belowPaid || belowIssued}
+                                className="px-4 py-2 rounded bg-emerald-600 text-white disabled:opacity-60 min-w-[140px]"
+                            >
+                                {confirming
+                                    ? "Processing…"
+                                    : isEdit ? "Save Changes" : "Confirm Registration"}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+}
+
+function DonationModal({ open, onClose, user, token, eventId, onSuccess, setError }: any) {
+    const [amount, setAmount] = useState("");
+    const [method, setMethod] = useState("cash");
+    const [saving, setSaving] = useState(false);
+
+    if (!open) return null;
+
+    const saveDonation = async () => {
+        const amt = parseFloat(amount);
+
+        if (!amt || amt <= 0) {
+            setError("Enter valid amount");
+            return;
+        }
+
+        try {
+            setSaving(true);
+
+            await apiFetch("/api/payments", {
+                method: "POST",
+                authToken: token,
+                body: {
+                    amount: amt,
+                    method,
+                    userId: user?.id || undefined,
+                    eventId,
+                    isDonation: true
+                }
+            });
+
+            onSuccess?.();
+
+            setAmount("");
+            onClose();
+
+        } catch (e: any) {
+            setError(e?.message || "Donation failed");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+            <div className="bg-white rounded-2xl p-6 w-full max-w-md shadow-xl">
+
+                <div className="text-xl font-semibold mb-2">
+                    Donation
+                </div>
+
+                <div className="text-sm text-gray-500 mb-4">
+                    {user ? user.name : "Anonymous Donation"}
+                </div>
+
+                <input
+                    className="w-full border rounded px-3 py-3 text-2xl font-semibold"
+                    placeholder="Amount"
+                    type="number"
+                    value={amount}
+                    onChange={e => setAmount(e.target.value)}
+                    autoFocus
+                />
+
+                <select
+                    className="w-full border rounded px-3 py-3 mt-3"
+                    value={method}
+                    onChange={e => setMethod(e.target.value)}
+                >
+                    <option value="cash">Cash</option>
+                    <option value="card">Card</option>
+                    <option value="eft">EFT</option>
+                </select>
+
+                <div className="flex gap-2 mt-4">
+                    <button
+                        onClick={onClose}
+                        className="flex-1 py-3 border rounded"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        onClick={saveDonation}
+                        disabled={saving}
+                        className="flex-1 py-3 rounded bg-emerald-600 text-white font-semibold"
+                    >
+                        {saving ? "Saving…" : "Capture"}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function SendTicketsModal({ open, onClose, token, registration, setError, setInfo }: any) {
+    const [channel, setChannel] = useState<"email" | "whatsapp" | "both">("email");
+    const [phone, setPhone] = useState("");
+    const [email, setEmail] = useState("");
+    const [sending, setSending] = useState(false);
+    const [localError, setLocalError] = useState("");
+    const [localInfo, setLocalInfo] = useState("");
+
+    useEffect(() => {
+        if (open && registration) {
+            setPhone(registration.user?.phoneNumber || "");
+            setEmail(registration.user?.email?.endsWith("@guest.local") ? "" : registration.user?.email || "");
+            setLocalError("");
+            setLocalInfo("");
+        }
+    }, [open, registration]);
+
+    if (!open) return null;
+
+    const send = async () => {
+        setLocalError("");
+        if ((channel === "email" || channel === "both") && !email.trim()) {
+            setLocalError("Email address is required for email delivery.");
+            return;
+        }
+        if ((channel === "whatsapp" || channel === "both") && !phone.trim()) {
+            setLocalError("Phone number is required for WhatsApp delivery.");
+            return;
+        }
+        setSending(true);
+        try {
+            await apiFetch("/api/tickets/send-to", {
+                method: "POST",
+                authToken: token,
+                body: {
+                    registrationId: registration.id,
+                    channel,
+                    overrideEmail: email.trim() || undefined,
+                    overridePhone: phone.trim() || undefined,
+                },
+            });
+            setLocalInfo("Tickets sent successfully.");
+            setTimeout(() => { setLocalInfo(""); onClose(); }, 2000);
+        } catch (e: any) {
+            setLocalError(e?.message || "Failed to send tickets");
+        } finally {
+            setSending(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-2xl w-full max-w-md shadow-xl">
+                <div className="p-6 space-y-4">
+                    <div className="text-xl font-semibold">Send Tickets</div>
+                    <div className="text-sm text-gray-600">
+                        <span className="font-medium">{registration?.user?.name || "Guest"}</span>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Send via</label>
+                        <div className="flex gap-2">
+                            {(["email", "whatsapp", "both"] as const).map((c) => (
+                                <button
+                                    key={c}
+                                    type="button"
+                                    onClick={() => setChannel(c)}
+                                    className={`flex-1 py-2 rounded border text-sm font-medium ${
+                                        channel === c
+                                            ? c === "whatsapp" ? "bg-green-600 text-white border-green-600"
+                                            : c === "both" ? "bg-indigo-600 text-white border-indigo-600"
+                                            : "bg-blue-600 text-white border-blue-600"
+                                            : "bg-white text-gray-700 border-gray-300 hover:bg-gray-50"
+                                    }`}
+                                >
+                                    {c === "both" ? "Both" : c === "whatsapp" ? "WhatsApp" : "Email"}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {(channel === "email" || channel === "both") && (
+                        <div>
+                            <label className="block text-sm font-medium mb-1">Email address</label>
+                            <input
+                                className="w-full border rounded px-3 py-2 text-sm"
+                                type="email"
+                                placeholder="recipient@example.com"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                            />
+                        </div>
+                    )}
+
+                    {(channel === "whatsapp" || channel === "both") && (
+                        <div>
+                            <label className="block text-sm font-medium mb-1">WhatsApp number</label>
+                            <input
+                                className="w-full border rounded px-3 py-2 text-sm"
+                                type="tel"
+                                placeholder="e.g. 0821234567"
+                                value={phone}
+                                onChange={(e) => setPhone(e.target.value)}
+                            />
+                        </div>
+                    )}
+
+                    {localError && <p className="text-sm text-red-600">{localError}</p>}
+                    {localInfo && <p className="text-sm text-emerald-600">{localInfo}</p>}
+
+                    <div className="flex gap-2 pt-1">
+                        <button type="button" onClick={onClose} className="flex-1 py-2 border rounded text-sm" disabled={sending}>
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            onClick={send}
+                            disabled={sending}
+                            className="flex-1 py-2 rounded bg-indigo-600 text-white text-sm font-medium disabled:opacity-60"
+                        >
+                            {sending ? "Sending…" : "Send Tickets"}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function RefundModal({ open, onClose, token, registration, maxRefund, onRefunded, setError }: any) {
+    const [amount, setAmount] = useState("");
+    const [method, setMethod] = useState("cash");
+    const [reason, setReason] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [localError, setLocalError] = useState("");
+
+    useEffect(() => {
+        if (open) { setAmount(""); setReason(""); setLocalError(""); }
+    }, [open]);
+
+    if (!open) return null;
+
+    const save = async (e: React.FormEvent) => {
+        e.preventDefault();
+        const amt = parseFloat(amount);
+        if (!amt || amt <= 0) { setLocalError("Enter a valid amount."); return; }
+        if (amt > maxRefund) { setLocalError(`Cannot exceed total paid (R ${Number(maxRefund).toFixed(2)}).`); return; }
+
+        setSaving(true);
+        setLocalError("");
+        try {
+            await apiFetch("/api/payments/refund", {
+                method: "POST",
+                authToken: token,
+                body: {
+                    userId: registration.userId,
+                    registrationId: registration.id,
+                    amount: amt,
+                    method,
+                    reason: reason || undefined,
+                }
+            });
+            // Re-fetch registration to get updated status & payments
+            const updated = await apiFetch<any>(`/api/registrations/${registration.id}`, { authToken: token });
+            onRefunded(updated);
+        } catch (e: any) {
+            setLocalError(e?.message || "Refund failed.");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-2xl w-full max-w-md shadow-xl">
+                <form onSubmit={save} className="p-6 space-y-4">
+                    <div className="text-xl font-semibold text-red-700">Issue Refund</div>
+                    <div className="text-sm text-gray-600">
+                        <span className="font-medium">{registration.user?.name || "Guest"}</span>
+                        <span className="ml-2 text-gray-400">· Total paid: R {Number(maxRefund).toFixed(2)}</span>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Refund amount</label>
+                        <div className="flex gap-2">
+                            <input
+                                className="flex-1 border rounded px-3 py-3 text-2xl font-semibold"
+                                type="number"
+                                step="0.01"
+                                min="0.01"
+                                max={maxRefund}
+                                placeholder="0.00"
+                                value={amount}
+                                onChange={e => setAmount(e.target.value)}
+                                autoFocus
+                            />
+                            <button
+                                type="button"
+                                onClick={() => setAmount(String(maxRefund))}
+                                className="px-3 rounded border text-sm"
+                            >
+                                Full
+                            </button>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Method</label>
+                        <select
+                            className="w-full border rounded px-3 py-2"
+                            value={method}
+                            onChange={e => setMethod(e.target.value)}
+                        >
+                            <option value="cash">Cash</option>
+                            <option value="card">Card</option>
+                            <option value="eft">EFT</option>
+                        </select>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Reason <span className="text-gray-400 font-normal">(optional)</span></label>
+                        <input
+                            className="w-full border rounded px-3 py-2 text-sm"
+                            placeholder="e.g. Cancelled, overpayment…"
+                            value={reason}
+                            onChange={e => setReason(e.target.value)}
+                        />
+                    </div>
+
+                    {localError && <p className="text-sm text-red-600">{localError}</p>}
+
+                    <div className="flex gap-2 pt-1">
+                        <button type="button" onClick={onClose} className="flex-1 py-2 border rounded text-sm" disabled={saving}>
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={saving || !amount}
+                            className="flex-1 py-2 rounded bg-red-600 text-white text-sm font-medium disabled:opacity-60"
+                        >
+                            {saving ? "Processing…" : "Confirm Refund"}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+function DoorRefundPanel({ token, eventId, setError, setInfo }: any) {
+    const [search, setSearch] = useState("");
+    const [allRegs, setAllRegs] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedReg, setSelectedReg] = useState<any | null>(null);
+    const [showRefund, setShowRefund] = useState(false);
+
+    const load = async () => {
+        if (!token || !eventId) return;
+        try {
+            setLoading(true);
+            const regs = await apiFetch<any[]>(`/api/registrations/event/${eventId}`, { authToken: token });
+            setAllRegs(regs || []);
+        } catch {
+            setAllRegs([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        load();
+    }, [token, eventId]);
+
+    // Only show registrations that have at least one payment
+    const paidRegs = allRegs.filter(r =>
+        (r.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0) > 0
+    );
+    const results = fuzzyFilterRegs(paidRegs, search);
+
+    const handleRefunded = async (updated: any) => {
+        setShowRefund(false);
+        setSelectedReg(updated);
+        setInfo("Refund recorded");
+        // Refresh list
+        const regs = await apiFetch<any[]>(`/api/registrations/event/${eventId}`, { authToken: token }).catch(() => null);
+        if (regs) setAllRegs(regs);
+    };
+
+    const maxRefund = selectedReg
+        ? (selectedReg.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0)
+        : 0;
+
+    return (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+                <div className="text-lg font-semibold text-red-700">Refunds</div>
+                <button
+                    onClick={load}
+                    className="text-xs px-2 py-1 rounded border hover:bg-gray-50"
+                >
+                    {loading ? "Loading…" : "Refresh"}
+                </button>
+            </div>
+
+            {!selectedReg ? (
+                <>
+                    <input
+                        className="w-full border rounded px-3 py-3 text-lg mb-3"
+                        placeholder="Search name, email or phone…"
+                        value={search}
+                        onChange={e => setSearch(e.target.value)}
+                        autoFocus
+                    />
+
+                    <div className="space-y-2 max-h-[32rem] overflow-auto">
+                        {results.map(r => {
+                            const paidValue = (r.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0);
+                            return (
+                                <div key={r.id} className="border rounded p-3 flex justify-between items-center">
+                                    <div>
+                                        <div className="font-medium text-sm">{r.user?.name || "Guest"}</div>
+                                        <div className="text-xs text-gray-500">
+                                            {r.user?.email && !r.user.email.endsWith("@guest.local") ? r.user.email : ""}
+                                            {r.user?.phoneNumber ? ` · ${r.user.phoneNumber}` : ""}
+                                        </div>
+                                        <div className="text-xs text-gray-400">
+                                            Paid: R {paidValue.toFixed(2)} · {r.status}
+                                        </div>
+                                    </div>
+                                    <button
+                                        onClick={() => setSelectedReg(r)}
+                                        className="px-3 py-1.5 text-sm rounded bg-red-600 text-white hover:bg-red-700"
+                                    >
+                                        Refund
+                                    </button>
+                                </div>
+                            );
+                        })}
+
+                        {!loading && results.length === 0 && (
+                            <div className="text-sm text-gray-500 py-4 text-center">
+                                No paid registrations found for this event.
+                            </div>
+                        )}
+                    </div>
+                </>
+            ) : (
+                <div>
+                    <button
+                        onClick={() => setSelectedReg(null)}
+                        className="text-sm text-gray-500 hover:text-gray-700 mb-4 flex items-center gap-1"
+                    >
+                        ← Back to list
+                    </button>
+
+                    <div className="border rounded-lg p-4 mb-4">
+                        <div className="font-semibold text-lg">{selectedReg.user?.name || "Guest"}</div>
+                        <div className="text-sm text-gray-500">
+                            {selectedReg.user?.email && !selectedReg.user.email.endsWith("@guest.local") ? selectedReg.user.email : ""}
+                            {selectedReg.user?.phoneNumber ? ` · ${selectedReg.user.phoneNumber}` : ""}
+                        </div>
+                        <div className="mt-3 grid grid-cols-2 gap-3">
+                            <div className="border rounded p-3 text-center">
+                                <div className="text-xs text-gray-500">TOTAL</div>
+                                <div className="font-semibold">
+                                    R {(selectedReg.options || selectedReg.registrationOptions || []).reduce((s: number, o: any) => {
+                                        const price = o.priceSnapshot !== null && o.priceSnapshot !== undefined
+                                            ? Number(o.priceSnapshot)
+                                            : (o.eventOption?.price || o.price || 0);
+                                        return s + price * (o.quantity || 0);
+                                    }, 0).toFixed(2)}
+                                </div>
+                            </div>
+                            <div className="border rounded p-3 text-center bg-red-50">
+                                <div className="text-xs text-gray-500">PAID</div>
+                                <div className="font-semibold text-red-700">R {maxRefund.toFixed(2)}</div>
+                            </div>
+                        </div>
+
+                        {(selectedReg.payments || []).length > 0 && (
+                            <div className="mt-3">
+                                <div className="text-xs font-medium text-gray-500 mb-1">Payment history</div>
+                                <div className="space-y-1">
+                                    {selectedReg.payments.map((p: any, i: number) => (
+                                        <div key={i} className="flex justify-between text-sm">
+                                            <span className={p.amount < 0 ? "text-red-600" : ""}>
+                                                {p.amount < 0 ? "Refund" : "Payment"} — {p.method || "—"}
+                                                {p.reason ? ` (${p.reason})` : ""}
+                                            </span>
+                                            <span className={p.amount < 0 ? "text-red-600 font-medium" : ""}>
+                                                R {Number(p.amount).toFixed(2)}
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {maxRefund > 0 ? (
+                        <button
+                            onClick={() => setShowRefund(true)}
+                            className="w-full py-3 rounded bg-red-600 text-white font-semibold hover:bg-red-700"
+                        >
+                            Issue Refund
+                        </button>
+                    ) : (
+                        <div className="text-center text-sm text-gray-500 py-2">
+                            Nothing to refund — net paid is R 0.00.
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <RefundModal
+                open={showRefund}
+                onClose={() => setShowRefund(false)}
+                token={token}
+                registration={selectedReg}
+                maxRefund={maxRefund}
+                onRefunded={handleRefunded}
+                setError={setError}
+            />
+        </div>
+    );
+}
+
+function NewAttendeeModal({ open, onClose, seed, onConfirm }: {
+    open: boolean;
+    onClose: () => void;
+    seed: string;
+    onConfirm: (data: { name: string; email: string; phone: string; notifPref: "email" | "whatsapp" | "both" }) => void;
+}) {
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [phone, setPhone] = useState("");
+    const [notifPref, setNotifPref] = useState<"email" | "whatsapp" | "both">("email");
+    const [err, setErr] = useState("");
+
+    // Pre-fill name from whatever was typed in search
+    useEffect(() => {
+        if (open) {
+            setName(seed || "");
+            setEmail("");
+            setPhone("");
+            setNotifPref("email");
+            setErr("");
+        }
+    }, [open, seed]);
+
+    if (!open) return null;
+
+    const derivedPref = email.trim() && phone.trim() ? notifPref : phone.trim() ? "whatsapp" : "email";
+
+    const submit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim()) { setErr("Name is required."); return; }
+        if (!email.trim() && !phone.trim()) { setErr("Provide at least an email or phone number."); return; }
+        onConfirm({ name: name.trim(), email: email.trim(), phone: phone.trim(), notifPref: derivedPref });
+    };
+
+    return (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-2xl w-full max-w-md shadow-xl">
+                <form onSubmit={submit} className="p-6 space-y-4">
+                    <div className="text-xl font-semibold">New Attendee</div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Full name *</label>
+                        <input
+                            className="w-full border rounded px-3 py-2 text-sm"
+                            value={name}
+                            onChange={e => setName(e.target.value)}
+                            placeholder="Full name"
+                            autoFocus
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Email</label>
+                        <input
+                            className="w-full border rounded px-3 py-2 text-sm"
+                            type="email"
+                            value={email}
+                            onChange={e => setEmail(e.target.value)}
+                            placeholder="Email address"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium mb-1">Cell number</label>
+                        <input
+                            className="w-full border rounded px-3 py-2 text-sm"
+                            type="tel"
+                            value={phone}
+                            onChange={e => {
+                                const v = e.target.value;
+                                setPhone(v);
+                                if (v.trim() && !email.trim()) setNotifPref("whatsapp");
+                                else if (!v.trim() && email.trim()) setNotifPref("email");
+                            }}
+                            placeholder="+27…"
+                        />
+                    </div>
+
+                    {/* Preference selector — shown only when both channels are provided */}
+                    {email.trim() && phone.trim() && (
+                        <div>
+                            <label className="block text-xs font-medium text-gray-600 mb-1">Send tickets via</label>
+                            <div className="flex rounded-lg border overflow-hidden text-xs font-medium">
+                                {(["email", "whatsapp", "both"] as const).map((p) => (
+                                    <button
+                                        key={p}
+                                        type="button"
+                                        onClick={() => setNotifPref(p)}
+                                        className={`flex-1 py-2 transition-colors ${
+                                            notifPref === p
+                                                ? p === "whatsapp" ? "bg-green-600 text-white"
+                                                    : p === "both" ? "bg-indigo-600 text-white"
+                                                    : "bg-blue-600 text-white"
+                                                : "bg-white text-gray-600 hover:bg-gray-50"
+                                        }`}
+                                    >
+                                        {p === "email" ? "Email" : p === "whatsapp" ? "WhatsApp" : "Both"}
+                                    </button>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    <p className="text-xs text-gray-500">At least one of email or cell number is required. If no email is provided, a guest account is created.</p>
+
+                    {err && <p className="text-sm text-red-600">{err}</p>}
+
+                    <div className="flex gap-2 pt-2">
+                        <button type="button" onClick={onClose} className="flex-1 py-2 border rounded text-sm">Cancel</button>
+                        <button type="submit" className="flex-1 py-2 rounded bg-emerald-600 text-white text-sm font-medium">Next — Choose Items</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx b/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx
new file mode 100644
index 0000000..53c2195
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx
@@ -0,0 +1,1177 @@
+"use client";
+
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter, useSearchParams } from "next/navigation";
+import { apiFetch, fetchAllUsers } from "@/lib/api";
+
+type Attendee = { id: string; name: string; email: string; pref: string };
+
+export default function EmailAttendeesPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <EmailAttendeesPageInner />
+    </Suspense>
+  );
+}
+
+function AttendeesCheckboxDropdown({
+  attendees,
+  loading,
+  selectedIds,
+  onChange,
+  channel = "email",
+}: {
+  attendees: { id: string; name: string; email?: string; pref: string }[];
+  loading: boolean;
+  selectedIds: string[];
+  onChange: (ids: string[]) => void;
+  channel?: "email" | "whatsapp";
+}) {
+  const [open, setOpen] = useState(false);
+
+  const allIds = useMemo(() => attendees.map(a => a.id), [attendees]);
+  const allSelected = selectedIds.length > 0 && selectedIds.length === allIds.length;
+  const noneSelected = selectedIds.length === 0;
+
+  const prefMatch = (pref: string) =>
+    channel === "email" ? pref === "email" || pref === "both" : pref === "whatsapp" || pref === "both";
+
+  const prefLabel = (pref: string) => {
+    if (pref === "both") return "both";
+    if (pref === "whatsapp") return "WA";
+    if (pref === "email") return "email";
+    return pref || "email";
+  };
+
+  const mismatched = selectedIds.filter(id => {
+    const a = attendees.find(x => x.id === id);
+    return a && !prefMatch(a.pref);
+  });
+
+  const toggleAll = (checked: boolean) => onChange(checked ? allIds : []);
+  const toggleId = (id: string) => {
+    if (selectedIds.includes(id)) onChange(selectedIds.filter(x => x !== id));
+    else onChange([...selectedIds, id]);
+  };
+
+  const summary = loading
+    ? "Loading attendees…"
+    : attendees.length === 0
+      ? "No attendees"
+      : allSelected
+        ? `All attendees (${attendees.length})`
+        : noneSelected
+          ? "None selected"
+          : `${selectedIds.length} selected`;
+
+  return (
+    <div className="relative block w-full max-w-xs">
+      <button type="button" className="w-full border rounded px-3 py-2 text-sm bg-white hover:bg-gray-50 text-left" onClick={() => setOpen(o => !o)}>
+        {summary}
+        {mismatched.length > 0 && (
+          <span className="ml-2 text-xs text-amber-600">({mismatched.length} pref mismatch)</span>
+        )}
+      </button>
+      {open && (
+        <div className="absolute z-10 mt-1 w-64 max-h-72 overflow-auto bg-white border rounded shadow">
+          <div className="px-3 py-2 border-b sticky top-0 bg-white space-y-1">
+            <label className="text-sm flex items-center gap-2">
+              <input type="checkbox" checked={allSelected} onChange={e => toggleAll(e.target.checked)} />
+              <span className="font-medium">Select all</span>
+            </label>
+            <div className="flex gap-1 flex-wrap">
+              <button
+                type="button"
+                className="text-xs px-2 py-0.5 rounded border border-indigo-300 text-indigo-700 hover:bg-indigo-50"
+                onClick={() => onChange(attendees.filter(a => prefMatch(a.pref)).map(a => a.id))}
+              >
+                Select {channel === "email" ? "Email/both" : "WhatsApp/both"}
+              </button>
+              <button
+                type="button"
+                className="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
+                onClick={() => onChange([])}
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+          {loading ? (
+            <div className="px-3 py-2 text-sm text-gray-500">Loading…</div>
+          ) : attendees.length === 0 ? (
+            <div className="px-3 py-2 text-sm text-gray-500">No attendees found</div>
+          ) : (
+            <ul className="py-1">
+              {attendees.map(a => {
+                const checked = selectedIds.includes(a.id);
+                const match = prefMatch(a.pref);
+                return (
+                  <li key={a.id} className={`px-3 py-1 hover:bg-gray-50 ${!match ? "opacity-75" : ""}`}>
+                    <label className="flex items-center gap-2 text-sm min-w-0">
+                      <input type="checkbox" checked={checked} onChange={() => toggleId(a.id)} />
+                      <span className="truncate flex-1">
+                        {a.name ? `${a.name} <${a.email}>` : a.email}
+                      </span>
+                      <span className={`text-[10px] px-1 rounded shrink-0 ${match ? "text-indigo-700 bg-indigo-50" : "text-amber-700 bg-amber-50"}`}>
+                        {prefLabel(a.pref)}
+                      </span>
+                    </label>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          <div className="px-3 py-2 border-t bg-gray-50 text-right">
+            <button type="button" className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-100" onClick={() => setOpen(false)}>Done</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PrefWarning({ attendees, selectedIds, channel }: { attendees: { id: string; pref: string }[]; selectedIds: string[]; channel: "email" | "whatsapp" }) {
+  const prefMatch = (pref: string) =>
+    channel === "email" ? pref === "email" || pref === "both" : pref === "whatsapp" || pref === "both";
+
+  const mismatched = useMemo(
+    () => selectedIds.filter(id => {
+      const a = attendees.find(x => x.id === id);
+      return a && !prefMatch(a.pref);
+    }),
+    [attendees, selectedIds, channel]
+  );
+
+  if (mismatched.length === 0) return null;
+  return (
+    <div className="p-3 border rounded bg-amber-50 text-amber-800 text-xs">
+      <strong>{mismatched.length} selected attendee(s)</strong> have a notification preference that doesn&apos;t include{" "}
+      {channel === "email" ? "email" : "WhatsApp"}. They will still receive the message, but it may not be their preferred channel.
+      {" "}Use the dropdown to filter by preference.
+    </div>
+  );
+}
+
+function EmailAttendeesPageInner() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+  const search = useSearchParams();
+  const preselectEventId = search?.get("eventId") || "";
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  // Load events for selection
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  // Tabs: attendees (current), automations (coming soon), broadcasts
+  const [tab, setTab] = useState<'attendees'|'automations'|'broadcasts'|'scheduled'>('attendees');
+
+  const isAdmin = user?.role === "admin";
+
+  const [allEvents, setAllEvents] = useState<any[]>([]);
+  const [evIncludePast, setEvIncludePast] = useState(false);
+
+  const events = useMemo(() => {
+    const now = Date.now();
+    if (evIncludePast) return allEvents;
+    return allEvents.filter(ev => {
+      const t = new Date(ev.endDate).getTime();
+      return !isNaN(t) && t > now;
+    });
+  }, [allEvents, evIncludePast]);
+
+  const loadEvents = async () => {
+    try {
+      setLoadingEvents(true);
+      const evs = await apiFetch<any[]>("/api/events/all?includePast=true", { authToken: token || undefined });
+      const sorted = (evs || []).sort((a: any, b: any) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+      setAllEvents(sorted);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load events");
+    } finally {
+      setLoadingEvents(false);
+    }
+  };
+
+  useEffect(() => { loadEvents(); }, [user, token]);
+
+  // Load users for broadcasts
+  useEffect(() => {
+    const run = async () => {
+      try {
+        if (!token) return;
+        setLoadingUsers(true);
+        const allUsers = await fetchAllUsers(token);
+        const mapped = allUsers
+          .filter((u: any) => u.isActive !== false && !u.email?.endsWith('@guest.local'))
+          .map((u: any) => ({ id: u.id, name: u.name || '', email: u.email || '', pref: u.notificationPreference || 'email' }))
+          .sort((a: any, b: any) => (a.name || '').localeCompare(b.name || '', undefined, { sensitivity: 'base' }));
+        setUsers(mapped);
+      } catch (e) {
+        // ignore for now
+      } finally {
+        setLoadingUsers(false);
+      }
+    };
+    run();
+  }, [token]);
+
+  // Form state
+  const [eventId, setEventId] = useState<string>(preselectEventId);
+  useEffect(() => {
+    if (preselectEventId) setEventId(preselectEventId);
+  }, [preselectEventId]);
+
+  const [templateKey, setTemplateKey] = useState<'custom'|'payment_reminder'|'event_reminder'|'tickets'>('custom');
+  const [showInfo, setShowInfo] = useState(false);
+
+  // Broadcasts state
+  const [users, setUsers] = useState<{id:string;name:string;email:string;pref:string}[]>([]);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
+  const [broadcastEventId, setBroadcastEventId] = useState<string>("");
+  const [broadcastSubject, setBroadcastSubject] = useState("");
+  const [broadcastBody, setBroadcastBody] = useState("");
+  const [broadcastEmails, setBroadcastEmails] = useState("");
+  const [broadcastPreviewCount, setBroadcastPreviewCount] = useState<number|null>(null);
+  const [broadcastPreviewSample, setBroadcastPreviewSample] = useState<{email:string;name?:string}[]|null>(null);
+  const [broadcastScheduledAtLocal, setBroadcastScheduledAtLocal] = useState<string>("");
+  const resetBroadcastForm = () => {
+    setSelectedUserIds([]);
+    setBroadcastEventId("");
+    setBroadcastSubject("");
+    setBroadcastBody("");
+    setBroadcastEmails("");
+    setBroadcastPreviewCount(null);
+    setBroadcastPreviewSample(null);
+    setBroadcastScheduledAtLocal("");
+  };
+
+  // Scheduled jobs state
+  type ScheduledJob = { id: string; kind: 'attendees'|'broadcast'|'unknown'; eventId?: string|null; broadcast?: boolean; scheduledAt: string; createdAt: string; status: 'queued'|'sending'|'sent'|'error'; attempts: number; sentAt?: string|null; lastError?: string|null; subject?: string; hasHtml?: boolean; hasText?: boolean };
+  const [scheduled, setScheduled] = useState<ScheduledJob[]>([]);
+  const [loadingScheduled, setLoadingScheduled] = useState(false);
+  const [editing, setEditing] = useState<ScheduledJob | null>(null);
+  const [editSubject, setEditSubject] = useState<string>('');
+  const [editBody, setEditBody] = useState<string>('');
+  const [editWhen, setEditWhen] = useState<string>('');
+  const [savingEdit, setSavingEdit] = useState(false);
+
+  const loadScheduled = async () => {
+    try {
+      if (!token) return;
+      setLoadingScheduled(true);
+      const res = await apiFetch<{jobs: ScheduledJob[]}>(`/api/scheduled-emails`, { authToken: token });
+      setScheduled(Array.isArray(res?.jobs) ? res.jobs : []);
+    } catch (e) {
+      // ignore here; surfaces via UI when tab open
+    } finally {
+      setLoadingScheduled(false);
+    }
+  };
+
+  useEffect(() => { if (tab === 'scheduled') loadScheduled(); }, [tab, token]);
+
+  const openEdit = (job: ScheduledJob) => {
+    setEditing(job);
+    setEditSubject(job.subject || '');
+    setEditBody(''); // body not included in list; will let user set a new one if needed
+    try { setEditWhen(toLocalInputValue(new Date(job.scheduledAt))); } catch { setEditWhen(''); }
+  };
+
+  const saveEdit = async () => {
+    if (!editing) return;
+    try {
+      setSavingEdit(true);
+      if (!token) { setError('Not authenticated'); return; }
+      const body: any = {};
+      if (editWhen) body.scheduledAt = new Date(editWhen).toISOString();
+      if (editSubject.trim().length || editBody.trim().length) {
+        body.subject = editSubject;
+        if (editBody.trim()) {
+          if (editBody.trim().startsWith('<')) body.html = editBody; else body.text = editBody;
+        } else {
+          // if clearing body, explicitly set text to empty to override
+          body.text = '';
+          body.html = '';
+        }
+      }
+      await apiFetch(`/api/scheduled-emails/${encodeURIComponent(editing.id)}`, { method: 'PATCH', authToken: token, body });
+      setInfo('Scheduled email updated.');
+      setEditing(null);
+      loadScheduled();
+    } catch (e:any) {
+      setError(e?.message || 'Failed to update scheduled email');
+    } finally {
+      setSavingEdit(false);
+    }
+  };
+
+  const removeJob = async (job: ScheduledJob) => {
+    try {
+      if (!token) { setError('Not authenticated'); return; }
+      await apiFetch(`/api/scheduled-emails/${encodeURIComponent(job.id)}`, { method: 'DELETE', authToken: token });
+      setInfo('Scheduled email removed.');
+      loadScheduled();
+    } catch (e:any) {
+      setError(e?.message || 'Failed to remove scheduled email');
+    }
+  };
+
+  const [subject, setSubject] = useState("");
+  const [body, setBody] = useState("");
+  const [subjectDirty, setSubjectDirty] = useState(false);
+  const [bodyDirty, setBodyDirty] = useState(false);
+  const [status, setStatus] = useState<'any'|'paid'|'unpaid'|'partial_paid'|'cancelled'>("any");
+  // Attendees list and selection
+  const [attendees, setAttendees] = useState<Attendee[]>([]);
+  const [selectedAttendeeIds, setSelectedAttendeeIds] = useState<string[]>([]);
+  const [loadingAttendees, setLoadingAttendees] = useState(false);
+
+  // Event helper to prefill templates
+  const currentEvent = useMemo(() => (events || []).find(e => e.id === eventId), [events, eventId]);
+
+  useEffect(() => {
+    const title = currentEvent?.title || 'the event';
+    if (templateKey === 'payment_reminder') {
+      if (!subjectDirty) setSubject(`Payment reminder: ${title}`);
+      if (!bodyDirty) setBody(`Hi {{name}}\n\nThis is a friendly reminder that you have an outstanding balance of {{balance}} for {{event.title}}.\nEvent starts: {{event.start}}\n\nPlease settle your balance to secure your tickets. Thank you!`);
+    } else if (templateKey === 'event_reminder') {
+      if (!subjectDirty) setSubject(`Reminder: ${title}`);
+      if (!bodyDirty) setBody(`Hi {{name}}\n\nA quick reminder about {{event.title}}.\nStart: {{event.start}}\n\nWe look forward to seeing you!`);
+    } else if (templateKey === 'tickets') {
+      // Tickets template does not require subject/body
+      setSubjectDirty(false);
+      setBodyDirty(false);
+      setSubject('');
+      setBody('');
+    } else {
+      // custom: do not overwrite user content unless not dirty and we have event change
+      if (!subjectDirty && subject) setSubject(subject); // keep as-is
+      if (!bodyDirty && body) setBody(body);
+    }
+    // When event changes, refresh defaults if not dirty
+  }, [templateKey, currentEvent, subjectDirty, bodyDirty]);
+
+  const [previewCount, setPreviewCount] = useState<number | null>(null);
+  const [previewSample, setPreviewSample] = useState<{email:string;name?:string}[] | null>(null);
+  const [sending, setSending] = useState(false);
+  const [scheduledAtLocal, setScheduledAtLocal] = useState<string>("");
+
+  const mismatchedAttendees = useMemo(
+    () => selectedAttendeeIds.filter(id => {
+      const a = attendees.find(x => x.id === id);
+      return a && a.pref !== 'email' && a.pref !== 'both';
+    }),
+    [attendees, selectedAttendeeIds]
+  );
+
+  // Load attendees when event changes
+  useEffect(() => {
+    const run = async () => {
+      try {
+        setLoadingAttendees(true);
+        setAttendees([]);
+        setSelectedAttendeeIds([]);
+        if (!eventId || !token) return;
+        const regs = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(eventId)}`, { authToken: token });
+        const uniq = new Map<string, Attendee>();
+        (regs || []).forEach((r: any) => {
+          const u = r?.user;
+          if (u?.id && u?.email && !u.email.endsWith('@guest.local') && u.isActive !== false) {
+            uniq.set(u.id, { id: u.id, name: u.name || '', email: u.email || '', pref: u.notificationPreference || 'email' });
+          }
+        });
+        const list = Array.from(uniq.values()).sort((a,b) => (a.name || '').localeCompare(b.name || '', undefined, { sensitivity: 'base' }));
+        setAttendees(list);
+        // Default: select those with email/both preference; fall back to all
+        const matching = list.filter(a => a.pref === 'email' || a.pref === 'both').map(a => a.id);
+        setSelectedAttendeeIds(matching.length > 0 ? matching : list.map(a => a.id));
+      } catch (e) {
+        // ignore
+      } finally {
+        setLoadingAttendees(false);
+      }
+    };
+    run();
+  }, [eventId, token]);
+
+  const onPreview = async () => {
+    try {
+      setError(null); setInfo(null); setPreviewCount(null); setPreviewSample(null);
+      if (!token) { setError("Not authenticated"); return; }
+      if (!eventId) { setError("Please select an event"); return; }
+      if (templateKey !== 'tickets') {
+        if (!subject.trim()) { setError("Subject is required"); return; }
+        if (!body.trim()) { setError("Message is required"); return; }
+      }
+      const payload: any = {
+        subject: subject || "(no subject)",
+        filter: { status: status !== 'any' ? status : undefined, attendeeIds: selectedAttendeeIds && selectedAttendeeIds.length ? selectedAttendeeIds : undefined },
+        dryRun: true,
+        template: templateKey,
+      };
+      if (templateKey !== 'tickets') {
+        if (body.trim().startsWith('<')) payload.html = body; else payload.text = body;
+      }
+      const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/email-attendees`, { method: 'POST', authToken: token, body: payload });
+      setPreviewCount(res?.matched ?? 0);
+      setPreviewSample(Array.isArray(res?.recipients) ? res.recipients : null);
+      setInfo(`Matched ${res?.matched ?? 0} recipient(s).`);
+    } catch (e: any) {
+      setError(e?.message || 'Failed to preview recipients');
+    }
+  };
+
+  const resetAttendeesForm = () => {
+    setTemplateKey('custom');
+    setSubject(''); setBody('');
+    setSubjectDirty(false); setBodyDirty(false);
+    setStatus('any');
+    setScheduledAtLocal('');
+    setPreviewCount(null); setPreviewSample(null);
+    // Keep event selection but reselect email/both attendees
+    const matching = attendees.filter(a => a.pref === 'email' || a.pref === 'both').map(a => a.id);
+    setSelectedAttendeeIds(matching.length > 0 ? matching : attendees.map(a => a.id));
+  };
+
+  const onSend = async () => {
+    try {
+      setError(null); setInfo(null);
+      if (!token) { setError("Not authenticated"); return; }
+      if (!eventId) { setError("Please select an event"); return; }
+      if (templateKey !== 'tickets') {
+        if (!subject.trim()) { setError("Subject is required"); return; }
+        if (!body.trim()) { setError("Message is required"); return; }
+      }
+      setSending(true);
+      const payload: any = {
+        subject,
+        filter: { status: status !== 'any' ? status : undefined, attendeeIds: selectedAttendeeIds && selectedAttendeeIds.length ? selectedAttendeeIds : undefined },
+        template: templateKey,
+      };
+      if (templateKey !== 'tickets') {
+        if (body.trim().startsWith('<')) payload.html = body; else payload.text = body.replace(/\n/g, '\n');
+      }
+      const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/email-attendees`, { method: 'POST', authToken: token, body: payload });
+      const sent = res?.sent ?? 0; const matched = res?.matched ?? 0;
+      setInfo(`Sent ${sent} out of ${matched} recipient(s).`);
+      // Reset form to default state
+      resetAttendeesForm();
+    } catch (e: any) {
+      setError(e?.message || 'Failed to send emails');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Email Attendees</h1>
+        <div className="flex items-center gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+        </div>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{info}</div>}
+
+      {/* Tabs like on Payments page */}
+      <div className="mb-4 flex items-center gap-2 flex-wrap">
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'attendees' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="emailTab" value="attendees" className="hidden" checked={tab==='attendees'} onChange={() => setTab('attendees')} />
+          Attendees
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'automations' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="emailTab" value="automations" className="hidden" checked={tab==='automations'} onChange={() => setTab('automations')} />
+          Automations
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'broadcasts' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="emailTab" value="broadcasts" className="hidden" checked={tab==='broadcasts'} onChange={() => setTab('broadcasts')} />
+          Broadcasts
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'scheduled' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="emailTab" value="scheduled" className="hidden" checked={tab==='scheduled'} onChange={() => setTab('scheduled')} />
+          Scheduled
+        </label>
+      </div>
+
+      {tab === 'attendees' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="grid gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Event</label>
+              <div className="flex gap-2 items-center">
+                <select className="border rounded px-3 py-2 text-sm flex-1 min-w-0 max-w-full" value={eventId} onChange={e => setEventId(e.target.value)}>
+                  <option value="">Select an event…</option>
+                  {events.map(ev => (
+                    <option key={ev.id} value={ev.id}>{ev.title}{ev.endDate && new Date(ev.endDate) < new Date() ? ' (past)' : ''}</option>
+                  ))}
+                </select>
+                {loadingEvents && <span className="text-xs text-gray-500">Loading…</span>}
+              </div>
+              <label className="flex items-center gap-1.5 text-xs text-gray-500 mt-1 cursor-pointer">
+                <input type="checkbox" checked={evIncludePast} onChange={e => setEvIncludePast(e.target.checked)} />
+                Include past events
+              </label>
+            </div>
+
+            <div className="grid sm:grid-cols-3 gap-3">
+              <div>
+                <div className="flex items-center justify-between">
+                  <label className="block text-xs text-gray-600 mb-1">Template</label>
+                  <button type="button" aria-label="About dynamic placeholders" className="text-[11px] text-gray-600 hover:text-gray-900 inline-flex items-center gap-1" onClick={() => setShowInfo(true)}>
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-gray-300 text-[10px]">i</span>
+                    Info
+                  </button>
+                </div>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={templateKey} onChange={e => setTemplateKey(e.target.value as any)}>
+                  <option value="custom">Custom message</option>
+                  <option value="payment_reminder">Payment reminder (with outstanding)</option>
+                  <option value="event_reminder">Event reminder (date & time)</option>
+                  <option value="tickets">Tickets email (attachments)</option>
+                </select>
+              </div>
+              <div className="sm:col-span-2">
+                <div className="text-[11px] text-gray-500 mt-6">Available placeholders: {'{{name}}'}, {'{{event.title}}'}, {'{{event.start}}'}, {'{{balance}}'} <button type="button" className="ml-2 underline hover:no-underline" onClick={() => setShowInfo(true)}>Learn more</button></div>
+              </div>
+            </div>
+
+            {showInfo && (
+              <div className="fixed inset-0 z-20">
+                <div className="absolute inset-0 bg-black/30" onClick={() => setShowInfo(false)} />
+                <div className="absolute inset-0 flex items-center justify-center p-4">
+                  <div className="w-full max-w-lg bg-white rounded-lg shadow-lg border p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="text-sm font-semibold">Dynamic parameters</h3>
+                      <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setShowInfo(false)}>Close</button>
+                    </div>
+                    <div className="text-[12px] text-gray-700 break-words">
+                      <p className="mb-2">You can personalize your subject and message using these placeholders. They will be replaced per recipient when sending.</p>
+                      <ul className="list-disc pl-5 space-y-1 mb-2">
+                        <li><code>{'{{name}}'}</code> — attendee’s name.</li>
+                        <li><code>{'{{event.title}}'}</code> — the event title.</li>
+                        <li><code>{'{{event.start}}'}</code> — the event start date/time (local).</li>
+                        <li><code>{'{{balance}}'}</code> — outstanding amount across the attendee’s registrations for the selected event.</li>
+                      </ul>
+                      <p className="mb-2">Example: Hi <code>{'{{name}}'}</code>, your balance is <code>{'{{balance}}'}</code>.</p>
+                      <p className="text-[11px] text-gray-500">To add new placeholders, extend the replacement logic in <span className="font-mono">eventController.emailEventAttendees</span> (replacePlaceholders function) and update this help.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Subject</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" disabled={templateKey==='tickets'} value={subject} onChange={e => { setSubject(e.target.value); setSubjectDirty(true); }} placeholder="Subject" />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Payment status filter</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={status} onChange={e => setStatus(e.target.value as any)}>
+                  <option value="any">Any</option>
+                  <option value="paid">Paid</option>
+                  <option value="unpaid">Unpaid (pending or partial)</option>
+                  <option value="partial_paid">Partial paid</option>
+                  <option value="cancelled">Cancelled</option>
+                </select>
+              </div>
+            </div>
+
+            {templateKey !== 'tickets' ? (
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Message</label>
+                <textarea className="w-full border rounded px-3 py-2 text-sm" rows={8} value={body} onChange={e => { setBody(e.target.value); setBodyDirty(true); }} placeholder="Write your message to attendees..." />
+                <div className="text-[11px] text-gray-500 mt-1">Hint: Start with &lt;html&gt; or &lt;div&gt; to send HTML; otherwise plain text will be sent.</div>
+              </div>
+            ) : (
+              <div className="p-3 border rounded bg-gray-50 text-sm text-gray-700">This will send each selected attendee their ticket(s) as attachments for this event.</div>
+            )}
+
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Attendees</label>
+                <AttendeesCheckboxDropdown
+                  attendees={attendees}
+                  loading={loadingAttendees}
+                  selectedIds={selectedAttendeeIds}
+                  onChange={setSelectedAttendeeIds}
+                  channel="email"
+                />
+                <div className="text-[11px] text-gray-500 mb-1">Email/both attendees are pre-selected. Use the dropdown to refine.</div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Send at (optional)</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={scheduledAtLocal} onChange={e => setScheduledAtLocal(e.target.value)} />
+                <div className="text-[10px] text-gray-500 mt-1">Leave empty to send immediately. Uses your local timezone.</div>
+              </div>
+            </div>
+
+            {mismatchedAttendees.length > 0 && (
+              <div className="p-3 border rounded bg-amber-50 text-amber-800 text-xs">
+                <strong>{mismatchedAttendees.length} selected attendee(s)</strong> prefer WhatsApp only — they will still receive this email but it&apos;s not their preferred channel.
+              </div>
+            )}
+
+            <div className="flex items-center flex-wrap gap-2">
+              <button type="button" disabled={sending} className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={onPreview}>Preview recipients</button>
+              <button type="button" disabled={sending} className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" onClick={onSend}>{sending ? 'Sending…' : 'Send now'}</button>
+              <button type="button" disabled={sending || !scheduledAtLocal} className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null);
+                  if (!token) { setError('Not authenticated'); return; }
+                  if (!eventId) { setError('Please select an event'); return; }
+                  if (templateKey !== 'tickets') {
+                    if (!subject.trim()) { setError('Subject is required'); return; }
+                    if (!body.trim()) { setError('Message is required'); return; }
+                  }
+                  const whenIso = new Date(scheduledAtLocal).toISOString();
+                  const payload = {
+                    subject,
+                    filter: { status: status !== 'any' ? status : undefined, attendeeIds: selectedAttendeeIds && selectedAttendeeIds.length ? selectedAttendeeIds : undefined },
+                    template: templateKey,
+                    scheduledAt: whenIso,
+                  } as any;
+                  if (templateKey !== 'tickets') {
+                    if (body.trim().startsWith('<')) payload.html = body; else payload.text = body.replace(/\n/g, '\n');
+                  }
+                  const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/email-attendees/schedule`, { method: 'POST', authToken: token, body: payload });
+                  if (res?.job?.id) {
+                    setInfo('Email scheduled. It will be sent around the specified time.');
+                  } else {
+                    setInfo('Scheduled.');
+                  }
+                  // Reset form to default state
+                  resetAttendeesForm();
+                } catch (e:any) {
+                  setError(e?.message || 'Failed to schedule email');
+                }
+              }}>Schedule send</button>
+              {previewCount != null && (
+                <span className="text-xs text-gray-600">Preview: {previewCount} recipient(s)</span>
+              )}
+            </div>
+
+            {previewSample && previewSample.length > 0 && (
+              <div className="mt-2">
+                <div className="text-xs text-gray-600 mb-1">First {previewSample.length} recipient(s):</div>
+                <ul className="text-xs text-gray-800 list-disc pl-5 space-y-0.5">
+                  {previewSample.map((r, idx) => (
+                    <li key={idx} className="break-words">{r.name ? `${r.name} <${r.email}>` : r.email}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {tab === 'automations' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <AutomationsPanel events={events} token={token} onInfo={setInfo} onError={setError} />
+        </div>
+      )}
+
+      {tab === 'broadcasts' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="grid gap-3">
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Users (optional)</label>
+                <AttendeesCheckboxDropdown
+                  attendees={users}
+                  loading={loadingUsers}
+                  selectedIds={selectedUserIds}
+                  onChange={setSelectedUserIds}
+                  channel="email"
+                />
+                <div className="text-[11px] text-gray-500 mb-1">Select users from your database to include. Green = Email/both preference. You can also add external emails below.</div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Event (optional for placeholders)</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={broadcastEventId} onChange={e => setBroadcastEventId(e.target.value)}>
+                  <option value="">No event</option>
+                  {events.map(ev => (
+                    <option key={ev.id} value={ev.id}>{ev.title}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {selectedUserIds.length > 0 && (
+              <PrefWarning attendees={users} selectedIds={selectedUserIds} channel="email" />
+            )}
+
+            <div>
+              <div className="flex items-center justify-between">
+                <label className="block text-xs text-gray-600 mb-1">Subject</label>
+                <button type="button" aria-label="About dynamic placeholders" className="text-[11px] text-gray-600 hover:text-gray-900 inline-flex items-center gap-1" onClick={() => setShowInfo(true)}>
+                  <span className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-gray-300 text-[10px]">i</span>
+                  Info
+                </button>
+              </div>
+              <input className="w-full border rounded px-3 py-2 text-sm" value={broadcastSubject} onChange={e => setBroadcastSubject(e.target.value)} placeholder="Subject (supports {{name}}, {{event.title}}, {{event.start}}, {{event.link}})" />
+            </div>
+
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Message</label>
+              <textarea className="w-full border rounded px-3 py-2 text-sm" rows={8} value={broadcastBody} onChange={e => setBroadcastBody(e.target.value)} placeholder="Write your message... You can use {{name}}, {{event.title}}, {{event.start}}, {{event.link}}" />
+              <div className="text-[11px] text-gray-500 mt-1">Hint: Start with &lt;html&gt; or &lt;div&gt; to send HTML; otherwise plain text will be sent.</div>
+            </div>
+
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Additional emails (one per line)</label>
+              <textarea className="w-full border rounded px-3 py-2 text-sm" rows={6} value={broadcastEmails} onChange={e => setBroadcastEmails(e.target.value)}
+placeholder={
+`email@example.com
+Jane Doe <jane@example.com>
+'John Smith' <john@domain.co.za>`
+              } />
+              <div className="text-[11px] text-gray-500 mt-1">Tips: You can paste a list. Supported formats: email@example.com or Name &lt;email@example.com&gt;.</div>
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Send at (optional)</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={broadcastScheduledAtLocal} onChange={e => setBroadcastScheduledAtLocal(e.target.value)} />
+                <div className="text-[10px] text-gray-500 mt-1">Leave empty to send immediately. Uses your local timezone.</div>
+              </div>
+            </div>
+
+            <div className="flex items-center flex-wrap gap-2">
+              <button type="button" className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null); setBroadcastPreviewCount(null); setBroadcastPreviewSample(null);
+                  if (!token) { setError('Not authenticated'); return; }
+                  if (!broadcastSubject.trim()) { setError('Subject is required'); return; }
+                  if (!broadcastBody.trim()) { setError('Message is required'); return; }
+                  const body: any = { userIds: selectedUserIds, emails: broadcastEmails, eventId: broadcastEventId || undefined };
+                  const res = await apiFetch(`/api/broadcasts/preview`, { method: 'POST', authToken: token, body });
+                  setBroadcastPreviewCount(res?.matched ?? 0);
+                  setBroadcastPreviewSample(Array.isArray(res?.recipients) ? res.recipients : null);
+                  setInfo(`Matched ${res?.matched ?? 0} recipient(s).`);
+                } catch (e:any) {
+                  setError(e?.message || 'Failed to preview recipients');
+                }
+              }}>Preview recipients</button>
+
+              <button type="button" className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null);
+                  if (!token) { setError('Not authenticated'); return; }
+                  if (!broadcastSubject.trim()) { setError('Subject is required'); return; }
+                  if (!broadcastBody.trim()) { setError('Message is required'); return; }
+                  const payload: any = { subject: broadcastSubject, eventId: broadcastEventId || undefined, userIds: selectedUserIds, emails: broadcastEmails };
+                  if (broadcastBody.trim().startsWith('<')) payload.html = broadcastBody; else payload.text = broadcastBody;
+                  const res = await apiFetch(`/api/broadcasts/send`, { method: 'POST', authToken: token, body: payload });
+                  setInfo(`Sent ${res?.sent ?? 0} out of ${res?.matched ?? 0} recipient(s).`);
+                  // Reset broadcast form
+                  resetBroadcastForm();
+                } catch (e:any) {
+                  setError(e?.message || 'Failed to send broadcast');
+                }
+              }}>Send now</button>
+
+              <button type="button" disabled={!broadcastScheduledAtLocal} className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null);
+                  if (!token) { setError('Not authenticated'); return; }
+                  if (!broadcastSubject.trim()) { setError('Subject is required'); return; }
+                  if (!broadcastBody.trim()) { setError('Message is required'); return; }
+                  const whenIso = new Date(broadcastScheduledAtLocal).toISOString();
+                  const payload: any = { scheduledAt: whenIso, subject: broadcastSubject, eventId: broadcastEventId || undefined, userIds: selectedUserIds, emails: broadcastEmails };
+                  if (broadcastBody.trim().startsWith('<')) payload.html = broadcastBody; else payload.text = broadcastBody;
+                  const res = await apiFetch(`/api/broadcasts/schedule`, { method: 'POST', authToken: token, body: payload });
+                  if (res?.job?.id) setInfo('Broadcast scheduled. It will be sent around the specified time.'); else setInfo('Scheduled.');
+                  // Reset broadcast form
+                  resetBroadcastForm();
+                } catch (e:any) {
+                  setError(e?.message || 'Failed to schedule broadcast');
+                }
+              }}>Schedule send</button>
+
+              {broadcastPreviewCount != null && (
+                <span className="text-xs text-gray-600">Preview: {broadcastPreviewCount} recipient(s)</span>
+              )}
+            </div>
+
+            {broadcastPreviewSample && broadcastPreviewSample.length > 0 && (
+              <div className="mt-2">
+                <div className="text-xs text-gray-600 mb-1">First {broadcastPreviewSample.length} recipient(s):</div>
+                <ul className="text-xs text-gray-800 list-disc pl-5 space-y-0.5">
+                  {broadcastPreviewSample.map((r, idx) => (
+                    <li key={idx} className="break-words">{r.name ? `${r.name} <${r.email}>` : r.email}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {showInfo && (
+              <div className="fixed inset-0 z-20">
+                <div className="absolute inset-0 bg-black/30" onClick={() => setShowInfo(false)} />
+                <div className="absolute inset-0 flex items-center justify-center p-4">
+                  <div className="w-full max-w-lg bg-white rounded-lg shadow-lg border p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="text-sm font-semibold">Dynamic parameters</h3>
+                      <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setShowInfo(false)}>Close</button>
+                    </div>
+                    <div className="text-[12px] text-gray-700 break-words">
+                      <p className="mb-2">You can personalize your subject and message using these placeholders. They will be replaced per recipient when sending.</p>
+                      <ul className="list-disc pl-5 space-y-1 mb-2">
+                        <li><code>{'{{name}}'}</code> — recipient’s name (if available).</li>
+                        <li><code>{'{{event.title}}'}</code> — the event title (when an event is selected).</li>
+                        <li><code>{'{{event.start}}'}</code> — the event start date/time (local).</li>
+                        <li><code>{'{{event.link}}'}</code> — a link to the event details page.</li>
+                      </ul>
+                      <p className="mb-2">Example: Hi <code>{'{{name}}'}</code>, check out <code>{'{{event.title}}'}</code>: <code>{'{{event.link}}'}</code>.</p>
+                      <p className="text-[11px] text-gray-500">Attendees tab also supports <code>{'{{balance}}'}</code>; broadcasts do not calculate balances.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {tab === 'scheduled' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-medium">Manage Scheduled Emails</h2>
+            <button type="button" className="text-sm px-2 py-1 rounded border bg-white hover:bg-gray-50" onClick={loadScheduled}>
+              Refresh
+            </button>
+          </div>
+          {loadingScheduled ? (
+            <div className="text-sm text-gray-600">Loading…</div>
+          ) : scheduled.length === 0 ? (
+            <div className="text-sm text-gray-600">No scheduled items. Items sent more than a week ago are hidden.</div>
+          ) : (
+            <ul className="divide-y border rounded">
+              {scheduled.map(job => (
+                <li key={job.id} className="p-3 flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-gray-900 flex items-center gap-2">
+                      <span className="inline-block px-2 py-0.5 text-xs rounded border bg-gray-50">{job.kind}</span>
+                      <span className="truncate">{job.subject || '(no subject)'}</span>
+                    </div>
+                    <div className="text-xs text-gray-600 mt-1">
+                      <span className="mr-2">Status: {job.status}</span>
+                      <span className="mr-2">Scheduled: {(() => { try { return new Date(job.scheduledAt).toLocaleString(); } catch { return job.scheduledAt; } })()}</span>
+                      {job.sentAt && <span>Sent: {(() => { try { return new Date(job.sentAt!).toLocaleString(); } catch { return job.sentAt; } })()}</span>}
+                      {job.lastError && <span className="ml-2 text-red-600 break-words">Error: {job.lastError}</span>}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <button type="button" disabled={job.status!=='queued'} className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-50 disabled:opacity-50" onClick={() => openEdit(job)}>Edit</button>
+                    <button type="button" disabled={job.status!=='queued'} className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-50 disabled:opacity-50" onClick={() => removeJob(job)}>Remove</button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {editing && (
+            <div className="fixed inset-0 z-20">
+              <div className="absolute inset-0 bg-black/30" onClick={() => setEditing(null)} />
+              <div className="absolute inset-0 flex items-center justify-center p-4">
+                <div className="w-full max-w-lg bg-white rounded-lg shadow-lg border p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-sm font-semibold">Edit scheduled email</h3>
+                    <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setEditing(null)}>Close</button>
+                  </div>
+                  <div className="grid gap-3">
+                    <div>
+                      <label className="block text-xs text-gray-600 mb-1">Subject</label>
+                      <input className="w-full border rounded px-3 py-2 text-sm" value={editSubject} onChange={e => setEditSubject(e.target.value)} />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-600 mb-1">Message (optional)</label>
+                      <textarea className="w-full border rounded px-3 py-2 text-sm" rows={6} value={editBody} onChange={e => setEditBody(e.target.value)} placeholder="Leave empty to keep current content; or enter new content (HTML supported if starting with <)"></textarea>
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-600 mb-1">Send at</label>
+                      <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={editWhen} onChange={e => setEditWhen(e.target.value)} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button type="button" disabled={savingEdit} className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" onClick={saveEdit}>{savingEdit ? 'Saving…' : 'Save changes'}</button>
+                      <button type="button" className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={() => setEditing(null)}>Cancel</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+
+function toLocalInputValue(d: Date) {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const y = d.getFullYear();
+  const m = pad(d.getMonth() + 1);
+  const day = pad(d.getDate());
+  const hh = pad(d.getHours());
+  const mm = pad(d.getMinutes());
+  return `${y}-${m}-${day}T${hh}:${mm}`;
+}
+
+function AutomationsPanel({ events, token, onInfo, onError }:{ events: any[]; token?: string | null; onInfo: (s: string) => void; onError: (s: string) => void }) {
+  const [autoEventId, setAutoEventId] = React.useState<string>('');
+  const currentEvent = React.useMemo(() => (events || []).find((e:any) => e.id === autoEventId), [events, autoEventId]);
+
+  // Defaults builders
+  const preWeekDefault = React.useMemo(() => ({
+    subject: `1 Week to Go: {{event.title}}!`,
+    body: `Hi {{name}}\n\nJust a friendly reminder that {{event.title}} is one week away.\n\nVenue: [add venue]\nTime: {{event.start}}\nParking: [add parking info]\nPacking list: [add items if needed]\n\nMore details: {{event.link}}`,
+  }), []);
+  const finalDefault = React.useMemo(() => ({
+    subject: `We’ll See You Tomorrow at {{event.title}}!`,
+    body: `Hi {{name}}\n\nFinal reminder for {{event.title}}.\nArrival instructions: [add arrival info]\nPlease have your QR code/ticket ready at entry.\n\nEvent details: {{event.link}}`,
+  }), []);
+  const thanksDefault = React.useMemo(() => ({
+    subject: `Thanks for Joining {{event.title}}!`,
+    body: `Hi {{name}}\n\nThank you for joining us at {{event.title}}!\nHighlights: [add highlights]\nPhotos/recordings: [add links]\nSponsor shoutouts: [add sponsors]\n\nSee you next time!`,
+  }), []);
+  const promoDefault = React.useMemo(() => ({
+    subject: `Don’t Miss Our Next Event: {{promo.title}}`,
+    body: `Hi {{name}}\n\nWe’d love to see you at our next event: {{promo.title}}.\nFind out more and register here: {{promo.link}}`,
+  }), []);
+
+  // Enable toggles
+  const [enablePre, setEnablePre] = React.useState(true);
+  const [enableFinal, setEnableFinal] = React.useState(true);
+  const [enableThanks, setEnableThanks] = React.useState(true);
+  const [enablePromo, setEnablePromo] = React.useState(false);
+
+  // Subjects/Bodies
+  const [preSubject, setPreSubject] = React.useState(preWeekDefault.subject);
+  const [preBody, setPreBody] = React.useState(preWeekDefault.body);
+  const [finalSubject, setFinalSubject] = React.useState(finalDefault.subject);
+  const [finalBody, setFinalBody] = React.useState(finalDefault.body);
+  const [thanksSubject, setThanksSubject] = React.useState(thanksDefault.subject);
+  const [thanksBody, setThanksBody] = React.useState(thanksDefault.body);
+  const [promoSubject, setPromoSubject] = React.useState(promoDefault.subject);
+  const [promoBody, setPromoBody] = React.useState(promoDefault.body);
+
+  // Timing
+  const [finalHours, setFinalHours] = React.useState<'24'|'48'>('24');
+  const [preWhen, setPreWhen] = React.useState<string>('');
+  const [finalWhen, setFinalWhen] = React.useState<string>('');
+  const [thanksWhen, setThanksWhen] = React.useState<string>('');
+  const [promoWhen, setPromoWhen] = React.useState<string>('');
+  const [promoEventId, setPromoEventId] = React.useState<string>('');
+
+  // Compute defaults when event changes or finalHours change
+  React.useEffect(() => {
+    if (!currentEvent) { setPreWhen(''); setFinalWhen(''); setThanksWhen(''); setPromoWhen(''); return; }
+    try {
+      const start = new Date(currentEvent.startDate);
+      const end = new Date(currentEvent.endDate || currentEvent.startDate);
+      // Pre-event: 7 days before start at 09:00
+      const pre = new Date(start);
+      pre.setDate(pre.getDate() - 7);
+      pre.setHours(9, 0, 0, 0);
+      setPreWhen(toLocalInputValue(pre));
+      // Final reminder: hours before start
+      const fin = new Date(start);
+      fin.setHours(fin.getHours() - (finalHours === '48' ? 48 : 24));
+      setFinalWhen(toLocalInputValue(fin));
+      // Thanks: day after end at 09:00
+      const ty = new Date(end);
+      ty.setDate(ty.getDate() + 1);
+      ty.setHours(9, 0, 0, 0);
+      setThanksWhen(toLocalInputValue(ty));
+      // Promo: 3 days after end at 09:00
+      const pr = new Date(end);
+      pr.setDate(pr.getDate() + 3);
+      pr.setHours(9, 0, 0, 0);
+      setPromoWhen(toLocalInputValue(pr));
+      // Prefill subjects again using event title (user can edit afterward)
+      const title = currentEvent.title || 'the event';
+      setPreSubject(`1 Week to Go: ${title}!`);
+      setFinalSubject(`We’ll See You Tomorrow at ${title}!`);
+      setThanksSubject(`Thanks for Joining ${title}!`);
+      setPromoSubject(`Don’t Miss Our Next Event: {{promo.title}`);
+    } catch {}
+  }, [currentEvent, finalHours]);
+
+  const onSchedule = async () => {
+    try {
+      onError(null as any); onInfo(null as any);
+      if (!token) { onError('Not authenticated'); return; }
+      if (!autoEventId) { onError('Please select an event'); return; }
+      const jobs: any[] = [];
+      if (enablePre && preSubject.trim() && preBody.trim() && preWhen) {
+        const payload: any = { subject: preSubject, scheduledAt: new Date(preWhen).toISOString() };
+        if (preBody.trim().startsWith('<')) payload.html = preBody; else payload.text = preBody;
+        jobs.push(payload);
+      }
+      if (enableFinal && finalSubject.trim() && finalBody.trim() && finalWhen) {
+        const payload: any = { subject: finalSubject, scheduledAt: new Date(finalWhen).toISOString() };
+        if (finalBody.trim().startsWith('<')) payload.html = finalBody; else payload.text = finalBody;
+        jobs.push(payload);
+      }
+      if (enableThanks && thanksSubject.trim() && thanksBody.trim() && thanksWhen) {
+        const payload: any = { subject: thanksSubject, scheduledAt: new Date(thanksWhen).toISOString() };
+        if (thanksBody.trim().startsWith('<')) payload.html = thanksBody; else payload.text = thanksBody;
+        jobs.push(payload);
+      }
+      if (enablePromo && promoSubject.trim() && promoBody.trim() && promoWhen) {
+        const payload: any = { subject: promoSubject, scheduledAt: new Date(promoWhen).toISOString(), promoEventId: promoEventId || undefined };
+        if (promoBody.trim().startsWith('<')) payload.html = promoBody; else payload.text = promoBody;
+        jobs.push(payload);
+      }
+      if (jobs.length === 0) { onError('Please enable at least one automation and fill in details'); return; }
+      const res = await apiFetch(`/api/automations/schedule`, { method: 'POST', authToken: token, body: { eventId: autoEventId, jobs } });
+      onInfo(res?.message || `Scheduled ${jobs.length} automation(s).`);
+      // Reset to defaults (keep event selection)
+      setEnablePre(true); setEnableFinal(true); setEnableThanks(true); setEnablePromo(false);
+      setPreSubject(preWeekDefault.subject); setPreBody(preWeekDefault.body);
+      setFinalSubject(finalDefault.subject); setFinalBody(finalDefault.body); setFinalHours('24');
+      setThanksSubject(thanksDefault.subject); setThanksBody(thanksDefault.body);
+      setPromoSubject(promoDefault.subject); setPromoBody(promoDefault.body); setPromoEventId('');
+    } catch (e:any) {
+      onError(e?.message || 'Failed to schedule automations');
+    }
+  };
+
+  return (
+    <div className="grid gap-4">
+      <div>
+        <label className="block text-xs text-gray-600 mb-1">Event</label>
+        <select className="w-full border rounded px-3 py-2 text-sm" value={autoEventId} onChange={e => setAutoEventId(e.target.value)}>
+          <option value="">Select an event…</option>
+          {(events||[]).map((ev:any) => (
+            <option key={ev.id} value={ev.id}>{ev.title}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="grid gap-4">
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Pre-Event Reminder (1 week before)</legend>
+          <label className="inline-flex items-center gap-2 text-sm mb-2">
+            <input type="checkbox" checked={enablePre} onChange={e => setEnablePre(e.target.checked)} /> Enable
+          </label>
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Subject</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" value={preSubject} onChange={e => setPreSubject(e.target.value)} placeholder="1 Week to Go: {{event.title}}!" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={preWhen} onChange={e => setPreWhen(e.target.value)} />
+            </div>
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={5} value={preBody} onChange={e => setPreBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Final Reminder (24–48 hrs before)</legend>
+          <div className="flex items-center gap-4 mb-2">
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={enableFinal} onChange={e => setEnableFinal(e.target.checked)} /> Enable
+            </label>
+            <label className="text-xs text-gray-600">Hours before: </label>
+            <select className="border rounded px-2 py-1 text-sm" value={finalHours} onChange={e => setFinalHours(e.target.value as any)}>
+              <option value="24">24</option>
+              <option value="48">48</option>
+            </select>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Subject</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" value={finalSubject} onChange={e => setFinalSubject(e.target.value)} placeholder="We’ll See You Tomorrow at {{event.title}}!" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={finalWhen} onChange={e => setFinalWhen(e.target.value)} />
+            </div>
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={5} value={finalBody} onChange={e => setFinalBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Thank You / Wrap Up</legend>
+          <label className="inline-flex items-center gap-2 text-sm mb-2">
+            <input type="checkbox" checked={enableThanks} onChange={e => setEnableThanks(e.target.checked)} /> Enable
+          </label>
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Subject</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" value={thanksSubject} onChange={e => setThanksSubject(e.target.value)} placeholder="Thanks for Joining {{event.title}}!" />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={thanksWhen} onChange={e => setThanksWhen(e.target.value)} />
+            </div>
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={5} value={thanksBody} onChange={e => setThanksBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Next Event Promo</legend>
+          <div className="flex items-center gap-4 mb-2">
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={enablePromo} onChange={e => setEnablePromo(e.target.checked)} /> Enable
+            </label>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-3 mb-2">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Promo Event</label>
+              <select className="w-full border rounded px-3 py-2 text-sm" value={promoEventId} onChange={e => setPromoEventId(e.target.value)}>
+                <option value="">Select event to promote…</option>
+                {(events||[]).map((ev:any) => (
+                  <option key={ev.id} value={ev.id}>{ev.title}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={promoWhen} onChange={e => setPromoWhen(e.target.value)} />
+            </div>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Subject</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" value={promoSubject} onChange={e => setPromoSubject(e.target.value)} placeholder="Don’t Miss Our Next Event: {{promo.title}}" />
+            </div>
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={5} value={promoBody} onChange={e => setPromoBody(e.target.value)} />
+        </fieldset>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button type="button" className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700" onClick={onSchedule}>Schedule selected</button>
+        <div className="text-[11px] text-gray-500">Placeholders supported: {'{{name}}'}, {'{{event.title}}'}, {'{{event.start}}'}, {'{{event.link}}'}, {'{{promo.title}}'}, {'{{promo.link}}'}. Start body with &lt;html&gt; or &lt;div&gt; to send HTML.</div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/event-options/page.tsx b/frontend/src/app/dashboard/supervisor/event-options/page.tsx
new file mode 100644
index 0000000..98ed6d9
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/event-options/page.tsx
@@ -0,0 +1,297 @@
+"use client";
+
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter, useSearchParams } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+// Format a Date (or date-like input) to the value expected by <input type="datetime-local">
+// This returns local time (browser timezone) as YYYY-MM-DDTHH:mm
+function toLocalDateTimeInputValue(input: string | number | Date | null | undefined): string {
+  if (input == null) return "";
+  const d = new Date(input);
+  if (isNaN(d.getTime())) return "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${y}-${m}-${day}T${hh}:${mm}`;
+}
+
+function EarlyBirdTiersEditor({ option, onSave }: { option: any; onSave: (tiers: { deadline: string; price: number; order?: number }[]) => void }) {
+  const [rows, setRows] = React.useState<{ id?: string; deadline: string; price: string; order?: number }[]>([]);
+  const [open, setOpen] = React.useState(false);
+  const [saving, setSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    const tiers = Array.isArray(option?.earlyBirdTiers) ? option.earlyBirdTiers : [];
+    const normalized = tiers
+      .slice()
+      .sort((a: any, b: any) => new Date(a.deadline).getTime() - new Date(b.deadline).getTime() || (a.order || 0) - (b.order || 0))
+      .map((t: any, i: number) => ({ id: t.id, deadline: toLocalDateTimeInputValue(t.deadline), price: String(t.price ?? ''), order: typeof t.order === 'number' ? t.order : i }));
+    setRows(normalized);
+  }, [option?.id, option?.earlyBirdTiers]);
+
+  const addRow = () => {
+    setRows((r) => [...r, { deadline: '', price: '', order: (r.length || 0) }]);
+  };
+  const removeRow = (idx: number) => {
+    const copy = rows.slice();
+    copy.splice(idx, 1);
+    setRows(copy);
+  };
+  const updateRow = (idx: number, patch: Partial<{ deadline: string; price: string; order?: number }>) => {
+    const copy = rows.slice();
+    copy[idx] = { ...copy[idx], ...patch } as any;
+    setRows(copy);
+  };
+
+  const save = async () => {
+    setSaving(true);
+    try {
+      const tiers = rows
+        .filter((r) => !!r.deadline && String(r.price).trim() !== '')
+        .map((r, i) => ({ deadline: new Date(r.deadline).toISOString(), price: parseFloat(r.price), order: typeof r.order === 'number' ? r.order : i }))
+        .filter((t) => t.price >= 0 && !isNaN(new Date(t.deadline).getTime()));
+      onSave(tiers);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="mt-3 border-t pt-3">
+      <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setOpen(!open)}>
+        {open ? 'Hide early-bird tiers' : 'Manage early-bird tiers'}
+      </button>
+      {open && (
+        <div className="mt-2 bg-gray-50 border rounded p-2">
+          {rows.length === 0 ? (
+            <div className="text-xs text-gray-600 mb-2">No tiers yet. Add deadlines and prices for early-bird discounts.</div>
+          ) : (
+            <ul className="space-y-2 mb-2">
+              {rows.map((row, idx) => (
+                <li key={idx} className="bg-white border rounded p-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <input className="border rounded px-2 py-1 text-xs" type="datetime-local" value={row.deadline} onChange={(e) => updateRow(idx, { deadline: e.target.value })} />
+                    <input className="border rounded px-2 py-1 text-xs w-24" type="number" step="0.01" value={row.price} onChange={(e) => updateRow(idx, { price: e.target.value })} placeholder="Price" />
+                    <input className="border rounded px-2 py-1 text-xs w-16" type="number" step="1" value={typeof row.order === 'number' ? String(row.order) : ''} onChange={(e) => updateRow(idx, { order: parseInt(e.target.value || '0', 10) })} placeholder="#" />
+                    <button type="button" className="text-xs px-2 py-1 rounded bg-red-600 text-white hover:bg-red-700" onClick={() => removeRow(idx)}>Remove</button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className="flex items-center gap-2">
+            <button type="button" className="text-xs px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={addRow}>Add tier</button>
+            <button type="button" className="text-xs px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60" onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save tiers'}</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function EventOptionsContent() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+  const search = useSearchParams();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [selectedEventId, setSelectedEventId] = useState<string>("");
+  const [options, setOptions] = useState<any[]>([]);
+  const [loadingEv, setLoadingEv] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  const loadEvents = async () => {
+    if (!token) return;
+    try {
+      setLoadingEv(true);
+      const evs = await apiFetch<any[]>("/api/events/all", { authToken: token });
+      setEvents(evs || []);
+    } catch (e) {
+      // ignore
+    } finally {
+      setLoadingEv(false);
+    }
+  };
+
+  useEffect(() => { loadEvents(); }, [token]);
+
+  // Preselect event from query (?eventId=)
+  useEffect(() => {
+    const q = search?.get("eventId");
+    if (!q) return;
+    // if events already loaded, ensure it exists then set; otherwise, set directly and let options hook handle
+    setSelectedEventId(q);
+  }, [search]);
+
+  useEffect(() => {
+    const ev = events.find(e => e.id === selectedEventId);
+    if (ev) {
+      setOptions(ev.options || ev.eventOptions || []);
+    } else {
+      setOptions([]);
+    }
+  }, [selectedEventId, events]);
+
+  const [newOpt, setNewOpt] = useState({ name: "", price: "", isMainTicket: false });
+
+  const createOption = async () => {
+    if (!token || !selectedEventId) return;
+    setError(null); setInfo(null);
+    if (!newOpt.name) { setError("Option name is required"); return; }
+    const priceNum = parseFloat(newOpt.price || "0");
+    try {
+      await apiFetch(`/api/events/${encodeURIComponent(selectedEventId)}/options`, {
+        method: "POST",
+        authToken: token,
+        body: { name: newOpt.name, price: priceNum || 0, isMainTicket: !!newOpt.isMainTicket }
+      });
+      setNewOpt({ name: "", price: "", isMainTicket: false });
+      setInfo("Option created");
+      await loadEvents();
+    } catch (e: any) {
+      setError(e?.message || "Failed to create option");
+    }
+  };
+
+  const updateOption = async (opt: any, patch: any) => {
+    if (!token) return;
+    setError(null); setInfo(null);
+    try {
+      await apiFetch(`/api/events/options/${encodeURIComponent(opt.id)}`, {
+        method: "PUT",
+        authToken: token,
+        body: patch
+      });
+      setInfo("Option updated");
+      await loadEvents();
+    } catch (e: any) {
+      setError(e?.message || "Failed to update option");
+    }
+  };
+
+  const deleteOption = async (opt: any) => {
+    if (!token) return;
+    setError(null); setInfo(null);
+    try {
+      await apiFetch(`/api/events/options/${encodeURIComponent(opt.id)}`, {
+        method: "DELETE",
+        authToken: token,
+      });
+      setInfo("Option deleted");
+      await loadEvents();
+    } catch (e: any) {
+      setError(e?.message || "Failed to delete option");
+    }
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Event options</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard/supervisor/events')}>Back</button>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{info}</div>}
+
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+        <div className="text-lg font-semibold mb-3">Select event</div>
+        <select className="w-full border rounded px-3 py-2 text-sm" value={selectedEventId} onChange={e => setSelectedEventId(e.target.value)}>
+          <option value="">Select an event…</option>
+          {events.map(ev => (
+            <option key={ev.id} value={ev.id}>{ev.title}</option>
+          ))}
+        </select>
+        {selectedEventId && (
+          <div className="mt-3 text-xs text-gray-600">
+            {(() => {
+              const ev = events.find(e => e.id === selectedEventId);
+              if (!ev) return null;
+              return <>
+                <div>{new Date(ev.startDate).toLocaleString()} - {new Date(ev.endDate).toLocaleString()}</div>
+              </>;
+            })()}
+          </div>
+        )}
+      </div>
+
+      {selectedEventId && (
+        <div className="grid lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 border rounded-xl p-4 bg-white shadow-sm">
+            <div className="text-lg font-semibold mb-3">Options</div>
+            {options.length === 0 ? (
+              <div className="text-sm text-gray-500">No options yet.</div>
+            ) : (
+              <ul className="space-y-3">
+                {options.map(opt => (
+                  <li key={opt.id} className="border rounded p-3">
+                    <div className="flex items-center justify-between gap-3">
+                      <div>
+                        <div className="font-medium text-sm">{opt.name}</div>
+                        <div className="text-xs text-gray-500">Price: R {(opt.price || 0).toFixed(2)} {opt.isMainTicket ? "• Main ticket" : ""}</div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <input className="w-36 border rounded px-2 py-1 text-sm" defaultValue={opt.name} onBlur={e => { const v = e.target.value.trim(); if (v && v !== opt.name) updateOption(opt, { name: v }); }} />
+                        <input className="w-28 border rounded px-2 py-1 text-sm" type="number" step="0.01" defaultValue={(opt.price || 0)} onBlur={e => { const v = parseFloat(e.target.value || '0'); if (!isNaN(v) && v !== opt.price) updateOption(opt, { price: v }); }} />
+                        <label className="text-xs flex items-center gap-1"><input type="checkbox" defaultChecked={!!opt.isMainTicket} onChange={e => updateOption(opt, { isMainTicket: e.target.checked })} /> Main</label>
+                        {user?.role === 'admin' && (
+                          <button onClick={() => deleteOption(opt)} className="text-xs px-2 py-1 rounded bg-red-600 text-white hover:bg-red-700">
+                            Delete
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                    {/* Early Bird Tiers Editor */}
+                    <EarlyBirdTiersEditor
+                      option={opt}
+                      onSave={(tiers) => updateOption(opt, { earlyBirdTiers: tiers })}
+                    />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="text-lg font-semibold mb-3">Create new option</div>
+            <div className="grid gap-2">
+              <input className="border rounded px-3 py-2 text-sm" placeholder="Name" value={newOpt.name} onChange={e => setNewOpt({ ...newOpt, name: e.target.value })} />
+              <input className="border rounded px-3 py-2 text-sm" placeholder="Price" type="number" step="0.01" value={newOpt.price} onChange={e => setNewOpt({ ...newOpt, price: e.target.value })} />
+              <label className="text-sm flex items-center gap-2"><input type="checkbox" checked={newOpt.isMainTicket} onChange={e => setNewOpt({ ...newOpt, isMainTicket: e.target.checked })} /> Main ticket</label>
+              <button onClick={createOption} className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm">Create option</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function EventOptionsPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <EventOptionsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/events/page.tsx b/frontend/src/app/dashboard/supervisor/events/page.tsx
new file mode 100644
index 0000000..4e1a42a
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/events/page.tsx
@@ -0,0 +1,1505 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch, resolveToApiOrigin } from "@/lib/api";
+
+// ─── helpers ────────────────────────────────────────────────────────────────
+
+function toLocalDT(input: string | Date | null | undefined): string {
+  if (!input) return "";
+  const d = new Date(input);
+  if (isNaN(d.getTime())) return "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${y}-${m}-${day}T${hh}:${mm}`;
+}
+
+const DT_MIN = "2000-01-01T00:00";
+const DT_MAX = "2099-12-31T23:59";
+
+function DTInput({ label, value, onChange, hint, required }: { label: string; value: string; onChange: (v: string) => void; hint?: string; required?: boolean }) {
+  return (
+    <div>
+      <label className="block text-xs text-gray-600 mb-1">{label} {required && <span className="text-red-500">*</span>}</label>
+      <input type="datetime-local" min={DT_MIN} max={DT_MAX} required={required}
+        className="w-full border rounded px-3 py-2 text-sm"
+        value={value} onChange={e => onChange(e.target.value)} />
+      {hint && <p className="text-[10px] text-gray-400 mt-0.5">{hint}</p>}
+    </div>
+  );
+}
+
+// ─── types ───────────────────────────────────────────────────────────────────
+
+type FormFieldType = "yes_no" | "text" | "date" | "numeric" | "statement" | "paragraph";
+type EventFormDef = { isRequired: boolean; fields: { id?: string; type: FormFieldType; label: string; isRequired?: boolean; order?: number; helpText?: string | null; options?: any }[] };
+
+type Tier = { id?: string; deadline: string; price: string; stockLimit: string; order?: number };
+
+type Variant = {
+  id?: string;
+  name: string;
+  price: string;       // empty → use option base price
+  stockLimit: string;
+  earlyBirdTiers: Tier[];
+};
+
+type OptionDraft = {
+  id?: string;
+  name: string;
+  price: string;
+  isMainTicket: boolean;
+  stockLimit: string;
+  earlyBirdTiers: Tier[];   // option-level (used only when no variants)
+  variants: Variant[];
+};
+
+type SectionDraft = {
+  name: string;
+  optionIndices: number[];
+};
+
+// ─── sub-components ─────────────────────────────────────────────────────────
+
+function UploadImageButton({ onUploaded, label = "Upload image" }: { onUploaded: (url: string) => void; label?: string }) {
+  const { token } = useAuth();
+  const [uploading, setUploading] = useState(false);
+  const ref = useRef<HTMLInputElement | null>(null);
+  return (
+    <div className="inline-flex items-center">
+      <input ref={ref} type="file" accept="image/*" className="hidden" onChange={async e => {
+        const file = e.target.files?.[0];
+        if (!file || !token) return;
+        setUploading(true);
+        try {
+          const fd = new FormData();
+          fd.append("image", file);
+          const res: any = await apiFetch("/api/uploads/event-image", { method: "POST", body: fd, authToken: token });
+          if (res?.url || res?.path) onUploaded(res.url || res.path);
+        } finally { setUploading(false); if (ref.current) ref.current.value = ""; }
+      }} />
+      <button type="button" onClick={() => ref.current?.click()} disabled={uploading}
+        className="px-3 py-1.5 text-sm rounded border border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 disabled:opacity-50">
+        {uploading ? "Uploading…" : label}
+      </button>
+    </div>
+  );
+}
+
+function FormBuilder({ value, onChange }: { value: EventFormDef; onChange: (v: EventFormDef) => void }) {
+  const fields = value.fields || [];
+  const add = (type: FormFieldType) => onChange({ ...value, fields: [...fields, { type, label: "", isRequired: false, helpText: "" }] });
+  const upd = (idx: number, patch: any) => { const c = fields.slice(); c[idx] = { ...c[idx], ...patch }; onChange({ ...value, fields: c }); };
+  const rem = (idx: number) => { const c = fields.slice(); c.splice(idx, 1); onChange({ ...value, fields: c }); };
+  const mov = (idx: number, dir: -1 | 1) => {
+    const c = fields.slice(); const t = idx + dir;
+    if (t < 0 || t >= c.length) return;
+    [c[idx], c[t]] = [c[t], c[idx]]; onChange({ ...value, fields: c });
+  };
+  const typeLabel = (t: FormFieldType) => ({ text: "Text", numeric: "Number", date: "Date", yes_no: "Yes/No", statement: "Statement", paragraph: "Heading" }[t] || t);
+  return (
+    <div className="border rounded-lg p-3 bg-gray-50">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-semibold">Registration Form Fields</div>
+        <label className="text-xs flex items-center gap-1.5 cursor-pointer">
+          <input type="checkbox" checked={!!value.isRequired} onChange={e => onChange({ ...value, isRequired: e.target.checked })} />
+          Required before tickets generate
+        </label>
+      </div>
+      {fields.length === 0
+        ? <p className="text-xs text-gray-500 italic mb-3">No fields yet.</p>
+        : (
+          <ul className="space-y-2 mb-3">
+            {fields.map((f, idx) => (
+              <li key={idx} className="bg-white border rounded p-2">
+                <div className="flex items-center gap-1 mb-1.5">
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-medium">{typeLabel(f.type)}</span>
+                  <span className="text-xs text-gray-400">#{idx + 1}</span>
+                  <div className="flex-1" />
+                  <button type="button" className="text-gray-400 hover:text-gray-700 px-1" onClick={() => mov(idx, -1)} disabled={idx === 0}>↑</button>
+                  <button type="button" className="text-gray-400 hover:text-gray-700 px-1" onClick={() => mov(idx, 1)} disabled={idx === fields.length - 1}>↓</button>
+                  <button type="button" className="text-xs px-2 py-0.5 rounded bg-red-50 text-red-700 border border-red-200" onClick={() => rem(idx)}>Remove</button>
+                </div>
+                <div className="flex flex-wrap gap-2 mb-1.5">
+                  <select className="border rounded px-2 py-1 text-xs" value={f.type} onChange={e => upd(idx, { type: e.target.value })}>
+                    <option value="text">Text</option><option value="numeric">Number</option><option value="date">Date</option>
+                    <option value="yes_no">Yes/No</option><option value="statement">Statement</option><option value="paragraph">Heading+para</option>
+                  </select>
+                  {f.type !== "statement" && f.type !== "paragraph" && (
+                    <label className="text-xs flex items-center gap-1 cursor-pointer">
+                      <input type="checkbox" checked={!!f.isRequired} onChange={e => upd(idx, { isRequired: e.target.checked })} /> Required
+                    </label>
+                  )}
+                </div>
+                <input className="border rounded px-2 py-1 text-sm w-full mb-1" placeholder={f.type === "paragraph" ? "Heading text" : "Label"} value={f.label} onChange={e => upd(idx, { label: e.target.value })} />
+                {f.type === "paragraph"
+                  ? <textarea className="border rounded px-2 py-1 text-xs w-full" rows={2} placeholder="Body text" value={f.helpText || ""} onChange={e => upd(idx, { helpText: e.target.value })} />
+                  : f.type !== "statement"
+                    ? <input className="border rounded px-2 py-1 text-xs w-full" placeholder="Help text (optional)" value={f.helpText || ""} onChange={e => upd(idx, { helpText: e.target.value })} />
+                    : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      <div className="flex gap-2 flex-wrap">
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={() => add("text")}>+ Question</button>
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-gray-200 text-gray-700" onClick={() => add("statement")}>+ Statement</button>
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-gray-200 text-gray-700" onClick={() => add("paragraph")}>+ Heading</button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Items & Pricing substep editors ────────────────────────────────────────
+
+/** Substep 0 — bare option rows */
+function OptionsEditor({ options, onChange, required }: { options: OptionDraft[]; onChange: (o: OptionDraft[]) => void; required?: boolean }) {
+  const upd = (i: number, patch: Partial<OptionDraft>) => { const c = options.slice(); c[i] = { ...c[i], ...patch }; onChange(c); };
+  const rem = (i: number) => { const c = options.slice(); c.splice(i, 1); onChange(c); };
+  const add = () => {
+    const hasMain = options.some(o => o.isMainTicket);
+    onChange([...options, { name: "", price: "", isMainTicket: !hasMain, stockLimit: "0", earlyBirdTiers: [], variants: [] }]);
+  };
+
+  return (
+    <div className="space-y-2">
+      {options.map((opt, i) => {
+        const priceMissing = required && opt.price.trim() === "";
+        return (
+          <div key={i} className="border rounded-lg p-3 bg-white space-y-2">
+            <div className="flex flex-wrap items-end gap-2">
+              <div className="flex-1 min-w-36">
+                <label className="block text-[10px] text-gray-500 mb-0.5">Option name</label>
+                <input className="border rounded px-2 py-1.5 text-sm w-full" placeholder="e.g. Ticket, Hoodie, Meal"
+                  value={opt.name} onChange={e => upd(i, { name: e.target.value })} />
+              </div>
+              <div>
+                <label className="block text-[10px] text-gray-500 mb-0.5">Base price (R) {required && <span className="text-red-500">*</span>}</label>
+                <input type="number" step="1" min="0" required={required}
+                  className={`border rounded px-2 py-1.5 text-sm w-28 ${priceMissing ? "border-red-300 bg-red-50" : ""}`}
+                  value={opt.price} onChange={e => upd(i, { price: e.target.value })} />
+              </div>
+              <div>
+                <label className="block text-[10px] text-gray-500 mb-0.5">Stock (0=∞)</label>
+                <input type="number" step="1" min="0" className="border rounded px-2 py-1.5 text-sm w-24"
+                  value={opt.stockLimit} onChange={e => upd(i, { stockLimit: e.target.value })} />
+              </div>
+              <div className="flex items-center gap-3 pb-1">
+                <label className="text-xs flex items-center gap-1 cursor-pointer whitespace-nowrap">
+                  <input type="checkbox" checked={opt.isMainTicket} onChange={e => upd(i, { isMainTicket: e.target.checked })} /> Main ticket
+                </label>
+                {options.length > 1 && (
+                  <button type="button" className="text-xs px-2 py-1 rounded bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 whitespace-nowrap" onClick={() => rem(i)}>Remove</button>
+                )}
+              </div>
+            </div>
+            {priceMissing && <p className="text-[10px] text-red-500">Price is required — enter 0 for a free option.</p>}
+          </div>
+        );
+      })}
+      <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={add}>+ Add option</button>
+    </div>
+  );
+}
+
+/** Substep 1 — variants per option */
+function VariantsEditor({ options, onChange }: { options: OptionDraft[]; onChange: (o: OptionDraft[]) => void }) {
+  const updVariants = (optIdx: number, variants: Variant[]) => {
+    const c = options.slice(); c[optIdx] = { ...c[optIdx], variants }; onChange(c);
+  };
+
+  if (options.length === 0) return <p className="text-sm text-gray-500">Add options first.</p>;
+
+  return (
+    <div className="space-y-4">
+      {options.map((opt, optIdx) => {
+        const variants = opt.variants;
+        const addVariant = () => updVariants(optIdx, [...variants, { name: "", price: "", stockLimit: "0", earlyBirdTiers: [] }]);
+        const updVariant = (vi: number, patch: Partial<Variant>) => {
+          const c = variants.slice(); c[vi] = { ...c[vi], ...patch }; updVariants(optIdx, c);
+        };
+        const remVariant = (vi: number) => {
+          const c = variants.slice(); c.splice(vi, 1); updVariants(optIdx, c);
+        };
+        return (
+          <div key={optIdx} className="border rounded-lg overflow-hidden">
+            <div className="px-3 py-2 bg-gray-50 border-b text-sm font-medium text-gray-700">{opt.name || <span className="italic text-gray-400">Unnamed option</span>}</div>
+            <div className="p-3 space-y-2">
+              {variants.length === 0
+                ? <p className="text-xs text-gray-400 italic">No variants — uses base price (R{opt.price || "0"}).</p>
+                : variants.map((v, vi) => (
+                  <div key={vi} className="flex flex-wrap items-end gap-2 bg-white border rounded p-2">
+                    <div className="flex-1 min-w-28">
+                      <label className="block text-[10px] text-gray-500 mb-0.5">Variant name</label>
+                      <input className="border rounded px-2 py-1 text-xs w-full" placeholder="e.g. Adult, Child, Large"
+                        value={v.name} onChange={e => updVariant(vi, { name: e.target.value })} />
+                    </div>
+                    <div>
+                      <label className="block text-[10px] text-gray-500 mb-0.5">Price (blank=base)</label>
+                      <input type="number" step="1" min="0" className="border rounded px-2 py-1 text-xs w-24" placeholder="(optional)"
+                        value={v.price} onChange={e => updVariant(vi, { price: e.target.value })} />
+                    </div>
+                    <div>
+                      <label className="block text-[10px] text-gray-500 mb-0.5">Stock (0=∞)</label>
+                      <input type="number" step="1" min="0" className="border rounded px-2 py-1 text-xs w-20"
+                        value={v.stockLimit} onChange={e => updVariant(vi, { stockLimit: e.target.value })} />
+                    </div>
+                    <button type="button" className="text-xs px-2 py-1 rounded bg-red-50 text-red-700 border border-red-200 hover:bg-red-100 self-end" onClick={() => remVariant(vi)}>✕</button>
+                  </div>
+                ))}
+              <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={addVariant}>+ Add variant</button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Single tier row editor */
+function TierRow({ tier, onChange, onRemove }: { tier: Tier; onChange: (t: Tier) => void; onRemove: () => void }) {
+  return (
+    <div className="flex flex-wrap items-end gap-2 bg-white border rounded p-2">
+      <div>
+        <div className="text-[10px] text-gray-500 mb-0.5">Deadline</div>
+        <input type="datetime-local" min={DT_MIN} max={DT_MAX} className="border rounded px-2 py-1 text-xs"
+          value={tier.deadline} onChange={e => onChange({ ...tier, deadline: e.target.value })} />
+      </div>
+      <div>
+        <div className="text-[10px] text-gray-500 mb-0.5">Price (R)</div>
+        <input type="number" step="1" min="0" className="border rounded px-2 py-1 text-xs w-24"
+          value={tier.price} onChange={e => onChange({ ...tier, price: e.target.value })} />
+      </div>
+      <div>
+        <div className="text-[10px] text-gray-500 mb-0.5">Stock (0=∞)</div>
+        <input type="number" step="1" min="0" className="border rounded px-2 py-1 text-xs w-20"
+          value={tier.stockLimit} onChange={e => onChange({ ...tier, stockLimit: e.target.value })} />
+      </div>
+      <button type="button" className="text-xs px-2 py-1 rounded bg-red-50 text-red-700 border border-red-200 self-end" onClick={onRemove}>✕</button>
+    </div>
+  );
+}
+
+/** Substep 2 — early birds per variant (or per option when no variants) */
+function EarlyBirdsEditor({ options, onChange }: { options: OptionDraft[]; onChange: (o: OptionDraft[]) => void }) {
+  if (options.length === 0) return <p className="text-sm text-gray-500">Add options first.</p>;
+
+  return (
+    <div className="space-y-4">
+      {options.map((opt, optIdx) => {
+        const hasVariants = opt.variants.length > 0;
+
+        if (!hasVariants) {
+          // Option-level tiers
+          const updTiers = (tiers: Tier[]) => {
+            const c = options.slice(); c[optIdx] = { ...c[optIdx], earlyBirdTiers: tiers }; onChange(c);
+          };
+          const addTier = () => updTiers([...opt.earlyBirdTiers, { deadline: "", price: "", stockLimit: "0" }]);
+          return (
+            <div key={optIdx} className="border rounded-lg overflow-hidden">
+              <div className="px-3 py-2 bg-gray-50 border-b text-sm font-medium text-gray-700">
+                {opt.name || <span className="italic text-gray-400">Unnamed option</span>}
+                <span className="ml-2 text-[10px] text-gray-400">base R{opt.price || "0"}</span>
+              </div>
+              <div className="p-3 space-y-2">
+                {opt.earlyBirdTiers.length === 0 && <p className="text-xs text-gray-400 italic">No early-bird tiers.</p>}
+                {opt.earlyBirdTiers.map((t, ti) => (
+                  <TierRow key={ti} tier={t}
+                    onChange={updated => { const c = opt.earlyBirdTiers.slice(); c[ti] = updated; updTiers(c); }}
+                    onRemove={() => { const c = opt.earlyBirdTiers.slice(); c.splice(ti, 1); updTiers(c); }} />
+                ))}
+                <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={addTier}>+ Add tier</button>
+              </div>
+            </div>
+          );
+        }
+
+        // Per-variant tiers
+        return (
+          <div key={optIdx} className="border rounded-lg overflow-hidden">
+            <div className="px-3 py-2 bg-gray-50 border-b text-sm font-medium text-gray-700">
+              {opt.name || <span className="italic text-gray-400">Unnamed option</span>}
+            </div>
+            <div className="divide-y">
+              {opt.variants.map((v, vi) => {
+                const basePrice = v.price !== "" ? v.price : opt.price;
+                const updVTiers = (tiers: Tier[]) => {
+                  const co = options.slice();
+                  const cv = co[optIdx].variants.slice();
+                  cv[vi] = { ...cv[vi], earlyBirdTiers: tiers };
+                  co[optIdx] = { ...co[optIdx], variants: cv };
+                  onChange(co);
+                };
+                const addTier = () => updVTiers([...v.earlyBirdTiers, { deadline: "", price: "", stockLimit: "0" }]);
+                return (
+                  <div key={vi} className="p-3 space-y-2">
+                    <div className="text-xs font-medium text-gray-600">
+                      {v.name || <span className="italic text-gray-400">Unnamed variant</span>}
+                      <span className="ml-2 text-gray-400">base R{basePrice || "0"}</span>
+                    </div>
+                    {v.earlyBirdTiers.length === 0 && <p className="text-[10px] text-gray-400 italic">No tiers for this variant.</p>}
+                    {v.earlyBirdTiers.map((t, ti) => (
+                      <TierRow key={ti} tier={t}
+                        onChange={updated => { const c = v.earlyBirdTiers.slice(); c[ti] = updated; updVTiers(c); }}
+                        onRemove={() => { const c = v.earlyBirdTiers.slice(); c.splice(ti, 1); updVTiers(c); }} />
+                    ))}
+                    <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={addTier}>+ Add tier</button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Sections editors ─────────────────────────────────────────────────────────
+
+/** Create-mode: draft sections using option indices */
+function SectionsDraftEditor({ sections, options, onChange }: {
+  sections: SectionDraft[];
+  options: OptionDraft[];
+  onChange: (s: SectionDraft[]) => void;
+}) {
+  const [newName, setNewName] = useState("");
+  const [newIndices, setNewIndices] = useState<number[]>([]);
+
+  const create = () => {
+    if (!newName.trim()) return;
+    onChange([...sections, { name: newName.trim(), optionIndices: newIndices }]);
+    setNewName(""); setNewIndices([]);
+  };
+  const del = (i: number) => { const c = sections.slice(); c.splice(i, 1); onChange(c); };
+
+  return (
+    <div className="space-y-3">
+      {sections.length === 0 && <p className="text-xs text-gray-500">No sections yet.</p>}
+      {sections.map((sec, i) => (
+        <div key={i} className="border rounded p-3 bg-white flex items-start justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium">{sec.name}</div>
+            <div className="text-xs text-gray-500 mt-0.5">
+              {sec.optionIndices.length === 0
+                ? "All options"
+                : sec.optionIndices.map(idx => options[idx]?.name || `Option ${idx + 1}`).join(", ")}
+            </div>
+          </div>
+          <button type="button" className="text-xs px-2 py-1 rounded bg-red-50 text-red-700 border border-red-200 shrink-0" onClick={() => del(i)}>Delete</button>
+        </div>
+      ))}
+      <div className="border rounded p-3 bg-gray-50">
+        <div className="text-xs font-medium mb-2">Create section</div>
+        <input className="border rounded px-2 py-1 text-sm w-full mb-2" placeholder="Section name"
+          value={newName} onChange={e => setNewName(e.target.value)} />
+        {options.length > 0 && (
+          <>
+            <div className="text-xs text-gray-600 mb-1">Options in this section:</div>
+            <div className="flex flex-wrap gap-2 mb-2">
+              {options.map((opt, idx) => (
+                <label key={idx} className="text-xs flex items-center gap-1 cursor-pointer">
+                  <input type="checkbox" checked={newIndices.includes(idx)}
+                    onChange={e => setNewIndices(e.target.checked ? [...newIndices, idx] : newIndices.filter(x => x !== idx))} />
+                  {opt.name || `Option ${idx + 1}`}
+                </label>
+              ))}
+            </div>
+          </>
+        )}
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={create}>Create section</button>
+      </div>
+    </div>
+  );
+}
+
+/** Edit-mode: live sections manager (DB-backed) */
+function SectionsManager({ eventId }: { eventId: string }) {
+  const { token } = useAuth();
+  const [sections, setSections] = useState<any[]>([]);
+  const [eventOptions, setEventOptions] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newOptionIds, setNewOptionIds] = useState<string[]>([]);
+
+  const load = async () => {
+    setLoading(true);
+    try {
+      const [secList, evFull] = await Promise.all([
+        apiFetch<any[]>("/api/sections", { authToken: token || undefined }),
+        apiFetch<any>(`/api/events/${eventId}`)
+      ]);
+      setSections((secList || []).filter(s => s.eventId === eventId));
+      setEventOptions(evFull?.eventOptions || []);
+    } catch {} finally { setLoading(false); }
+  };
+  useEffect(() => { if (eventId) load(); }, [eventId]);
+
+  const create = async () => {
+    if (!newName.trim() || !token) return;
+    await apiFetch("/api/sections", { method: "POST", authToken: token, body: { eventId, name: newName.trim(), allowedOptionIds: newOptionIds } });
+    setNewName(""); setNewOptionIds([]); load();
+  };
+  const del = async (id: string) => {
+    if (!token) return;
+    await apiFetch(`/api/sections/${id}`, { method: "DELETE", authToken: token });
+    load();
+  };
+  const update = async (id: string, name: string, optionIds: string[]) => {
+    if (!token) return;
+    await apiFetch(`/api/sections/${id}`, { method: "PUT", authToken: token, body: { name, allowedOptionIds: optionIds } });
+    load();
+  };
+
+  if (loading) return <div className="text-xs text-gray-500">Loading sections…</div>;
+
+  return (
+    <div className="space-y-3">
+      {sections.length === 0 && <p className="text-xs text-gray-500">No sections yet.</p>}
+      {sections.map(sec => (
+        <SectionRow key={sec.id} sec={sec} options={eventOptions} onDelete={() => del(sec.id)} onUpdate={update} />
+      ))}
+      <div className="border rounded p-3 bg-gray-50">
+        <div className="text-xs font-medium mb-2">Create section</div>
+        <input className="border rounded px-2 py-1 text-sm w-full mb-2" placeholder="Section name" value={newName} onChange={e => setNewName(e.target.value)} />
+        <div className="text-xs text-gray-600 mb-1">Options in this section:</div>
+        <div className="flex flex-wrap gap-2 mb-2">
+          {eventOptions.map(opt => (
+            <label key={opt.id} className="text-xs flex items-center gap-1 cursor-pointer">
+              <input type="checkbox" checked={newOptionIds.includes(opt.id)}
+                onChange={e => setNewOptionIds(e.target.checked ? [...newOptionIds, opt.id] : newOptionIds.filter(id => id !== opt.id))} />
+              {opt.name}
+            </label>
+          ))}
+        </div>
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={create}>Create section</button>
+      </div>
+    </div>
+  );
+}
+
+function SectionRow({ sec, options, onDelete, onUpdate }: any) {
+  const [name, setName] = useState(sec.name || "");
+  const [optIds, setOptIds] = useState<string[]>((sec.allowedOptions || []).map((o: any) => o.eventOptionId));
+  return (
+    <div className="border rounded p-3 bg-white">
+      <input className="border rounded px-2 py-1 text-sm w-full mb-2" value={name} onChange={e => setName(e.target.value)} />
+      <div className="flex flex-wrap gap-2 mb-2">
+        {options.map((opt: any) => (
+          <label key={opt.id} className="text-xs flex items-center gap-1 cursor-pointer">
+            <input type="checkbox" checked={optIds.includes(opt.id)}
+              onChange={e => setOptIds(e.target.checked ? [...optIds, opt.id] : optIds.filter(id => id !== opt.id))} />
+            {opt.name}
+          </label>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        <button type="button" className="text-xs px-2 py-1 rounded bg-blue-600 text-white" onClick={() => onUpdate(sec.id, name, optIds)}>Save</button>
+        <button type="button" className="text-xs px-2 py-1 rounded bg-red-50 text-red-700 border border-red-200" onClick={onDelete}>Delete</button>
+      </div>
+    </div>
+  );
+}
+
+// ─── Attachments ─────────────────────────────────────────────────────────────
+
+function AttachmentsManager({ eventId }: { eventId: string }) {
+  const { token } = useAuth();
+  const [items, setItems] = useState<any[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  const load = async () => {
+    const res = await apiFetch<any[]>(`/api/events/${eventId}/attachments`);
+    setItems(Array.isArray(res) ? res : []);
+  };
+  useEffect(() => { load(); }, [eventId]);
+
+  const upload: React.ChangeEventHandler<HTMLInputElement> = async e => {
+    const file = e.target.files?.[0];
+    if (!file || !token) return;
+    setUploading(true);
+    try {
+      const fd = new FormData();
+      fd.append("file", file);
+      await apiFetch(`/api/events/${eventId}/attachments`, { method: "POST", body: fd, authToken: token });
+      await load();
+    } finally { setUploading(false); if (ref.current) ref.current.value = ""; }
+  };
+
+  const del = async (id: string) => {
+    if (!token || !confirm("Delete this attachment?")) return;
+    await apiFetch(`/api/events/${eventId}/attachments/${id}`, { method: "DELETE", authToken: token });
+    await load();
+  };
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <div className="text-sm font-medium">Attachments</div>
+        <div>
+          <input ref={ref} type="file" className="hidden" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip" onChange={upload} />
+          <button type="button" onClick={() => ref.current?.click()} disabled={uploading} className="text-xs px-2 py-1 rounded border bg-white hover:bg-gray-50">
+            {uploading ? "Uploading…" : "Upload file"}
+          </button>
+        </div>
+      </div>
+      {items.length === 0
+        ? <p className="text-xs text-gray-500">No attachments.</p>
+        : (
+          <ul className="space-y-1">
+            {items.map(it => (
+              <li key={it.id} className="flex items-center justify-between text-xs">
+                <a href={it.url} target="_blank" rel="noreferrer" className="text-blue-600 hover:underline truncate max-w-xs">{it.originalName}</a>
+                <button type="button" className="text-red-600 hover:underline ml-2" onClick={() => del(it.id)}>Delete</button>
+              </li>
+            ))}
+          </ul>
+        )}
+    </div>
+  );
+}
+
+// ─── Notification recipients ───────────────────────────────────────────────
+
+type NotifyUser = { id: string; name: string; email: string };
+
+/** Tracks an anchor element's viewport rect while `active`, updating on any scroll
+ *  (capture-phase, so it catches scrolling inside the modal's clipped containers too)
+ *  or resize. Used to position the search-results dropdown outside the modal's overflow clip. */
+function useAnchorRect(anchorRef: React.RefObject<HTMLElement | null>, active: boolean) {
+  const [rect, setRect] = useState<{ top: number; left: number; width: number; bottom: number } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!active) { setRect(null); return; }
+    const update = () => {
+      const el = anchorRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setRect({ top: r.top, left: r.left, width: r.width, bottom: r.bottom });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [anchorRef, active]);
+
+  return rect;
+}
+
+/** Presentational picker — pure controlled component, no API persistence of its own.
+ *  Used directly for create-mode staging, and wrapped by NotifyRecipientsManager for edit mode. */
+function NotifyRecipientsPicker({ selected, onChange, disabled }: { selected: NotifyUser[]; onChange: (next: NotifyUser[]) => void; disabled?: boolean }) {
+  const { token } = useAuth();
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState<NotifyUser[]>([]);
+  const [searching, setSearching] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
+
+  const visibleResults = results.filter(u => !selected.some(s => s.id === u.id));
+  const dropdownOpen = visibleResults.length > 0;
+  const rect = useAnchorRect(anchorRef, dropdownOpen);
+
+  useEffect(() => {
+    if (!search.trim()) { setResults([]); return; }
+    let cancelled = false;
+    setSearching(true);
+    const t = setTimeout(async () => {
+      try {
+        const res = await apiFetch<any>(`/api/users?search=${encodeURIComponent(search.trim())}&limit=10`, { authToken: token || undefined });
+        if (!cancelled) setResults(Array.isArray(res?.data) ? res.data : []);
+      } catch {
+        if (!cancelled) setResults([]);
+      } finally {
+        if (!cancelled) setSearching(false);
+      }
+    }, 300);
+    return () => { cancelled = true; clearTimeout(t); };
+  }, [search, token]);
+
+  const add = (u: NotifyUser) => {
+    if (selected.some(s => s.id === u.id)) return;
+    onChange([...selected, u]);
+    setSearch(""); setResults([]);
+  };
+  const remove = (id: string) => onChange(selected.filter(s => s.id !== id));
+
+  return (
+    <div className="space-y-3">
+      {selected.length === 0 ? (
+        <p className="text-xs text-gray-400 italic">No recipients selected — falling back to the event creator.</p>
+      ) : (
+        <ul className="space-y-1">
+          {selected.map(u => (
+            <li key={u.id} className="flex items-center justify-between text-sm bg-white border rounded px-3 py-1.5">
+              <span>{u.name} <span className="text-xs text-gray-400">{u.email}</span></span>
+              <button type="button" className="text-red-600 hover:underline text-xs" onClick={() => remove(u.id)} disabled={disabled}>Remove</button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div ref={anchorRef}>
+        <input
+          className="border rounded px-3 py-2 text-sm w-full"
+          placeholder="Search staff by name or email…"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          disabled={disabled}
+        />
+        {searching && <div className="text-xs text-gray-400 mt-1">Searching…</div>}
+      </div>
+      {dropdownOpen && rect && typeof document !== "undefined" && createPortal(
+        <ul
+          style={{
+            position: "fixed",
+            top: rect.bottom + 4,
+            left: rect.left,
+            width: rect.width,
+            maxHeight: Math.max(160, Math.min(360, window.innerHeight - rect.bottom - 16)),
+            zIndex: 9999,
+          }}
+          className="border rounded bg-white shadow-lg overflow-y-auto"
+        >
+          {visibleResults.map(u => (
+            <li key={u.id} className="px-3 py-1.5 text-sm hover:bg-indigo-50 cursor-pointer" onClick={() => add(u)}>
+              {u.name} <span className="text-xs text-gray-400">{u.email}</span>
+            </li>
+          ))}
+        </ul>,
+        document.body
+      )}
+    </div>
+  );
+}
+
+/** Edit-mode manager — persists each change via PUT. Uses `initialRecipients` (already
+ *  loaded by the parent's GET /api/events/:id call) when available so opening this step
+ *  is instant; only falls back to its own (lightweight) GET when that wasn't provided. */
+function NotifyRecipientsManager({ eventId, creator, initialRecipients }: { eventId: string; creator?: NotifyUser | null; initialRecipients?: NotifyUser[] | null }) {
+  const { token } = useAuth();
+  const hasInitial = Array.isArray(initialRecipients);
+  const [selected, setSelected] = useState<NotifyUser[]>(initialRecipients || []);
+  const [loading, setLoading] = useState(!hasInitial);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (hasInitial) return; // already have the data — skip the network round trip entirely
+    let cancelled = false;
+    (async () => {
+      setLoading(true);
+      try {
+        const res = await apiFetch<any>(`/api/events/${eventId}/notify-recipients`, { authToken: token || undefined });
+        if (!cancelled) setSelected(Array.isArray(res) ? res : []);
+      } catch (e: any) {
+        if (!cancelled) setError(e?.message || "Failed to load notification recipients");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId]);
+
+  const persist = async (next: NotifyUser[]) => {
+    const prev = selected;
+    setSelected(next);
+    setSaving(true);
+    setError(null);
+    try {
+      await apiFetch(`/api/events/${eventId}/notify-recipients`, {
+        method: "PUT", authToken: token || undefined,
+        body: { userIds: next.map(u => u.id) },
+      });
+    } catch (e: any) {
+      setSelected(prev);
+      setError(e?.message || "Failed to save notification recipients");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <div className="text-xs text-gray-500">Loading…</div>;
+
+  return (
+    <div className="space-y-3">
+      <p className="text-xs text-gray-500">
+        Choose who receives new registration, payment, and daily summary emails for this event.
+        Leave empty to send them to the event creator{creator ? <> (<strong>{creator.name}</strong>, {creator.email})</> : null} instead.
+      </p>
+      {error && <div className="p-2 border rounded bg-red-50 text-red-700 text-xs">{error}</div>}
+      <NotifyRecipientsPicker selected={selected} onChange={persist} disabled={saving} />
+    </div>
+  );
+}
+
+// ─── steps ───────────────────────────────────────────────────────────────────
+
+const STEPS = ["Basic Details", "Items & Pricing", "Sections", "Form", "Visibility", "Notifications", "Attachments"] as const;
+type StepIdx = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+const PRICING_SUBSTEPS = ["Options", "Variants", "Early Birds"] as const;
+type PricingSubstep = 0 | 1 | 2;
+
+interface EventDraft {
+  title: string; description: string; startDate: string; endDate: string;
+  registrationDeadline: string; goLiveAt: string; price: string; picture: string;
+  redirectUrl: string; isActive: boolean; isHidden: boolean; requiresAuth: boolean;
+}
+
+const blankDraft = (): EventDraft => ({
+  title: "", description: "", startDate: "", endDate: "",
+  registrationDeadline: "", goLiveAt: "", price: "", picture: "",
+  redirectUrl: "", isActive: true, isHidden: false, requiresAuth: true,
+});
+
+const blankOptions = (): OptionDraft[] => [
+  { name: "Ticket", price: "", isMainTicket: true, stockLimit: "0", earlyBirdTiers: [], variants: [] }
+];
+
+// ─── EventModal ───────────────────────────────────────────────────────────────
+
+interface EventModalProps {
+  mode: "create" | "edit";
+  event?: any;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+function EventModal({ mode, event: ev, onClose, onSuccess }: EventModalProps) {
+  const { token, user } = useAuth();
+  const isAdmin = user?.role === "admin";
+  const [step, setStep] = useState<StepIdx>(0);
+  const [pricingSubstep, setPricingSubstep] = useState<PricingSubstep>(0);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // ── event draft ──
+  const [draft, setDraft] = useState<EventDraft>(() => ev ? {
+    title: ev.title || "", description: ev.description || "",
+    startDate: toLocalDT(ev.startDate), endDate: toLocalDT(ev.endDate),
+    registrationDeadline: toLocalDT(ev.registrationDeadline), goLiveAt: toLocalDT(ev.goLiveAt),
+    price: String(ev.price ?? ""), picture: ev.picture || "", redirectUrl: ev.redirectUrl || "",
+    isActive: ev.isActive !== false, isHidden: !!ev.isHidden, requiresAuth: ev.requiresAuth !== false,
+  } : blankDraft());
+
+  // ── options (with per-variant tiers) ──
+  const [options, setOptions] = useState<OptionDraft[]>(() => {
+    if (!ev?.eventOptions?.length) return blankOptions();
+    return ev.eventOptions.map((o: any) => {
+      const allTiers: any[] = o.earlyBirdTiers || [];
+      return {
+        id: o.id,
+        name: o.name,
+        price: String(o.price ?? ""),
+        isMainTicket: !!o.isMainTicket,
+        stockLimit: String(o.stockLimit ?? "0"),
+        // Option-level tiers only (no variantId)
+        earlyBirdTiers: allTiers
+          .filter((t: any) => !t.variantId)
+          .map((t: any) => ({ id: t.id, deadline: toLocalDT(t.deadline), price: String(t.price ?? ""), stockLimit: String(t.stockLimit ?? "0") })),
+        variants: (o.variants || []).map((v: any) => ({
+          id: v.id, name: v.name,
+          price: v.price !== null && v.price !== undefined ? String(v.price) : "",
+          stockLimit: String(v.stockLimit ?? "0"),
+          // Variant-level tiers — filter by variantId
+          earlyBirdTiers: allTiers
+            .filter((t: any) => t.variantId === v.id)
+            .map((t: any) => ({ id: t.id, deadline: toLocalDT(t.deadline), price: String(t.price ?? ""), stockLimit: String(t.stockLimit ?? "0") })),
+        })),
+      };
+    });
+  });
+
+  // ── sections (staged for create mode) ──
+  const [sectionDrafts, setSectionDrafts] = useState<SectionDraft[]>([]);
+
+  // ── attachments (staged for create mode; uploaded after event is created) ──
+  const [stagedFiles, setStagedFiles] = useState<File[]>([]);
+
+  // ── notify recipients (staged for create mode; saved after event is created) ──
+  const [notifyRecipientDrafts, setNotifyRecipientDrafts] = useState<NotifyUser[]>([]);
+
+  // ── form ──
+  const [formDef, setFormDef] = useState<EventFormDef>({ isRequired: false, fields: [] });
+  const formLoadedRef = useRef(false);
+  useEffect(() => {
+    if (mode !== "edit" || !ev?.id || formLoadedRef.current) return;
+    apiFetch<any>(`/api/events/${ev.id}`).then(full => {
+      const f = full?.form;
+      if (f) setFormDef({ isRequired: !!f.isRequired, fields: (f.fields || []).map((x: any) => ({ id: x.id, type: x.type, label: x.label, isRequired: !!x.isRequired, helpText: x.helpText || "" })) });
+    }).catch(() => {}).finally(() => { formLoadedRef.current = true; });
+  }, [mode, ev?.id]);
+
+  const upd = (patch: Partial<EventDraft>) => setDraft(d => ({ ...d, ...patch }));
+
+  // ── auto-fill first option's price from the event base price (create mode only, until the
+  // user directly edits that option's price — then it becomes independent) ──
+  const [mainPriceTouched, setMainPriceTouched] = useState(false);
+  useEffect(() => {
+    if (mode !== "create" || mainPriceTouched) return;
+    setOptions(prev => {
+      if (prev.length === 0 || prev[0].price === draft.price) return prev;
+      const next = prev.slice();
+      next[0] = { ...next[0], price: draft.price };
+      return next;
+    });
+  }, [draft.price, mode, mainPriceTouched]);
+
+  const handleOptionsChange = (next: OptionDraft[]) => {
+    if (mode === "create" && next[0] && options[0] && next[0].price !== options[0].price) {
+      setMainPriceTouched(true);
+    }
+    setOptions(next);
+  };
+
+  const isPriceInvalid = (p: string) => p.trim() === "" || isNaN(parseFloat(p)) || parseFloat(p) < 0;
+
+  // Closed (cashed-up) events reject every mutating edit endpoint server-side — show that
+  // upfront and disable Save rather than letting staff fill out the whole form only to have
+  // it rejected on submit.
+  const isClosed = mode === "edit" && ev?.cashupStatus === "closed";
+
+  // ── save helpers ──
+
+  const saveOptions = async (eventId: string) => {
+    if (mode === "edit") {
+      for (const opt of options) {
+        // Build flat tier array: option-level + all variant tiers
+        const allTiers: any[] = [
+          ...opt.earlyBirdTiers
+            .filter(t => t.deadline && t.price !== "")
+            .map((t, i) => ({ id: t.id, deadline: new Date(t.deadline).toISOString(), price: parseFloat(t.price), stockLimit: parseInt(t.stockLimit || "0"), order: i, variantId: null })),
+        ];
+
+        const variantsPayload = opt.variants.map((v, vi) => ({
+          id: v.id, name: v.name,
+          price: v.price !== "" ? parseFloat(v.price) : null,
+          stockLimit: parseInt(v.stockLimit || "0"), order: vi,
+        }));
+
+        if (opt.id) {
+          // Update option + variants first to get/confirm variant IDs
+          const updated: any = await apiFetch(`/api/events/options/${opt.id}`, {
+            method: "PUT", authToken: token || undefined,
+            body: { name: opt.name, price: parseFloat(opt.price || "0"), isMainTicket: opt.isMainTicket, stockLimit: parseInt(opt.stockLimit || "0"), variants: variantsPayload }
+          });
+
+          // Build variant tiers with confirmed IDs from response
+          const serverVariants: any[] = updated?.variants || [];
+          for (let vi = 0; vi < opt.variants.length; vi++) {
+            const v = opt.variants[vi];
+            const serverVariant = serverVariants[vi] || serverVariants.find((sv: any) => sv.name === v.name);
+            if (!serverVariant) continue;
+            for (let ti = 0; ti < v.earlyBirdTiers.length; ti++) {
+              const t = v.earlyBirdTiers[ti];
+              if (!t.deadline || t.price === "") continue;
+              allTiers.push({ deadline: new Date(t.deadline).toISOString(), price: parseFloat(t.price), stockLimit: parseInt(t.stockLimit || "0"), order: ti, variantId: serverVariant.id });
+            }
+          }
+
+          if (allTiers.length > 0 || opt.earlyBirdTiers.length > 0 || opt.variants.some(v => v.earlyBirdTiers.length > 0)) {
+            await apiFetch(`/api/events/options/${opt.id}`, {
+              method: "PUT", authToken: token || undefined,
+              body: { earlyBirdTiers: allTiers }
+            });
+          }
+
+          // Handle form save (edit only)
+          await apiFetch(`/api/events/${eventId}`, {
+            method: "PUT", authToken: token || undefined,
+            body: { form: { isRequired: !!formDef.isRequired, fields: formDef.fields.filter(f => f.label?.trim()).map((f, i) => ({ type: f.type, label: f.label, isRequired: !!f.isRequired, order: i, helpText: f.helpText || null })) } }
+          });
+        } else {
+          // New option added during edit
+          const created: any = await apiFetch(`/api/events/${eventId}/options`, {
+            method: "POST", authToken: token || undefined,
+            body: { name: opt.name, price: parseFloat(opt.price || "0"), isMainTicket: opt.isMainTicket, stockLimit: parseInt(opt.stockLimit || "0") }
+          });
+          if (created?.id) {
+            const updated: any = await apiFetch(`/api/events/options/${created.id}`, {
+              method: "PUT", authToken: token || undefined,
+              body: { variants: variantsPayload }
+            });
+            const serverVariants: any[] = updated?.variants || [];
+            for (let vi = 0; vi < opt.variants.length; vi++) {
+              const v = opt.variants[vi];
+              const sv = serverVariants[vi] || serverVariants.find((x: any) => x.name === v.name);
+              if (!sv) continue;
+              for (let ti = 0; ti < v.earlyBirdTiers.length; ti++) {
+                const t = v.earlyBirdTiers[ti];
+                if (!t.deadline || t.price === "") continue;
+                allTiers.push({ deadline: new Date(t.deadline).toISOString(), price: parseFloat(t.price), stockLimit: parseInt(t.stockLimit || "0"), order: ti, variantId: sv.id });
+              }
+            }
+            if (allTiers.length > 0) {
+              await apiFetch(`/api/events/options/${created.id}`, {
+                method: "PUT", authToken: token || undefined, body: { earlyBirdTiers: allTiers }
+              });
+            }
+          }
+        }
+      }
+    } else {
+      // Create mode — backend auto-creates a "Main Ticket" option; replace/create from draft
+      let createdEvent: any = null;
+      try { createdEvent = await apiFetch(`/api/events/${eventId}`); } catch {}
+      const existingMain = (createdEvent?.eventOptions || []).find((o: any) => !!o.isMainTicket);
+      const uiMainIdx = options.findIndex(o => o.isMainTicket);
+
+      for (let i = 0; i < options.length; i++) {
+        const opt = options[i];
+        const variantsPayload = opt.variants.map((v, vi) => ({
+          name: v.name, price: v.price !== "" ? parseFloat(v.price) : null,
+          stockLimit: parseInt(v.stockLimit || "0"), order: vi,
+        }));
+
+        let optId: string;
+
+        if (i === uiMainIdx && existingMain) {
+          // Update the auto-created main ticket
+          await apiFetch(`/api/events/options/${existingMain.id}`, {
+            method: "PUT", authToken: token || undefined,
+            body: { name: opt.name, price: parseFloat(opt.price || "0"), isMainTicket: true, stockLimit: parseInt(opt.stockLimit || "0") }
+          });
+          optId = existingMain.id;
+        } else {
+          const created: any = await apiFetch(`/api/events/${eventId}/options`, {
+            method: "POST", authToken: token || undefined,
+            body: { name: opt.name, price: parseFloat(opt.price || "0"), isMainTicket: opt.isMainTicket, stockLimit: parseInt(opt.stockLimit || "0") }
+          });
+          optId = created?.id;
+        }
+
+        if (!optId) continue;
+
+        // Save variants, then build tiers with resolved IDs
+        const allTiers: any[] = opt.earlyBirdTiers
+          .filter(t => t.deadline && t.price !== "")
+          .map((t, ti) => ({ deadline: new Date(t.deadline).toISOString(), price: parseFloat(t.price), stockLimit: parseInt(t.stockLimit || "0"), order: ti, variantId: null }));
+
+        if (variantsPayload.length > 0 || opt.variants.some(v => v.earlyBirdTiers.length > 0)) {
+          const updated: any = await apiFetch(`/api/events/options/${optId}`, {
+            method: "PUT", authToken: token || undefined, body: { variants: variantsPayload }
+          });
+          const serverVariants: any[] = updated?.variants || [];
+          for (let vi = 0; vi < opt.variants.length; vi++) {
+            const v = opt.variants[vi];
+            const sv = serverVariants[vi] || serverVariants.find((x: any) => x.name === v.name);
+            if (!sv) continue;
+            for (let ti = 0; ti < v.earlyBirdTiers.length; ti++) {
+              const t = v.earlyBirdTiers[ti];
+              if (!t.deadline || t.price === "") continue;
+              allTiers.push({ deadline: new Date(t.deadline).toISOString(), price: parseFloat(t.price), stockLimit: parseInt(t.stockLimit || "0"), order: ti, variantId: sv.id });
+            }
+          }
+        }
+
+        if (allTiers.length > 0) {
+          await apiFetch(`/api/events/options/${optId}`, {
+            method: "PUT", authToken: token || undefined, body: { earlyBirdTiers: allTiers }
+          });
+        }
+      }
+    }
+  };
+
+  const saveStagedSections = async (eventId: string, createdOptions: any[]) => {
+    for (const sec of sectionDrafts) {
+      if (!sec.name.trim()) continue;
+      const optionIds = sec.optionIndices
+        .map(idx => createdOptions[idx]?.id)
+        .filter(Boolean);
+      try {
+        await apiFetch("/api/sections", {
+          method: "POST", authToken: token || undefined,
+          body: { eventId, name: sec.name.trim(), allowedOptionIds: optionIds }
+        });
+      } catch {}
+    }
+  };
+
+  const handleSave = async () => {
+    if (!draft.title.trim()) { setError("Title is required"); setStep(0); return; }
+    if (!draft.startDate || !draft.endDate) { setError("Start and end dates are required"); setStep(0); return; }
+    if (mode === "create") {
+      if (isPriceInvalid(draft.price)) { setError("Base price is required (enter 0 for a free event)"); setStep(0); return; }
+      if (options.some(o => isPriceInvalid(o.price))) { setError("Every option needs a price (enter 0 for a free option)"); setStep(1); setPricingSubstep(0); return; }
+    }
+    setSaving(true); setError(null);
+    try {
+      const body: any = {
+        title: draft.title.trim(), description: draft.description || undefined,
+        startDate: new Date(draft.startDate).toISOString(), endDate: new Date(draft.endDate).toISOString(),
+        registrationDeadline: draft.registrationDeadline ? new Date(draft.registrationDeadline).toISOString() : undefined,
+        goLiveAt: draft.goLiveAt ? new Date(draft.goLiveAt).toISOString() : undefined,
+        price: draft.price ? parseFloat(draft.price) : 0,
+        picture: draft.picture || undefined, isHidden: draft.isHidden, requiresAuth: draft.requiresAuth,
+        redirectUrl: draft.redirectUrl?.trim().replace(/\s+/g, "-") || undefined,
+      };
+
+      if (mode === "edit") {
+        body.isActive = draft.isActive;
+        await apiFetch(`/api/events/${ev.id}`, { method: "PUT", authToken: token || undefined, body });
+        await saveOptions(ev.id);
+        // Form is saved inside saveOptions for edit mode; avoid double call
+      } else {
+        if (formDef.isRequired || formDef.fields.length > 0) {
+          body.form = { isRequired: !!formDef.isRequired, fields: formDef.fields.filter(f => f.label?.trim()).map((f, i) => ({ type: f.type, label: f.label, isRequired: !!f.isRequired, order: i, helpText: f.helpText || null })) };
+        }
+        const created: any = await apiFetch("/api/events", { method: "POST", authToken: token || undefined, body });
+        if (created?.id) {
+          await saveOptions(created.id);
+          // Fetch event to get final option IDs for sections
+          const fullEvent: any = await apiFetch(`/api/events/${created.id}`).catch(() => null);
+          const createdOptions = fullEvent?.eventOptions || [];
+          if (sectionDrafts.length > 0) await saveStagedSections(created.id, createdOptions);
+          // Upload staged attachments
+          for (const file of stagedFiles) {
+            const fd = new FormData();
+            fd.append("file", file);
+            await apiFetch(`/api/events/${created.id}/attachments`, { method: "POST", body: fd, authToken: token || undefined });
+          }
+          // Save staged notify recipients
+          if (notifyRecipientDrafts.length > 0) {
+            await apiFetch(`/api/events/${created.id}/notify-recipients`, {
+              method: "PUT", authToken: token || undefined,
+              body: { userIds: notifyRecipientDrafts.map(u => u.id) },
+            }).catch(() => {});
+          }
+        }
+      }
+
+      onSuccess(); onClose();
+    } catch (e: any) {
+      setError(e?.message || "Failed to save event");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ── footer navigation ──
+
+  const handleBack = () => {
+    setError(null);
+    if (step === 1 && pricingSubstep > 0) {
+      setPricingSubstep((pricingSubstep - 1) as PricingSubstep);
+    } else {
+      setStep((step - 1) as StepIdx);
+      if (step - 1 === 1) setPricingSubstep(2); // entering from right → land on last substep
+    }
+  };
+
+  const handleNext = () => {
+    setError(null);
+    if (step === 1 && pricingSubstep < 2) {
+      setPricingSubstep((pricingSubstep + 1) as PricingSubstep);
+    } else {
+      setStep((step + 1) as StepIdx);
+      if (step + 1 === 1) setPricingSubstep(0); // entering from left → land on first substep
+    }
+  };
+
+  const isFirstStep = step === 0;
+  const isLastStep = step === STEPS.length - 1;
+  const isOnLastSubstep = step !== 1 || pricingSubstep === 2;
+  // Basic Details step requires title, start/end dates, and a base price before moving on
+  // (mirrors handleSave's own checks). Base price is only compulsory when creating a new event.
+  const basicDetailsIncomplete = step === 0 && (!draft.title.trim() || !draft.startDate || !draft.endDate || (mode === "create" && isPriceInvalid(draft.price)));
+  // Items & Pricing: every option needs a valid price before leaving the step (checked across
+  // all pricing substeps so switching to Variants/Early Birds can't be used to skip the gate).
+  const optionsIncomplete = mode === "create" && step === 1 && options.some(o => isPriceInvalid(o.price));
+  const nextDisabled = basicDetailsIncomplete || optionsIncomplete;
+
+  // ── render ──
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-auto py-6 px-4">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b">
+          <h2 className="text-lg font-semibold">{mode === "create" ? "New Event" : "Edit Event"}</h2>
+          <button type="button" className="text-gray-400 hover:text-gray-700 text-xl leading-none" onClick={onClose}>×</button>
+        </div>
+
+        {/* Step bar */}
+        <div className="flex items-center gap-1 px-5 py-3 border-b overflow-x-auto">
+          {STEPS.map((s, i) => {
+            const clickable = mode === "edit";
+            return (
+              <button key={i} type="button"
+                onClick={clickable ? () => { setStep(i as StepIdx); if (i === 1) setPricingSubstep(0); } : undefined}
+                className={`px-3 py-1.5 text-xs rounded border whitespace-nowrap transition-colors ${
+                  step === i ? "bg-indigo-600 text-white border-indigo-600"
+                    : clickable ? "bg-white text-gray-700 border-gray-200 hover:bg-gray-50 cursor-pointer"
+                    : "bg-white text-gray-400 border-gray-100 cursor-default"
+                }`}
+              >{s}</button>
+            );
+          })}
+        </div>
+
+        {/* Pricing substep bar */}
+        {step === 1 && (
+          <div className="flex items-center gap-1 px-5 py-2 border-b bg-gray-50 overflow-x-auto">
+            {PRICING_SUBSTEPS.map((s, i) => (
+              <button key={i} type="button"
+                onClick={() => setPricingSubstep(i as PricingSubstep)}
+                className={`px-3 py-1 text-xs rounded border whitespace-nowrap transition-colors ${
+                  pricingSubstep === i ? "bg-indigo-100 text-indigo-700 border-indigo-300 font-medium" : "bg-white text-gray-600 border-gray-200 hover:bg-gray-50"
+                }`}
+              >{s}</button>
+            ))}
+          </div>
+        )}
+
+        <div className="p-5 space-y-4 max-h-[65vh] overflow-y-auto">
+          {isClosed && (
+            <div className="p-3 border rounded bg-rose-50 text-rose-800 text-sm">
+              This event is closed — it can't be edited until it's reopened from the cashup page (admin only).
+            </div>
+          )}
+          {error && <div className="p-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+          {/* ── Step 0: Basic Details ── */}
+          {step === 0 && (
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Title <span className="text-red-500">*</span></label>
+                <input className="w-full border rounded px-3 py-2 text-sm" value={draft.title} onChange={e => upd({ title: e.target.value })} placeholder="Event title" />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Description</label>
+                <textarea className="w-full border rounded px-3 py-2 text-sm" rows={3} value={draft.description} onChange={e => upd({ description: e.target.value })} />
+              </div>
+              <div className="grid sm:grid-cols-2 gap-3">
+                <DTInput label="Start" required value={draft.startDate} onChange={v => upd({ startDate: v })} />
+                <DTInput label="End" required value={draft.endDate} onChange={v => upd({ endDate: v })} />
+                <DTInput label="Registration Deadline (optional)" value={draft.registrationDeadline} onChange={v => upd({ registrationDeadline: v })} />
+                <DTInput label="Go Live At (optional)" value={draft.goLiveAt} onChange={v => upd({ goLiveAt: v })} hint="Leave blank to show immediately" />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Base Price (R) {mode === "create" && <span className="text-red-500">*</span>}</label>
+                <input type="number" step="1" min="0" required={mode === "create"} className="w-full border rounded px-3 py-2 text-sm" value={draft.price} onChange={e => upd({ price: e.target.value })} placeholder="0" />
+                {mode === "create" && <p className="text-[10px] text-gray-400 mt-0.5">Auto-fills the first ticket option below — enter 0 for a free event.</p>}
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Picture</label>
+                {draft.picture && <img src={resolveToApiOrigin(draft.picture) || undefined} alt="" className="h-20 w-20 object-cover rounded border mb-2" />}
+                <div className="flex items-center gap-2">
+                  <input className="flex-1 border rounded px-3 py-2 text-sm" placeholder="/uploads/... or https://" value={draft.picture} onChange={e => upd({ picture: e.target.value })} />
+                  <UploadImageButton onUploaded={url => upd({ picture: url })} label="Upload" />
+                </div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">URL Alias (optional)</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" placeholder="e.g. camp-2025, movie-night" value={draft.redirectUrl} onChange={e => upd({ redirectUrl: e.target.value })} />
+              </div>
+            </div>
+          )}
+
+          {/* ── Step 1: Items & Pricing (3 substeps) ── */}
+          {step === 1 && pricingSubstep === 0 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Define your ticket types or purchasable items. Variants and early-bird pricing are configured in the next two steps.</p>
+              <OptionsEditor options={options} onChange={handleOptionsChange} required={mode === "create"} />
+            </div>
+          )}
+          {step === 1 && pricingSubstep === 1 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Add variants per option (e.g. Adult / Child, or t-shirt sizes). Leave blank if an option has only one price.</p>
+              <VariantsEditor options={options} onChange={setOptions} />
+            </div>
+          )}
+          {step === 1 && pricingSubstep === 2 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Set early-bird prices per variant (if variants exist) or per option. The cheapest applicable tier is used at registration time.</p>
+              <EarlyBirdsEditor options={options} onChange={setOptions} />
+            </div>
+          )}
+
+          {/* ── Step 2: Sections ── */}
+          {step === 2 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Group ticket options into named sections shown on the registration page (e.g. "Tickets", "Add-ons", "Accommodation").</p>
+              {mode === "edit" && ev?.id
+                ? <SectionsManager eventId={ev.id} />
+                : <SectionsDraftEditor sections={sectionDrafts} options={options} onChange={setSectionDrafts} />
+              }
+            </div>
+          )}
+
+          {/* ── Step 3: Form ── */}
+          {step === 3 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Collect extra information from registrants (e.g. dietary requirements, t-shirt size, emergency contact).</p>
+              <FormBuilder value={formDef} onChange={setFormDef} />
+            </div>
+          )}
+
+          {/* ── Step 4: Visibility ── */}
+          {step === 4 && (
+            <div className="space-y-3">
+              <div className="border rounded-lg p-4 bg-gray-50 space-y-3">
+                <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Visibility & Access</div>
+                <label className="flex items-start gap-2 text-sm cursor-pointer">
+                  <input type="checkbox" className="mt-0.5" checked={draft.isHidden} onChange={e => upd({ isHidden: e.target.checked })} />
+                  <span><strong>Hidden</strong> — not shown in the public event listing; still accessible via direct link</span>
+                </label>
+                <label className="flex items-start gap-2 text-sm cursor-pointer">
+                  <input type="checkbox" className="mt-0.5" checked={!draft.requiresAuth} onChange={e => upd({ requiresAuth: !e.target.checked })} />
+                  <span><strong>Allow guest registration</strong> — attendees can register without creating an account</span>
+                </label>
+                {mode === "edit" && (
+                  <label className="flex items-start gap-2 text-sm cursor-pointer">
+                    <input type="checkbox" className="mt-0.5" checked={draft.isActive} onChange={e => upd({ isActive: e.target.checked })} />
+                    <span><strong>Active</strong> — when unchecked, the event is hidden everywhere including staff views</span>
+                  </label>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* ── Step 5: Notifications ── */}
+          {step === 5 && (
+            <div>
+              {mode === "edit" && ev?.id ? (
+                <NotifyRecipientsManager eventId={ev.id} creator={ev.createdBy || null} initialRecipients={ev.notifyRecipients} />
+              ) : (
+                <div className="space-y-3">
+                  <p className="text-xs text-gray-500">
+                    Choose who receives new registration, payment, and daily summary emails for this event.
+                    Leave empty to send them to you (the event creator) instead.
+                  </p>
+                  <NotifyRecipientsPicker selected={notifyRecipientDrafts} onChange={setNotifyRecipientDrafts} />
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ── Step 6: Attachments ── */}
+          {step === 6 && (
+            <div>
+              <p className="text-xs text-gray-500 mb-3">Upload documents for attendees to download (e.g. waiver forms, info sheets, maps, schedules).</p>
+              {mode === "edit" && ev?.id
+                ? <AttachmentsManager eventId={ev.id} />
+                : (
+                  <div>
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-medium">Files to attach</span>
+                      <label className="cursor-pointer text-xs px-2 py-1 rounded border bg-white hover:bg-gray-50">
+                        <input
+                          type="file"
+                          className="hidden"
+                          accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip"
+                          onChange={e => {
+                            const file = e.target.files?.[0];
+                            if (file) setStagedFiles(prev => [...prev, file]);
+                            e.target.value = "";
+                          }}
+                        />
+                        Add file
+                      </label>
+                    </div>
+                    {stagedFiles.length === 0
+                      ? <p className="text-xs text-gray-400">No files added. Files will be uploaded when the event is created.</p>
+                      : (
+                        <ul className="space-y-1">
+                          {stagedFiles.map((f, i) => (
+                            <li key={i} className="flex items-center justify-between text-xs">
+                              <span className="truncate max-w-xs text-gray-700">{f.name}</span>
+                              <button
+                                type="button"
+                                className="text-red-600 hover:underline ml-2"
+                                onClick={() => setStagedFiles(prev => prev.filter((_, j) => j !== i))}
+                              >Remove</button>
+                            </li>
+                          ))}
+                        </ul>
+                      )
+                    }
+                  </div>
+                )
+              }
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-5 py-3 border-t bg-gray-50 rounded-b-xl">
+          <button type="button" disabled={isFirstStep} onClick={handleBack}
+            className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50 disabled:opacity-40">← Back</button>
+
+          <div className="flex items-center gap-2">
+            {mode === "create" ? (
+              isLastStep && isOnLastSubstep ? (
+                <button type="button" disabled={saving} onClick={handleSave}
+                  className="px-5 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 font-medium">
+                  {saving ? "Creating…" : "Create Event"}
+                </button>
+              ) : (
+                <button type="button" disabled={nextDisabled} onClick={handleNext}
+                  title={basicDetailsIncomplete ? "Fill in title, start, end date, and base price to continue" : optionsIncomplete ? "Every option needs a price before continuing" : undefined}
+                  className="px-4 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 font-medium disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-indigo-600">Next →</button>
+              )
+            ) : (
+              <>
+                {!(isLastStep && isOnLastSubstep) && (
+                  <button type="button" onClick={handleNext}
+                    className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50">Next →</button>
+                )}
+                <button type="button" disabled={saving || isClosed} onClick={handleSave}
+                  title={isClosed ? "This event is closed — reopen it first to make changes" : undefined}
+                  className="px-5 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 font-medium">
+                  {saving ? "Saving…" : "Save Changes"}
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── event card ───────────────────────────────────────────────────────────────
+
+function EventCard({ ev, onEdit }: { ev: any; onEdit: () => void }) {
+  const isPast = ev.endDate && new Date(ev.endDate) < new Date();
+  const isInactive = ev.isActive === false;
+  const isClosed = ev.cashupStatus === "closed";
+  return (
+    <li className="border rounded-lg p-3 bg-white hover:bg-indigo-50/40 cursor-pointer transition-colors flex items-start justify-between gap-3" onClick={onEdit}>
+      <div className="min-w-0">
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="font-medium text-sm">{ev.title}</span>
+          {isInactive && <span className="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">Inactive</span>}
+          {isPast && !isInactive && <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-700">Past</span>}
+          {ev.isHidden && <span className="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">Hidden</span>}
+          {isClosed && <span className="text-[10px] px-1.5 py-0.5 rounded bg-rose-50 text-rose-700">Closed</span>}
+        </div>
+        <div className="text-xs text-gray-500 mt-0.5">
+          {ev.startDate ? new Date(ev.startDate).toLocaleDateString() : ""}{ev.endDate ? ` – ${new Date(ev.endDate).toLocaleDateString()}` : ""}
+          {ev.price != null ? <span className="ml-2">R{Number(ev.price).toFixed(0)}</span> : ""}
+        </div>
+      </div>
+      <span className="text-xs text-indigo-600 shrink-0 mt-0.5">Edit →</span>
+    </li>
+  );
+}
+
+// ─── main page ────────────────────────────────────────────────────────────────
+
+export default function ManageEventsPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadEvents = async () => {
+    if (!token) return;
+    setLoadingEvents(true);
+    try {
+      const evs = await apiFetch<any[]>("/api/events/all?includePast=true&includeInactive=true", { authToken: token });
+      setEvents(Array.isArray(evs) ? evs.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()) : []);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load events");
+    } finally {
+      setLoadingEvents(false);
+    }
+  };
+
+  useEffect(() => { loadEvents(); }, [user, token]);
+
+  const [modalMode, setModalMode] = useState<"create" | "edit" | null>(null);
+  const [editingEvent, setEditingEvent] = useState<any | null>(null);
+  const [includePast, setIncludePast] = useState(false);
+  const [showInactive, setShowInactive] = useState(false);
+  const [showClosed, setShowClosed] = useState(false);
+  const [search, setSearch] = useState("");
+  const isAdmin = user?.role === "admin";
+  const now = Date.now();
+
+  const filtered = useMemo(() => events.filter(ev => {
+    if (!showInactive && ev.isActive === false) return false;
+    if (!showClosed && ev.cashupStatus === "closed") return false;
+    if (!includePast && ev.endDate && new Date(ev.endDate).getTime() < now) return false;
+    if (search && !ev.title?.toLowerCase().includes(search.toLowerCase())) return false;
+    return true;
+  }), [events, includePast, showInactive, showClosed, search, now]);
+
+  const openCreate = () => { setEditingEvent(null); setModalMode("create"); };
+  const openEdit = async (ev: any) => {
+    try {
+      const full = await apiFetch<any>(`/api/events/${ev.id}`, { authToken: token || undefined });
+      setEditingEvent(full);
+    } catch { setEditingEvent(ev); }
+    setModalMode("edit");
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold">Events</h1>
+          <p className="text-sm text-gray-500 mt-0.5">Manage and create events</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button type="button" className="px-4 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm font-medium" onClick={openCreate}>+ Add Event</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={() => router.push("/dashboard")}>Back</button>
+        </div>
+      </div>
+
+      {!canView && <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">You need supervisor or admin access.</div>}
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+      <div className="flex flex-wrap items-center gap-3 mb-4 text-sm">
+        <input className="border rounded px-3 py-1.5 text-sm w-48" placeholder="Search by title…" value={search} onChange={e => setSearch(e.target.value)} />
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={includePast} onChange={e => setIncludePast(e.target.checked)} /> Include past
+        </label>
+        <label className={`flex items-center gap-2 cursor-pointer ${!isAdmin ? "opacity-50 cursor-not-allowed" : ""}`}>
+          <input type="checkbox" disabled={!isAdmin} checked={showInactive && isAdmin} onChange={e => setShowInactive(e.target.checked)} /> Show inactive
+        </label>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={showClosed} onChange={e => setShowClosed(e.target.checked)} /> Show closed
+        </label>
+        {loadingEvents && <span className="text-xs text-gray-500">Loading…</span>}
+      </div>
+
+      <div className="border rounded-xl bg-white shadow-sm p-4">
+        {filtered.length === 0
+          ? <p className="text-sm text-gray-500">{events.length === 0 ? 'No events yet. Click "+ Add Event" to create one.' : "No events match the current filters."}</p>
+          : <ul className="space-y-2">{filtered.map(ev => <EventCard key={ev.id} ev={ev} onEdit={() => openEdit(ev)} />)}</ul>
+        }
+      </div>
+
+      {modalMode && (
+        <EventModal mode={modalMode} event={editingEvent}
+          onClose={() => { setModalMode(null); setEditingEvent(null); }}
+          onSuccess={loadEvents} />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/supervisor/forms/page.tsx b/frontend/src/app/dashboard/supervisor/forms/page.tsx
new file mode 100644
index 0000000..1999dac
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/forms/page.tsx
@@ -0,0 +1,734 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch, fetchAllUsers } from "@/lib/api";
+
+type FormFieldType = 'yes_no' | 'text' | 'date' | 'numeric' | 'statement' | 'paragraph';
+
+type EventFormDef = { isRequired: boolean; fields: { id?: string; type: FormFieldType; label: string; isRequired?: boolean; order?: number; helpText?: string|null; options?: any }[] };
+
+function FormBuilder({ value, onChange }: { value: EventFormDef; onChange: (v: EventFormDef) => void }) {
+  const fields = value.fields || [];
+
+  const addField = (type: FormFieldType = 'text') => {
+    onChange({ ...value, fields: [...fields, { type, label: '', isRequired: false, helpText: '' }] });
+  };
+  const updateField = (idx: number, patch: Partial<EventFormDef['fields'][number]>) => {
+    const copy = fields.slice();
+    copy[idx] = { ...copy[idx], ...patch };
+    onChange({ ...value, fields: copy });
+  };
+  const removeField = (idx: number) => {
+    const copy = fields.slice();
+    copy.splice(idx, 1);
+    onChange({ ...value, fields: copy });
+  };
+  const moveField = (idx: number, dir: -1 | 1) => {
+    const copy = fields.slice();
+    const target = idx + dir;
+    if (target < 0 || target >= copy.length) return;
+    [copy[idx], copy[target]] = [copy[target], copy[idx]];
+    onChange({ ...value, fields: copy });
+  };
+
+  const typeLabel = (type: FormFieldType) => {
+    const labels: Record<FormFieldType, string> = { text: 'Text', numeric: 'Number', date: 'Date', yes_no: 'Yes/No', statement: 'Statement', paragraph: 'Heading' };
+    return labels[type] || type;
+  };
+
+  return (
+    <div className="border rounded-lg p-3 bg-gray-50">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-sm font-semibold text-gray-800">Registration Form Fields</div>
+        <label className="text-xs flex items-center gap-1.5 cursor-pointer">
+          <input type="checkbox" checked={!!value.isRequired} onChange={e => onChange({ ...value, isRequired: e.target.checked })} />
+          <span>Required before tickets generate</span>
+        </label>
+      </div>
+      {fields.length === 0 ? (
+        <div className="text-xs text-gray-500 mb-3 italic">No fields yet — add questions below.</div>
+      ) : (
+        <ul className="space-y-2 mb-3">
+          {fields.map((f, idx) => (
+            <li key={idx} className="bg-white border rounded-lg p-2.5 shadow-sm">
+              <div className="flex items-center gap-1 mb-2">
+                <span className="text-[10px] px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-medium shrink-0">{typeLabel(f.type)}</span>
+                <span className="text-xs text-gray-400 shrink-0">#{idx + 1}</span>
+                <div className="flex-1" />
+                <button type="button" className="text-gray-400 hover:text-gray-700 px-1" onClick={() => moveField(idx, -1)} disabled={idx === 0} title="Move up">↑</button>
+                <button type="button" className="text-gray-400 hover:text-gray-700 px-1" onClick={() => moveField(idx, 1)} disabled={idx === fields.length - 1} title="Move down">↓</button>
+                <button type="button" className="text-xs px-2 py-0.5 rounded bg-red-50 text-red-700 hover:bg-red-100 border border-red-200" onClick={() => removeField(idx)}>Remove</button>
+              </div>
+              <div className="flex flex-wrap items-center gap-2 mb-2">
+                <select
+                  className="border rounded px-2 py-1 text-xs"
+                  value={f.type}
+                  onChange={e => updateField(idx, { type: e.target.value as FormFieldType })}
+                >
+                  <option value="text">Text answer</option>
+                  <option value="numeric">Number</option>
+                  <option value="date">Date</option>
+                  <option value="yes_no">Yes / No</option>
+                  <option value="statement">Statement (display text)</option>
+                  <option value="paragraph">Heading + paragraph</option>
+                </select>
+                {f.type !== 'statement' && f.type !== 'paragraph' && (
+                  <label className="text-xs flex items-center gap-1 cursor-pointer">
+                    <input type="checkbox" checked={!!f.isRequired} onChange={e => updateField(idx, { isRequired: e.target.checked })} />
+                    Required
+                  </label>
+                )}
+              </div>
+              <input
+                className="border rounded px-2 py-1 text-sm w-full mb-1.5"
+                placeholder={f.type === 'paragraph' ? 'Heading text' : f.type === 'statement' ? 'Statement text' : 'Question / field label'}
+                value={f.label}
+                onChange={e => updateField(idx, { label: e.target.value })}
+              />
+              {f.type === 'paragraph' ? (
+                <textarea
+                  className="border rounded px-2 py-1 text-xs w-full"
+                  placeholder="Paragraph body text"
+                  rows={2}
+                  value={f.helpText || ''}
+                  onChange={e => updateField(idx, { helpText: e.target.value })}
+                />
+              ) : f.type !== 'statement' ? (
+                <input
+                  className="border rounded px-2 py-1 text-xs w-full text-gray-500"
+                  placeholder="Help text shown below the field (optional)"
+                  value={f.helpText || ''}
+                  onChange={e => updateField(idx, { helpText: e.target.value })}
+                />
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="flex gap-2 flex-wrap">
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={() => addField('text')}>+ Add question</button>
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-gray-200 text-gray-700 hover:bg-gray-300" onClick={() => addField('statement')}>+ Statement</button>
+        <button type="button" className="text-xs px-3 py-1.5 rounded bg-gray-200 text-gray-700 hover:bg-gray-300" onClick={() => addField('paragraph')}>+ Heading</button>
+      </div>
+    </div>
+  );
+}
+
+export default function FormsBrowserPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor" || role === "staff";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [mode, setMode] = useState<'view' | 'manage' | 'fill'>('view');
+
+  const [allEvents, setAllEvents] = useState<any[]>([]);
+  const [evIncludePast, setEvIncludePast] = useState(false);
+  const [evIncludeInactive, setEvIncludeInactive] = useState(false);
+  const [selectedEventId, setSelectedEventId] = useState<string>("");
+  const [userId, setUserId] = useState<string>("");
+  const [userSearch, setUserSearch] = useState<string>("");
+  const [allUsers, setAllUsers] = useState<any[]>([]);
+  const [userDropdownOpen, setUserDropdownOpen] = useState(false);
+  const [registrationId, setRegistrationId] = useState<string>("");
+  const [items, setItems] = useState<any[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [loadingList, setLoadingList] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  const loadEvents = async () => {
+    if (!token) return;
+    try {
+      const evs = await apiFetch<any[]>("/api/events/all?includePast=true&includeInactive=true", { authToken: token });
+      const sorted = (evs || []).sort((a: any, b: any) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());
+      setAllEvents(Array.isArray(sorted) ? sorted : []);
+    } catch {}
+  };
+  useEffect(() => { loadEvents(); }, [token]);
+
+  useEffect(() => {
+    if (!token) return;
+    fetchAllUsers(token)
+      .then(list => {
+        setAllUsers(list.sort((a: any, b: any) => (a.name || "").localeCompare(b.name || "")));
+      })
+      .catch(() => {});
+  }, [token]);
+
+  const filteredUsers = useMemo(() => {
+    const q = userSearch.trim().toLowerCase();
+    if (!q) return allUsers.slice(0, 50);
+    return allUsers.filter(u =>
+      (u.name || "").toLowerCase().includes(q) ||
+      (u.email || "").toLowerCase().includes(q) ||
+      (u.phoneNumber || "").toLowerCase().includes(q)
+    ).slice(0, 50);
+  }, [allUsers, userSearch]);
+
+  const isAdmin = user?.role === "admin";
+
+  const events = useMemo(() => {
+    const now = Date.now();
+    return allEvents.filter(ev => {
+      if (!evIncludeInactive && ev.isActive === false) return false;
+      if (!evIncludePast) {
+        const t = new Date(ev.endDate).getTime();
+        if (!isNaN(t) && t < now) return false;
+      }
+      return true;
+    });
+  }, [allEvents, evIncludePast, evIncludeInactive]);
+
+  const search = async (append = false) => {
+    if (!token) return;
+    setError(null);
+    try {
+      setLoadingList(true);
+      const qs = new URLSearchParams();
+      if (selectedEventId) qs.set("eventId", selectedEventId);
+      if (userId.trim()) qs.set("userId", userId.trim());
+      if (registrationId.trim()) qs.set("registrationId", registrationId.trim());
+      if (append && nextCursor) qs.set("cursor", nextCursor);
+      const url = "/api/forms/responses" + (qs.toString() ? `?${qs.toString()}` : "");
+      const res = await apiFetch<{ items: any[]; nextCursor?: string }>(url, { authToken: token });
+      const newItems = Array.isArray(res?.items) ? res!.items : [];
+      setItems(prev => append ? [...prev, ...newItems] : newItems);
+      setNextCursor(res?.nextCursor || null);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load form responses");
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
+  useEffect(() => {
+    if (token) search(false);
+  }, [token]);
+
+  const onPrint = () => {
+    if (!items || items.length === 0) return;
+    const w = window.open("", "_blank");
+    if (!w) return;
+    const formPages = items.map((r: any) => {
+      const eventTitle = r.registration?.event?.title || "Event";
+      const attendeeName = r.registration?.user?.name || "Attendee";
+      const attendeeEmail = r.registration?.user?.email || "";
+      const regId = String(r.registrationId || r.id || "").slice(0, 8);
+      const createdAt = r.createdAt ? new Date(r.createdAt).toLocaleDateString("en-ZA") : "";
+      const answers = (r.answers || []).map((a: any) => `
+        <div class="answer">
+          <div class="label">${a.field?.label || a.fieldId || "Field"}</div>
+          <div class="value">${a.value ?? ""}</div>
+        </div>`).join("");
+      return `
+        <div class="page">
+          <div class="header">
+            <div>
+              <div class="event">${eventTitle}</div>
+              <div class="regid">Registration #${regId}${createdAt ? ` · ${createdAt}` : ""}</div>
+            </div>
+            <div class="attendee">
+              <div class="name">${attendeeName}</div>
+              <div class="email">${attendeeEmail}</div>
+            </div>
+          </div>
+          <div class="answers">${answers || '<div class="empty">No answers submitted.</div>'}</div>
+        </div>`;
+    }).join("");
+    w.document.write(`<!doctype html><html><head><title>Form Responses</title>
+<style>
+  @page { size: A4; margin: 15mm; }
+  * { box-sizing: border-box; }
+  body { font-family: Arial, Helvetica, sans-serif; margin: 0; background: #fff; color: #111; }
+  .page { page-break-after: always; break-after: page; padding-bottom: 8mm; }
+  .page:last-child { page-break-after: avoid; break-after: avoid; }
+  .header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 12px; }
+  .event { font-size: 16px; font-weight: bold; }
+  .regid { font-size: 11px; color: #555; margin-top: 2px; }
+  .attendee { text-align: right; }
+  .name { font-size: 14px; font-weight: 600; }
+  .email { font-size: 11px; color: #555; }
+  .answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .answer { border: 1px solid #d1d5db; border-radius: 4px; padding: 8px; }
+  .label { font-size: 10px; color: #6b7280; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
+  .value { font-size: 13px; font-weight: 500; word-break: break-word; }
+  .empty { font-size: 12px; color: #9ca3af; font-style: italic; grid-column: 1 / -1; }
+</style>
+</head><body>${formPages}
+<script>
+  if(document.readyState==='complete') window.print();
+  else window.addEventListener('load', function(){ window.print(); });
+</script>
+</body></html>`);
+    w.document.close();
+    w.focus();
+  };
+
+  // Manage forms state
+  const [formLoading, setFormLoading] = useState(false);
+  const [formDef, setFormDef] = useState<EventFormDef>({ isRequired: false, fields: [] });
+  const [formLoadedFor, setFormLoadedFor] = useState<string>("");
+  const loadFormForEvent = async (eventId: string) => {
+    if (!eventId) return;
+    try {
+      setFormLoading(true);
+      const evFull = await apiFetch<any>(`/api/events/${encodeURIComponent(eventId)}`);
+      const f = evFull?.form;
+      if (f && Array.isArray(f.fields)) {
+        setFormDef({ isRequired: !!f.isRequired, fields: f.fields.map((x: any) => ({ id: x.id, type: x.type, label: x.label, isRequired: !!x.isRequired, order: x.order, helpText: x.helpText || '' })) });
+      } else {
+        setFormDef({ isRequired: false, fields: [] });
+      }
+      setFormLoadedFor(eventId);
+    } catch (e:any) {
+      setError(e?.message || 'Failed to load form');
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (mode === 'manage' && selectedEventId && selectedEventId !== formLoadedFor) {
+      loadFormForEvent(selectedEventId);
+    }
+  }, [mode, selectedEventId]);
+
+  const saveForm = async () => {
+    if (!token || !selectedEventId) return;
+    setError(null); setInfo(null);
+    try {
+      const fields = (formDef.fields || []).filter(f => (f.label || '').trim().length > 0).map((f, i) => ({ type: f.type, label: f.label, isRequired: !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph', order: i, helpText: f.helpText || null }));
+      await apiFetch(`/api/events/${encodeURIComponent(selectedEventId)}`, { method: 'PUT', authToken: token, body: { form: { isRequired: !!formDef.isRequired, fields } } });
+      setInfo('Form saved');
+    } catch (e:any) {
+      setError(e?.message || 'Failed to save form');
+    }
+  };
+
+  // Fill/edit responses state
+  const [fillEventId, setFillEventId] = useState<string>("");
+  const [fillRegistrations, setFillRegistrations] = useState<any[]>([]);
+  const [loadingRegs, setLoadingRegs] = useState(false);
+  const [fillRegistrationId, setFillRegistrationId] = useState<string>("");
+  const [fillRegistration, setFillRegistration] = useState<any | null>(null);
+  const [fillForm, setFillForm] = useState<EventFormDef>({ isRequired: false, fields: [] });
+  const [existingResponses, setExistingResponses] = useState<any[]>([]);
+  const [savingFill, setSavingFill] = useState(false);
+
+  const loadRegsForEvent = async (evId: string) => {
+    if (!token || !evId) return;
+    try {
+      setLoadingRegs(true);
+      const regs = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(evId)}`, { authToken: token });
+      const sorted = (Array.isArray(regs) ? regs : []).sort((a, b) => (a.user?.name || '').toLowerCase().localeCompare((b.user?.name || '').toLowerCase()));
+      setFillRegistrations(sorted);
+    } catch {
+      setFillRegistrations([]);
+    } finally {
+      setLoadingRegs(false);
+    }
+  };
+
+  useEffect(() => {
+    if (mode === 'fill') setFillEventId(prev => prev || selectedEventId || "");
+  }, [mode]);
+
+  useEffect(() => {
+    if (mode !== 'fill') return;
+    if (fillEventId) loadRegsForEvent(fillEventId);
+    setFillRegistrationId(""); setFillRegistration(null); setExistingResponses([]); setFillForm({ isRequired: false, fields: [] });
+  }, [fillEventId, mode]);
+
+  useEffect(() => {
+    (async () => {
+      if (mode !== 'fill' || !fillRegistrationId) return;
+      try {
+        const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(fillRegistrationId)}`, { authToken: token! });
+        setFillRegistration(reg);
+        if (reg?.event?.id) {
+          const evFull = await apiFetch<any>(`/api/events/${encodeURIComponent(reg.event.id)}`);
+          const f = evFull?.form;
+          if (f && Array.isArray(f.fields)) {
+            setFillForm({ isRequired: !!f.isRequired, fields: f.fields.map((x:any)=>({ id:x.id, type:x.type, label:x.label, isRequired:!!x.isRequired, order:x.order, helpText:x.helpText||'' })) });
+          } else {
+            setFillForm({ isRequired: false, fields: [] });
+          }
+        }
+        const resList = await apiFetch<any>(`/api/forms/responses?registrationId=${encodeURIComponent(fillRegistrationId)}`, { authToken: token! });
+        const items = Array.isArray(resList?.items) ? resList.items : (Array.isArray(resList) ? resList : []);
+        setExistingResponses(items);
+      } catch (e:any) {
+        setError(e?.message || 'Failed to load registration/form');
+      }
+    })();
+  }, [fillRegistrationId, mode]);
+
+  const mainTicketCount = useMemo(() => {
+    const ros = fillRegistration?.registrationOptions || [];
+    return ros.filter((ro:any)=> ro?.eventOption?.isMainTicket).reduce((s:number, ro:any)=> s + (ro.quantity||0), 0);
+  }, [fillRegistration]);
+
+  const [editableResponses, setEditableResponses] = useState<{ answers: Record<string,string> }[]>([]);
+  useEffect(() => {
+    if (mode !== 'fill') return;
+    const fields = (fillForm.fields || []).filter(f => f.type !== 'statement' && f.type !== 'paragraph');
+    const mapped: { answers: Record<string,string> }[] = (existingResponses || []).map((r:any)=>{
+      const ans: Record<string,string> = {};
+      (r.answers || []).forEach((a:any)=>{ if (a.fieldId) ans[a.fieldId] = String(a.value ?? ''); });
+      for (const f of fields) if (!(f.id! in ans)) ans[f.id!] = '';
+      return { answers: ans };
+    });
+    const target = Math.max(0, mainTicketCount);
+    while (mapped.length < target) {
+      const ans: Record<string,string> = {};
+      for (const f of fields) ans[f.id!] = '';
+      mapped.push({ answers: ans });
+    }
+    if (mapped.length > target) mapped.length = target;
+    setEditableResponses(mapped);
+  }, [existingResponses, fillForm, mainTicketCount, mode]);
+
+  const setAnswer = (respIdx: number, fieldId: string, value: string) => {
+    setEditableResponses(prev => {
+      const copy = prev.slice();
+      if (!copy[respIdx]) copy[respIdx] = { answers: {} } as any;
+      copy[respIdx] = { answers: { ...copy[respIdx].answers, [fieldId]: value } };
+      return copy;
+    });
+  };
+
+  const saveResponses = async () => {
+    if (!token || !fillRegistrationId) return;
+    setError(null); setInfo(null);
+    try {
+      setSavingFill(true);
+      const requiredIds = (fillForm.fields||[]).filter(f=> f.type!== 'statement' && !!f.isRequired).map(f=> f.id);
+      for (let i=0; i<editableResponses.length; i++) {
+        const er = editableResponses[i];
+        for (const fid of requiredIds) {
+          const v = (er.answers || {})[fid!];
+          if (v == null || String(v).trim() === '') throw new Error(`Response #${i+1}: Missing answer for a required field`);
+        }
+      }
+      await apiFetch(`/api/registrations/${encodeURIComponent(fillRegistrationId)}/forms/responses`, {
+        method: 'PUT', authToken: token, body: { responses: editableResponses }
+      });
+      setInfo('Responses saved');
+      const resList = await apiFetch<any>(`/api/forms/responses?registrationId=${encodeURIComponent(fillRegistrationId)}`, { authToken: token! });
+      const items = Array.isArray(resList?.items) ? resList.items : (Array.isArray(resList) ? resList : []);
+      setExistingResponses(items);
+    } catch (e:any) {
+      setError(e?.message || 'Failed to save responses');
+    } finally {
+      setSavingFill(false);
+    }
+  };
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+<div className="flex items-center justify-between mb-4 no-print">
+        <h1 className="text-2xl font-semibold">Forms</h1>
+        <div className="flex gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard")}>Back</button>
+          {mode === 'view' && (
+            <button className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700" onClick={onPrint} disabled={items.length === 0}>
+              Print forms
+            </button>
+          )}
+        </div>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4 no-print">
+          You need staff, supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {/* Mode tabs */}
+      <div className="mb-4 flex items-center gap-2 no-print">
+        {(['view', 'fill', 'manage'] as const).map(m => (
+          <label key={m} className={`px-3 py-1.5 text-sm rounded border cursor-pointer ${mode === m ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200 hover:bg-gray-50'}`}>
+            <input type="radio" name="mode" value={m} className="hidden" checked={mode===m} onChange={() => setMode(m)} />
+            {m === 'view' ? 'View responses' : m === 'fill' ? 'Fill / edit responses' : 'Edit form structure'}
+          </label>
+        ))}
+      </div>
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm no-print">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm no-print">{info}</div>}
+
+      {/* ── VIEW MODE ─────────────────────────────── */}
+      {mode === 'view' && (
+        <>
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-4 no-print">
+            <div className="text-base font-semibold mb-3">Filters</div>
+            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 items-end">
+              <div className="lg:col-span-2">
+                <label className="block text-xs text-gray-600 mb-1">Event</label>
+                <select
+                  className="border rounded px-2 py-1.5 text-sm w-full"
+                  value={selectedEventId}
+                  onChange={e => setSelectedEventId(e.target.value)}
+                >
+                  <option value="">All events</option>
+                  {events.map(ev => (
+                    <option key={ev.id} value={ev.id}>
+                      {ev.title}{!ev.isActive ? ' (inactive)' : ''}{ev.endDate && new Date(ev.endDate) < new Date() ? ' (past)' : ''}
+                    </option>
+                  ))}
+                </select>
+                <div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
+                  <label className="flex items-center gap-1 cursor-pointer">
+                    <input type="checkbox" checked={evIncludePast} onChange={e => setEvIncludePast(e.target.checked)} /> Include past events
+                  </label>
+                  {isAdmin && (
+                    <label className="flex items-center gap-1 cursor-pointer">
+                      <input type="checkbox" checked={evIncludeInactive} onChange={e => setEvIncludeInactive(e.target.checked)} /> Inactive events
+                    </label>
+                  )}
+                </div>
+              </div>
+              <div className="relative">
+                <label className="block text-xs text-gray-600 mb-1">User</label>
+                <input
+                  className="border rounded px-2 py-1.5 text-sm w-full max-w-xs"
+                  placeholder="Search by name, email or phone…"
+                  value={userSearch}
+                  onChange={e => { setUserSearch(e.target.value); setUserDropdownOpen(true); if (!e.target.value) setUserId(""); }}
+                  onFocus={() => setUserDropdownOpen(true)}
+                  onBlur={() => setTimeout(() => setUserDropdownOpen(false), 150)}
+                />
+                {userId && (
+                  <div className="text-xs text-indigo-600 mt-0.5 truncate max-w-xs">
+                    {allUsers.find(u => u.id === userId)?.name || userId}
+                    <button className="ml-1 text-gray-400 hover:text-gray-600" onMouseDown={e => { e.preventDefault(); setUserId(""); setUserSearch(""); }}>✕</button>
+                  </div>
+                )}
+                {userDropdownOpen && filteredUsers.length > 0 && (
+                  <div className="absolute z-20 left-0 mt-1 w-full max-w-xs bg-white border rounded shadow-lg max-h-48 overflow-y-auto">
+                    {filteredUsers.map(u => (
+                      <button
+                        key={u.id}
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-indigo-50 flex flex-col"
+                        onMouseDown={e => { e.preventDefault(); setUserId(u.id); setUserSearch(u.name || u.email || u.id); setUserDropdownOpen(false); }}
+                      >
+                        <span className="font-medium truncate">{u.name || "(no name)"}</span>
+                        <span className="text-xs text-gray-400 truncate">{u.email}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Registration ID</label>
+                <input className="border rounded px-2 py-1.5 text-sm w-full" placeholder="Paste registration ID…" value={registrationId} onChange={e => setRegistrationId(e.target.value)} />
+              </div>
+            </div>
+            <div className="flex gap-2 mt-3">
+              <button
+                className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700"
+                onClick={() => search(false)}
+                disabled={loadingList}
+              >
+                {loadingList ? "Searching…" : "Search"}
+              </button>
+              <button
+                className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200"
+                onClick={() => { setSelectedEventId(""); setUserId(""); setUserSearch(""); setRegistrationId(""); setItems([]); setNextCursor(null); }}
+              >
+                Clear
+              </button>
+              {items.length > 0 && (
+                <span className="self-center text-xs text-gray-500">{items.length} response{items.length !== 1 ? 's' : ''} loaded</span>
+              )}
+            </div>
+          </div>
+
+          <div className="border rounded-xl bg-white shadow-sm">
+            {items.length === 0 ? (
+              <div className="p-6 text-sm text-gray-500 text-center">
+                {loadingList ? "Loading…" : "No form responses found. Select an event and search."}
+              </div>
+            ) : (
+              <ul className="divide-y print-form-wrapper">
+                {items.map((r: any) => (
+                  <li key={r.id} className="print-page-break">
+                    <div className="p-4 print-response">
+                      {/* Header */}
+                      <div className="flex flex-wrap justify-between gap-2 mb-3 pb-2 border-b border-gray-200">
+                        <div>
+                          <div className="font-semibold text-gray-900">{r.registration?.event?.title || 'Event'}</div>
+                          <div className="text-xs text-gray-500 mt-0.5">Registration #{r.registrationId?.slice(0, 8)}</div>
+                        </div>
+                        <div className="text-right">
+                          <div className="font-medium text-gray-800">{r.registration?.user?.name || 'Attendee'}</div>
+                          <div className="text-xs text-gray-500">{r.registration?.user?.email}</div>
+                          <div className="text-xs text-gray-400">{new Date(r.createdAt).toLocaleString()}</div>
+                        </div>
+                      </div>
+                      {/* Answers */}
+                      {(!r.answers || r.answers.length === 0) ? (
+                        <div className="text-xs text-gray-400 italic">No answers submitted.</div>
+                      ) : (
+                        <div className="grid sm:grid-cols-2 gap-2 print-answers">
+                          {r.answers.map((a: any) => (
+                            <div key={a.id} className="bg-gray-50 border rounded p-2 print-answer">
+                              <div className="text-[10px] text-gray-500 mb-0.5 print-answer-label">{a.field?.label || a.fieldId}</div>
+                              <div className="font-medium text-sm break-words print-answer-value">{a.value}</div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {nextCursor && (
+              <div className="p-3 border-t no-print">
+                <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" disabled={loadingList} onClick={() => search(true)}>
+                  Load more
+                </button>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* ── MANAGE MODE ─────────────────────────────── */}
+      {mode === 'manage' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-base font-semibold mb-3">Edit form structure</div>
+          <div className="mb-4">
+            <label className="block text-xs text-gray-600 mb-1">Select event</label>
+            <select
+              className="border rounded px-2 py-1.5 text-sm w-full sm:max-w-sm"
+              value={selectedEventId}
+              onChange={e => { setSelectedEventId(e.target.value); setFormLoadedFor(""); }}
+            >
+              <option value="">Choose an event…</option>
+              {allEvents.map(ev => (
+                <option key={ev.id} value={ev.id}>{ev.title}{!ev.isActive ? ' (inactive)' : ''}</option>
+              ))}
+            </select>
+            <div className="text-xs text-gray-400 mt-1">All events shown (including inactive/past) so you can edit historical forms.</div>
+            {formLoading && <span className="text-xs text-gray-400 mt-1 block">Loading form…</span>}
+          </div>
+          {!selectedEventId ? (
+            <div className="text-sm text-gray-500">Select an event above to manage its attendee form.</div>
+          ) : (
+            <>
+              <FormBuilder value={formDef} onChange={setFormDef} />
+              <div className="mt-3 flex gap-2">
+                <button
+                  type="button"
+                  className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+                  onClick={saveForm}
+                  disabled={formLoading}
+                >
+                  Save form
+                </button>
+                <button
+                  type="button"
+                  className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200"
+                  onClick={() => loadFormForEvent(selectedEventId)}
+                  disabled={formLoading}
+                >
+                  Reload
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ── FILL MODE ─────────────────────────────── */}
+      {mode === 'fill' && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-base font-semibold mb-3">Fill / edit responses</div>
+          <div className="grid sm:grid-cols-2 gap-3 mb-4 items-end">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Event</label>
+              <select className="border rounded px-2 py-1.5 text-sm w-full" value={fillEventId} onChange={e => setFillEventId(e.target.value)}>
+                <option value="">Select event…</option>
+                {allEvents.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Registration</label>
+              <select className="border rounded px-2 py-1.5 text-sm w-full" value={fillRegistrationId} onChange={e => setFillRegistrationId(e.target.value)} disabled={!fillEventId || loadingRegs}>
+                <option value="">{loadingRegs ? 'Loading registrations…' : 'Select registration…'}</option>
+                {fillRegistrations.map((r:any)=>{
+                  const label = `${r.user?.name || r.userId} — ${r.user?.email || ''} — #${String(r.id).slice(0,8)}`;
+                  return <option key={r.id} value={r.id}>{label}</option>;
+                })}
+              </select>
+            </div>
+          </div>
+
+          {!fillRegistrationId ? (
+            <div className="text-sm text-gray-500">Choose an event and registration to fill responses.</div>
+          ) : fillForm.fields.length === 0 ? (
+            <div className="text-sm text-gray-500">This event has no form configured. Go to &ldquo;Edit form structure&rdquo; to add fields.</div>
+          ) : (
+            <div className="space-y-4">
+              <div className="text-sm text-gray-600">
+                Main tickets: <span className="font-medium">{mainTicketCount}</span>
+                {mainTicketCount === 0 && <span className="ml-2 text-amber-600 text-xs">(No main tickets found — check registration options)</span>}
+              </div>
+              {editableResponses.map((resp, idx) => (
+                <div key={idx} className="border rounded-lg p-3 bg-white shadow-sm">
+                  <div className="text-sm font-semibold mb-3 text-gray-700">Attendee #{idx+1}</div>
+                  <div className="grid sm:grid-cols-2 gap-3">
+                    {fillForm.fields.filter(f=>f.type!=='statement' && f.type !== 'paragraph').map((f:any)=> (
+                      <div key={f.id}>
+                        <label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
+                        {f.type === 'text' && (
+                          <input className="border rounded px-2 py-1 text-sm w-full" value={resp.answers[f.id]||''} onChange={e=> setAnswer(idx, f.id!, e.target.value)} />
+                        )}
+                        {f.type === 'numeric' && (
+                          <input type="number" className="border rounded px-2 py-1 text-sm w-full" value={resp.answers[f.id]||''} onChange={e=> setAnswer(idx, f.id!, e.target.value)} />
+                        )}
+                        {f.type === 'date' && (
+                          <input type="date" className="border rounded px-2 py-1 text-sm w-full" value={resp.answers[f.id]||''} onChange={e=> setAnswer(idx, f.id!, e.target.value)} />
+                        )}
+                        {f.type === 'yes_no' && (
+                          <select className="border rounded px-2 py-1 text-sm w-full" value={resp.answers[f.id]||''} onChange={e=> setAnswer(idx, f.id!, e.target.value)}>
+                            <option value="">Select…</option>
+                            <option value="yes">Yes</option>
+                            <option value="no">No</option>
+                          </select>
+                        )}
+                        {f.helpText && <div className="text-[10px] text-gray-500 mt-0.5">{f.helpText}</div>}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+              <div className="flex gap-2">
+                <button
+                  className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+                  onClick={saveResponses}
+                  disabled={savingFill || mainTicketCount === 0}
+                >
+                  {savingFill ? 'Saving…' : 'Save responses'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/supervisor/manual-registration/page.tsx b/frontend/src/app/dashboard/supervisor/manual-registration/page.tsx
new file mode 100644
index 0000000..49db1b6
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/manual-registration/page.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
+
+export default function ManualRegistrationPage() {
+  const { user, token, loading } = useAuth();
+  const router = useRouter();
+  const [eventId, setEventId] = useState("");
+  const [optionId, setOptionId] = useState("");
+  const [quantity, setQuantity] = useState(1);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [registerAsGuest, setRegisterAsGuest] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [createdReg, setCreatedReg] = useState<any | null>(null);
+  const [form, setForm] = useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
+  const [formsData, setFormsData] = useState<Record<number, Record<string, string>>>({});
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!token) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await apiFetch<any>("/api/registrations/manual", {
+        method: "POST",
+        authToken: token,
+        body: {
+          eventId,
+          options: [{ eventOptionId: optionId, quantity }],
+          user: { name, ...(email ? { email } : {}), ...(phoneNumber ? { phoneNumber } : {}) },
+          guestOnly: registerAsGuest,
+        },
+      });
+      setCreatedReg(res);
+      // Load form definition for this event (if any)
+      try {
+        const ev = await apiFetch<any>(`/api/events/${encodeURIComponent(eventId)}`);
+        if (ev?.form) setForm(ev.form);
+      } catch {}
+      alert("Manual registration created");
+    } catch (e: any) {
+      setError(e?.message || "Failed to create manual registration");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="max-w-xl">
+      <h1 className="text-xl font-semibold mb-4">Manual Registration</h1>
+      <form onSubmit={submit} className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium">Event ID</label>
+          <input className="w-full border rounded px-3 py-2" value={eventId} onChange={(e) => setEventId(e.target.value)} required />
+        </div>
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm font-medium">Option ID</label>
+            <input className="w-full border rounded px-3 py-2" value={optionId} onChange={(e) => setOptionId(e.target.value)} required />
+          </div>
+          <div>
+            <label className="block text-sm font-medium">Quantity</label>
+            <input type="number" min={1} className="w-full border rounded px-3 py-2" value={quantity} onChange={(e) => setQuantity(parseInt(e.target.value || "1", 10))} required />
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div>
+            <label className="block text-sm font-medium">Name</label>
+            <input className="w-full border rounded px-3 py-2" value={name} onChange={(e) => setName(e.target.value)} required />
+          </div>
+          <div>
+            <div className="flex items-center justify-between">
+              <label className="block text-sm font-medium">Email</label>
+              <label className="text-xs flex items-center gap-2"><input type="checkbox" checked={registerAsGuest} onChange={e=>setRegisterAsGuest(e.target.checked)} /> Guest (no account)</label>
+            </div>
+            <input type="email" className="w-full border rounded px-3 py-2" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email@example.com" />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium">Cell Number</label>
+          <input type="tel" className="w-full border rounded px-3 py-2" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} placeholder="+27…" />
+        </div>
+        <p className="text-xs text-gray-500">At least one of email or cell number is required. If no email is provided, a guest account is created automatically.</p>
+        {error && <p className="text-sm text-red-600">{error}</p>}
+        <button type="submit" disabled={busy} className="bg-blue-600 text-white rounded px-4 py-2 disabled:opacity-60">
+          {busy ? "Submitting..." : "Create"}
+        </button>
+      </form>
+
+      {createdReg && form && Array.isArray(form.fields) && (
+        <AttendeeFormsSection registration={createdReg} form={form} formsData={formsData} setFormsData={setFormsData} />
+      )}
+    </div>
+  );
+}
+
+function AttendeeFormsSection({ registration, form, formsData, setFormsData }: { registration: any; form: { isRequired: boolean; fields: FormField[] }; formsData: Record<number, Record<string,string>>; setFormsData: any; }) {
+  const { token } = useAuth();
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const mainTickets = (registration?.registrationOptions || []).filter((o: any) => o?.eventOption?.isMainTicket).reduce((s: number, o: any) => s + (o.quantity || 0), 0);
+  const count = Math.max(0, mainTickets);
+
+  const canSubmit = React.useMemo(() => {
+    if (!form || count <= 0) return false;
+    const reqFields = (form.fields || [])
+      .filter(f => !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph')
+      .map(f => f.id);
+    for (let i = 0; i < count; i++) {
+      const data = formsData[i] || {};
+      for (const fid of reqFields) {
+        const v = data[fid];
+        if (v === undefined || v === null || String(v).trim() === '') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [form, formsData, count]);
+
+  const update = (idx: number, fieldId: string, value: string) => {
+    setFormsData((prev: any) => ({ ...prev, [idx]: { ...(prev[idx]||{}), [fieldId]: value } }));
+  };
+
+  const submit = async () => {
+    if (!token) return;
+    try {
+      setSubmitting(true);
+      setError(null); setInfo(null);
+      const payload = [] as any[];
+      for (let i = 0; i < count; i++) payload.push({ answers: formsData[i] || {} });
+      await apiFetch(`/api/registrations/${encodeURIComponent(registration.id)}/forms/responses`, {
+        method: 'POST', authToken: token, body: { responses: payload }
+      });
+      setInfo('Attendee forms submitted successfully.');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to submit forms');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!form || !Array.isArray(form.fields) || count === 0) return null;
+  return (
+    <div className="mt-6 border rounded p-3 bg-gray-50">
+      <div className="text-sm font-medium mb-2">Attendee forms for this registration</div>
+      {error && <div className="text-xs text-red-600 mb-2">{error}</div>}
+      {info && <div className="text-xs text-emerald-700 mb-2">{info}</div>}
+      <div className="space-y-4">
+        {Array.from({ length: count }, (_, idx) => (
+          <div key={idx} className="bg-white border rounded p-3">
+            <div className="font-medium mb-2">Attendee {idx + 1}</div>
+            {form.fields.map((f) => (
+              <div key={f.id} className="mb-2">
+                {f.type === 'statement' ? (
+                  <div className="text-sm text-gray-700 whitespace-pre-line">{f.label}</div>
+                ) : f.type === 'paragraph' ? (
+                  <div className="text-sm text-gray-700">
+                    {f.label && <div className="font-medium mb-1 whitespace-pre-line">{f.label}</div>}
+                    {f.helpText && <div className="whitespace-pre-line">{f.helpText}</div>}
+                  </div>
+                ) : (
+                  <>
+                    <label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
+                    {f.type === 'yes_no' ? (
+                      <select className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)}>
+                        <option value="">Select</option>
+                        <option value="yes">Yes</option>
+                        <option value="no">No</option>
+                      </select>
+                    ) : f.type === 'date' ? (
+                      <input type="date" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    ) : f.type === 'numeric' ? (
+                      <input type="number" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    ) : (
+                      <input type="text" className="border rounded px-2 py-1 text-sm w-full" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    )}
+                    {f.helpText && <div className="text-xs text-gray-500 mt-1">{f.helpText}</div>}
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <button className="mt-3 px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" disabled={submitting || !canSubmit} onClick={submit}>{submitting ? 'Submitting…' : 'Submit forms'}</button>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/manual/page.tsx b/frontend/src/app/dashboard/supervisor/manual/page.tsx
new file mode 100644
index 0000000..69118be
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/manual/page.tsx
@@ -0,0 +1,451 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch, fetchAllUsers } from "@/lib/api";
+import { scoreUser } from "@/lib/fuzzyMatch";
+
+// ─── Pricing helpers ─────────────────────────────────────────────────────────
+
+function effectiveOptionUnit(opt: any): number {
+  const base = opt.price || 0;
+  const tiers = (Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : []).filter((t: any) => !t.variantId);
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+    .filter((t: any) => now < t.deadline)
+    .sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+function effectiveVariantUnit(opt: any, variant: any): number {
+  const base = variant.price !== null && variant.price !== undefined ? variant.price : opt.price || 0;
+  const allTiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : [];
+  const variantTiers = allTiers.filter((t: any) => t.variantId === variant.id);
+  const tiers = variantTiers.length > 0 ? variantTiers : allTiers.filter((t: any) => !t.variantId);
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+    .filter((t: any) => now < t.deadline)
+    .sort((a: any, b: any) => a.deadline - b.deadline || (a.order || 0) - (b.order || 0) || a.price - b.price);
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+function fmtPrice(n: number) {
+  return n === 0 ? "Free" : `R ${n.toFixed(2)}`;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export default function ManualRegistrationPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [selectedEventId, setSelectedEventId] = useState<string>("");
+  const [options, setOptions] = useState<any[]>([]);
+
+  // All system users for fuzzy lookup
+  const [allUsers, setAllUsers] = useState<any[]>([]);
+
+  const [guest, setGuest] = useState({ name: "", email: "", phoneNumber: "" });
+  const [registerAsGuest, setRegisterAsGuest] = useState(false);
+  const [notifPref, setNotifPref] = useState<"email" | "whatsapp" | "both">("email");
+  const [quantities, setQuantities] = useState<Record<string, number>>({});
+
+  // User search state
+  const [userQuery, setUserQuery] = useState("");
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+
+  const [submitting, setSubmitting] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load all users for client-side fuzzy matching
+  useEffect(() => {
+    if (!token) return;
+    fetchAllUsers(token)
+      .then(users => setAllUsers(users))
+      .catch(() => {});
+  }, [token]);
+
+  // Fuzzy match results (top 6, score threshold 0.45)
+  const matchedUsers = useMemo(() => {
+    if (userQuery.trim().length < 2) return [];
+    return allUsers
+      .map(u => ({ u, score: scoreUser(u, userQuery) }))
+      .filter(x => x.score >= 0.45)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 6)
+      .map(x => x.u);
+  }, [userQuery, allUsers]);
+
+  const selectUser = (u: any) => {
+    setGuest({ name: u.name || "", email: u.email || "", phoneNumber: u.phoneNumber || "" });
+    setUserQuery(u.name || "");
+    setDropdownOpen(false);
+  };
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
+        setDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        const evs = await apiFetch<any[]>("/api/events/all", { authToken: token });
+        const now = Date.now();
+        const active = (evs || []).filter(ev => {
+          const t = new Date(ev.endDate).getTime();
+          // Manual registration is rejected server-side for closed (cashed-up) events —
+          // don't offer them here even in the rare case one is closed before it ends.
+          return !isNaN(t) && t > now && ev.cashupStatus !== 'closed';
+        });
+        active.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+        setEvents(active);
+      } catch (e: any) {
+        // ignore
+      }
+    })();
+  }, [token]);
+
+  useEffect(() => {
+    const ev = events.find(e => e.id === selectedEventId);
+    if (ev) {
+      const opts = ev.options || ev.eventOptions || [];
+      setOptions(opts);
+      const map: Record<string, number> = {};
+      opts.forEach((o: any) => {
+        if ((o.variants || []).length > 0) {
+          (o.variants as any[]).forEach(v => { map[`${o.id}::${v.id}`] = 0; });
+        } else {
+          map[o.id] = 0;
+        }
+      });
+      setQuantities(map);
+    } else {
+      setOptions([]);
+      setQuantities({});
+    }
+  }, [selectedEventId, events]);
+
+  const totalDue = useMemo(() => {
+    return options.reduce((sum, o) => {
+      if ((o.variants || []).length > 0) {
+        return sum + (o.variants as any[]).reduce((vs: number, v: any) => vs + (quantities[`${o.id}::${v.id}`] || 0) * effectiveVariantUnit(o, v), 0);
+      }
+      return sum + (quantities[o.id] || 0) * effectiveOptionUnit(o);
+    }, 0);
+  }, [options, quantities]);
+
+  const submit = async () => {
+    if (!token) return;
+    setError(null);
+    setMessage(null);
+    if (!selectedEventId) { setError("Please select an event."); return; }
+    if (!guest.name || (!registerAsGuest && !guest.email)) { setError("Guest name and email are required."); return; }
+    const opts = Object.entries(quantities)
+      .filter(([, qty]) => qty > 0)
+      .map(([key, quantity]) => {
+        const [eventOptionId, variantId] = key.split("::");
+        return { eventOptionId, quantity, ...(variantId ? { variantId } : {}) };
+      });
+    if (opts.length === 0) { setError("Please select at least one ticket option."); return; }
+
+    try {
+      setSubmitting(true);
+      const hasEmail = !!guest.email.trim();
+      const hasPhone = !!guest.phoneNumber.trim();
+      const resolvedPref = hasEmail && hasPhone ? notifPref : hasPhone ? "whatsapp" : "email";
+      const res = await apiFetch<any>("/api/registrations/manual", {
+        method: "POST",
+        authToken: token,
+        body: {
+          eventId: selectedEventId,
+          options: opts,
+          user: guest,
+          guestOnly: registerAsGuest,
+          notificationPreference: resolvedPref,
+        }
+      });
+      setMessage("Manual registration created successfully.");
+
+      // Reset guest/ticket fields so the next registration starts from a clean slate
+      setGuest({ name: "", email: "", phoneNumber: "" });
+      setRegisterAsGuest(false);
+      setNotifPref("email");
+      setUserQuery("");
+      setDropdownOpen(false);
+      setQuantities(prev => Object.fromEntries(Object.keys(prev).map(k => [k, 0])));
+    } catch (e: any) {
+      setError(e?.message || "Failed to create manual registration");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Manual registration</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {message && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{message}</div>}
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+      <div className="grid md:grid-cols-2 gap-6">
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-lg font-semibold mb-3">1) Choose event</div>
+          <select className="w-full border rounded px-3 py-2 text-sm" value={selectedEventId} onChange={e => setSelectedEventId(e.target.value)}>
+            <option value="">Select an event…</option>
+            {events.map(ev => (
+              <option key={ev.id} value={ev.id}>{ev.title}</option>
+            ))}
+          </select>
+          {selectedEventId && (
+            <div className="mt-3 text-xs text-gray-600">
+              {(() => {
+                const ev = events.find(e => e.id === selectedEventId);
+                if (!ev) return null;
+                return <>
+                  <div>{new Date(ev.startDate).toLocaleString()} - {new Date(ev.endDate).toLocaleString()}</div>
+                </>;
+              })()}
+            </div>
+          )}
+        </div>
+
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-lg font-semibold mb-3">2) Guest details</div>
+
+          {/* ── User lookup ─────────────────────────────────────────── */}
+          <div ref={searchRef} className="relative mb-4">
+            <label className="block text-xs font-medium text-gray-500 mb-1">
+              Search existing user <span className="font-normal">(name, email or phone)</span>
+            </label>
+            <input
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Start typing to find a user…"
+              value={userQuery}
+              autoComplete="off"
+              onChange={e => { setUserQuery(e.target.value); setDropdownOpen(true); }}
+              onFocus={() => { if (userQuery.length >= 2) setDropdownOpen(true); }}
+            />
+
+            {dropdownOpen && userQuery.trim().length >= 2 && (
+              <div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
+                {matchedUsers.length > 0 ? (
+                  <>
+                    <div className="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50 border-b">
+                      {matchedUsers.length} match{matchedUsers.length !== 1 ? "es" : ""} — click to auto-fill
+                    </div>
+                    {matchedUsers.map(u => (
+                      <button
+                        key={u.id}
+                        type="button"
+                        className="w-full text-left px-3 py-2.5 hover:bg-indigo-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                        onClick={() => selectUser(u)}
+                      >
+                        <div className="text-sm font-medium text-gray-900">{u.name}</div>
+                        <div className="text-xs text-gray-500 mt-0.5 flex gap-2 flex-wrap">
+                          {u.email && <span>{u.email}</span>}
+                          {u.phoneNumber && <span>· {u.phoneNumber}</span>}
+                        </div>
+                      </button>
+                    ))}
+                  </>
+                ) : (
+                  <div className="px-3 py-3 text-sm text-gray-500 italic">
+                    No matching users found — fill in details below manually.
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="border-t pt-3 mb-3">
+            <div className="flex items-center gap-2">
+              <input id="registerAsGuest" type="checkbox" checked={registerAsGuest} onChange={e => setRegisterAsGuest(e.target.checked)} />
+              <label htmlFor="registerAsGuest" className="text-sm text-gray-700">Guest (do not link to an existing account)</label>
+            </div>
+          </div>
+
+          <div className="grid gap-2">
+            <input
+              className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Full name"
+              value={guest.name}
+              onChange={e => setGuest({ ...guest, name: e.target.value })}
+            />
+            <input
+              className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder={registerAsGuest ? "Email (optional for guest)" : "Email"}
+              type="email"
+              value={guest.email}
+              onChange={e => setGuest({ ...guest, email: e.target.value })}
+              required={!registerAsGuest}
+            />
+            <input
+              className="border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Phone (optional)"
+              value={guest.phoneNumber}
+              onChange={e => {
+                const v = e.target.value;
+                setGuest({ ...guest, phoneNumber: v });
+                if (v.trim() && !guest.email.trim()) setNotifPref("whatsapp");
+                else if (!v.trim() && guest.email.trim()) setNotifPref("email");
+              }}
+            />
+
+            {/* Preference selector */}
+            {(() => {
+              const hasEmail = !!guest.email.trim();
+              const hasPhone = !!guest.phoneNumber.trim();
+              if (!hasEmail && !hasPhone) return null;
+              if (hasEmail && !hasPhone) return (
+                <p className="text-xs text-gray-500">Tickets will be sent via <strong>email</strong>.</p>
+              );
+              if (hasPhone && !hasEmail) return (
+                <p className="text-xs text-gray-500">Tickets will be sent via <strong>WhatsApp</strong>.</p>
+              );
+              return (
+                <div>
+                  <label className="block text-xs font-medium text-gray-600 mb-1">Send tickets via</label>
+                  <div className="flex rounded-lg border overflow-hidden text-xs font-medium">
+                    {(["email", "whatsapp", "both"] as const).map((p) => (
+                      <button
+                        key={p}
+                        type="button"
+                        onClick={() => setNotifPref(p)}
+                        className={`flex-1 py-2 transition-colors ${
+                          notifPref === p
+                            ? p === "whatsapp" ? "bg-green-600 text-white border-green-600"
+                              : p === "both" ? "bg-indigo-600 text-white"
+                              : "bg-blue-600 text-white"
+                            : "bg-white text-gray-600 hover:bg-gray-50"
+                        }`}
+                      >
+                        {p === "email" ? "Email" : p === "whatsapp" ? "WhatsApp" : "Both"}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              );
+            })()}
+
+            {guest.name && (
+              <button
+                type="button"
+                onClick={() => { setGuest({ name: "", email: "", phoneNumber: "" }); setUserQuery(""); setNotifPref("email"); }}
+                className="text-xs text-gray-400 hover:text-gray-600 text-left"
+              >
+                ✕ Clear
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 border rounded-xl p-4 bg-white shadow-sm">
+        <div className="text-lg font-semibold mb-3">3) Select ticket options</div>
+        {options.length === 0 ? (
+          <div className="text-sm text-gray-500">Select an event to view options.</div>
+        ) : (
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {options.map(opt => {
+              const hasVariants = (opt.variants || []).length > 0;
+              if (hasVariants) {
+                return (
+                  <div key={opt.id} className="border rounded overflow-hidden col-span-full sm:col-span-1">
+                    <div className="px-3 py-2 bg-gray-50 border-b text-sm font-medium text-gray-800">
+                      {opt.name}{opt.isMainTicket ? <span className="ml-1.5 text-xs text-blue-600 font-normal">• Main</span> : null}
+                    </div>
+                    {(opt.variants as any[]).map((v: any) => {
+                      const unit = effectiveVariantUnit(opt, v);
+                      const basePrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
+                      const key = `${opt.id}::${v.id}`;
+                      return (
+                        <div key={v.id} className="flex items-center justify-between px-3 py-2 border-b last:border-b-0">
+                          <div>
+                            <div className="text-sm">{v.name}</div>
+                            <div className="text-xs text-gray-500">
+                              {fmtPrice(unit)}
+                              {unit < basePrice && basePrice > 0 && <span className="ml-1 text-green-600">(early bird, was {fmtPrice(basePrice)})</span>}
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <label className="text-xs text-gray-500">Qty</label>
+                            <input
+                              type="number" min={0}
+                              className="w-16 border rounded px-2 py-1 text-sm"
+                              value={quantities[key] || 0}
+                              onChange={e => setQuantities(q => ({ ...q, [key]: Math.max(0, parseInt(e.target.value || '0')) }))}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              }
+              const unit = effectiveOptionUnit(opt);
+              return (
+                <div key={opt.id} className="border rounded p-3">
+                  <div className="font-medium text-sm">{opt.name}</div>
+                  <div className="text-xs text-gray-500">
+                    {fmtPrice(unit)}
+                    {unit < opt.price && opt.price > 0 && <span className="ml-1 text-green-600">(early bird, was {fmtPrice(opt.price)})</span>}
+                    {opt.isMainTicket ? " • Main" : ""}
+                  </div>
+                  <div className="flex items-center gap-2 mt-2">
+                    <label className="text-xs text-gray-600">Qty</label>
+                    <input
+                      type="number" min={0}
+                      className="w-20 border rounded px-2 py-1 text-sm"
+                      value={quantities[opt.id] || 0}
+                      onChange={e => setQuantities(q => ({ ...q, [opt.id]: Math.max(0, parseInt(e.target.value || '0')) }))}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between mt-6">
+        <div className="text-sm">Total due: <span className="font-semibold">R {totalDue.toFixed(2)}</span></div>
+        <button disabled={submitting} onClick={submit} className="px-4 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 shadow-sm">{submitting ? 'Creating…' : 'Create registration'}</button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/page.tsx b/frontend/src/app/dashboard/supervisor/page.tsx
new file mode 100644
index 0000000..dbfd6ad
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/page.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { useStableState } from "@/hooks/useStableState";
+import { useVisiblePolling } from "@/hooks/useVisiblePolling";
+
+export default function SupervisorDashboardPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  // Everything this dashboard displays comes from one endpoint (/api/stats/supervisor)
+  // that computes it all server-side — no more separate calls plus a full payments/events
+  // pull just to reduce them down to a couple of numbers client-side.
+  // useStableState skips re-renders when a poll returns identical data, and hasLoadedOnce
+  // below means "Refreshing…" only shows on the very first load — together these stop the
+  // stats panels from flickering on every 15s poll.
+  const [scanStats, setScanStats] = useStableState<any | null>(null);
+  const [paymentStats, setPaymentStats] = useStableState<any | null>(null);
+  const [activeEventsCount, setActiveEventsCount] = useStableState<number>(0);
+  const [recentScans, setRecentScans] = useStableState<any[]>([]);
+  const [loadingStats, setLoadingStats] = useState(false);
+  const hasLoadedOnce = useRef(false);
+
+  const loadStats = async () => {
+    if (!token) return;
+    const isFirstLoad = !hasLoadedOnce.current;
+    try {
+      if (isFirstLoad) setLoadingStats(true);
+      const data = await apiFetch<any>("/api/stats/supervisor", { authToken: token });
+      setScanStats(data.scanStats);
+      setPaymentStats(data.paymentStats);
+      setActiveEventsCount(data.activeEventsCount || 0);
+      setRecentScans(Array.isArray(data.recentScans) ? data.recentScans : []);
+    } catch (e) {
+      // ignore
+    } finally {
+      hasLoadedOnce.current = true;
+      if (isFirstLoad) setLoadingStats(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    loadStats();
+  }, [token]);
+
+  // Poll every 15s while the tab is visible; pause in the background and refetch
+  // immediately on return instead of leaving stale numbers up.
+  useVisiblePolling(() => {
+    if (!token) return;
+    loadStats();
+  }, 15000, !!token);
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Supervisor Dashboard{user ? ` — ${user.name}` : ""}</h1>
+        <div className="hidden sm:flex gap-2">
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/manual")}>Manual registration</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/events")}>Manage events</button>
+          <button className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/payments")}>Payments</button>
+        </div>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use these tools.
+        </div>
+      )}
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2">
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+            <div className="text-lg font-semibold mb-2">Quick actions</div>
+            <div className="grid sm:grid-cols-3 gap-3">
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/manual")}>Create manual registration
+                <div className="text-xs text-white/90">Register a guest and issue tickets</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/events")}>Manage events
+                <div className="text-xs text-white/90">Create, edit, and update ticket types</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/sections")}>Manage sections
+                <div className="text-xs text-white/90">Create sections and assign ticket types</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/payments")}>Record payment / donations
+                <div className="text-xs text-white/90">Manual payments and assignment</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/ticket-scanning")}>Open scanner
+                <div className="text-xs text-white/90">Use your device camera to validate tickets</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/staff/event-tickets")}>Event tickets & printing
+                <div className="text-xs text-white/90">Browse event tickets and print lists</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/at-the-door")}>At the door
+                <div className="text-xs text-white/90">Walk-ins, payments, ticket printing</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/reports")}>
+                Reports
+                <div className="text-xs text-white/90">View, export, and email reports</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/forms") }>
+                Attendee forms
+                <div className="text-xs text-white/90">View submitted attendee forms</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/email-attendees") }>
+                Email attendees
+                <div className="text-xs text-white/90">Send message to attendees of an event</div>
+              </button>
+              <button className="rounded-lg p-3 text-left bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1" onClick={() => router.push("/dashboard/supervisor/whatsapp-attendees") }>
+                WhatsApp attendees
+                <div className="text-xs text-white/90">Send WhatsApp message to event attendees</div>
+              </button>
+            </div>
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg font-semibold">Recent scans</h2>
+              {loadingStats && <span className="text-xs text-gray-500">Refreshing…</span>}
+            </div>
+            <ul className="text-sm space-y-2 max-h-96 overflow-auto pr-2">
+              {recentScans.map((u: any) => (
+                <li key={u.id} className="border rounded p-2">
+                  <div className="flex justify-between">
+                    <div className="font-medium">{u.ticket?.event?.title || u.ticket?.eventId || 'Event'}</div>
+                    <div className="text-xs text-gray-500">{new Date(u.scannedAt).toLocaleString()}</div>
+                  </div>
+                  <div className="text-xs text-gray-600">{u.ticket?.registrationOption?.eventOption?.name || 'Ticket'} — #{String(u.ticket?.id || '').slice(0,8)}</div>
+                  <div className="text-xs text-gray-500">Scanned by: {u.scannedBy?.name || u.scannedById}</div>
+                </li>
+              ))}
+              {recentScans.length === 0 && <li className="text-gray-500">No scans yet.</li>}
+            </ul>
+          </div>
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+              <h2 className="text-lg font-semibold">Scanner activity</h2>
+              {loadingStats && <span className="text-xs text-gray-500">Refreshing…</span>}
+            </div>
+            {scanStats ? (
+              <div className="grid grid-cols-3 gap-2 mb-3">
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Today</div>
+                  <div className="text-lg font-semibold">{scanStats.totalToday}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">My scans</div>
+                  <div className="text-lg font-semibold">{scanStats.myToday}</div>
+                </div>
+                <div className="border rounded p-3 bg-white">
+                  <div className="text-xs text-gray-500">Last hour</div>
+                  <div className="text-lg font-semibold">{scanStats.lastHour}</div>
+                </div>
+              </div>
+            ) : (
+              <div className="text-sm text-gray-500">No scanner data yet.</div>
+            )}
+
+            {scanStats?.byStaff?.length > 0 && (
+              <div className="mb-1">
+                <div className="text-sm font-medium mb-1">Today by staff</div>
+                <ul className="text-sm text-gray-700 space-y-1">
+                  {scanStats.byStaff.map((s: any) => (
+                    <li key={s.scannedById} className="flex justify-between">
+                      <span>{s.name || 'Staff'}</span>
+                      <span className="font-medium">{s.count}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <h2 className="text-lg font-semibold mb-3">Supervisor stats</h2>
+            {loadingStats && <div className="text-sm text-gray-500 mb-2">Loading…</div>}
+            <div className="space-y-2">
+              <div className="border rounded p-3 bg-white flex items-center justify-between">
+                <div>
+                  <div className="text-xs text-gray-500">Active events</div>
+                  <div className="text-lg font-semibold">{activeEventsCount}</div>
+                </div>
+                <button className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard/staff/event-tickets")}>View</button>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Revenue today</div>
+                <div className="text-lg font-semibold">R {(paymentStats?.totalToday || 0).toFixed(2)}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Donations today</div>
+                <div className="text-lg font-semibold">{paymentStats?.donationsToday || 0}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/payments/page.tsx b/frontend/src/app/dashboard/supervisor/payments/page.tsx
new file mode 100644
index 0000000..03a07a0
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/payments/page.tsx
@@ -0,0 +1,1157 @@
+"use client";
+
+import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter, useSearchParams } from "next/navigation";
+import { apiFetch, fetchAllUsers, fetchAllPayments } from "@/lib/api";
+import { scoreUser } from "@/lib/fuzzyMatch";
+
+function RegistrationOptions({ regs, regOutstanding }: {
+  regs: any[];
+  regOutstanding: Record<string, { totalDue: number; totalPaid: number; outstanding: number }>;
+}) {
+  return (
+    <>
+      {regs.map((r: any) => {
+        const out = regOutstanding[r.id]?.outstanding ?? 0;
+        const label = `${r.event?.title || r.eventId || 'Event'} — ${r.user?.name || r.userId || 'User'} — Outstanding: R ${out.toFixed(2)} — #${String(r.id).slice(0,8)}`;
+        return (
+          <option key={r.id} value={r.id} title={label}>
+            {label}
+          </option>
+        );
+      })}
+    </>
+  );
+}
+
+function UserSearchField({ allUsers, value, onChange, placeholder = "Search by name, email or phone…", disabled = false }: {
+  allUsers: any[];
+  value: string;
+  onChange: (userId: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Sync display name when value changes externally (e.g. pre-fill from metadata)
+  useEffect(() => {
+    const u = allUsers.find(u => String(u.id) === String(value));
+    setQuery(u?.name || "");
+  }, [value, allUsers]);
+
+  const matches = useMemo(() => {
+    if (query.trim().length < 2) return [];
+    return allUsers
+      .map(u => ({ u, score: scoreUser(u, query) }))
+      .filter(x => x.score >= 0.45)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 8)
+      .map(x => x.u);
+  }, [query, allUsers]);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <input
+        className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400 disabled:bg-gray-50 pr-7"
+        placeholder={placeholder}
+        value={query}
+        disabled={disabled}
+        autoComplete="off"
+        onChange={e => { setQuery(e.target.value); setOpen(true); if (!e.target.value) onChange(""); }}
+        onFocus={() => { if (query.length >= 2) setOpen(true); }}
+      />
+      {value && (
+        <button type="button" className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-xs" onClick={() => { onChange(""); setQuery(""); setOpen(false); }}>✕</button>
+      )}
+      {open && query.trim().length >= 2 && (
+        <div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
+          {matches.length > 0 ? (
+            <>
+              <div className="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50 border-b">{matches.length} result{matches.length !== 1 ? "s" : ""}</div>
+              {matches.map(u => (
+                <button key={u.id} type="button" className="w-full text-left px-3 py-2.5 hover:bg-indigo-50 border-b border-gray-100 last:border-b-0 transition-colors" onClick={() => { onChange(String(u.id)); setQuery(u.name || ""); setOpen(false); }}>
+                  <div className="text-sm font-medium text-gray-900">{u.name}</div>
+                  <div className="text-xs text-gray-500 mt-0.5 flex gap-2 flex-wrap">
+                    {u.email && <span>{u.email}</span>}
+                    {u.phoneNumber && <span>· {u.phoneNumber}</span>}
+                  </div>
+                </button>
+              ))}
+            </>
+          ) : (
+            <div className="px-3 py-3 text-sm text-gray-500 italic">No matching users found.</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PaymentsContent() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+  const search = useSearchParams();
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [payments, setPayments] = useState<any[]>([]);
+  const [loadingList, setLoadingList] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [registrations, setRegistrations] = useState<any[]>([]);
+  const [loadingRegs, setLoadingRegs] = useState(false);
+  const [regOutstanding, setRegOutstanding] = useState<Record<string, { totalDue: number; totalPaid: number; outstanding: number }>>({});
+
+  const loadPayments = async () => {
+    if (!token) return;
+    try {
+      setLoadingList(true);
+      const list = await fetchAllPayments(token);
+      setPayments(list.sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()));
+    } catch (e: any) {
+      setError(e?.message || "Failed to load payments");
+    } finally {
+      setLoadingList(false);
+    }
+  };
+
+  useEffect(() => { loadPayments(); }, [token]);
+
+  // Compute effective unit price for a registration option.
+  // Uses priceSnapshot when available (authoritative backend price, variant-aware).
+  // Falls back to deadline-only early-bird calculation for legacy rows without a snapshot.
+  const optionUnitPrice = (opt: any, referenceTime: any, atTime: Date): number => {
+    if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
+      return Number(opt.priceSnapshot);
+    }
+    const eo = opt.eventOption;
+    const variantId: string | null = opt.variantId || null;
+    const base = (opt.variant?.price !== null && opt.variant?.price !== undefined)
+      ? Number(opt.variant.price)
+      : Number(eo?.price || 0);
+    const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
+    const tiers = variantId
+      ? allTiers.filter((t: any) => t.variantId === variantId)
+      : allTiers.filter((t: any) => !t.variantId);
+    if (tiers.length === 0) return base;
+    const t = atTime ? new Date(atTime) : new Date();
+    const ref = referenceTime ? new Date(referenceTime) : t;
+    const applicable = tiers
+      .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
+      .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
+      .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
+    if (applicable.length === 0) return base;
+    const price = Number(applicable[0].price);
+    return (price >= 0) ? price : base;
+  };
+
+  // Load registrations for dropdowns
+  const loadRegistrations = async () => {
+    if (!token) return;
+    try {
+      setLoadingRegs(true);
+      const regs = await apiFetch<any[]>("/api/registrations", { authToken: token });
+      const list = Array.isArray(regs) ? regs : [];
+      // Compute initial totalDue using priceSnapshot (authoritative backend price)
+      const now = new Date();
+      const baseMap: Record<string, { totalDue: number; totalPaid: number; outstanding: number }> = {};
+      for (const r of list) {
+        const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+        baseMap[r.id] = { totalDue, totalPaid: 0, outstanding: totalDue };
+      }
+      setRegOutstanding(baseMap);
+      // Fetch payments per registration to compute outstanding
+      await Promise.all(
+        list.map(async (r: any) => {
+          try {
+            const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(r.id)}`, { authToken: token });
+            const totalPaid = (pays || []).reduce((s, p) => s + (p.amount || 0), 0);
+            // totalDue uses priceSnapshot — not time-dependent
+            const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+            setRegOutstanding(prev => ({
+              ...prev,
+              [r.id]: {
+                totalDue,
+                totalPaid,
+                outstanding: Math.max(0, totalDue - totalPaid)
+              }
+            }));
+          } catch (e) {
+            // ignore per-reg errors
+          }
+        })
+      );
+      // Sort by createdAt desc
+      const sorted = list.sort((a,b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+      setRegistrations(sorted);
+    } catch (e) {
+      // ignore
+    } finally {
+      setLoadingRegs(false);
+    }
+  };
+
+  useEffect(() => { loadRegistrations(); }, [token]);
+
+  // Load all users for Refund section
+  useEffect(() => {
+    (async () => {
+      if (!token) return;
+      try {
+        setLoadingUsers(true);
+        const users = await fetchAllUsers(token);
+        setAllUsers(users);
+      } catch (e) {
+        // ignore; fallback to derived users from registrations
+      } finally {
+        setLoadingUsers(false);
+      }
+    })();
+  }, [token]);
+
+  // Create payment form
+  const [amount, setAmount] = useState<string>("");
+  const [method, setMethod] = useState<string>("cash");
+  const [registrationId, setRegistrationId] = useState<string>("");
+  const [isDonation, setIsDonation] = useState<boolean>(false);
+  const [eventId, setEventId] = useState<string>("");
+  const [events, setEvents] = useState<any[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+  // Backdate field
+  const [paidAtLocal, setPaidAtLocal] = useState<string>("");
+  // Users for Refund section (load all users with supervisor rights)
+  const [allUsers, setAllUsers] = useState<any[]>([]);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+
+  // New: user selection states for split dropdowns
+  const [selectedUserId, setSelectedUserId] = useState<string>("");
+
+  // Derived lists for users and outstanding registrations
+  const outstandingRegs = useMemo(() => {
+    return registrations.filter((r: any) => (r.status !== 'paid') && (r.status !== 'cancelled') && ((regOutstanding[r.id]?.outstanding ?? 0) > 0));
+  }, [registrations, regOutstanding]);
+
+  // Users list for UI dropdowns (use all users if loaded; fallback to outstanding registrations)
+  const usersList = useMemo(() => {
+    if (allUsers && allUsers.length > 0) {
+      return [...allUsers]
+        //.filter(u => u?.isActive !== false)
+        .map(u => ({ id: String(u.id), name: String(u.name || u.email || u.id) }))
+        .sort((a, b) => a.name.localeCompare(b.name, undefined as any, { sensitivity: 'base' } as any));
+    }
+    const map = new Map<string, string>();
+    for (const r of outstandingRegs) {
+      const uid = r.user?.id || r.userId;
+      if (!uid) continue;
+      const name = r.user?.name || r.user?.email || String(r.userId || uid);
+      if (!map.has(String(uid))) {
+        map.set(String(uid), String(name));
+      }
+    }
+    return Array.from(map.entries())
+      .map(([id, name]) => ({ id, name }))
+      .sort((a, b) => a.name.localeCompare(b.name, undefined as any, { sensitivity: 'base' } as any));
+  }, [allUsers, outstandingRegs]);
+
+  const regsForSelectedUser = useMemo(() => {
+    return outstandingRegs.filter((r: any) => (String(r.user?.id || r.userId) === String(selectedUserId)));
+  }, [outstandingRegs, selectedUserId]);
+
+  // Payment link tab state
+  const [linkUserId, setLinkUserId] = useState<string>("");
+  const [linkRegistrationId, setLinkRegistrationId] = useState<string>("");
+  const [linkAmount, setLinkAmount] = useState<string>("");
+  const [linkGenerating, setLinkGenerating] = useState(false);
+  const [linkResult, setLinkResult] = useState<{ redirectUrl: string; amount: number; registrationId: string } | null>(null);
+  const [linkSending, setLinkSending] = useState<"email" | "whatsapp" | null>(null);
+  const [linkCopied, setLinkCopied] = useState(false);
+
+  const regsForLinkUser = useMemo(() => {
+    return outstandingRegs.filter((r: any) => (String(r.user?.id || r.userId) === String(linkUserId)));
+  }, [outstandingRegs, linkUserId]);
+
+  useEffect(() => {
+    if (!linkRegistrationId) return;
+    const out = regOutstanding[linkRegistrationId]?.outstanding ?? 0;
+    setLinkAmount(out > 0 ? out.toFixed(2) : "");
+    setLinkResult(null);
+  }, [linkRegistrationId, regOutstanding]);
+
+  const generatePaymentLink = async () => {
+    if (!token || !linkRegistrationId) return;
+    setError(null); setInfo(null); setLinkCopied(false);
+    const amt = parseFloat(linkAmount || "0");
+    if (!amt || amt <= 0) { setError("Enter a valid amount"); return; }
+    try {
+      setLinkGenerating(true);
+      const res = await apiFetch<{ redirectUrl?: string; checkoutId?: string; amount?: number; priceUpdated?: boolean; message?: string }>("/api/payments/yoco-checkout", {
+        method: "POST",
+        authToken: token,
+        body: {
+          registrationId: linkRegistrationId,
+          amount: amt,
+          successUrl: window.location.origin + "/payment/success",
+          cancelUrl: window.location.origin + "/payment/cancel",
+          failureUrl: window.location.origin + "/payment/failure",
+        },
+      });
+      if (res.priceUpdated) {
+        setError(res.message || "Pricing has changed for this registration; please re-check the amount.");
+        return;
+      }
+      if (!res.redirectUrl) { setError("Failed to generate link"); return; }
+      setLinkResult({ redirectUrl: res.redirectUrl, amount: res.amount ?? amt, registrationId: linkRegistrationId });
+      setInfo("Payment link generated");
+    } catch (e: any) {
+      setError(e?.message || "Failed to generate payment link");
+    } finally {
+      setLinkGenerating(false);
+    }
+  };
+
+  const copyPaymentLink = async () => {
+    if (!linkResult) return;
+    try {
+      await navigator.clipboard.writeText(linkResult.redirectUrl);
+      setLinkCopied(true);
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch {
+      setError("Could not copy link — copy it manually");
+    }
+  };
+
+  const sendPaymentLink = async (channel: "email" | "whatsapp") => {
+    if (!token || !linkResult) return;
+    setError(null); setInfo(null);
+    try {
+      setLinkSending(channel);
+      await apiFetch("/api/payments/yoco-checkout/send", {
+        method: "POST",
+        authToken: token,
+        body: { registrationId: linkResult.registrationId, redirectUrl: linkResult.redirectUrl, channel },
+      });
+      setInfo(`Payment link sent via ${channel === "email" ? "email" : "WhatsApp"}`);
+    } catch (e: any) {
+      setError(e?.message || `Failed to send link via ${channel}`);
+    } finally {
+      setLinkSending(null);
+    }
+  };
+
+  useEffect(() => {
+    const regQ = search?.get("registrationId");
+    if (regQ) setRegistrationId(regQ);
+  }, [search]);
+
+  // If a registration is preselected via query, infer and set its user
+  useEffect(() => {
+    if (!registrationId) return;
+    const reg = registrations.find((r: any) => String(r.id) === String(registrationId));
+    const uid = reg?.user?.id || reg?.userId;
+    if (uid) setSelectedUserId(String(uid));
+  }, [registrationId, registrations]);
+
+  const [eventsIncludePast, setEventsIncludePast] = useState(false);
+  const [eventsIncludeInactive, setEventsIncludeInactive] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        const params = new URLSearchParams();
+        if (eventsIncludePast) params.set("includePast", "true");
+        if (eventsIncludeInactive) params.set("includeInactive", "true");
+        const qs = params.toString() ? `?${params.toString()}` : "";
+        const evs = await apiFetch<any[]>(`/api/events/all${qs}`, { authToken: token });
+        setEvents(evs || []);
+      } catch {}
+    })();
+  }, [token, eventsIncludePast, eventsIncludeInactive]);
+
+  useEffect(() => {
+    // Keep inputs sensible when toggling donation
+    if (isDonation) {
+      setRegistrationId("");
+    } else {
+      setEventId("");
+    }
+  }, [isDonation]);
+
+  const createPayment = async () => {
+    if (!token) return;
+    setError(null); setInfo(null);
+    const amt = parseFloat(amount || "0");
+    if (!amt || amt <= 0) { setError("Enter a valid amount"); return; }
+    if (!registrationId && !isDonation) {
+      setError("Registration required unless this is a donation");
+      return;
+    }
+    if (isDonation && !eventId && !registrationId) {
+      setError("Select an event for donations");
+      return;
+    }
+    try {
+      setSubmitting(true);
+      const res = await apiFetch<any>("/api/payments", {
+        method: "POST",
+        authToken: token,
+        body: {
+          amount: amt,
+          method,
+          userId: selectedUserId || undefined,
+          registrationId: registrationId || undefined,
+          eventId: eventId || undefined,
+          isDonation: !!isDonation,
+          paidAt: paidAtLocal ? new Date(paidAtLocal).toISOString() : undefined,
+        }
+      });
+      setInfo(`Payment created (R ${amt.toFixed(2)})`);
+      setAmount(""); setRegistrationId(""); setIsDonation(false); setEventId(""); setPaidAtLocal("");
+      await loadPayments();
+      await loadRegistrations();
+    } catch (e: any) {
+      setError(e?.message || "Failed to create payment");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  // Stats
+  const todayTotals = useMemo(() => {
+    const start = new Date(); start.setHours(0,0,0,0);
+    const today = payments.filter(p => new Date(p.createdAt).getTime() >= start.getTime());
+    const revenue = today.reduce((s,p)=> s + (p.amount||0), 0);
+    const donations = today.filter(p => p.isDonation).length;
+    return { revenue, donations, count: today.length };
+  }, [payments]);
+
+  const [mode, setMode] = useState<'payment'|'refund'|'donation'|'reconcile'|'link'>("payment");
+
+  // Yoco unreconciled list and actions
+  const [yocoLoading, setYocoLoading] = useState(false);
+  const [yocoTxs, setYocoTxs] = useState<any[]>([]);
+  const loadYocoUnreconciled = async () => {
+    if (!token) return;
+    try {
+      setYocoLoading(true);
+      const res = await apiFetch<any>("/api/yoco-transactions/unreconciled", { authToken: token });
+      const items = Array.isArray(res?.data) ? res.data : (Array.isArray(res) ? res : []);
+      setYocoTxs(items);
+    } catch (e) {
+      // ignore silently, shown on demand via error state if needed
+    } finally {
+      setYocoLoading(false);
+    }
+  };
+  useEffect(() => { loadYocoUnreconciled(); }, [token]);
+
+  // Inline reconcile form state per-row
+  const [reconcileForm, setReconcileForm] = useState<{ txId: string | null; type: 'reg' | 'don' | null; userId: string; registrationId: string; eventId: string; submitting: boolean }>({ txId: null, type: null, userId: '', registrationId: '', eventId: '', submitting: false });
+
+  const openReconcileToRegistration = (tx: any) => {
+    const metaUser = tx?.raw?.payload?.metadata?.userId ? String(tx.raw.payload.metadata.userId) : '';
+    setReconcileForm({ txId: tx.id, type: 'reg', userId: metaUser, registrationId: '', eventId: '', submitting: false });
+  };
+
+  const openReconcileAsDonation = (tx: any) => {
+    const metaEvent = tx?.raw?.payload?.metadata?.eventId ? String(tx.raw.payload.metadata.eventId) : '';
+    setReconcileForm({ txId: tx.id, type: 'don', userId: '', registrationId: '', eventId: metaEvent, submitting: false });
+  };
+
+  const regsForUser = (uid: string) => registrations
+    .filter((r: any) => String(r.user?.id || r.userId) === String(uid))
+    .filter((r: any) => {
+      const out = regOutstanding[r.id]?.outstanding ?? 0;
+      return out > 0.000001; // show only registrations with an outstanding balance
+    });
+
+  const submitReconcile = async () => {
+    if (!token) return;
+    const { txId, type, userId, registrationId, eventId } = reconcileForm;
+    if (!txId || !type) return;
+    try {
+      setReconcileForm(prev => ({ ...prev, submitting: true }));
+      if (type === 'reg') {
+        if (!registrationId) { setError('Please select a registration'); return; }
+        await apiFetch(`/api/yoco-transactions/${encodeURIComponent(txId)}/reconcile`, {
+          method: 'POST',
+          authToken: token,
+          body: { registrationId }
+        });
+        setInfo('Reconciled to registration');
+      } else {
+        if (!eventId) { setError('Please select an event'); return; }
+        await apiFetch(`/api/yoco-transactions/${encodeURIComponent(txId)}/reconcile`, {
+          method: 'POST',
+          authToken: token,
+          body: { eventId }
+        });
+        setInfo('Reconciled as donation');
+      }
+      setReconcileForm({ txId: null, type: null, userId: '', registrationId: '', eventId: '', submitting: false });
+      await loadYocoUnreconciled();
+      await loadPayments();
+      await loadRegistrations();
+    } catch (e: any) {
+      setError(e?.message || 'Failed to reconcile');
+    } finally {
+      setReconcileForm(prev => ({ ...prev, submitting: false }));
+    }
+  };
+
+  const cancelReconcile = () => setReconcileForm({ txId: null, type: null, userId: '', registrationId: '', eventId: '', submitting: false });
+
+  return (
+    <div className="max-w-6xl mx-auto w-full p-4 sm:p-6 overflow-x-hidden">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Payments</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{info}</div>}
+
+      <div className="mb-4 flex items-center gap-2">
+        <label className={`px-3 py-1.5 text-sm rounded border ${mode === 'payment' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="mode" value="payment" className="hidden" checked={mode==='payment'} onChange={() => setMode('payment')} />
+          Payment
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${mode === 'refund' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="mode" value="refund" className="hidden" checked={mode==='refund'} onChange={() => setMode('refund')} />
+          Refund
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${mode === 'donation' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="mode" value="donation" className="hidden" checked={mode==='donation'} onChange={() => setMode('donation')} />
+          Donations
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${mode === 'reconcile' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="mode" value="reconcile" className="hidden" checked={mode==='reconcile'} onChange={() => setMode('reconcile')} />
+          Reconcile
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${mode === 'link' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="mode" value="link" className="hidden" checked={mode==='link'} onChange={() => setMode('link')} />
+          Payment Link
+        </label>
+      </div>
+
+
+      <div className="grid lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-6">
+          {/* Yoco reconciliation panel */}
+          {mode === 'reconcile' && (
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-3">
+              <div className="text-lg font-semibold">Unreconciled Yoco Payments</div>
+              <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={loadYocoUnreconciled} disabled={yocoLoading}>{yocoLoading ? 'Refreshing…' : 'Refresh'}</button>
+            </div>
+            {yocoTxs.length === 0 ? (
+              <div className="text-sm text-gray-500">No unreconciled Yoco transactions.</div>
+            ) : (
+              <div className="overflow-x-auto w-full">
+                <table className="min-w-full text-sm">
+                  <thead>
+                  <tr className="text-left border-b">
+                    <th className="py-2 pr-3">Created</th>
+                    <th className="py-2 pr-3">External ID</th>
+                    <th className="py-2 pr-3">Amount</th>
+                    <th className="py-2 pr-3">Checkout</th>
+                    <th className="py-2 pr-3">Method</th>
+                    <th className="py-2">Actions</th>
+                  </tr>
+                  </thead>
+                  <tbody>
+                  {yocoTxs.map(tx => (
+                    <React.Fragment key={tx.id}>
+                      <tr className="border-b hover:bg-gray-50">
+                        <td className="py-2 pr-3 whitespace-nowrap">{tx.createdDate ? new Date(tx.createdDate).toLocaleString() : '-'}</td>
+                        <td className="py-2 pr-3 font-mono text-xs break-all max-w-[10rem]">{tx.externalId}</td>
+                        <td className="py-2 pr-3">R {(Number(tx.amount || 0)/100).toFixed(2)}</td>
+                        <td className="py-2 pr-3 break-all max-w-[8rem]">{tx.checkoutId || '-'}</td>
+                        <td className="py-2 pr-3">{tx.methodType || '-'}</td>
+                        <td className="py-2 flex flex-wrap gap-2">
+                          <button className="px-2 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700" onClick={() => openReconcileToRegistration(tx)}>To Registration</button>
+                          <button className="px-2 py-1 rounded bg-emerald-600 text-white hover:bg-emerald-700" onClick={() => openReconcileAsDonation(tx)}>As Donation</button>
+                          <button className="px-2 py-1 rounded bg-gray-600 text-white hover:bg-gray-700" onClick={async () => {
+                            if (!token) return;
+                            const ok = window.confirm('Ignore this transaction? It will be marked as ignored and reconciled.');
+                            if (!ok) return;
+                            try {
+                              await apiFetch(`/api/yoco-transactions/${encodeURIComponent(tx.id)}/ignore`, { method: 'POST', authToken: token });
+                              setInfo('Transaction ignored');
+                              await loadYocoUnreconciled();
+                            } catch (e:any) {
+                              setError(e?.message || 'Failed to ignore');
+                            }
+                          }}>Ignore</button>
+                        </td>
+                      </tr>
+                      {reconcileForm.txId === tx.id && (
+                        <tr className="bg-gray-50">
+                          <td colSpan={6} className="p-3">
+                            {reconcileForm.type === 'reg' ? (
+                              <div className="grid sm:grid-cols-3 gap-3 items-end">
+                                <div>
+                                  <label className="block text-xs text-gray-600 mb-1">User</label>
+                                  <UserSearchField allUsers={allUsers} value={reconcileForm.userId} onChange={uid => setReconcileForm(prev => ({ ...prev, userId: uid, registrationId: '' }))} />
+                                </div>
+                                <div className="sm:col-span-2">
+                                  <label className="block text-xs text-gray-600 mb-1">Registration</label>
+                                  <select className="w-full border rounded px-3 py-2 text-sm" value={reconcileForm.registrationId} onChange={e => setReconcileForm(prev => ({ ...prev, registrationId: e.target.value }))} disabled={!reconcileForm.userId}>
+                                    <option value="">Select registration…</option>
+                                    {reconcileForm.userId && regsForUser(reconcileForm.userId).map((r: any) => {
+                                      const out = regOutstanding[r.id]?.outstanding ?? 0;
+                                      const label = `${r.event?.title || r.eventId || 'Event'} — Outstanding: R ${out.toFixed(2)} — #${String(r.id).slice(0,8)}`;
+                                      return <option key={r.id} value={r.id} title={label}>{label}</option>;
+                                    })}
+                                    {reconcileForm.userId && regsForUser(reconcileForm.userId).length === 0 && (
+                                      <option value="" disabled>No registrations with outstanding balance</option>
+                                    )}
+                                  </select>
+                                </div>
+                                <div className="flex gap-2">
+                                  <button className="px-3 py-1.5 rounded bg-indigo-600 text-white text-sm disabled:opacity-50" disabled={!reconcileForm.registrationId || reconcileForm.submitting} onClick={submitReconcile}>{reconcileForm.submitting ? 'Saving…' : 'Confirm'}</button>
+                                  <button className="px-3 py-1.5 rounded bg-gray-200 text-gray-800 text-sm" onClick={cancelReconcile}>Cancel</button>
+                                </div>
+                              </div>
+                            ) : (
+                              <div className="grid sm:grid-cols-3 gap-3 items-end">
+                                <div className="sm:col-span-2">
+                                  <label className="block text-xs text-gray-600 mb-1">Event</label>
+                                  <select className="w-full border rounded px-3 py-2 text-sm" value={reconcileForm.eventId} onChange={e => setReconcileForm(prev => ({ ...prev, eventId: e.target.value }))}>
+                                    <option value="">Select event…</option>
+                                    {events.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+                                  </select>
+                                </div>
+                                <div className="flex gap-2">
+                                  <button className="px-3 py-1.5 rounded bg-emerald-600 text-white text-sm disabled:opacity-50" disabled={!reconcileForm.eventId || reconcileForm.submitting} onClick={submitReconcile}>{reconcileForm.submitting ? 'Saving…' : 'Confirm'}</button>
+                                  <button className="px-3 py-1.5 rounded bg-gray-200 text-gray-800 text-sm" onClick={cancelReconcile}>Cancel</button>
+                                </div>
+                              </div>
+                            )}
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+          )}
+          {mode === 'payment' && (
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="text-lg font-semibold mb-3">Create payment</div>
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Amount</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" type="number" step="0.01" value={amount} onChange={e => setAmount(e.target.value)} />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Method</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={method} onChange={e => setMethod(e.target.value)}>
+                  <option value="cash">Cash</option>
+                  <option value="card">Card</option>
+                  <option value="eft">EFT</option>
+                  <option value="voucher">Voucher</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">User</label>
+                <UserSearchField allUsers={allUsers} value={selectedUserId} onChange={uid => { setSelectedUserId(uid); setRegistrationId(""); }} />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Registration (required unless donation)</label>
+                <select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={registrationId} onChange={e => setRegistrationId(e.target.value)} disabled={isDonation || !selectedUserId}>
+                  <option value="">Select registration…</option>
+                  <RegistrationOptions regs={regsForSelectedUser} regOutstanding={regOutstanding} />
+                </select>
+                {loadingRegs && <div className="text-xs text-gray-500 mt-1">Loading registrations…</div>}
+              </div>
+              <div className="flex items-center gap-2">
+                <input id="isDonation" type="checkbox" checked={isDonation} onChange={e => setIsDonation(e.target.checked)} />
+                <label htmlFor="isDonation" className="text-sm">Donation</label>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Event (for donations)</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={eventId} onChange={e => setEventId(e.target.value)} disabled={!isDonation}>
+                  <option value="">Select event…</option>
+                  {events.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+                </select>
+                <div className="flex items-center gap-4 mt-1.5 text-xs text-gray-500">
+                  <label className="flex items-center gap-1 cursor-pointer">
+                    <input type="checkbox" checked={eventsIncludePast} onChange={e => setEventsIncludePast(e.target.checked)} />
+                    Include past events
+                  </label>
+                  {user?.role === "admin" && (
+                    <label className="flex items-center gap-1 cursor-pointer">
+                      <input type="checkbox" checked={eventsIncludeInactive} onChange={e => setEventsIncludeInactive(e.target.checked)} />
+                      Include inactive events
+                    </label>
+                  )}
+                </div>
+              </div>
+              <div className="sm:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
+                <div>
+                  <label className="block text-xs text-gray-600 mb-1">Paid at (optional)</label>
+                  <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={paidAtLocal} onChange={e=>setPaidAtLocal(e.target.value)} max={new Date().toISOString().slice(0,16)} />
+                  <div className="text-[10px] text-gray-500 mt-1">Leave blank to use current time</div>
+                </div>
+              </div>
+            </div>
+            <div className="mt-3">
+              <button disabled={submitting} onClick={createPayment} className="mt-2 w-full px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 shadow-sm">{submitting ? 'Creating…' : 'Create payment'}</button>
+            </div>
+          </div>
+          )}
+
+          {mode === 'refund' && (
+            <>
+              <RefundSection
+                payments={payments}
+                allUsers={allUsers}
+                usersList={usersList}
+                regsForUser={(uid:string)=> registrations.filter((r:any)=> String(r.user?.id||r.userId)===String(uid))}
+                regOutstanding={regOutstanding}
+                onDone={async()=>{ await loadPayments(); await loadRegistrations(); setInfo('Refund recorded'); }}
+              />
+              {loadingUsers && <div className="text-xs text-gray-500">Loading users…</div>}
+            </>
+          )}
+
+          {mode === 'donation' && (
+            <>
+              <DonationAssignSection
+                payments={payments}
+                allUsers={allUsers}
+                registrations={registrations}
+                regOutstanding={regOutstanding}
+                onDone={async()=>{ await loadPayments(); await loadRegistrations(); setInfo('Donation assigned to registration'); }}
+              />
+              {loadingUsers && <div className="text-xs text-gray-500">Loading users…</div>}
+            </>
+          )}
+
+          {mode === 'link' && (
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="text-lg font-semibold mb-3">Create payment link</div>
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">User</label>
+                <UserSearchField allUsers={allUsers} value={linkUserId} onChange={uid => { setLinkUserId(uid); setLinkRegistrationId(""); setLinkResult(null); }} />
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Registration</label>
+                <select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={linkRegistrationId} onChange={e => setLinkRegistrationId(e.target.value)} disabled={!linkUserId}>
+                  <option value="">Select registration…</option>
+                  <RegistrationOptions regs={regsForLinkUser} regOutstanding={regOutstanding} />
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Amount</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" type="number" step="0.01" value={linkAmount} onChange={e => setLinkAmount(e.target.value)} disabled={!linkRegistrationId} />
+                <div className="text-[10px] text-gray-500 mt-1">Defaults to the outstanding balance; minimum R15 for a partial payment.</div>
+              </div>
+            </div>
+            <div className="mt-3">
+              <button disabled={linkGenerating || !linkRegistrationId} onClick={generatePaymentLink} className="w-full px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 shadow-sm">
+                {linkGenerating ? 'Generating…' : 'Generate link'}
+              </button>
+            </div>
+            {linkResult && (
+              <div className="mt-4 p-3 border rounded-lg bg-gray-50 space-y-2">
+                <div className="text-xs text-gray-600">Link for R {linkResult.amount.toFixed(2)}:</div>
+                <div className="text-sm break-all font-mono bg-white border rounded px-2 py-1.5">{linkResult.redirectUrl}</div>
+                <div className="flex flex-wrap gap-2 pt-1">
+                  <button onClick={copyPaymentLink} className="px-3 py-1.5 text-xs rounded bg-gray-200 hover:bg-gray-300 text-gray-800">{linkCopied ? 'Copied!' : 'Copy link'}</button>
+                  <button disabled={linkSending==='email'} onClick={() => sendPaymentLink('email')} className="px-3 py-1.5 text-xs rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50">{linkSending==='email' ? 'Sending…' : 'Send via Email'}</button>
+                  <button disabled={linkSending==='whatsapp'} onClick={() => sendPaymentLink('whatsapp')} className="px-3 py-1.5 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50">{linkSending==='whatsapp' ? 'Sending…' : 'Send via WhatsApp'}</button>
+                </div>
+                <div className="text-[10px] text-amber-700">Generating a new link for this registration will replace this one — the old link will no longer be honored.</div>
+              </div>
+            )}
+          </div>
+          )}
+
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="flex items-center justify-between mb-2">
+              <div className="text-lg font-semibold">Recent payments</div>
+              {loadingList && <span className="text-xs text-gray-500">Loading…</span>}
+            </div>
+            <ul className="text-sm space-y-2 max-h-[520px] overflow-auto pr-2">
+              {payments.slice(0, 25).map(p => {
+                const amt = p.amount || 0;
+                const isRefund = amt < 0;
+                return (
+                  <li key={p.id} className={`border rounded p-2 ${isRefund ? 'bg-red-50' : ''}`}>
+                    <div className="flex justify-between">
+                      <div className={`font-medium ${isRefund ? 'text-red-700' : ''}`}>{isRefund ? '-' : ''}R {Math.abs(amt).toFixed(2)} {p.isDonation ? <span className="text-xs text-emerald-700">(donation)</span> : null} {isRefund ? <span className="text-xs text-red-700">(refund)</span> : null}</div>
+                      <div className="text-xs text-gray-500">{new Date(p.createdAt).toLocaleString()}</div>
+                    </div>
+                    <div className="text-xs text-gray-600">Method: {p.method || 'payment'}</div>
+                    {(p.registration?.user?.name || p.user?.name) && <div className="text-xs text-gray-600">Name: {p.registration?.user?.name || p.user?.name}</div>}
+                    {p.registrationId && <div className="text-xs text-gray-600">Registration: #{String(p.registrationId).slice(0,8)}</div>}
+                    {p.eventId && <div className="text-xs text-gray-600">Event: {p.event?.title || p.eventId}</div>}
+                  </li>
+                );
+              })}
+              {payments.length === 0 && <li className="text-gray-500">No payments yet.</li>}
+            </ul>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="border rounded-xl p-4 bg-white shadow-sm">
+            <div className="text-lg font-semibold mb-3">Today</div>
+            <div className="grid grid-cols-3 gap-2">
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Payments</div>
+                <div className="text-lg font-semibold">{todayTotals.count}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Revenue</div>
+                <div className="text-lg font-semibold">R {todayTotals.revenue.toFixed(2)}</div>
+              </div>
+              <div className="border rounded p-3 bg-white">
+                <div className="text-xs text-gray-500">Donations</div>
+                <div className="text-lg font-semibold">{todayTotals.donations}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type RefundSectionProps = {
+  payments: any[];
+  allUsers: any[];
+  usersList: { id: string; name: string }[];
+  regsForUser: (userId: string) => any[];
+  regOutstanding: Record<string, { totalDue: number; totalPaid: number; outstanding: number }>;
+  onDone: () => void | Promise<void>;
+};
+
+function RefundSection({ payments, allUsers, usersList, regsForUser, regOutstanding, onDone }: RefundSectionProps) {
+  const { token } = useAuth();
+  const [userId, setUserId] = useState<string>("");
+  const [target, setTarget] = useState<'payment'|'registration'>('payment');
+  const [paymentId, setPaymentId] = useState<string>("");
+  const [registrationId, setRegistrationId] = useState<string>("");
+  const [amount, setAmount] = useState<string>("");
+  const [method, setMethod] = useState<string>('refund');
+  const [reason, setReason] = useState<string>('');
+  const [submitting, setSubmitting] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const paymentsForUser = useMemo(() => {
+    if (!userId) return [] as any[];
+    return payments.filter(p => String(p.userId) === String(userId) && (p.amount || 0) > 0);
+  }, [payments, userId]);
+
+  useEffect(() => {
+    // Reset dependent fields on changes
+    setPaymentId("");
+    setRegistrationId("");
+    setAmount("");
+  }, [userId, target]);
+
+  useEffect(() => {
+    // If a payment selected, default amount to that payment's amount
+    if (target === 'payment') {
+      const p = payments.find(pp => String(pp.id) === String(paymentId));
+      if (p) setAmount(String(Math.abs(p.amount || 0)));
+    }
+  }, [paymentId, target, payments]);
+
+  const regs = useMemo(() => regsForUser(userId), [regsForUser, userId]);
+
+  const submitRefund = async () => {
+    if (!token) return;
+    setErr(null);
+    const amt = parseFloat(amount || '0');
+    if (!(amt > 0)) { setErr('Enter a valid refund amount'); return; }
+    if (!userId) { setErr('Select a user'); return; }
+    if (target === 'payment' && !paymentId) { setErr('Select a payment to refund'); return; }
+    if (target === 'registration' && !registrationId) { setErr('Select a registration to refund against'); return; }
+    try {
+      setSubmitting(true);
+      await apiFetch('/api/payments/refund', {
+        method: 'POST',
+        authToken: token!,
+        body: {
+          userId,
+          amount: amt,
+          method,
+          paymentId: target === 'payment' ? paymentId : undefined,
+          registrationId: target === 'registration' ? registrationId : undefined,
+          reason: reason || undefined
+        }
+      });
+      setUserId(""); setPaymentId(""); setRegistrationId(""); setAmount(""); setReason("");
+      await onDone();
+    } catch (e: any) {
+      setErr(e?.message || 'Failed to create refund');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="border rounded-xl p-4 bg-white shadow-sm">
+      <div className="text-lg font-semibold mb-3">Refund</div>
+      {err && <div className="p-2 mb-2 text-xs bg-red-50 text-red-700 border rounded">{err}</div>}
+      <div className="grid gap-2">
+        <label className="text-xs text-gray-600">User</label>
+        <UserSearchField allUsers={allUsers} value={userId} onChange={uid => setUserId(uid)} />
+        <label className="text-xs text-gray-600 mt-2">Refund target</label>
+        <div className="flex gap-4 text-sm">
+          <label className="flex items-center gap-2"><input type="radio" name="refundTarget" checked={target==='payment'} onChange={()=>setTarget('payment')} /> Payment</label>
+          <label className="flex items-center gap-2"><input type="radio" name="refundTarget" checked={target==='registration'} onChange={()=>setTarget('registration')} /> Registration</label>
+        </div>
+        {target === 'payment' ? (
+          <>
+            <label className="text-xs text-gray-600 mt-2">Payment</label>
+            <select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={paymentId} onChange={e => setPaymentId(e.target.value)} disabled={!userId}>
+              <option value="">Select payment…</option>
+              {paymentsForUser.map((p:any)=>{
+                const label = `R ${(p.amount||0).toFixed(2)} — ${p.registrationId ? `Registration ${String(p.registrationId).slice(0,8)}` : (p.event?.title || p.eventId || 'Event')} — #${String(p.id).slice(0,8)}`;
+                return <option key={p.id} value={p.id} title={label}>{label}</option>;
+              })}
+            </select>
+          </>
+        ) : (
+          <>
+            <label className="text-xs text-gray-600 mt-2">Registration</label>
+            <select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={registrationId} onChange={e => setRegistrationId(e.target.value)} disabled={!userId}>
+              <option value="">Select registration…</option>
+              {regs.map((r:any)=>{
+                const out = regOutstanding[r.id]?.outstanding ?? 0;
+                const label = `${r.event?.title || r.eventId || 'Event'} — Outstanding: R ${out.toFixed(2)} — #${String(r.id).slice(0,8)}`;
+                return <option key={r.id} value={r.id} title={label}>{label}</option>;
+              })}
+            </select>
+          </>
+        )}
+        <div className="grid sm:grid-cols-2 gap-2 mt-2">
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Amount</label>
+            <input type="number" step="0.01" className="w-full border rounded px-3 py-2 text-sm" value={amount} onChange={e => setAmount(e.target.value)} />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Method</label>
+            <select className="w-full border rounded px-3 py-2 text-sm" value={method} onChange={e => setMethod(e.target.value)}>
+              <option value="refund">Refund</option>
+              <option value="cash-refund">Cash refund</option>
+              <option value="eft-refund">EFT refund</option>
+              <option value="card-refund">Card refund</option>
+            </select>
+          </div>
+        </div>
+        <label className="block text-xs text-gray-600 mt-2">Reason (optional)</label>
+        <input type="text" className="w-full border rounded px-3 py-2 text-sm" value={reason} onChange={e => setReason(e.target.value)} placeholder="Reason or note…" />
+        <button disabled={submitting} onClick={submitRefund} className="mt-2 px-3 py-1.5 text-sm rounded bg-rose-600 text-white hover:bg-rose-700 disabled:opacity-50 shadow-sm">{submitting ? 'Recording…' : 'Record refund'}</button>
+      </div>
+    </div>
+  );
+}
+
+type DonationAssignSectionProps = {
+  payments: any[];
+  allUsers: any[];
+  registrations: any[];
+  regOutstanding: Record<string, { totalDue: number; totalPaid: number; outstanding: number }>;
+  onDone: () => void | Promise<void>;
+};
+
+// Select a user, then one of their registrations, then one of the unassigned donations for
+// that registration's event. The backend rejects the assignment if either the donation's own
+// event or the target registration's event is closed (cashed up) — this UI filters both out
+// proactively so staff aren't offered a choice that will just be rejected on submit.
+function DonationAssignSection({ payments, allUsers, registrations, regOutstanding, onDone }: DonationAssignSectionProps) {
+  const { token } = useAuth();
+  const [userId, setUserId] = useState<string>("");
+  const [registrationId, setRegistrationId] = useState<string>("");
+  const [paymentId, setPaymentId] = useState<string>("");
+  const [amountStr, setAmountStr] = useState<string>("");
+  const [assigning, setAssigning] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  useEffect(() => { setRegistrationId(""); setPaymentId(""); }, [userId]);
+  useEffect(() => { setPaymentId(""); }, [registrationId]);
+
+  // Registrations for the selected user that can actually receive a donation: an outstanding
+  // balance to apply it to, and an event that isn't closed.
+  const regsForUser = useMemo(() => {
+    if (!userId) return [] as any[];
+    return registrations.filter((r: any) => {
+      if (String(r.user?.id || r.userId) !== String(userId)) return false;
+      if (r.status === 'cancelled') return false;
+      if (r.event?.cashupStatus === 'closed') return false;
+      const out = regOutstanding[r.id]?.outstanding ?? 0;
+      return out > 0.000001;
+    });
+  }, [registrations, regOutstanding, userId]);
+
+  const selectedRegistration = useMemo(
+    () => registrations.find((r: any) => String(r.id) === String(registrationId)),
+    [registrations, registrationId]
+  );
+
+  // Donations "relevant to that event" — unassigned donations logged against the same event
+  // as the chosen registration.
+  const donationsForEvent = useMemo(() => {
+    if (!selectedRegistration) return [] as any[];
+    const eventId = selectedRegistration.eventId || selectedRegistration.event?.id;
+    return payments.filter((p: any) => p.isDonation && !p.registrationId && String(p.eventId) === String(eventId));
+  }, [payments, selectedRegistration]);
+
+  const selectedDonation = useMemo(
+    () => payments.find((p: any) => String(p.id) === String(paymentId)),
+    [payments, paymentId]
+  );
+
+  const outstanding = registrationId ? (regOutstanding[registrationId]?.outstanding ?? 0) : 0;
+
+  // The most that can be allocated: never more than the donation itself, never more than
+  // what's actually owed. Staff can type a smaller amount to leave a balance outstanding.
+  const maxAllocatable = useMemo(() => {
+    if (!selectedDonation) return 0;
+    return Math.min(selectedDonation.amount || 0, outstanding);
+  }, [selectedDonation, outstanding]);
+
+  // Default to "apply as much as needed" whenever a new donation is picked — the common
+  // case needs no typing, but the field stays editable for a deliberate partial allocation.
+  useEffect(() => {
+    setAmountStr(maxAllocatable > 0 ? maxAllocatable.toFixed(2) : "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paymentId]);
+
+  const amountNum = parseFloat(amountStr || "0");
+  const leftover = selectedDonation ? Math.max(0, (selectedDonation.amount || 0) - amountNum) : 0;
+
+  const assign = async () => {
+    if (!token) return;
+    setErr(null);
+    if (!paymentId || !registrationId) { setErr('Select a donation and a registration'); return; }
+    if (!(amountNum > 0)) { setErr('Enter a valid amount to allocate'); return; }
+    if (amountNum > maxAllocatable + 0.000001) { setErr(`Cannot allocate more than R ${maxAllocatable.toFixed(2)}`); return; }
+    try {
+      setAssigning(true);
+      await apiFetch('/api/payments/assign-donation', {
+        method: 'PUT',
+        authToken: token,
+        body: { paymentId, registrationId, amount: amountNum }
+      });
+      setUserId(""); setRegistrationId(""); setPaymentId(""); setAmountStr("");
+      await onDone();
+    } catch (e: any) {
+      setErr(e?.message || 'Failed to assign donation');
+    } finally {
+      setAssigning(false);
+    }
+  };
+
+  return (
+    <div className="border rounded-xl p-4 bg-white shadow-sm">
+      <div className="text-lg font-semibold mb-3">Assign donation to a registration</div>
+      {err && <div className="p-2 mb-2 text-xs bg-red-50 text-red-700 border rounded">{err}</div>}
+      <div className="grid gap-2">
+        <label className="text-xs text-gray-600">1. User</label>
+        <UserSearchField allUsers={allUsers} value={userId} onChange={setUserId} />
+
+        <label className="text-xs text-gray-600 mt-2">2. Registration</label>
+        <select
+          className="w-full max-w-full border rounded px-3 py-2 text-sm truncate"
+          value={registrationId}
+          onChange={e => setRegistrationId(e.target.value)}
+          disabled={!userId}
+        >
+          <option value="">Select registration…</option>
+          <RegistrationOptions regs={regsForUser} regOutstanding={regOutstanding} />
+        </select>
+        {userId && regsForUser.length === 0 && (
+          <div className="text-xs text-gray-500">No eligible registrations for this user — either nothing outstanding, or the event is closed.</div>
+        )}
+
+        <label className="text-xs text-gray-600 mt-2">3. Donation</label>
+        <select
+          className="w-full max-w-full border rounded px-3 py-2 text-sm truncate"
+          value={paymentId}
+          onChange={e => setPaymentId(e.target.value)}
+          disabled={!registrationId}
+        >
+          <option value="">Select donation…</option>
+          {donationsForEvent.map((p: any) => {
+            const label = `R ${(p.amount || 0).toFixed(2)} — ${p.user?.name || p.userId || 'Donor'} — #${String(p.id).slice(0,8)}`;
+            return <option key={p.id} value={p.id} title={label}>{label}</option>;
+          })}
+        </select>
+        {registrationId && donationsForEvent.length === 0 && (
+          <div className="text-xs text-gray-500">No unassigned donations for this event.</div>
+        )}
+
+        {selectedDonation && (
+          <>
+            <label className="text-xs text-gray-600 mt-2">4. Amount to allocate</label>
+            <input
+              type="number"
+              step="0.01"
+              min="0.01"
+              max={maxAllocatable}
+              className="w-full border rounded px-3 py-2 text-sm"
+              value={amountStr}
+              onChange={e => setAmountStr(e.target.value)}
+            />
+            <div className="text-xs text-gray-500">
+              Donation is R {(selectedDonation.amount || 0).toFixed(2)}; outstanding balance is R {outstanding.toFixed(2)}.
+              {leftover > 0.000001 && <> The remaining R {leftover.toFixed(2)} will stay unassigned as a donation.</>}
+            </div>
+          </>
+        )}
+
+        <button
+          disabled={!paymentId || assigning || !(amountNum > 0)}
+          onClick={assign}
+          className="mt-2 px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 shadow-sm"
+        >
+          {assigning ? 'Assigning…' : 'Assign donation'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function PaymentsPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <PaymentsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/reports/page.tsx b/frontend/src/app/dashboard/supervisor/reports/page.tsx
new file mode 100644
index 0000000..b4d5082
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/reports/page.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import ReportsV2 from "@/components/reports/ReportsV2";
+
+export default function SupervisorReportsPage() {
+  const router = useRouter();
+  return (
+    <div className="max-w-6xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Reports</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+      </div>
+      <p className="text-sm text-gray-600 mb-4">View, export, or email operational reports for events.</p>
+      <ReportsV2 />
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/supervisor/sections/page.tsx b/frontend/src/app/dashboard/supervisor/sections/page.tsx
new file mode 100644
index 0000000..46b9956
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/sections/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export default function SectionsRedirectPage() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace("/dashboard/supervisor/events");
+  }, [router]);
+  return null;
+}
diff --git a/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx b/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx
new file mode 100644
index 0000000..e80e153
--- /dev/null
+++ b/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx
@@ -0,0 +1,941 @@
+"use client";
+
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter, useSearchParams } from "next/navigation";
+import { apiFetch, fetchAllUsers } from "@/lib/api";
+
+// Attendee with preference info
+type Attendee = { id: string; name: string; phone: string; pref: string };
+type UserEntry = { id: string; name: string; phone: string; pref: string };
+
+function toLocalInputValue(d: Date) {
+  const pad = (n: number) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+export default function WhatsAppAttendeesPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <WhatsAppAttendeesPageInner />
+    </Suspense>
+  );
+}
+
+// ─── Attendees dropdown with preference indicators ────────────────────────────
+function AttendeesCheckboxDropdown({
+  attendees,
+  loading,
+  selectedIds,
+  onChange,
+  channel = "whatsapp",
+}: {
+  attendees: (Attendee | UserEntry)[];
+  loading: boolean;
+  selectedIds: string[];
+  onChange: (ids: string[]) => void;
+  channel?: "whatsapp" | "email";
+}) {
+  const [open, setOpen] = useState(false);
+  const allIds = useMemo(() => attendees.map((a) => a.id), [attendees]);
+  const allSelected = selectedIds.length > 0 && selectedIds.length === allIds.length;
+
+  const toggleAll = (checked: boolean) => onChange(checked ? allIds : []);
+  const toggleId = (id: string) => {
+    if (selectedIds.includes(id)) onChange(selectedIds.filter((x) => x !== id));
+    else onChange([...selectedIds, id]);
+  };
+
+  const prefMatch = (pref: string) =>
+    channel === "whatsapp" ? pref === "whatsapp" || pref === "both" : pref === "email" || pref === "both";
+  const prefLabel = (pref: string) => {
+    if (pref === "both") return "both";
+    if (pref === "whatsapp") return "WA";
+    if (pref === "email") return "email";
+    return pref || "email";
+  };
+  const prefColor = (pref: string, match: boolean) =>
+    match ? "text-green-700 bg-green-50" : "text-amber-700 bg-amber-50";
+
+  const summary = loading
+    ? "Loading…"
+    : attendees.length === 0
+    ? "No attendees"
+    : allSelected
+    ? `All (${attendees.length})`
+    : selectedIds.length === 0
+    ? "None selected"
+    : `${selectedIds.length} selected`;
+
+  const mismatched = selectedIds.filter((id) => {
+    const a = attendees.find((x) => x.id === id);
+    return a && !prefMatch(a.pref);
+  });
+
+  return (
+    <div className="relative block w-full max-w-xs">
+      <button
+        type="button"
+        className="w-full border rounded px-3 py-2 text-sm bg-white hover:bg-gray-50 text-left"
+        onClick={() => setOpen((o) => !o)}
+      >
+        {summary}
+        {mismatched.length > 0 && (
+          <span className="ml-2 text-xs text-amber-600">({mismatched.length} pref mismatch)</span>
+        )}
+      </button>
+      {open && (
+        <div className="absolute z-10 mt-1 w-64 max-h-72 overflow-auto bg-white border rounded shadow">
+          <div className="px-3 py-2 border-b sticky top-0 bg-white space-y-1">
+            <label className="text-sm flex items-center gap-2">
+              <input type="checkbox" checked={allSelected} onChange={(e) => toggleAll(e.target.checked)} />
+              <span className="font-medium">Select all</span>
+            </label>
+            <div className="flex gap-1 flex-wrap">
+              <button
+                type="button"
+                className="text-xs px-2 py-0.5 rounded border border-green-300 text-green-700 hover:bg-green-50"
+                onClick={() => onChange(attendees.filter((a) => prefMatch(a.pref)).map((a) => a.id))}
+              >
+                Select {channel === "whatsapp" ? "WhatsApp/both" : "Email/both"}
+              </button>
+              <button
+                type="button"
+                className="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-50"
+                onClick={() => onChange([])}
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+          {loading ? (
+            <div className="px-3 py-2 text-sm text-gray-500">Loading…</div>
+          ) : attendees.length === 0 ? (
+            <div className="px-3 py-2 text-sm text-gray-500">No attendees with phone numbers</div>
+          ) : (
+            <ul className="py-1">
+              {attendees.map((a) => {
+                const checked = selectedIds.includes(a.id);
+                const match = prefMatch(a.pref);
+                return (
+                  <li key={a.id} className={`px-3 py-1 hover:bg-gray-50 ${!match ? "opacity-75" : ""}`}>
+                    <label className="flex items-center gap-2 text-sm min-w-0">
+                      <input type="checkbox" checked={checked} onChange={() => toggleId(a.id)} />
+                      <span className="truncate flex-1">
+                        {a.name ? `${a.name} (${a.phone})` : a.phone}
+                      </span>
+                      <span className={`text-[10px] px-1 rounded shrink-0 ${prefColor(a.pref, match)}`}>
+                        {prefLabel(a.pref)}
+                      </span>
+                    </label>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          <div className="px-3 py-2 border-t bg-gray-50 text-right">
+            <button
+              type="button"
+              className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-100"
+              onClick={() => setOpen(false)}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Preference warning banner ────────────────────────────────────────────────
+function PrefWarning({ attendees, selectedIds, channel }: { attendees: (Attendee|UserEntry)[]; selectedIds: string[]; channel: "whatsapp" | "email" }) {
+  const prefMatch = (pref: string) =>
+    channel === "whatsapp" ? pref === "whatsapp" || pref === "both" : pref === "email" || pref === "both";
+
+  const mismatched = useMemo(
+    () => selectedIds.filter((id) => {
+      const a = attendees.find((x) => x.id === id);
+      return a && !prefMatch(a.pref);
+    }),
+    [attendees, selectedIds, channel]
+  );
+
+  if (mismatched.length === 0) return null;
+  return (
+    <div className="p-3 border rounded bg-amber-50 text-amber-800 text-xs">
+      <strong>{mismatched.length} selected attendee(s)</strong> have a notification preference that doesn&apos;t include{" "}
+      {channel === "whatsapp" ? "WhatsApp" : "email"}. They will still receive the message, but it may not be their preferred channel.
+      {" "}<button
+        type="button"
+        className="underline ml-1"
+        onClick={() => {/* handled by dropdown */}}
+      >
+        Use the dropdown to filter by preference.
+      </button>
+    </div>
+  );
+}
+
+// ─── WhatsApp Automations Panel ───────────────────────────────────────────────
+function WAAutomationsPanel({ events, token, onInfo, onError }: { events: any[]; token?: string | null; onInfo: (s: string) => void; onError: (s: string) => void }) {
+  const [autoEventId, setAutoEventId] = React.useState<string>("");
+  const currentEvent = React.useMemo(() => (events || []).find((e: any) => e.id === autoEventId), [events, autoEventId]);
+
+  const preWeekDefault = `Hi {{name}}\n\nJust a friendly reminder that {{event.title}} is one week away!\n\nEvent details: {{event.link}}`;
+  const finalDefault = `Hi {{name}}\n\nFinal reminder for {{event.title}}.\nPlease have your QR code/ticket ready at entry.\n\nEvent details: {{event.link}}`;
+  const thanksDefault = `Hi {{name}}\n\nThank you for joining us at {{event.title}}!\nWe hope you had a great time. See you next time!`;
+  const promoDefault = `Hi {{name}}\n\nWe'd love to see you at our next event: {{promo.title}}.\nFind out more and register here: {{promo.link}}`;
+
+  const [enablePre, setEnablePre] = React.useState(true);
+  const [enableFinal, setEnableFinal] = React.useState(true);
+  const [enableThanks, setEnableThanks] = React.useState(true);
+  const [enablePromo, setEnablePromo] = React.useState(false);
+  const [preBody, setPreBody] = React.useState(preWeekDefault);
+  const [finalBody, setFinalBody] = React.useState(finalDefault);
+  const [thanksBody, setThanksBody] = React.useState(thanksDefault);
+  const [promoBody, setPromoBody] = React.useState(promoDefault);
+  const [finalHours, setFinalHours] = React.useState<"24" | "48">("24");
+  const [preWhen, setPreWhen] = React.useState<string>("");
+  const [finalWhen, setFinalWhen] = React.useState<string>("");
+  const [thanksWhen, setThanksWhen] = React.useState<string>("");
+  const [promoWhen, setPromoWhen] = React.useState<string>("");
+  const [promoEventId, setPromoEventId] = React.useState<string>("");
+
+  React.useEffect(() => {
+    if (!currentEvent) { setPreWhen(""); setFinalWhen(""); setThanksWhen(""); setPromoWhen(""); return; }
+    try {
+      const start = new Date(currentEvent.startDate);
+      const end = new Date(currentEvent.endDate || currentEvent.startDate);
+      const pre = new Date(start); pre.setDate(pre.getDate() - 7); pre.setHours(9, 0, 0, 0);
+      setPreWhen(toLocalInputValue(pre));
+      const fin = new Date(start); fin.setHours(fin.getHours() - (finalHours === "48" ? 48 : 24));
+      setFinalWhen(toLocalInputValue(fin));
+      const ty = new Date(end); ty.setDate(ty.getDate() + 1); ty.setHours(9, 0, 0, 0);
+      setThanksWhen(toLocalInputValue(ty));
+      const pr = new Date(end); pr.setDate(pr.getDate() + 3); pr.setHours(9, 0, 0, 0);
+      setPromoWhen(toLocalInputValue(pr));
+    } catch {}
+  }, [currentEvent, finalHours]);
+
+  const onSchedule = async () => {
+    try {
+      onError(null as any); onInfo(null as any);
+      if (!token) { onError("Not authenticated"); return; }
+      if (!autoEventId) { onError("Please select an event"); return; }
+      const jobs: any[] = [];
+      if (enablePre && preBody.trim() && preWhen) jobs.push({ message: preBody, scheduledAt: new Date(preWhen).toISOString() });
+      if (enableFinal && finalBody.trim() && finalWhen) jobs.push({ message: finalBody, scheduledAt: new Date(finalWhen).toISOString() });
+      if (enableThanks && thanksBody.trim() && thanksWhen) jobs.push({ message: thanksBody, scheduledAt: new Date(thanksWhen).toISOString() });
+      if (enablePromo && promoBody.trim() && promoWhen) jobs.push({ message: promoBody, scheduledAt: new Date(promoWhen).toISOString(), promoEventId: promoEventId || undefined });
+      if (jobs.length === 0) { onError("Please enable at least one automation and fill in details"); return; }
+      let scheduled = 0;
+      for (const job of jobs) {
+        await apiFetch(`/api/events/${encodeURIComponent(autoEventId)}/whatsapp-attendees/schedule`, {
+          method: "POST", authToken: token,
+          body: { message: job.message, scheduledAt: job.scheduledAt, filter: { status: "paid" } },
+        });
+        scheduled++;
+      }
+      onInfo(`Scheduled ${scheduled} WhatsApp automation(s).`);
+    } catch (e: any) {
+      onError(e?.message || "Failed to schedule automations");
+    }
+  };
+
+  return (
+    <div className="grid gap-4">
+      <div>
+        <label className="block text-xs text-gray-600 mb-1">Event</label>
+        <select className="w-full border rounded px-3 py-2 text-sm" value={autoEventId} onChange={(e) => setAutoEventId(e.target.value)}>
+          <option value="">Select an event…</option>
+          {(events || []).map((ev: any) => (
+            <option key={ev.id} value={ev.id}>{ev.title}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="grid gap-4">
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Pre-Event Reminder (1 week before)</legend>
+          <label className="inline-flex items-center gap-2 text-sm mb-2">
+            <input type="checkbox" checked={enablePre} onChange={(e) => setEnablePre(e.target.checked)} /> Enable
+          </label>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Send at</label>
+            <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={preWhen} onChange={(e) => setPreWhen(e.target.value)} />
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={4} value={preBody} onChange={(e) => setPreBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Final Reminder (24–48 hrs before)</legend>
+          <div className="flex items-center gap-4 mb-2">
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={enableFinal} onChange={(e) => setEnableFinal(e.target.checked)} /> Enable
+            </label>
+            <label className="text-xs text-gray-600">Hours before:</label>
+            <select className="border rounded px-2 py-1 text-sm" value={finalHours} onChange={(e) => setFinalHours(e.target.value as any)}>
+              <option value="24">24</option>
+              <option value="48">48</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Send at</label>
+            <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={finalWhen} onChange={(e) => setFinalWhen(e.target.value)} />
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={4} value={finalBody} onChange={(e) => setFinalBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Thank You / Wrap Up</legend>
+          <label className="inline-flex items-center gap-2 text-sm mb-2">
+            <input type="checkbox" checked={enableThanks} onChange={(e) => setEnableThanks(e.target.checked)} /> Enable
+          </label>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Send at</label>
+            <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={thanksWhen} onChange={(e) => setThanksWhen(e.target.value)} />
+          </div>
+          <label className="block text-xs text-gray-600 mb-1 mt-2">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={4} value={thanksBody} onChange={(e) => setThanksBody(e.target.value)} />
+        </fieldset>
+
+        <fieldset className="border rounded p-3">
+          <legend className="text-sm font-medium">Next Event Promo</legend>
+          <div className="flex items-center gap-4 mb-2">
+            <label className="inline-flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={enablePromo} onChange={(e) => setEnablePromo(e.target.checked)} /> Enable
+            </label>
+          </div>
+          <div className="grid sm:grid-cols-2 gap-3 mb-2">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Promo Event</label>
+              <select className="w-full border rounded px-3 py-2 text-sm" value={promoEventId} onChange={(e) => setPromoEventId(e.target.value)}>
+                <option value="">Select event to promote…</option>
+                {(events || []).map((ev: any) => (
+                  <option key={ev.id} value={ev.id}>{ev.title}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={promoWhen} onChange={(e) => setPromoWhen(e.target.value)} />
+            </div>
+          </div>
+          <label className="block text-xs text-gray-600 mb-1">Message</label>
+          <textarea className="w-full border rounded px-3 py-2 text-sm" rows={4} value={promoBody} onChange={(e) => setPromoBody(e.target.value)} />
+        </fieldset>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button type="button" className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700" onClick={onSchedule}>
+          Schedule selected
+        </button>
+        <div className="text-[11px] text-gray-500">
+          Placeholders: {"{{name}}"}, {"{{event.title}}"}, {"{{event.start}}"}, {"{{event.link}}"}, {"{{promo.title}}"}, {"{{promo.link}}"}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+function WhatsAppAttendeesPageInner() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+  const search = useSearchParams();
+  const preselectEventId = search?.get("eventId") || "";
+
+  const canView = useMemo(() => {
+    const role = user?.role;
+    return role === "admin" || role === "supervisor";
+  }, [user]);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [tab, setTab] = useState<"attendees" | "automations" | "broadcasts" | "scheduled">("attendees");
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [allEvents, setAllEvents] = useState<any[]>([]);
+  const [evIncludePast, setEvIncludePast] = useState(false);
+
+  const events = useMemo(() => {
+    const now = Date.now();
+    if (evIncludePast) return allEvents;
+    return allEvents.filter((ev) => !isNaN(new Date(ev.endDate).getTime()) && new Date(ev.endDate).getTime() > now);
+  }, [allEvents, evIncludePast]);
+
+  useEffect(() => {
+    const loadEvents = async () => {
+      try {
+        setLoadingEvents(true);
+        const evs = await apiFetch<any[]>("/api/events/all?includePast=true", { authToken: token || undefined });
+        setAllEvents((evs || []).sort((a: any, b: any) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()));
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      } finally {
+        setLoadingEvents(false);
+      }
+    };
+    loadEvents();
+  }, [user, token]);
+
+  // ── Attendees tab ──────────────────────────────────────────────────────────
+  const [eventId, setEventId] = useState<string>(preselectEventId);
+  useEffect(() => { if (preselectEventId) setEventId(preselectEventId); }, [preselectEventId]);
+  const [templateKey, setTemplateKey] = useState<"custom" | "payment_reminder" | "event_reminder" | "tickets">("custom");
+  const [message, setMessage] = useState("");
+  const [messageDirty, setMessageDirty] = useState(false);
+  const [status, setStatus] = useState<"any" | "paid" | "unpaid" | "partial_paid" | "cancelled">("any");
+  const [attendees, setAttendees] = useState<Attendee[]>([]);
+  const [selectedAttendeeIds, setSelectedAttendeeIds] = useState<string[]>([]);
+  const [loadingAttendees, setLoadingAttendees] = useState(false);
+  const [previewCount, setPreviewCount] = useState<number | null>(null);
+  const [previewSample, setPreviewSample] = useState<{ phone: string; name?: string }[] | null>(null);
+  const [sending, setSending] = useState(false);
+  const [scheduledAtLocal, setScheduledAtLocal] = useState<string>("");
+  const [showInfo, setShowInfo] = useState(false);
+
+  const currentEvent = useMemo(() => (events || []).find((e) => e.id === eventId), [events, eventId]);
+
+  useEffect(() => {
+    const title = currentEvent?.title || "the event";
+    if (templateKey === "payment_reminder") {
+      if (!messageDirty) setMessage(`Hi {{name}}\n\nFriendly reminder: you have an outstanding balance for ${title}.\n\nPlease settle your balance to secure your tickets. Thank you!`);
+    } else if (templateKey === "event_reminder") {
+      if (!messageDirty) setMessage(`Hi {{name}}\n\nA quick reminder about ${title}.\nStart: {{event.start}}\n\nWe look forward to seeing you!`);
+    } else if (templateKey === "tickets") {
+      setMessageDirty(false); setMessage("");
+    }
+  }, [templateKey, currentEvent]);
+
+  useEffect(() => {
+    const run = async () => {
+      try {
+        setLoadingAttendees(true); setAttendees([]); setSelectedAttendeeIds([]);
+        if (!eventId || !token) return;
+        const regs = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(eventId)}`, { authToken: token });
+        const uniq = new Map<string, Attendee>();
+        (regs || []).forEach((r: any) => {
+          const u = r?.user;
+          if (u?.id && u?.phoneNumber && !u.email?.endsWith("@guest.local") && u.isActive !== false) {
+            uniq.set(u.id, { id: u.id, name: u.name || "", phone: u.phoneNumber, pref: u.notificationPreference || "email" });
+          }
+        });
+        const list = Array.from(uniq.values()).sort((a, b) => (a.name || "").localeCompare(b.name || "", undefined, { sensitivity: "base" }));
+        setAttendees(list);
+        // Default: select those with whatsapp/both preference
+        const matching = list.filter((a) => a.pref === "whatsapp" || a.pref === "both").map((a) => a.id);
+        setSelectedAttendeeIds(matching.length > 0 ? matching : list.map((a) => a.id));
+      } catch { } finally { setLoadingAttendees(false); }
+    };
+    run();
+  }, [eventId, token]);
+
+  const buildPayload = (dryRun?: boolean) => {
+    const payload: any = {
+      filter: { status: status !== "any" ? status : undefined, attendeeIds: selectedAttendeeIds.length ? selectedAttendeeIds : undefined },
+      template: templateKey,
+      dryRun: dryRun || undefined,
+    };
+    if (templateKey !== "tickets") payload.message = message;
+    return payload;
+  };
+
+  const onPreview = async () => {
+    try {
+      setError(null); setInfo(null); setPreviewCount(null); setPreviewSample(null);
+      if (!token) { setError("Not authenticated"); return; }
+      if (!eventId) { setError("Please select an event"); return; }
+      if (templateKey !== "tickets" && !message.trim()) { setError("Message is required"); return; }
+      const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/whatsapp-attendees`, { method: "POST", authToken: token, body: buildPayload(true) });
+      setPreviewCount(res?.matched ?? 0);
+      setPreviewSample(Array.isArray(res?.recipients) ? res.recipients : null);
+      setInfo(`Matched ${res?.matched ?? 0} recipient(s) with a phone number.`);
+    } catch (e: any) { setError(e?.message || "Failed to preview"); }
+  };
+
+  const resetAttendeesForm = () => {
+    setTemplateKey("custom"); setMessage(""); setMessageDirty(false);
+    setStatus("any"); setScheduledAtLocal(""); setPreviewCount(null); setPreviewSample(null);
+    setSelectedAttendeeIds(attendees.map((a) => a.id));
+  };
+
+  const onSend = async () => {
+    try {
+      setError(null); setInfo(null);
+      if (!token) { setError("Not authenticated"); return; }
+      if (!eventId) { setError("Please select an event"); return; }
+      if (templateKey !== "tickets" && !message.trim()) { setError("Message is required"); return; }
+      setSending(true);
+      const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/whatsapp-attendees`, { method: "POST", authToken: token, body: buildPayload() });
+      setInfo(`Sent ${res?.sent ?? 0} out of ${res?.matched ?? 0} recipient(s).`);
+      resetAttendeesForm();
+    } catch (e: any) { setError(e?.message || "Failed to send"); } finally { setSending(false); }
+  };
+
+  const onScheduleSend = async () => {
+    try {
+      setError(null); setInfo(null);
+      if (!token) { setError("Not authenticated"); return; }
+      if (!eventId) { setError("Please select an event"); return; }
+      if (templateKey !== "tickets" && !message.trim()) { setError("Message is required"); return; }
+      if (!scheduledAtLocal) { setError("Scheduled time is required"); return; }
+      const whenIso = new Date(scheduledAtLocal).toISOString();
+      const payload: any = {
+        message: message || undefined,
+        filter: { status: status !== "any" ? status : undefined, attendeeIds: selectedAttendeeIds.length ? selectedAttendeeIds : undefined },
+        template: templateKey, scheduledAt: whenIso,
+      };
+      const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/whatsapp-attendees/schedule`, { method: "POST", authToken: token, body: payload });
+      setInfo(res?.job?.id ? "WhatsApp scheduled. It will be sent around the specified time." : "Scheduled.");
+      resetAttendeesForm();
+    } catch (e: any) { setError(e?.message || "Failed to schedule"); }
+  };
+
+  // ── Broadcasts tab ─────────────────────────────────────────────────────────
+  const [users, setUsers] = useState<UserEntry[]>([]);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([]);
+  const [broadcastEventId, setBroadcastEventId] = useState<string>("");
+  const [broadcastMessage, setBroadcastMessage] = useState("");
+  const [broadcastPhones, setBroadcastPhones] = useState("");
+  const [broadcastPreviewCount, setBroadcastPreviewCount] = useState<number | null>(null);
+  const [broadcastPreviewSample, setBroadcastPreviewSample] = useState<{ phone: string; name?: string }[] | null>(null);
+  const [broadcastScheduledAtLocal, setBroadcastScheduledAtLocal] = useState<string>("");
+
+  useEffect(() => {
+    const run = async () => {
+      try {
+        if (!token) return;
+        setLoadingUsers(true);
+        const allUsers = await fetchAllUsers(token);
+        const mapped = allUsers
+          .filter((u: any) => u.isActive !== false && !u.email?.endsWith("@guest.local") && u.phoneNumber)
+          .map((u: any) => ({ id: u.id, name: u.name || "", phone: u.phoneNumber, pref: u.notificationPreference || "email" }))
+          .sort((a: any, b: any) => (a.name || "").localeCompare(b.name || "", undefined, { sensitivity: "base" }));
+        setUsers(mapped);
+      } catch { } finally { setLoadingUsers(false); }
+    };
+    run();
+  }, [token]);
+
+  const resetBroadcastForm = () => {
+    setSelectedUserIds([]); setBroadcastEventId(""); setBroadcastMessage("");
+    setBroadcastPhones(""); setBroadcastPreviewCount(null); setBroadcastPreviewSample(null);
+    setBroadcastScheduledAtLocal("");
+  };
+
+  // ── Scheduled tab ──────────────────────────────────────────────────────────
+  type ScheduledJob = { id: string; kind: string; eventId?: string | null; broadcast?: boolean; channel?: string; scheduledAt: string; createdAt: string; status: string; attempts: number; sentAt?: string | null; lastError?: string | null; subject?: string; payload?: any };
+  const [scheduled, setScheduled] = useState<ScheduledJob[]>([]);
+  const [loadingScheduled, setLoadingScheduled] = useState(false);
+  const [editing, setEditing] = useState<ScheduledJob | null>(null);
+  const [editMessage, setEditMessage] = useState<string>("");
+  const [editWhen, setEditWhen] = useState<string>("");
+  const [savingEdit, setSavingEdit] = useState(false);
+
+  const loadScheduled = async () => {
+    try {
+      if (!token) return;
+      setLoadingScheduled(true);
+      const res = await apiFetch<{ jobs: ScheduledJob[] }>(`/api/scheduled-emails`, { authToken: token });
+      // Filter to only WhatsApp jobs
+      const all = Array.isArray(res?.jobs) ? res.jobs : [];
+      setScheduled(all.filter((j) => j.channel === "whatsapp" || (j.broadcast && j.channel === "whatsapp")));
+    } catch { } finally { setLoadingScheduled(false); }
+  };
+
+  useEffect(() => { if (tab === "scheduled") loadScheduled(); }, [tab, token]);
+
+  const saveEdit = async () => {
+    if (!editing) return;
+    try {
+      setSavingEdit(true);
+      if (!token) { setError("Not authenticated"); return; }
+      const body: any = {};
+      if (editWhen) body.scheduledAt = new Date(editWhen).toISOString();
+      if (editMessage.trim()) body.text = editMessage;
+      await apiFetch(`/api/scheduled-emails/${encodeURIComponent(editing.id)}`, { method: "PATCH", authToken: token, body });
+      setInfo("Scheduled message updated.");
+      setEditing(null);
+      loadScheduled();
+    } catch (e: any) { setError(e?.message || "Failed to update"); } finally { setSavingEdit(false); }
+  };
+
+  const removeJob = async (job: ScheduledJob) => {
+    try {
+      if (!token) { setError("Not authenticated"); return; }
+      await apiFetch(`/api/scheduled-emails/${encodeURIComponent(job.id)}`, { method: "DELETE", authToken: token });
+      setInfo("Scheduled message removed.");
+      loadScheduled();
+    } catch (e: any) { setError(e?.message || "Failed to remove"); }
+  };
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  const mismatchedAttendees = useMemo(
+    () => selectedAttendeeIds.filter((id) => {
+      const a = attendees.find((x) => x.id === id);
+      return a && a.pref !== "whatsapp" && a.pref !== "both";
+    }),
+    [attendees, selectedAttendeeIds]
+  );
+
+  return (
+    <div className="max-w-3xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">WhatsApp Attendees</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push("/dashboard")}>
+          Back
+        </button>
+      </div>
+
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to use this page.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+      {info && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{info}</div>}
+
+      {/* Tabs */}
+      <div className="mb-4 flex items-center gap-2 flex-wrap">
+        {(["attendees", "automations", "broadcasts", "scheduled"] as const).map((t) => (
+          <label key={t} className={`px-3 py-1.5 text-sm rounded border cursor-pointer ${tab === t ? "bg-green-600 text-white border-green-600" : "bg-white text-gray-800 border-gray-200"}`}>
+            <input type="radio" name="waTab" value={t} className="hidden" checked={tab === t} onChange={() => setTab(t)} />
+            {t.charAt(0).toUpperCase() + t.slice(1)}
+          </label>
+        ))}
+      </div>
+
+      {/* ── Attendees Tab ── */}
+      {tab === "attendees" && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="grid gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Event</label>
+              <div className="flex gap-2 items-center">
+                <select className="border rounded px-3 py-2 text-sm flex-1 min-w-0" value={eventId} onChange={(e) => setEventId(e.target.value)}>
+                  <option value="">Select an event…</option>
+                  {events.map((ev) => (
+                    <option key={ev.id} value={ev.id}>{ev.title}{ev.endDate && new Date(ev.endDate) < new Date() ? " (past)" : ""}</option>
+                  ))}
+                </select>
+                {loadingEvents && <span className="text-xs text-gray-500">Loading…</span>}
+              </div>
+              <label className="flex items-center gap-1.5 text-xs text-gray-500 mt-1 cursor-pointer">
+                <input type="checkbox" checked={evIncludePast} onChange={(e) => setEvIncludePast(e.target.checked)} />
+                Include past events
+              </label>
+            </div>
+
+            <div className="grid sm:grid-cols-3 gap-3">
+              <div>
+                <div className="flex items-center justify-between">
+                  <label className="block text-xs text-gray-600 mb-1">Template</label>
+                  <button type="button" className="text-[11px] text-gray-600 hover:text-gray-900 inline-flex items-center gap-1" onClick={() => setShowInfo(true)}>
+                    <span className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-gray-300 text-[10px]">i</span>
+                    Info
+                  </button>
+                </div>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={templateKey} onChange={(e) => setTemplateKey(e.target.value as any)}>
+                  <option value="custom">Custom message</option>
+                  <option value="payment_reminder">Payment reminder</option>
+                  <option value="event_reminder">Event reminder</option>
+                  <option value="tickets">Send ticket PDFs</option>
+                </select>
+              </div>
+              <div className="sm:col-span-2">
+                <div className="text-[11px] text-gray-500 mt-6">
+                  Placeholders: {"{{name}}"}, {"{{event.title}}"}, {"{{event.start}}"}, {"{{balance}}"}
+                </div>
+              </div>
+            </div>
+
+            {showInfo && (
+              <div className="fixed inset-0 z-20">
+                <div className="absolute inset-0 bg-black/30" onClick={() => setShowInfo(false)} />
+                <div className="absolute inset-0 flex items-center justify-center p-4">
+                  <div className="w-full max-w-lg bg-white rounded-lg shadow-lg border p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="text-sm font-semibold">Dynamic parameters</h3>
+                      <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setShowInfo(false)}>Close</button>
+                    </div>
+                    <div className="text-[12px] text-gray-700 break-words">
+                      <p className="mb-2">Personalize your message per recipient using these placeholders.</p>
+                      <ul className="list-disc pl-5 space-y-1 mb-2">
+                        <li><code>{"{{name}}"}</code> — attendee&apos;s name.</li>
+                        <li><code>{"{{event.title}}"}</code> — the event title.</li>
+                        <li><code>{"{{event.start}}"}</code> — the event start date/time.</li>
+                        <li><code>{"{{balance}}"}</code> — outstanding balance for the event.</li>
+                      </ul>
+                      <p className="text-[11px] text-gray-500 mt-2">
+                        Preference indicators: <span className="text-green-700 bg-green-50 px-1 rounded">WA</span> = WhatsApp only,{" "}
+                        <span className="text-green-700 bg-green-50 px-1 rounded">both</span> = WhatsApp + Email,{" "}
+                        <span className="text-amber-700 bg-amber-50 px-1 rounded">email</span> = Email only (will still receive message).
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Payment status filter</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={status} onChange={(e) => setStatus(e.target.value as any)}>
+                  <option value="any">Any</option>
+                  <option value="paid">Paid</option>
+                  <option value="unpaid">Unpaid (pending or partial)</option>
+                  <option value="partial_paid">Partial paid</option>
+                  <option value="cancelled">Cancelled</option>
+                </select>
+              </div>
+            </div>
+
+            {templateKey !== "tickets" ? (
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Message</label>
+                <textarea className="w-full border rounded px-3 py-2 text-sm" rows={8} value={message}
+                  onChange={(e) => { setMessage(e.target.value); setMessageDirty(true); }}
+                  placeholder="Write your WhatsApp message to attendees..." />
+              </div>
+            ) : (
+              <div className="p-3 border rounded bg-gray-50 text-sm text-gray-700">
+                This will send each selected attendee their ticket PDF(s) for this event via WhatsApp.
+              </div>
+            )}
+
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Attendees</label>
+                <AttendeesCheckboxDropdown attendees={attendees} loading={loadingAttendees} selectedIds={selectedAttendeeIds} onChange={setSelectedAttendeeIds} channel="whatsapp" />
+                <div className="text-[11px] text-gray-500 mt-1">Attendees with WhatsApp/both preference are pre-selected.</div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Send at (optional)</label>
+                <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={scheduledAtLocal} onChange={(e) => setScheduledAtLocal(e.target.value)} />
+                <div className="text-[10px] text-gray-500 mt-1">Leave empty to send immediately.</div>
+              </div>
+            </div>
+
+            {mismatchedAttendees.length > 0 && (
+              <div className="p-3 border rounded bg-amber-50 text-amber-800 text-xs">
+                <strong>{mismatchedAttendees.length} selected attendee(s)</strong> prefer email only — they will still receive this message but it&apos;s not their preferred channel.
+              </div>
+            )}
+
+            <div className="flex items-center flex-wrap gap-2">
+              <button type="button" disabled={sending} className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={onPreview}>
+                Preview recipients
+              </button>
+              <button type="button" disabled={sending} className="px-3 py-1.5 text-sm rounded bg-green-600 text-white hover:bg-green-700 disabled:opacity-50" onClick={onSend}>
+                {sending ? "Sending…" : "Send now"}
+              </button>
+              <button type="button" disabled={sending || !scheduledAtLocal} className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50" onClick={onScheduleSend}>
+                Schedule send
+              </button>
+              {previewCount != null && <span className="text-xs text-gray-600">Preview: {previewCount} recipient(s)</span>}
+            </div>
+
+            {previewSample && previewSample.length > 0 && (
+              <div className="mt-2">
+                <div className="text-xs text-gray-600 mb-1">First {previewSample.length} recipient(s):</div>
+                <ul className="text-xs text-gray-800 list-disc pl-5 space-y-0.5">
+                  {previewSample.map((r, idx) => (
+                    <li key={idx}>{r.name ? `${r.name} (${r.phone})` : r.phone}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Automations Tab ── */}
+      {tab === "automations" && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <WAAutomationsPanel events={events} token={token} onInfo={setInfo} onError={setError} />
+        </div>
+      )}
+
+      {/* ── Broadcasts Tab ── */}
+      {tab === "broadcasts" && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="grid gap-3">
+            <div className="grid sm:grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Users (optional)</label>
+                <AttendeesCheckboxDropdown attendees={users} loading={loadingUsers} selectedIds={selectedUserIds} onChange={setSelectedUserIds} channel="whatsapp" />
+                <div className="text-[11px] text-gray-500 mb-1">Only users with phone numbers shown. Green = WhatsApp/both preference.</div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-600 mb-1">Event (optional for placeholders)</label>
+                <select className="w-full border rounded px-3 py-2 text-sm" value={broadcastEventId} onChange={(e) => setBroadcastEventId(e.target.value)}>
+                  <option value="">No event</option>
+                  {events.map((ev) => (
+                    <option key={ev.id} value={ev.id}>{ev.title}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {selectedUserIds.length > 0 && (
+              <PrefWarning attendees={users} selectedIds={selectedUserIds} channel="whatsapp" />
+            )}
+
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Message</label>
+              <textarea className="w-full border rounded px-3 py-2 text-sm" rows={8} value={broadcastMessage}
+                onChange={(e) => setBroadcastMessage(e.target.value)}
+                placeholder="Write your message... Use {{name}}, {{event.title}}, {{event.start}}, {{event.link}}" />
+            </div>
+
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Additional phone numbers (one per line)</label>
+              <textarea className="w-full border rounded px-3 py-2 text-sm" rows={4} value={broadcastPhones}
+                onChange={(e) => setBroadcastPhones(e.target.value)}
+                placeholder={`0821234567\nJane Doe <0721234567>\n27831234567`} />
+              <div className="text-[11px] text-gray-500 mt-1">Formats: 0821234567 or Name &lt;0821234567&gt;</div>
+            </div>
+
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Send at (optional)</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={broadcastScheduledAtLocal} onChange={(e) => setBroadcastScheduledAtLocal(e.target.value)} />
+              <div className="text-[10px] text-gray-500 mt-1">Leave empty to send immediately.</div>
+            </div>
+
+            <div className="flex items-center flex-wrap gap-2">
+              <button type="button" className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null); setBroadcastPreviewCount(null); setBroadcastPreviewSample(null);
+                  if (!token) { setError("Not authenticated"); return; }
+                  const res = await apiFetch(`/api/whatsapp-broadcasts/preview`, { method: "POST", authToken: token, body: { userIds: selectedUserIds, phones: broadcastPhones, eventId: broadcastEventId || undefined } });
+                  setBroadcastPreviewCount(res?.matched ?? 0);
+                  setBroadcastPreviewSample(Array.isArray(res?.recipients) ? res.recipients : null);
+                  setInfo(`Matched ${res?.matched ?? 0} recipient(s).`);
+                } catch (e: any) { setError(e?.message || "Failed to preview"); }
+              }}>Preview recipients</button>
+
+              <button type="button" className="px-3 py-1.5 text-sm rounded bg-green-600 text-white hover:bg-green-700 disabled:opacity-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null);
+                  if (!token) { setError("Not authenticated"); return; }
+                  if (!broadcastMessage.trim()) { setError("Message is required"); return; }
+                  const res = await apiFetch(`/api/whatsapp-broadcasts/send`, { method: "POST", authToken: token, body: { message: broadcastMessage, userIds: selectedUserIds, phones: broadcastPhones, eventId: broadcastEventId || undefined } });
+                  setInfo(`Sent ${res?.sent ?? 0} out of ${res?.matched ?? 0} recipient(s).`);
+                  resetBroadcastForm();
+                } catch (e: any) { setError(e?.message || "Failed to send"); }
+              }}>Send now</button>
+
+              <button type="button" disabled={!broadcastScheduledAtLocal} className="px-3 py-1.5 text-sm rounded bg-emerald-600 text-white hover:bg-emerald-700 disabled:opacity-50" onClick={async () => {
+                try {
+                  setError(null); setInfo(null);
+                  if (!token) { setError("Not authenticated"); return; }
+                  if (!broadcastMessage.trim()) { setError("Message is required"); return; }
+                  const whenIso = new Date(broadcastScheduledAtLocal).toISOString();
+                  const res = await apiFetch(`/api/whatsapp-broadcasts/schedule`, { method: "POST", authToken: token, body: { scheduledAt: whenIso, message: broadcastMessage, userIds: selectedUserIds, phones: broadcastPhones, eventId: broadcastEventId || undefined } });
+                  if (res?.job?.id) setInfo("WhatsApp broadcast scheduled."); else setInfo("Scheduled.");
+                  resetBroadcastForm();
+                } catch (e: any) { setError(e?.message || "Failed to schedule broadcast"); }
+              }}>Schedule send</button>
+
+              {broadcastPreviewCount != null && <span className="text-xs text-gray-600">Preview: {broadcastPreviewCount} recipient(s)</span>}
+            </div>
+
+            {broadcastPreviewSample && broadcastPreviewSample.length > 0 && (
+              <div className="mt-2">
+                <div className="text-xs text-gray-600 mb-1">First {broadcastPreviewSample.length} recipient(s):</div>
+                <ul className="text-xs text-gray-800 list-disc pl-5 space-y-0.5">
+                  {broadcastPreviewSample.map((r, idx) => (
+                    <li key={idx}>{r.name ? `${r.name} (${r.phone})` : r.phone}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Scheduled Tab ── */}
+      {tab === "scheduled" && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="flex items-center justify-between mb-3">
+            <h2 className="text-lg font-medium">Scheduled WhatsApp Messages</h2>
+            <button type="button" className="text-sm px-2 py-1 rounded border bg-white hover:bg-gray-50" onClick={loadScheduled}>Refresh</button>
+          </div>
+          {loadingScheduled ? (
+            <div className="text-sm text-gray-600">Loading…</div>
+          ) : scheduled.length === 0 ? (
+            <div className="text-sm text-gray-600">No scheduled WhatsApp messages. Items sent more than a week ago are hidden.</div>
+          ) : (
+            <ul className="divide-y border rounded">
+              {scheduled.map((job) => (
+                <li key={job.id} className="p-3 flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <div className="text-sm font-medium text-gray-900 flex items-center gap-2">
+                      <span className="inline-block px-2 py-0.5 text-xs rounded border bg-green-50 text-green-700">{job.broadcast ? "broadcast" : "attendees"}</span>
+                      <span className="truncate text-gray-700">{job.payload?.message ? String(job.payload.message).slice(0, 60) + (String(job.payload.message).length > 60 ? "…" : "") : "(no message)"}</span>
+                    </div>
+                    <div className="text-xs text-gray-600 mt-1">
+                      <span className="mr-2">Status: {job.status}</span>
+                      <span className="mr-2">Scheduled: {(() => { try { return new Date(job.scheduledAt).toLocaleString(); } catch { return job.scheduledAt; } })()}</span>
+                      {job.sentAt && <span>Sent: {(() => { try { return new Date(job.sentAt!).toLocaleString(); } catch { return job.sentAt; } })()}</span>}
+                      {job.lastError && <span className="ml-2 text-red-600">Error: {job.lastError}</span>}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <button type="button" disabled={job.status !== "queued"} className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-50 disabled:opacity-50"
+                      onClick={() => { setEditing(job); setEditMessage(job.payload?.message || ""); try { setEditWhen(toLocalInputValue(new Date(job.scheduledAt))); } catch { setEditWhen(""); } }}>
+                      Edit
+                    </button>
+                    <button type="button" disabled={job.status !== "queued"} className="px-2 py-1 text-xs rounded border bg-white hover:bg-gray-50 disabled:opacity-50" onClick={() => removeJob(job)}>
+                      Remove
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {editing && (
+            <div className="fixed inset-0 z-20">
+              <div className="absolute inset-0 bg-black/30" onClick={() => setEditing(null)} />
+              <div className="absolute inset-0 flex items-center justify-center p-4">
+                <div className="w-full max-w-lg bg-white rounded-lg shadow-lg border p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="text-sm font-semibold">Edit scheduled WhatsApp message</h3>
+                    <button type="button" className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200" onClick={() => setEditing(null)}>Close</button>
+                  </div>
+                  <div className="grid gap-3">
+                    <div>
+                      <label className="block text-xs text-gray-600 mb-1">Message</label>
+                      <textarea className="w-full border rounded px-3 py-2 text-sm" rows={6} value={editMessage} onChange={(e) => setEditMessage(e.target.value)} />
+                    </div>
+                    <div>
+                      <label className="block text-xs text-gray-600 mb-1">Send at</label>
+                      <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={editWhen} onChange={(e) => setEditWhen(e.target.value)} />
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <button type="button" disabled={savingEdit} className="px-3 py-1.5 text-sm rounded bg-green-600 text-white hover:bg-green-700 disabled:opacity-50" onClick={saveEdit}>
+                        {savingEdit ? "Saving…" : "Save changes"}
+                      </button>
+                      <button type="button" className="px-3 py-1.5 text-sm rounded border bg-white hover:bg-gray-50" onClick={() => setEditing(null)}>Cancel</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/user/donate/page.tsx b/frontend/src/app/dashboard/user/donate/page.tsx
new file mode 100644
index 0000000..ae34a9d
--- /dev/null
+++ b/frontend/src/app/dashboard/user/donate/page.tsx
@@ -0,0 +1,87 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+export default function DonatePage() {
+  const { token } = useAuth();
+  const [events, setEvents] = useState<any[]>([]);
+  const [eventId, setEventId] = useState<string>("");
+  const [amount, setAmount] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const evs = await apiFetch<any[]>("/api/events");
+        setEvents(evs);
+        if (evs.length > 0) setEventId(evs[0].id);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      }
+    })();
+  }, []);
+
+  const submit = async () => {
+    if (!token) { setError("Please login"); return; }
+    const amt = parseFloat(amount);
+    if (!(amt > 0)) { setError("Enter a valid amount"); return; }
+    if (amt < 15) { setError("Minimum donation is R15"); return; }
+    if (!eventId) { setError("Select an event"); return; }
+    try {
+      setError(null);
+      setInfo(null);
+      setLoading(true);
+      const res = await apiFetch<{ redirectUrl: string }>("/api/payments/yoco-checkout", {
+        method: "POST",
+        body: {
+          eventId,
+          amount: amt,
+          successUrl: window.location.origin + "/payment/success",
+          cancelUrl: window.location.origin + "/payment/cancel",
+          failureUrl: window.location.origin + "/payment/failure",
+        },
+        authToken: token,
+      });
+      setInfo("Redirecting to payment...");
+      window.location.href = res.redirectUrl;
+    } catch (e: any) {
+      setError(e?.message || "Failed to start donation checkout");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-xl mx-auto w-full p-6">
+      <h1 className="text-2xl font-semibold mb-4">Make a donation</h1>
+      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
+      {info && <p className="text-green-700 text-sm mb-3">{info}</p>}
+
+      <label className="block text-sm font-medium mb-1">Event</label>
+      <select className="w-full border rounded px-3 py-2 mb-3" value={eventId} onChange={(e)=>setEventId(e.target.value)}>
+        {events.map(ev => <option key={ev.id} value={ev.id}>{ev.title}</option>)}
+      </select>
+
+      <label className="block text-sm font-medium mb-1">Amount (R)</label>
+      <input
+        type="number"
+        min="15"
+        step="1"
+        placeholder="Enter amount (min R15)"
+        value={amount}
+        onChange={(e)=>setAmount(e.target.value)}
+        className="w-full border rounded px-3 py-2 mb-1"
+      />
+      <p className="text-xs text-gray-600 mb-3">Minimum donation is R15.</p>
+
+      <button
+        disabled={loading}
+        onClick={submit}
+        className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-60"
+      >{loading?"Starting checkout...":"Donate"}</button>
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/user/forms/page.tsx b/frontend/src/app/dashboard/user/forms/page.tsx
new file mode 100644
index 0000000..2aa1faa
--- /dev/null
+++ b/frontend/src/app/dashboard/user/forms/page.tsx
@@ -0,0 +1,235 @@
+"use client";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+// Types for form fields
+type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
+
+function FormsContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const { token } = useAuth();
+  const registrationId = search.get("registrationId");
+
+  const [registration, setRegistration] = useState<any | null>(null);
+  const [eventForm, setEventForm] = useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  // Local entry state for new responses
+  const [formsData, setFormsData] = useState<Record<number, Record<string, string>>>({});
+
+  useEffect(() => {
+    (async () => {
+      if (!token || !registrationId) return;
+      setLoading(true);
+      setError(null);
+      setInfo(null);
+      try {
+        const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+        setRegistration(reg);
+        const ev = await apiFetch<any>(`/api/events/${encodeURIComponent(reg.eventId)}`);
+        if (ev?.form) setEventForm(ev.form);
+        // Load any saved draft
+        try {
+          const draft = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, { authToken: token });
+          if (draft && draft.data && typeof draft.data === 'object') setFormsData(draft.data);
+        } catch {}
+      } catch (e: any) {
+        setError(e?.message || 'Failed to load registration');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token, registrationId]);
+
+  const submittedCount = useMemo(() => {
+    return (registration?.formResponses || []).length;
+  }, [registration]);
+
+  const requiredCount = useMemo(() => {
+    if (!registration) return 0;
+    try {
+      return (registration.registrationOptions || [])
+        .filter((ro: any) => ro.eventOption?.isMainTicket)
+        .reduce((s: number, ro: any) => s + (ro.quantity || 0), 0);
+    } catch {
+      return 0;
+    }
+  }, [registration]);
+
+  const remaining = Math.max(0, requiredCount - submittedCount);
+
+  // Determine if all required fields are filled for each attendee form to be submitted
+  const canSubmit = useMemo(() => {
+    if (!eventForm || remaining <= 0) return false;
+    const reqFields = (eventForm.fields || [])
+      .filter(f => !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph')
+      .map(f => f.id);
+    for (let i = 0; i < remaining; i++) {
+      const data = formsData[i] || {};
+      for (const fid of reqFields) {
+        const v = data[fid];
+        if (v === undefined || v === null || String(v).trim() === '') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [eventForm, formsData, remaining]);
+
+  const submit = async () => {
+    if (!token || !registrationId) return;
+    try {
+      setError(null); setInfo(null);
+      const payload: any[] = [];
+      for (let i = 0; i < remaining; i++) {
+        payload.push({ answers: formsData[i] || {} });
+      }
+      if (payload.length === 0) {
+        setInfo('No remaining attendee forms to submit.');
+        return;
+      }
+      await apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/responses`, {
+        method: 'POST',
+        authToken: token,
+        body: { responses: payload }
+      });
+      setInfo('Attendee forms submitted successfully.');
+      // reload registration to reflect new responses
+      const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+      setRegistration(reg);
+      setFormsData({});
+      // On success, redirect to the user dashbaord
+      router.push('/dashboard/user');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to submit forms');
+    }
+  };
+
+  const saveDraft = async () => {
+    if (!token || !registrationId) return;
+    try {
+      setError(null); setInfo(null);
+      await apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, {
+        method: 'PUT',
+        authToken: token,
+        body: { data: formsData }
+      });
+      setInfo('Draft saved. You can return later to finish.');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to save draft');
+    }
+  };
+
+  if (!registrationId) return <div className="p-6">Missing registrationId.</div>;
+
+  return (
+    <div className="max-w-2xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Attendee forms</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={() => router.push('/dashboard/user')}>Back</button>
+      </div>
+
+      {loading && <div className="text-sm text-gray-600 mb-2">Loading…</div>}
+      {error && <div className="text-sm text-red-600 mb-2">{error}</div>}
+      {info && <div className="text-sm text-emerald-700 mb-2">{info}</div>}
+
+      {registration && (
+        <div className="border rounded p-3 mb-4 bg-white">
+          <div className="font-medium">{registration.event?.title || registration.eventId}</div>
+          <div className="text-xs text-gray-600">Registration #{registration.id.slice(0,8)}</div>
+          <div className="text-sm mt-1">Forms submitted: {submittedCount} / {requiredCount}</div>
+        </div>
+      )}
+
+      {/* Existing responses (read-only list) */}
+      {registration && (registration.formResponses || []).length > 0 && (
+        <div className="border rounded p-3 mb-4 bg-gray-50">
+          <div className="text-sm font-medium mb-2">Submitted responses</div>
+          <ul className="space-y-2">
+            {(registration.formResponses || []).map((resp: any, idx: number) => (
+              <li key={resp.id} className="bg-white border rounded p-2">
+                <div className="font-medium text-sm mb-1">Attendee {idx + 1}</div>
+                {(resp.answers || []).length === 0 ? (
+                  <div className="text-xs text-gray-600">No answers recorded.</div>
+                ) : (
+                  <ul className="text-xs list-disc pl-5 space-y-0.5">
+                    {resp.answers.map((a: any) => (
+                      <li key={a.id}>
+                        <span className="text-gray-600">{eventForm?.fields.find(f => f.id === a.fieldId)?.label || (`Field ${a.fieldId}`)}</span>: {a.value}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Remaining forms to fill */}
+      {eventForm && remaining > 0 && (
+        <div className="border rounded p-3 bg-gray-50">
+          <div className="text-sm font-medium mb-2">Fill remaining attendee details ({remaining})</div>
+          <div className="space-y-4">
+            {Array.from({ length: remaining }, (_, idx) => (
+              <div key={idx} className="bg-white border rounded p-3">
+                <div className="font-medium mb-2">Attendee {submittedCount + idx + 1}</div>
+                {eventForm.fields.map((f) => (
+                  <div key={f.id} className="mb-2">
+                    {f.type === 'statement' ? (
+                      <div className="text-sm text-gray-700 whitespace-pre-line">{f.label}</div>
+                    ) : f.type === 'paragraph' ? (
+                      <div className="text-sm text-gray-700">
+                        {f.label && <div className="font-medium mb-1 whitespace-pre-line">{f.label}</div>}
+                        {f.helpText && <div className="whitespace-pre-line">{f.helpText}</div>}
+                      </div>
+                    ) : (
+                      <>
+                        <label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
+                        {f.type === 'yes_no' ? (
+                          <select className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))}>
+                            <option value="">Select</option>
+                            <option value="yes">Yes</option>
+                            <option value="no">No</option>
+                          </select>
+                        ) : f.type === 'date' ? (
+                          <input type="date" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        ) : f.type === 'numeric' ? (
+                          <input type="number" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        ) : (
+                          <input type="text" className="border rounded px-2 py-1 text-sm w-full" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        )}
+                        {f.helpText && <div className="text-xs text-gray-500 mt-1">{f.helpText}</div>}
+                      </>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 flex gap-2">
+            <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" disabled={!canSubmit} onClick={submit}>Submit</button>
+            <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={saveDraft}>Save for later</button>
+          </div>
+        </div>
+      )}
+
+      {eventForm && remaining === 0 && (
+        <div className="text-sm text-emerald-700">All required attendee forms are completed for this registration.</div>
+      )}
+    </div>
+  );
+}
+
+export default function FormsPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading…</div>}>
+      <FormsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/dashboard/user/page.tsx b/frontend/src/app/dashboard/user/page.tsx
new file mode 100644
index 0000000..0b08938
--- /dev/null
+++ b/frontend/src/app/dashboard/user/page.tsx
@@ -0,0 +1,1069 @@
+"use client";
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import { useRouter } from "next/navigation";
+import { formatDate } from "@/lib/date";
+import { QrImage } from "@/components/shared/QrImage";
+
+// Helper formatters
+const formatRand = (n: number) => `R ${n.toFixed(2)}`;
+const isFuture = (d: string | Date) => new Date(d).getTime() > Date.now();
+
+// Effective unit price for an event option (or one of its variants), early-bird aware.
+// Used by the registration editor, which works off raw /api/events/:id data rather than
+// a registration's priceSnapshot — mirrors the pricing logic in register/[eventId]/RegisterForm.tsx.
+function effectiveEventOptionUnitPrice(eo: any, variantId: string | null): number {
+  const variant = variantId ? (eo?.variants || []).find((v: any) => v.id === variantId) : null;
+  const base = (variant && variant.price !== null && variant.price !== undefined)
+    ? Number(variant.price)
+    : Number(eo?.price || 0);
+  const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers : [];
+  const tiers = variantId ? allTiers.filter((t: any) => t.variantId === variantId) : allTiers.filter((t: any) => !t.variantId);
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t: any) => ({ ...t, _d: new Date(t.deadline) }))
+    .filter((t: any) => now < t._d)
+    .sort((a: any, b: any) => a.price - b.price || a._d.getTime() - b._d.getTime());
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+export default function UserDashboardPage() {
+  const { token, user } = useAuth();
+  const [registrations, setRegistrations] = useState<any[]>([]);
+  const [tickets, setTickets] = useState<any[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // Filters
+  const [showPast, setShowPast] = useState<boolean>(false);
+
+  // Billing map: regId -> { totalDue, totalPaid, outstanding, payments }
+  const [billing, setBilling] = useState<Record<string, { totalDue: number; totalPaid: number; outstanding: number; payments: any[] }>>({});
+
+  // Forms status cache for registrations
+  // regId -> { hasForm: boolean; isRequired?: boolean; submittedCount?: number; requiredCount?: number; complete?: boolean }
+  const [formStatuses, setFormStatuses] = useState<Record<string, { hasForm: boolean; isRequired?: boolean; submittedCount?: number; requiredCount?: number; complete?: boolean }>>({});
+
+  // Ticket selection
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+
+  // Registration details modal
+  const [activeRegId, setActiveRegId] = useState<string | null>(null);
+  const [dialog, setDialog] = useState<{ open: boolean; message: string; loading?: boolean }>({ open: false, message: "", loading: false });
+
+  // Track whether the active registration's event has attendee forms
+  const [activeEventHasForm, setActiveEventHasForm] = useState<boolean | null>(null);
+
+  // Compute effective unit price for a registration option.
+  // Uses priceSnapshot when available (authoritative backend price, variant-aware).
+  // Falls back to deadline-only early-bird calculation for legacy rows without a snapshot.
+  const optionUnitPrice = (opt: any, referenceTime: any, atTime: Date): number => {
+    if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
+      return Number(opt.priceSnapshot);
+    }
+    const eo = opt.eventOption;
+    const variantId: string | null = opt.variantId || null;
+    // Use variant price as base if available, otherwise option base
+    const base = (opt.variant?.price !== null && opt.variant?.price !== undefined)
+      ? Number(opt.variant.price)
+      : Number(eo?.price || 0);
+    const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
+    // Filter: variant options use only their variant-specific tiers; plain options use option-level tiers
+    const tiers = variantId
+      ? allTiers.filter((t: any) => t.variantId === variantId)
+      : allTiers.filter((t: any) => !t.variantId);
+    if (tiers.length === 0) return base;
+    const t = atTime ? new Date(atTime) : new Date();
+    const ref = referenceTime ? new Date(referenceTime) : t;
+    const applicable = tiers
+      .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
+      .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
+      .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
+    if (applicable.length === 0) return base;
+    const price = Number(applicable[0].price);
+    return (price >= 0) ? price : base;
+  };
+
+  useEffect(() => {
+    (async () => {
+      if (!token) return;
+      setLoading(true);
+      setError(null);
+      try {
+        // Tickets don't depend on registrations, so fetch both at once instead of
+        // waterfalling — this was previously fetched only after registrations + all
+        // their payments had already resolved.
+        const [myRegs, myTicks] = await Promise.all([
+          apiFetch<any[]>(`/api/registrations/myregistrations?showPast=${showPast ? '1' : '0'}`, { authToken: token }),
+          apiFetch<any[]>("/api/tickets/mytickets", { authToken: token }),
+        ]);
+        setRegistrations(myRegs);
+        setTickets(myTicks);
+
+        // Compute totalDue from priceSnapshot (authoritative backend price, variant-aware).
+        // priceSnapshot is set at registration time and refreshed before each payment.
+        const now = new Date();
+        const totals: Record<string, { totalDue: number; totalPaid: number; outstanding: number; payments: any[] }> = {};
+        for (const r of myRegs) {
+          const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+          totals[r.id] = { totalDue, totalPaid: 0, outstanding: totalDue, payments: [] };
+        }
+        setBilling(totals);
+
+        // Fetch payments per registration to compute outstanding
+        await Promise.all(
+          myRegs.map(async (r: any) => {
+            try {
+              const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(r.id)}`, { authToken: token });
+              const totalPaid = pays.reduce((s, p) => s + (p.amount || 0), 0);
+              // totalDue uses priceSnapshot — not time-dependent, no need to recompute per payment time
+              const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+              const outstanding = Math.max(0, totalDue - totalPaid);
+              setBilling(prev => ({
+                ...prev,
+                [r.id]: {
+                  totalDue,
+                  totalPaid,
+                  outstanding,
+                  payments: pays,
+                },
+              }));
+            } catch (e) {
+              // Ignore per-reg payment errors but log
+              console.warn("Failed to load payments for", r.id, e);
+            }
+          })
+        );
+      } catch (e: any) {
+        setError(e?.message || "Failed to load data");
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token, showPast]);
+
+  // After registrations load, compute forms status for each registration.
+  // `myregistrations` now embeds event.form (with fields) directly, so this no longer
+  // needs a GET /api/events/:id per registration — only the registration-detail fetch
+  // (to get submittedCount) remains, and only for registrations that actually have a form.
+  useEffect(() => {
+    (async () => {
+      if (!token || registrations.length === 0) return;
+      const next: Record<string, { hasForm: boolean; isRequired?: boolean; submittedCount?: number; requiredCount?: number; complete?: boolean }> = {};
+      await Promise.all(
+        registrations.map(async (r: any) => {
+          try {
+            const ev = r.event;
+            const hasForm = !!(ev?.form && Array.isArray(ev.form.fields) && ev.form.fields.length > 0);
+            if (!hasForm) {
+              next[r.id] = { hasForm: false };
+              return;
+            }
+            // Load registration to get number of submitted responses
+            const regFull = await apiFetch<any>(`/api/registrations/${encodeURIComponent(r.id)}`, { authToken: token });
+            const submittedCount = (regFull?.formResponses || []).length;
+            // Required count equals the number of main tickets purchased
+            const requiredCount = (r.registrationOptions || [])
+              .filter((ro: any) => ro.eventOption?.isMainTicket)
+              .reduce((s: number, ro: any) => s + (ro.quantity || 0), 0);
+            const complete = submittedCount >= requiredCount && requiredCount > 0 ? true : (submittedCount >= requiredCount);
+            next[r.id] = {
+              hasForm: true,
+              isRequired: !!ev?.form?.isRequired,
+              submittedCount,
+              requiredCount,
+              complete,
+            };
+          } catch (e) {
+            // On any error, do not show forms status to avoid noisy UI
+            next[r.id] = { hasForm: false };
+          }
+        })
+      );
+      setFormStatuses(next);
+    })();
+  }, [token, registrations]);
+
+  const toggleSelect = (id: string, checked?: boolean) => {
+    setSelected(prev => ({ ...prev, [id]: checked ?? !prev[id] }));
+  };
+  const selectAll = (on: boolean) => {
+    const next: Record<string, boolean> = {};
+    tickets.forEach(t => (next[t.id] = on));
+    setSelected(next);
+  };
+  const selectedIds = useMemo(() => Object.entries(selected).filter(([, v]) => v).map(([k]) => k), [selected]);
+
+  const emailTickets = async (ticketIds: string[]) => {
+    if (!token || ticketIds.length === 0) return;
+    setError(null);
+    setInfo(null);
+    // Open loading dialog immediately
+    setDialog({ open: true, message: "Sending tickets…", loading: true });
+    try {
+      const res: any = await apiFetch("/api/tickets/email", {
+        method: "POST",
+        body: { ticketIds },
+        authToken: token,
+      });
+      const msg = (res && res.message) ? res.message : `${ticketIds.length} ticket(s) emailed successfully.`;
+      setDialog({ open: true, message: msg, loading: false });
+    } catch (e: any) {
+      setDialog({ open: false, message: "", loading: false });
+      setError(e?.message || "Failed to email tickets");
+    }
+  };
+
+  const emailRegistration = async (registrationId: string) => {
+    if (!token) return;
+    setError(null);
+    setInfo(null);
+    // Show loading dialog while sending
+    setDialog({ open: true, message: "Sending tickets…", loading: true });
+    try {
+      const res: any = await apiFetch("/api/tickets/email", {
+        method: "POST",
+        body: { registrationId },
+        authToken: token,
+      });
+      const msg = (res && res.message) ? res.message : `Tickets for registration emailed successfully.`;
+      setDialog({ open: true, message: msg, loading: false });
+    } catch (e: any) {
+      setDialog({ open: false, message: "", loading: false });
+      setError(e?.message || "Failed to email registration tickets");
+    }
+  };
+
+  const whatsappTickets = async (ticketIds: string[]) => {
+    if (!token || ticketIds.length === 0) return;
+    if (!user?.phoneNumber) { setError("No phone number on your account. Add one in your profile."); return; }
+    setError(null);
+    setInfo(null);
+    setDialog({ open: true, message: "Sending to WhatsApp…", loading: true });
+    try {
+      const res: any = await apiFetch("/api/tickets/email", {
+        method: "POST",
+        body: { ticketIds, channel: "whatsapp" },
+        authToken: token,
+      });
+      const msg = (res && res.message) ? res.message : `${ticketIds.length} ticket(s) sent to WhatsApp.`;
+      setDialog({ open: true, message: msg, loading: false });
+    } catch (e: any) {
+      setDialog({ open: false, message: "", loading: false });
+      setError(e?.message || "Failed to send tickets to WhatsApp");
+    }
+  };
+
+  const whatsappRegistration = async (registrationId: string) => {
+    if (!token) return;
+    if (!user?.phoneNumber) { setError("No phone number on your account. Add one in your profile."); return; }
+    setError(null);
+    setInfo(null);
+    setDialog({ open: true, message: "Sending to WhatsApp…", loading: true });
+    try {
+      const res: any = await apiFetch("/api/tickets/email", {
+        method: "POST",
+        body: { registrationId, channel: "whatsapp" },
+        authToken: token,
+      });
+      const msg = (res && res.message) ? res.message : `Tickets sent to WhatsApp.`;
+      setDialog({ open: true, message: msg, loading: false });
+    } catch (e: any) {
+      setDialog({ open: false, message: "", loading: false });
+      setError(e?.message || "Failed to send tickets to WhatsApp");
+    }
+  };
+
+  // Print helpers
+  const buildTicketHtmlCard = (t: any, buyerName?: string) => {
+    const eventTitle = t.event?.title || t.eventId || "Event";
+    const eventDate = t.event?.startDate ? new Date(t.event.startDate) : null;
+    const optionName = t.registrationOption?.eventOption?.name || "Ticket";
+    const variantName = t.registrationOption?.variant?.name;
+    const type = variantName ? `${optionName} — ${variantName}` : optionName;
+    const qty = t.quantity || 1;
+    const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(t.qrCode || t.id)}`;
+    const dateStr = eventDate ? formatDate(eventDate) : '';
+    return `
+      <div class="ticket">
+        <div class="row between">
+          <div class="evt">${eventTitle}</div>
+          ${dateStr ? `<div class="date">${dateStr}</div>` : ''}
+        </div>
+        <div class="type">${type}</div>
+        <div class="qty">Qty: <strong>${qty}</strong></div>
+        <div class="qrwrap"><img src="${qrSrc}" alt="QR" /></div>
+        <div class="meta">Ticket ID: ${t.id}</div>
+        ${buyerName ? `<div class="meta">Purchased by: ${buyerName}</div>` : ''}
+      </div>
+    `;
+  };
+
+  const openPrintWindow = (title: string, cardsHtml: string) => {
+    const w = window.open("", "_blank");
+    if (!w) return;
+    w.document.write(`<!doctype html><html><head><title>${title}</title>
+      <style>
+        *{box-sizing:border-box}
+        body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:16px;background:#f7f7f7}
+        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
+        .ticket{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,0.06);break-inside:avoid;page-break-inside:avoid}
+        .evt{font-weight:700;font-size:14px}
+        .type{margin-top:4px;color:#374151}
+        .qty{margin-top:2px;font-size:12px;color:#374151}
+        .date{color:#6b7280;font-size:12px}
+        .row{display:flex;gap:8px;align-items:center}
+        .between{justify-content:space-between}
+        .qrwrap{display:flex;justify-content:center;align-items:center;margin:10px 0}
+        .qrwrap img{width:160px;height:160px}
+        .meta{font-size:12px;color:#6b7280;text-align:center;margin-top:6px}
+        @media print { body{background:#fff} .print-hidden{display:none !important} }
+      </style>
+    </head><body>
+      <h2 class="print-hidden" style="margin:8px 0 16px 0;font-size:18px">${title}</h2>
+      <div class="grid">${cardsHtml}</div>
+      <script>
+        (function(){
+          function printWhenReady(){
+            var imgs = Array.prototype.slice.call(document.images);
+            if(imgs.length === 0){ window.print(); return; }
+            var remaining = imgs.length;
+            function done(){ remaining--; if(remaining <= 0){ setTimeout(function(){ window.print(); }, 200); } }
+            imgs.forEach(function(img){
+              if (img.complete) { done(); }
+              else {
+                img.addEventListener('load', done, { once: true });
+                img.addEventListener('error', done, { once: true });
+              }
+            });
+          }
+          if (document.readyState === 'complete') printWhenReady();
+          else window.addEventListener('load', printWhenReady);
+        })();
+      </script>
+    </body></html>`);
+    w.document.close();
+    w.focus();
+  };
+
+  const printTickets = (ticketList: any[]) => {
+    if (!ticketList || ticketList.length === 0) return;
+    const cards = ticketList.map(t => buildTicketHtmlCard(t, user?.name)).join("");
+    openPrintWindow(`Tickets (${ticketList.length})`, cards);
+  };
+
+  // Upcoming events derived from registrations
+  const upcomingEvents = useMemo(() => {
+    const map = new Map<string, any>();
+    for (const r of registrations) {
+      if (r.event && isFuture(r.event.startDate)) {
+        if (!map.has(r.event.id)) map.set(r.event.id, r.event);
+      }
+    }
+    return Array.from(map.values()).sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+  }, [registrations]);
+
+  // Tickets by grouping
+  const ticketsByEvent = useMemo(() => {
+    const m: Record<string, any[]> = {};
+    for (const t of tickets) {
+      const eid = t.eventId;
+      if (!m[eid]) m[eid] = [];
+      m[eid].push(t);
+    }
+    return m;
+  }, [tickets]);
+
+  // Registration click -> open modal
+  const activeReg = useMemo(() => registrations.find(r => r.id === activeRegId) || null, [registrations, activeRegId]);
+  const activeBill = activeRegId ? billing[activeRegId] : undefined;
+
+  // When a registration is opened, determine whether its event has attendee forms
+  useEffect(() => {
+    setActiveEventHasForm(null);
+    if (!activeRegId) return;
+    const ar = registrations.find(r => r.id === activeRegId);
+    if (!ar) return;
+    const evForm = ar.event?.form;
+    if (evForm && Array.isArray(evForm.fields) && evForm.fields.length > 0) {
+      setActiveEventHasForm(true);
+      return;
+    }
+    (async () => {
+      try {
+        const ev = await apiFetch<any>(`/api/events/${encodeURIComponent(ar.eventId)}`);
+        const has = !!(ev?.form && Array.isArray(ev.form.fields) && ev.form.fields.length > 0);
+        setActiveEventHasForm(has);
+      } catch {
+        setActiveEventHasForm(false);
+      }
+    })();
+  }, [activeRegId, registrations]);
+
+  const showFormsButton = useMemo(() => {
+    const evForm = activeReg?.event?.form;
+    if (evForm && Array.isArray(evForm.fields)) return evForm.fields.length > 0;
+    if (activeEventHasForm !== null) return activeEventHasForm;
+    return false;
+  }, [activeReg, activeEventHasForm]);
+
+  // Cancel registration state
+  const [cancelLoading, setCancelLoading] = useState(false);
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+
+  const cancelRegistration = async () => {
+    if (!token || !activeRegId) return;
+    setCancelLoading(true);
+    try {
+      await apiFetch(`/api/registrations/${encodeURIComponent(activeRegId)}`, {
+        method: 'DELETE',
+        authToken: token,
+      });
+      const myRegs = await apiFetch<any[]>(`/api/registrations/myregistrations?showPast=${showPast ? '1' : '0'}`, { authToken: token });
+      setRegistrations(myRegs);
+      setActiveRegId(null);
+      setShowCancelConfirm(false);
+      setInfo('Registration cancelled.');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to cancel registration');
+      setShowCancelConfirm(false);
+    } finally {
+      setCancelLoading(false);
+    }
+  };
+
+  // Editor state for registration items. Keyed like register/[eventId]/RegisterForm.tsx:
+  // "eventOptionId" for plain options, "eventOptionId:variantId" for variant options.
+  const [editMode, setEditMode] = useState<boolean>(false);
+  const [editLoading, setEditLoading] = useState<boolean>(false);
+  const [editEventOptions, setEditEventOptions] = useState<any[]>([]);
+  const [editQuantities, setEditQuantities] = useState<Record<string, number>>({});
+  const [editBaseQty, setEditBaseQty] = useState<Record<string, number>>({});
+  const [editMinQty, setEditMinQty] = useState<Record<string, number>>({});
+
+  const canEditActive = useMemo(() => {
+    if (!activeReg) return false;
+    const end = activeReg.event?.endDate ? new Date(activeReg.event.endDate).getTime() : Infinity;
+    return end >= Date.now();
+  }, [activeReg]);
+
+  const editTotal = useMemo(() => {
+    return editEventOptions.reduce((sum: number, eo: any) => {
+      if (Array.isArray(eo.variants) && eo.variants.length > 0) {
+        return sum + eo.variants.reduce((vsum: number, v: any) => {
+          const qty = editQuantities[`${eo.id}:${v.id}`] || 0;
+          return vsum + qty * effectiveEventOptionUnitPrice(eo, v.id);
+        }, 0);
+      }
+      return sum + (editQuantities[eo.id] || 0) * effectiveEventOptionUnitPrice(eo, null);
+    }, 0);
+  }, [editEventOptions, editQuantities]);
+
+  const beginEdit = async () => {
+    if (!activeReg || !token) return;
+    setEditLoading(true);
+    try {
+      // Load event options (with variants) for this event
+      const eventData = await apiFetch<any>(`/api/events/${encodeURIComponent(activeReg.eventId)}`);
+      const eventOptions = (eventData?.eventOptions || []) as any[];
+
+      const regOptById = new Map<string, any>((activeReg.registrationOptions || []).map((o: any) => [o.id, o]));
+
+      // Prefill quantities from the current registration
+      const qtyMap: Record<string, number> = {};
+      for (const ro of (activeReg.registrationOptions || [])) {
+        const key = ro.variantId ? `${ro.eventOptionId}:${ro.variantId}` : ro.eventOptionId;
+        qtyMap[key] = (qtyMap[key] || 0) + (ro.quantity || 0);
+      }
+
+      // Already-issued ticket quantity per option/variant — can't reduce below this
+      // (tickets are never deleted or shrunk, only ever grown, once paid).
+      const minQtyMap: Record<string, number> = {};
+      for (const t of tickets) {
+        const ro = regOptById.get(t.registrationOptionId);
+        if (!ro) continue;
+        const key = ro.variantId ? `${ro.eventOptionId}:${ro.variantId}` : ro.eventOptionId;
+        minQtyMap[key] = (minQtyMap[key] || 0) + (t.quantity || 0);
+      }
+
+      // Ensure every option/variant has a (possibly zero) entry so they all render
+      eventOptions.forEach((eo: any) => {
+        if (Array.isArray(eo.variants) && eo.variants.length > 0) {
+          eo.variants.forEach((v: any) => {
+            const key = `${eo.id}:${v.id}`;
+            if (!(key in qtyMap)) qtyMap[key] = 0;
+          });
+        } else if (!(eo.id in qtyMap)) {
+          qtyMap[eo.id] = 0;
+        }
+      });
+
+      setEditEventOptions(eventOptions);
+      setEditQuantities(qtyMap);
+      setEditBaseQty({ ...qtyMap });
+      setEditMinQty(minQtyMap);
+      setEditMode(true);
+    } catch (e) {
+      setError((e as any)?.message || 'Failed to load event options');
+    } finally {
+      setEditLoading(false);
+    }
+  };
+
+  const saveEdit = async () => {
+    if (!activeReg || !token) return;
+
+    for (const [key, minQty] of Object.entries(editMinQty)) {
+      if (minQty <= 0) continue;
+      if ((editQuantities[key] || 0) < minQty) {
+        const [eventOptionId, variantId] = key.includes(':') ? key.split(':') : [key, undefined];
+        const eo = editEventOptions.find((o: any) => o.id === eventOptionId);
+        const variant = variantId ? (eo?.variants || []).find((v: any) => v.id === variantId) : null;
+        const label = variant ? `${eo?.name || 'item'} (${variant.name})` : (eo?.name || 'item');
+        setError(`Cannot reduce "${label}" below the ${minQty} already issued`);
+        return;
+      }
+    }
+
+    const payloadOptions: { eventOptionId: string; quantity: number; variantId?: string }[] = [];
+    for (const [key, qty] of Object.entries(editQuantities)) {
+      if (qty <= 0) continue;
+      if (key.includes(':')) {
+        const [eventOptionId, variantId] = key.split(':');
+        payloadOptions.push({ eventOptionId, quantity: qty, variantId });
+      } else {
+        payloadOptions.push({ eventOptionId: key, quantity: qty });
+      }
+    }
+    if (payloadOptions.length === 0) {
+      setError('Please select at least one item');
+      return;
+    }
+    // Enforce client-side: do not reduce below paid
+    const paid = activeBill?.totalPaid || 0;
+    if (editTotal < paid) {
+      setError('Cannot reduce items below the amount already paid');
+      return;
+    }
+    setLoading(true);
+    try {
+      await apiFetch(`/api/registrations/${encodeURIComponent(activeReg.id)}/options`, {
+        method: 'PUT',
+        authToken: token,
+        body: { options: payloadOptions },
+      });
+      // Reload registrations to reflect changes
+      const myRegs = await apiFetch<any[]>(`/api/registrations/myregistrations?showPast=${showPast ? '1' : '0'}`, { authToken: token });
+      setRegistrations(myRegs);
+      try {
+        const myTicks = await apiFetch<any[]>("/api/tickets/mytickets", { authToken: token });
+        setTickets(myTicks);
+      } catch {}
+      // Recompute billing totals using priceSnapshot
+      const now2 = new Date();
+      const totals: Record<string, { totalDue: number; totalPaid: number; outstanding: number; payments: any[] }> = {};
+      for (const r of myRegs) {
+        const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now2) * (opt.quantity || 0), 0);
+        totals[r.id] = { totalDue, totalPaid: 0, outstanding: totalDue, payments: [] };
+      }
+      setBilling(totals);
+      // Payments will be refreshed lazily or on next open; fetch for this one immediately
+      try {
+        const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(activeReg.id)}`, { authToken: token });
+        const totalPaid = pays.reduce((s, p) => s + (p.amount || 0), 0);
+        const totalDue = totals[activeReg.id]?.totalDue ?? 0;
+        setBilling(prev => ({
+          ...prev,
+          [activeReg.id]: {
+            totalDue,
+            totalPaid,
+            outstanding: Math.max(0, totalDue - totalPaid),
+            payments: pays,
+          }
+        }));
+      } catch {}
+      setInfo('Registration updated successfully');
+      setEditMode(false);
+    } catch (e: any) {
+      setError(e?.message || 'Failed to update registration');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const router = useRouter();
+
+
+  return (
+    <div className="max-w-6xl mx-auto w-full px-4 py-6 sm:px-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
+        <h1 className="text-2xl font-semibold">Welcome{user ? `, ${user.name}` : ""}</h1>
+        <div className="flex flex-wrap gap-2">
+          <button
+            className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+            onClick={() => router.push("/dashboard/user/reset-password")}
+          >Reset password</button>
+          <button
+            className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+            onClick={() => router.push("/dashboard/user/donate")}
+          >Make donation</button>
+        </div>
+      </div>
+      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
+      {info && <p className="text-green-700 text-sm mb-3">{info}</p>}
+      {loading && <p className="text-gray-500 text-sm mb-3">Loading…</p>}
+
+
+      <section className="mb-8">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-xl font-semibold">My Registrations</h2>
+          <label className="text-sm flex items-center gap-2">
+            <input type="checkbox" checked={showPast} onChange={e => setShowPast(e.target.checked)} />
+            <span>Show past events</span>
+          </label>
+        </div>
+        <p className="text-sm text-gray-600 mb-3 italic">
+          Click on registration to edit or make payment
+        </p>
+        {registrations.length === 0 ? (
+          <p className="text-gray-600 text-sm">No registrations yet.</p>
+        ) : (
+          <ul className="space-y-2">
+            {registrations
+              // Hide cancelled always; hide past unless showPast
+              .filter((r: any) => r.status !== 'cancelled')
+              .filter((r: any) => {
+                if (showPast) return true;
+                const end = r.event?.endDate ? new Date(r.event.endDate).getTime() : Infinity;
+                return end >= Date.now();
+              })
+              .map((r: any) => {
+                const bill = billing[r.id];
+                const isCancelled = r.status === 'cancelled';
+                const outstanding = isCancelled ? 0 : (bill?.outstanding ?? 0);
+                const totalDue = bill?.totalDue ?? 0;
+                return (
+                  <li
+                    key={r.id}
+                    className={"border rounded p-3 cursor-pointer " + (isCancelled ? "opacity-60 bg-gray-50" : "hover:bg-gray-50")}
+                    onClick={() => setActiveRegId(r.id)}
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <div className="font-medium">{r.event?.title || r.eventId}</div>
+                        <div className="text-xs text-gray-600">
+                          Status: {r.status}{isCancelled && <span className="ml-2 inline-block text-[10px] px-1.5 py-0.5 rounded bg-gray-200 text-gray-700">cancelled</span>}
+                        </div>
+                        {(() => {
+                          const fs = formStatuses[r.id];
+                          if (!fs || !fs.hasForm) return null;
+                          const label = fs.complete ? 'Complete' : 'Incomplete';
+                          const colorClass = fs.complete
+                            ? 'bg-green-100 text-green-800'
+                            : (fs.isRequired ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800');
+                          return (
+                            <div className="mt-1 text-xs">
+                              <span className={`inline-block px-1.5 py-0.5 rounded ${colorClass}`}>Forms: {label}</span>
+                            </div>
+                          );
+                        })()}
+                        {(() => {
+                          if (r.status == 'paid') return null;
+                          // Early-bird notice: only for events with tiers that haven't passed
+                          const allTiers = (r.registrationOptions || []).flatMap((ro: any) => Array.isArray(ro.eventOption?.earlyBirdTiers) ? ro.eventOption.earlyBirdTiers : []);
+                          const upcoming = allTiers
+                            .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+                            .filter((t: any) => new Date() < t.deadline)
+                            .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime());
+                          if (upcoming.length === 0) return null;
+                          const nextDeadline = upcoming[0].deadline;
+                          const pays = (billing[r.id]?.payments || []);
+                          const lastPaymentAt = pays.length > 0 ? new Date(Math.max(...pays.map((p: any) => new Date(p.createdAt).getTime()))) : null;
+                          const now = new Date();
+                          const priceNow = (r.registrationOptions || []).reduce((s: number, ro: any) => s + optionUnitPrice(ro, lastPaymentAt, now) * (ro.quantity || 0), 0);
+                          const afterPrice = (r.registrationOptions || []).reduce((s: number, ro: any) => s + optionUnitPrice(ro, lastPaymentAt, new Date(nextDeadline.getTime() + 1000)) * (ro.quantity || 0), 0);
+                          const dateStr = nextDeadline.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
+                          if (afterPrice > priceNow) {
+                            return (
+                              <div className="mt-1 text-xs text-amber-700">
+                                Early bird: R {priceNow.toFixed(2)} if paid before {dateStr}. Price increases to R {afterPrice.toFixed(2)} thereafter.
+                              </div>
+                            );
+                          }
+                          return (
+                            <div className="mt-1 text-xs text-amber-700">
+                              Early bird pricing in effect until {dateStr}.
+                            </div>
+                          );
+                        })()}
+                      </div>
+                      <div className="text-right">
+                        {isCancelled ? (
+                          <div className="text-xs text-gray-500">No outstanding — registration cancelled</div>
+                        ) : (
+                          <>
+                            <div className="text-sm">Outstanding: <span className={outstanding > 0 ? "text-red-600" : "text-green-700"}>{formatRand(outstanding)}</span></div>
+                            <div className="text-xs text-gray-500">Total: {formatRand(totalDue)}</div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </li>
+                );
+              })}
+          </ul>
+        )}
+      </section>
+
+      <section className="mb-8">
+        <h2 className="text-xl font-semibold mb-2">Upcoming Events</h2>
+        {upcomingEvents.length === 0 ? (
+          <p className="text-gray-600 text-sm">No upcoming events.</p>
+        ) : (
+          <ul className="grid md:grid-cols-2 gap-3">
+            {upcomingEvents.map(ev => (
+              <li key={ev.id} className="border rounded p-4">
+                <div className="font-medium">{ev.title}</div>
+                <div className="text-sm text-gray-600">{new Date(ev.startDate).toLocaleString()} - {new Date(ev.endDate).toLocaleString()}</div>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  <button
+                    className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+                    onClick={() => {
+                      const list = tickets.filter(t => t.eventId === ev.id);
+                      printTickets(list);
+                    }}
+                  >Print all tickets</button>
+                  <button
+                    className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+                    onClick={() => {
+                      const ids = tickets.filter(t => t.eventId === ev.id).map(t => t.id);
+                      emailTickets(ids);
+                    }}
+                  >Email all tickets</button>
+                  {user?.phoneNumber && (
+                    <button
+                      className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
+                      onClick={() => {
+                        const ids = tickets.filter(t => t.eventId === ev.id).map(t => t.id);
+                        whatsappTickets(ids);
+                      }}
+                    >WhatsApp tickets</button>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
+          <h2 className="text-xl font-semibold">My Tickets</h2>
+          {tickets.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => selectAll(true)}>Select all</button>
+              <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => selectAll(false)}>Clear</button>
+              <button
+                className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+                disabled={selectedIds.length === 0}
+                onClick={() => printTickets(tickets.filter(t => selectedIds.includes(t.id)))}
+              >Print selected</button>
+              <button
+                className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+                disabled={selectedIds.length === 0}
+                onClick={() => emailTickets(selectedIds)}
+              >Email selected</button>
+              {user?.phoneNumber && (
+                <button
+                  className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
+                  disabled={selectedIds.length === 0}
+                  onClick={() => whatsappTickets(selectedIds)}
+                >WhatsApp selected</button>
+              )}
+            </div>
+          )}
+        </div>
+        {tickets.filter(t => showPast || (t.event?.endDate ? new Date(t.event.endDate).getTime() >= Date.now() : true)).length === 0 ? (
+          <p className="text-gray-600 text-sm">No tickets yet.</p>
+        ) : (
+          <ul className="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {tickets
+                        .filter((t: any) => showPast || (t.event?.endDate ? new Date(t.event.endDate).getTime() >= Date.now() : true))
+                        .map((t: any) => {
+              const eventDate = t.event?.startDate ? new Date(t.event.startDate) : null;
+              const optionName = t.registrationOption?.eventOption?.name || "Ticket";
+              const variantName = t.registrationOption?.variant?.name;
+              const type = variantName ? `${optionName} — ${variantName}` : optionName;
+              return (
+                <li key={t.id} className="border rounded-xl p-3 space-y-2 bg-white shadow-sm">
+                  <div className="flex items-start justify-between">
+                    <label className="flex items-center gap-2 text-sm">
+                      <input type="checkbox" checked={selected[t.id]} onChange={e => toggleSelect(t.id, e.target.checked)} />
+                      <span className="font-medium">{t.event?.title || t.eventId}</span>
+                    </label>
+                    {eventDate && <span className="text-xs text-gray-500">{formatDate(eventDate)}</span>}
+                  </div>
+                  <div className="text-sm text-gray-700">{type}</div>
+                  <div className="text-xs font-medium text-blue-700 bg-blue-50 rounded px-2 py-0.5 inline-block">
+                    Qty: {t.quantity || 1}
+                  </div>
+                  <div className="flex justify-center"><QrImage value={t.qrCode || t.id} size={120} className="w-28 h-28" /></div>
+                  <div className="text-center text-xs text-gray-500">#{t.id.slice(0, 8)}</div>
+                  <div className="flex gap-2 pt-1 flex-wrap">
+                    <button onClick={() => emailTickets([t.id])} className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">Email</button>
+                    {user?.phoneNumber && (
+                      <button onClick={() => whatsappTickets([t.id])} className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1">WhatsApp</button>
+                    )}
+                    <button onClick={() => printTickets([t])} className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">Print</button>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </section>
+
+      {activeReg && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setActiveRegId(null)}>
+          <div className="bg-white rounded-lg shadow-lg max-w-xl w-full mx-4 p-5 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-lg font-semibold">{activeReg.event?.title || activeReg.eventId}</h3>
+              <button className="px-2.5 py-1 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => { setEditMode(false); setShowCancelConfirm(false); setActiveRegId(null); }}>Close</button>
+            </div>
+            <div className="space-y-3">
+              <div>
+                <div className="text-sm text-gray-600">Status: {activeReg.status}</div>
+                {activeBill && (
+                  <div className="text-sm">
+                    <div>Total: {formatRand(activeBill.totalDue)}</div>
+                    <div>Paid: {formatRand(activeBill.totalPaid)}</div>
+                    <div>Outstanding: <span className={activeBill.outstanding > 0 ? "text-red-600" : "text-green-700"}>{formatRand(activeBill.outstanding)}</span></div>
+                  </div>
+                )}
+              </div>
+              <div>
+                <div className="font-medium mb-1 flex items-center justify-between">
+                  <span>Registration items</span>
+                  {!editMode && canEditActive && (
+                    <button disabled={editLoading} onClick={beginEdit} className="px-2.5 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50">Edit</button>
+                  )}
+                </div>
+                {!editMode ? (
+                  <ul className="text-sm list-disc pl-5 space-y-1">
+                    {(activeReg.registrationOptions || []).map((opt: any) => {
+                      const variantLabel = opt.variant?.name ? ` (${opt.variant.name})` : '';
+                      const unitPrice = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+                        ? Number(opt.priceSnapshot)
+                        : (opt.variant?.price ?? opt.eventOption?.price ?? 0);
+                      return (
+                        <li key={opt.id}>
+                          {opt.eventOption?.name}{variantLabel} x {opt.quantity} — {formatRand(unitPrice * (opt.quantity || 0))}
+                          {unitPrice < (opt.eventOption?.price || 0) && (
+                            <span className="ml-1 text-xs text-green-700">(early bird)</span>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                ) : (
+                  <div className="border rounded p-3 space-y-2 bg-gray-50">
+                    {editLoading ? (
+                      <div className="text-sm text-gray-600">Loading options…</div>
+                    ) : (
+                      <>
+                        <div className="space-y-2">
+                          {editEventOptions.map((eo: any) => {
+                            const hasVariants = Array.isArray(eo.variants) && eo.variants.length > 0;
+
+                            const renderQtyInput = (key: string, unitPrice: number, stockLimit?: number, availableCount?: number) => {
+                              const qty = editQuantities[key] || 0;
+                              const minQty = editMinQty[key] || 0;
+                              const baseQty = editBaseQty[key] || 0;
+                              const maxQty = ((stockLimit ?? 0) > 0 && availableCount !== undefined)
+                                ? availableCount + baseQty
+                                : undefined;
+                              return (
+                                <div className="flex items-center gap-2">
+                                  <label className="text-xs text-gray-600">Qty</label>
+                                  <input type="number" min={minQty} max={maxQty} value={qty}
+                                         onChange={e => {
+                                           let v = Math.max(minQty, parseInt(e.target.value || '0', 10) || 0);
+                                           if (maxQty !== undefined) v = Math.min(v, maxQty);
+                                           setEditQuantities(prev => ({ ...prev, [key]: v }));
+                                         }}
+                                         className="w-20 border rounded px-2 py-1 text-sm" />
+                                </div>
+                              );
+                            };
+
+                            if (hasVariants) {
+                              const variants = eo.variants.slice().sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
+                              return (
+                                <div key={eo.id} className="border rounded bg-white overflow-hidden">
+                                  <div className="px-3 py-2 bg-gray-100 text-sm font-medium">{eo.name}</div>
+                                  <ul className="divide-y">
+                                    {variants.map((v: any) => {
+                                      const key = `${eo.id}:${v.id}`;
+                                      const minQty = editMinQty[key] || 0;
+                                      const unitPrice = effectiveEventOptionUnitPrice(eo, v.id);
+                                      return (
+                                        <li key={v.id} className="flex items-center justify-between gap-2 px-3 py-2">
+                                          <div className="text-sm">
+                                            <div>{v.name}</div>
+                                            <div className="text-gray-600 text-xs">{formatRand(unitPrice)}</div>
+                                            {minQty > 0 && (
+                                              <div className="text-gray-500 text-[11px]">{minQty} already issued</div>
+                                            )}
+                                          </div>
+                                          {renderQtyInput(key, unitPrice, v.stockLimit, v.availableCount)}
+                                        </li>
+                                      );
+                                    })}
+                                  </ul>
+                                </div>
+                              );
+                            }
+
+                            const key = eo.id;
+                            const minQty = editMinQty[key] || 0;
+                            const unitPrice = effectiveEventOptionUnitPrice(eo, null);
+                            return (
+                              <div key={eo.id} className="flex items-center justify-between gap-2 border rounded bg-white px-3 py-2">
+                                <div className="text-sm">
+                                  <div className="font-medium">{eo.name}</div>
+                                  <div className="text-gray-600 text-xs">{formatRand(unitPrice)}</div>
+                                  {minQty > 0 && (
+                                    <div className="text-gray-500 text-[11px]">{minQty} already issued</div>
+                                  )}
+                                </div>
+                                {renderQtyInput(key, unitPrice, eo.stockLimit, eo.availableCount)}
+                              </div>
+                            );
+                          })}
+                        </div>
+                        <div className="flex items-center justify-between pt-2">
+                          <div className="text-sm">
+                            {(() => {
+                              const paid = activeBill?.totalPaid || 0;
+                              const hasAnyQty = Object.values(editQuantities).some(q => q > 0);
+                              const invalid = editTotal < paid || !hasAnyQty;
+                              return (
+                                <>
+                                  <div>New total: {formatRand(editTotal)}</div>
+                                  {paid > 0 && <div className="text-xs text-gray-600">Paid: {formatRand(paid)}</div>}
+                                  {invalid && <div className="text-xs text-red-600">Total cannot be below amount already paid and at least one item is required.</div>}
+                                </>
+                              );
+                            })()}
+                          </div>
+                          <div className="flex gap-2">
+                            <button onClick={() => setEditMode(false)} className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200">Cancel</button>
+                            <button onClick={saveEdit} className="px-2.5 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700">Save</button>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+              {activeBill && activeBill.payments.length > 0 && (
+                <div>
+                  <div className="font-medium mb-1">Payments</div>
+                  <ul className="text-sm list-disc pl-5 space-y-1">
+                    {activeBill.payments.map((p: any) => (
+                      <li key={p.id}>{new Date(p.createdAt).toLocaleString()} — {formatRand(p.amount)} ({p.method || "Payment"})</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+              <div className="flex flex-wrap gap-2 pt-2">
+                {showFormsButton && (
+                  <button
+                    className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1"
+                    onClick={() => router.push(`/dashboard/user/forms?registrationId=${encodeURIComponent(activeReg.id)}`)}
+                  >Attendee forms</button>
+                )}
+                {activeBill && activeBill.outstanding > 0 ? (
+                  <button
+                    className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
+                    onClick={() => router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(activeReg.id)}`)}
+                  >Make payment</button>
+                ) : (
+                  <>
+                    <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => {
+                      const regOptIds = new Set((activeReg.registrationOptions || []).map((o: any) => o.id));
+                      const list = tickets.filter(t => regOptIds.has(t.registrationOptionId));
+                      printTickets(list);
+                    }}>Print all tickets</button>
+                    <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1" onClick={() => emailRegistration(activeReg.id)}>Email all tickets</button>
+                    {user?.phoneNumber && (
+                      <button className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1" onClick={() => whatsappRegistration(activeReg.id)}>WhatsApp tickets</button>
+                    )}
+                  </>
+                )}
+              </div>
+
+              {/* Cancel registration — only shown when no payments have been made */}
+              {activeReg.status !== 'cancelled' && (activeBill?.totalPaid ?? 0) === 0 && (
+                <div className="pt-3 border-t mt-1">
+                  {!showCancelConfirm ? (
+                    <button
+                      className="text-sm text-red-600 hover:text-red-800 underline underline-offset-2"
+                      onClick={() => setShowCancelConfirm(true)}
+                    >
+                      Cancel registration
+                    </button>
+                  ) : (
+                    <div className="flex items-center gap-2 p-2 rounded border border-red-200 bg-red-50">
+                      <span className="text-sm text-red-700 flex-1">Are you sure you want to cancel? This cannot be undone.</span>
+                      <button
+                        disabled={cancelLoading}
+                        className="px-2.5 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
+                        onClick={cancelRegistration}
+                      >{cancelLoading ? 'Cancelling…' : 'Yes, cancel'}</button>
+                      <button
+                        className="px-2.5 py-1 text-xs rounded bg-gray-200 hover:bg-gray-300"
+                        onClick={() => setShowCancelConfirm(false)}
+                      >No</button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {dialog.open && (
+        <div
+          className="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
+          onClick={() => { if (!dialog.loading) setDialog({ open: false, message: "", loading: false }); }}
+        >
+          <div className="bg-white rounded-lg shadow-lg max-w-sm w-full p-5" onClick={e => e.stopPropagation()}>
+            {dialog.loading ? (
+              <div className="flex flex-col items-center">
+                <div className="w-10 h-10 mb-3 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" aria-label="Loading" />
+                <div className="text-base font-medium">Sending tickets…</div>
+                <p className="text-sm text-gray-600 mt-1">Please wait while we send your tickets.</p>
+              </div>
+            ) : (
+              <>
+                <div className="text-lg font-semibold mb-2">Tickets sent</div>
+                <p className="text-sm text-gray-700 mb-4">{dialog.message}</p>
+                <div className="flex justify-end">
+                  <button
+                    className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+                    onClick={() => setDialog({ open: false, message: "", loading: false })}
+                  >OK</button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/app/dashboard/user/pay/page.tsx b/frontend/src/app/dashboard/user/pay/page.tsx
new file mode 100644
index 0000000..f438a54
--- /dev/null
+++ b/frontend/src/app/dashboard/user/pay/page.tsx
@@ -0,0 +1,207 @@
+"use client";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+function MakePaymentContent() {
+  const searchParams = useSearchParams();
+  const registrationId = searchParams.get("registrationId");
+  const { token } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+  const [registration, setRegistration] = useState<any | null>(null);
+  const [payments, setPayments] = useState<any[]>([]);
+  const [amount, setAmount] = useState<string>("");
+  const [priceUpdated, setPriceUpdated] = useState<{ newTotal: number; message: string } | null>(null);
+
+  // Compute effective unit price for a registration option.
+  // Uses priceSnapshot when available (authoritative backend price, variant-aware).
+  // Falls back to deadline-only early-bird calculation for legacy rows without a snapshot.
+  const optionUnitPrice = (opt: any, referenceTime: any, atTime: Date): number => {
+    if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
+      return Number(opt.priceSnapshot);
+    }
+    const eo = opt.eventOption;
+    const variantId: string | null = opt.variantId || null;
+    const base = (opt.variant?.price !== null && opt.variant?.price !== undefined)
+      ? Number(opt.variant.price)
+      : Number(eo?.price || 0);
+    const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
+    const tiers = variantId
+      ? allTiers.filter((t: any) => t.variantId === variantId)
+      : allTiers.filter((t: any) => !t.variantId);
+    if (tiers.length === 0) return base;
+    const t = atTime ? new Date(atTime) : new Date();
+    const ref = referenceTime ? new Date(referenceTime) : t;
+    const applicable = tiers
+      .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
+      .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
+      .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
+    if (applicable.length === 0) return base;
+    const price = Number(applicable[0].price);
+    return (price >= 0) ? price : base;
+  };
+
+  const totals = useMemo(() => {
+    if (!registration) return { totalDue: 0, totalPaid: 0, outstanding: 0 };
+    const now = new Date();
+    // totalDue uses priceSnapshot — not time-dependent, consistent with what the backend charges
+    const totalDue = (registration.registrationOptions || []).reduce((s: number, opt: any) => s + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+    const totalPaid = payments.reduce((s: number, p: any) => s + (p.amount || 0), 0);
+    const outstanding = Math.max(0, totalDue - totalPaid);
+    return { totalDue, totalPaid, outstanding };
+  }, [registration, payments]);
+
+  const minAllowed = useMemo(() => {
+    if (totals.outstanding <= 0) return 0;
+    return totals.outstanding >= 15 ? 15 : totals.outstanding;
+  }, [totals.outstanding]);
+
+  useEffect(() => {
+    (async () => {
+      if (!token || !registrationId) return;
+      try {
+        setError(null);
+        setLoading(true);
+        const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+        setRegistration(reg);
+        const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
+        setPayments(pays);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load registration");
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token, registrationId]);
+
+  useEffect(() => {
+    if (totals.outstanding <= 0) {
+      setAmount("");
+    }
+  }, [totals.outstanding]);
+
+  const submit = async () => {
+    if (!token || !registrationId) return;
+    const amt = parseFloat(amount);
+    if (!(amt > 0)) { setError("Enter a valid amount"); return; }
+    if (amt > totals.outstanding) { setError(`Amount cannot exceed outstanding (R ${totals.outstanding.toFixed(2)})`); return; }
+    if (amt < minAllowed) {
+      if (totals.outstanding >= 15) {
+        setError("Minimum payment is R15");
+      } else {
+        setError(`Please pay the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`);
+      }
+      return;
+    }
+    try {
+      setError(null);
+      setInfo(null);
+      setPriceUpdated(null);
+      setLoading(true);
+      const res = await apiFetch<{ redirectUrl?: string; priceUpdated?: boolean; newTotal?: number; message?: string }>("/api/payments/yoco-checkout", {
+        method: "POST",
+        body: {
+          registrationId,
+          amount: amt,
+          successUrl: window.location.origin + "/payment/success",
+          cancelUrl: window.location.origin + "/payment/cancel",
+          failureUrl: window.location.origin + "/payment/failure",
+        },
+        authToken: token,
+      });
+      if (res.priceUpdated) {
+        // Early-bird price changed — show warning and reload registration data
+        setPriceUpdated({ newTotal: res.newTotal ?? 0, message: res.message ?? 'Prices have changed.' });
+        // Reload registration so totals reflect updated priceSnapshot
+        try {
+          const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+          setRegistration(reg);
+          const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
+          setPayments(pays);
+        } catch {}
+        setAmount("");
+        return;
+      }
+      setInfo("Redirecting to payment...");
+      window.location.href = res.redirectUrl!;
+    } catch (e: any) {
+      setError(e?.message || "Failed to create checkout");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!registrationId) return <div className="p-6">Missing registrationId.</div>;
+
+  return (
+    <div className="max-w-xl mx-auto w-full p-6">
+      <h1 className="text-2xl font-semibold mb-4">Make a payment</h1>
+      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
+      {info && <p className="text-green-700 text-sm mb-3">{info}</p>}
+      {priceUpdated && (
+        <div className="mb-4 p-3 border border-amber-300 bg-amber-50 rounded text-sm text-amber-800">
+          <strong>Pricing has changed.</strong> {priceUpdated.message}
+          <div className="mt-1">New outstanding: <strong>R {priceUpdated.newTotal.toFixed(2)}</strong></div>
+          <button
+            className="mt-2 text-xs underline text-amber-700 hover:text-amber-900"
+            onClick={() => setPriceUpdated(null)}
+          >OK, I understand — continue with new price</button>
+        </div>
+      )}
+
+      {registration ? (
+        <div className="border rounded p-3 mb-4">
+          <div className="font-medium">{registration.event?.title || registration.eventId}</div>
+          <div className="text-sm text-gray-600">Registration #{registration.id.slice(0,8)}</div>
+          <div className="mt-2 text-sm">
+            <div>Total: R {totals.totalDue.toFixed(2)}</div>
+            <div>Paid: R {totals.totalPaid.toFixed(2)}</div>
+            <div>Outstanding: <span className={totals.outstanding>0?"text-red-600":"text-green-700"}>R {totals.outstanding.toFixed(2)}</span></div>
+          </div>
+          {(() => {
+            const tiers = (registration.registrationOptions || []).flatMap((ro: any) => Array.isArray(ro.eventOption?.earlyBirdTiers) ? ro.eventOption.earlyBirdTiers : []);
+            const upcoming = tiers.map((t: any) => ({ ...t, deadline: new Date(t.deadline) })).filter((t: any) => new Date() < t.deadline).sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime());
+            if (upcoming.length === 0) return null;
+            const d = upcoming[0].deadline as Date;
+            const dateStr = d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
+            return <div className="mt-2 text-xs text-amber-700">Early bird pricing applies if paid before {dateStr}.</div>;
+          })()}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-600 mb-4">Loading registration...</p>
+      )}
+
+      <label className="block text-sm font-medium mb-1">Amount (R)</label>
+      <input
+        type="number"
+        min={minAllowed.toFixed(2)}
+        max={totals.outstanding > 0 ? totals.outstanding.toFixed(2) : "0"}
+        step="1"
+        placeholder={totals.outstanding >= 15 ? "Enter amount (min R15)" : `Enter amount (max R ${totals.outstanding.toFixed(2)})`}
+        value={amount}
+        onChange={(e) => setAmount(e.target.value)}
+        disabled={totals.outstanding <= 0}
+        className="w-full border rounded px-3 py-2 mb-1 disabled:opacity-60"
+      />
+      {totals.outstanding > 0 && (
+        <p className="text-xs text-gray-600 mb-3">Minimum payment {totals.outstanding >= 15 ? "is R15" : `is the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`}.</p>
+      )}
+      <button
+        disabled={loading || totals.outstanding <= 0}
+        onClick={submit}
+        className="bg-green-600 text-white px-4 py-2 rounded disabled:opacity-60"
+      >{loading?"Creating checkout...": totals.outstanding <= 0 ? "No outstanding amount" : "Pay now"}</button>
+    </div>
+  );
+}
+
+export default function MakePaymentPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <MakePaymentContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/dashboard/user/profile/page.tsx b/frontend/src/app/dashboard/user/profile/page.tsx
new file mode 100644
index 0000000..35009c3
--- /dev/null
+++ b/frontend/src/app/dashboard/user/profile/page.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { isValidZAPhone } from "@/lib/phone";
+
+export default function UserProfilePage() {
+  const { user, token, logout, updateToken } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!user && !token) router.replace("/login");
+  }, [user, token, router]);
+
+  // ── Profile form ─────────────────────────────────────────────────────────
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [notifPref, setNotifPref] = useState<"email" | "whatsapp" | "both">("email");
+  const [profileMsg, setProfileMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [savingProfile, setSavingProfile] = useState(false);
+
+  const hasValidPhone = isValidZAPhone(phone);
+
+  useEffect(() => {
+    if (user) {
+      setName(user.name || "");
+      setEmail(user.email || "");
+      setPhone(user.phoneNumber || "");
+      setNotifPref(user.notificationPreference || "email");
+    }
+  }, [user]);
+
+  const saveProfile = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token) return;
+    setSavingProfile(true);
+    setProfileMsg(null);
+    try {
+      const res = await apiFetch<any>("/api/users/profile", {
+        method: "PUT",
+        authToken: token,
+        body: {
+          name,
+          email,
+          phoneNumber: phone || null,
+          notificationPreference: hasValidPhone ? notifPref : "email",
+        },
+      });
+      // Backend returns a refreshed token — save it so the session stays valid
+      if (res?.token) updateToken(res.token);
+      setProfileMsg({ type: "ok", text: "Profile updated." });
+    } catch (e: any) {
+      setProfileMsg({ type: "err", text: e?.message || "Failed to update profile." });
+    } finally {
+      setSavingProfile(false);
+    }
+  };
+
+  // ── Password change ───────────────────────────────────────────────────────
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [pwMsg, setPwMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [savingPw, setSavingPw] = useState(false);
+
+  const changePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (newPassword !== confirmPassword) {
+      setPwMsg({ type: "err", text: "Passwords do not match." });
+      return;
+    }
+    if (newPassword.length < 8) {
+      setPwMsg({ type: "err", text: "Password must be at least 8 characters." });
+      return;
+    }
+    if (!token) return;
+    setSavingPw(true);
+    setPwMsg(null);
+    try {
+      const res = await apiFetch<any>("/api/users/profile", {
+        method: "PUT",
+        authToken: token,
+        body: { currentPassword, password: newPassword },
+      });
+      if (res?.token) updateToken(res.token);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      setPwMsg({ type: "ok", text: "Password changed." });
+    } catch (e: any) {
+      setPwMsg({ type: "err", text: e?.message || "Failed to change password." });
+    } finally {
+      setSavingPw(false);
+    }
+  };
+
+  // ── Revoke sessions ───────────────────────────────────────────────────────
+  const [revokeMsg, setRevokeMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [revoking, setRevoking] = useState(false);
+
+  const revokeSessions = async () => {
+    if (!confirm("This will sign you out of all other devices. You will need to log in again everywhere except here. Continue?")) return;
+    if (!token) return;
+    setRevoking(true);
+    setRevokeMsg(null);
+    try {
+      const res = await apiFetch<any>("/api/users/revoke-sessions", {
+        method: "POST",
+        authToken: token,
+      });
+      // Revoking sessions invalidates the token this device was using too —
+      // save the freshly issued one so this device stays signed in.
+      if (res?.token) updateToken(res.token);
+      setRevokeMsg({ type: "ok", text: res?.message || "All other sessions signed out." });
+    } catch (e: any) {
+      setRevokeMsg({ type: "err", text: e?.message || "Failed to revoke sessions." });
+    } finally {
+      setRevoking(false);
+    }
+  };
+
+  // ── Account closure ───────────────────────────────────────────────────────
+  const [closeStep, setCloseStep] = useState<"idle" | "confirm">("idle");
+  const [deleteData, setDeleteData] = useState(false);
+  const [closePassword, setClosePassword] = useState("");
+  const [closeMsg, setCloseMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [closing, setClosing] = useState(false);
+
+  const submitAccountClosure = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token) return;
+    setClosing(true);
+    setCloseMsg(null);
+    try {
+      const res = await apiFetch<any>("/api/users/close-account", {
+        method: "POST",
+        authToken: token,
+        body: { password: closePassword, deleteData },
+      });
+      setCloseMsg({ type: "ok", text: res?.message || "Account closed." });
+      // Slight delay so the user can read the message, then log out
+      setTimeout(() => logout(), 2500);
+    } catch (e: any) {
+      setCloseMsg({ type: "err", text: e?.message || "Failed to close account." });
+    } finally {
+      setClosing(false);
+    }
+  };
+
+  // ── Shared helpers ────────────────────────────────────────────────────────
+  const Alert = ({ msg }: { msg: { type: "ok" | "err"; text: string } }) => (
+    <div className={`mt-3 p-3 rounded text-sm ${msg.type === "ok" ? "bg-green-50 text-green-800 border border-green-200" : "bg-red-50 text-red-800 border border-red-200"}`}>
+      {msg.text}
+    </div>
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto w-full p-6 space-y-8">
+      <h1 className="text-2xl font-semibold">Profile &amp; Security</h1>
+
+      {/* ── Profile info ─────────────────────────────────────────────────── */}
+      <section className="border rounded-xl p-5 bg-white shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">Personal information</h2>
+        <form onSubmit={saveProfile} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Full name</label>
+            <input
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Email address</label>
+            <input
+              type="email"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={email}
+              onChange={e => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Phone number</label>
+            <input
+              type="tel"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={phone}
+              onChange={e => setPhone(e.target.value)}
+              placeholder="e.g. 082 123 4567"
+            />
+          </div>
+
+          {hasValidPhone && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Notification preference</label>
+              <select
+                className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                value={notifPref}
+                onChange={e => setNotifPref(e.target.value as "email" | "whatsapp" | "both")}
+              >
+                <option value="email">Email only</option>
+                <option value="whatsapp">WhatsApp only</option>
+                <option value="both">Email &amp; WhatsApp</option>
+              </select>
+              <p className="mt-1 text-xs text-gray-500">Security alerts (password reset, login notifications) are always sent via email regardless of this setting.</p>
+            </div>
+          )}
+
+          <button
+            type="submit"
+            disabled={savingProfile}
+            className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+          >
+            {savingProfile ? "Saving…" : "Save changes"}
+          </button>
+          {profileMsg && <Alert msg={profileMsg} />}
+        </form>
+      </section>
+
+      {/* ── Password ─────────────────────────────────────────────────────── */}
+      <section className="border rounded-xl p-5 bg-white shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">Change password</h2>
+        <form onSubmit={changePassword} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Current password</label>
+            <input
+              type="password"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={currentPassword}
+              onChange={e => setCurrentPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">New password</label>
+            <input
+              type="password"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={newPassword}
+              onChange={e => setNewPassword(e.target.value)}
+              required
+              minLength={8}
+              autoComplete="new-password"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Confirm new password</label>
+            <input
+              type="password"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              value={confirmPassword}
+              onChange={e => setConfirmPassword(e.target.value)}
+              required
+              autoComplete="new-password"
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={savingPw}
+            className="px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 disabled:opacity-50"
+          >
+            {savingPw ? "Changing…" : "Change password"}
+          </button>
+          {pwMsg && <Alert msg={pwMsg} />}
+        </form>
+      </section>
+
+      {/* ── Security ─────────────────────────────────────────────────────── */}
+      <section className="border rounded-xl p-5 bg-white shadow-sm">
+        <h2 className="text-lg font-semibold mb-1">Security</h2>
+        <p className="text-sm text-gray-500 mb-4">
+          If you suspect someone else has access to your account, you can sign out of all other devices immediately.
+          You will remain logged in on this device.
+        </p>
+        <button
+          onClick={revokeSessions}
+          disabled={revoking}
+          className="px-4 py-2 rounded-lg bg-amber-500 text-white text-sm font-medium hover:bg-amber-600 disabled:opacity-50"
+        >
+          {revoking ? "Signing out…" : "Sign out all other devices"}
+        </button>
+        {revokeMsg && <Alert msg={revokeMsg} />}
+      </section>
+
+      {/* ── Danger zone ──────────────────────────────────────────────────── */}
+      <section className="border border-red-200 rounded-xl p-5 bg-white shadow-sm">
+        <h2 className="text-lg font-semibold text-red-700 mb-1">Close account</h2>
+        <p className="text-sm text-gray-500 mb-4">
+          Closing your account will deactivate it immediately. You can also request that your personal
+          information (name, email, phone number) be permanently deleted. Tickets and payment records
+          will remain for accounting purposes but will show as &quot;Deleted User&quot;.
+        </p>
+
+        {closeStep === "idle" && (
+          <button
+            onClick={() => setCloseStep("confirm")}
+            className="px-4 py-2 rounded-lg border border-red-600 text-red-600 text-sm font-medium hover:bg-red-50"
+          >
+            Close my account…
+          </button>
+        )}
+
+        {closeStep === "confirm" && (
+          <form onSubmit={submitAccountClosure} className="space-y-4">
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-800">
+              <strong>This action cannot be undone.</strong> Please read carefully before continuing.
+            </div>
+
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                className="mt-0.5"
+                checked={deleteData}
+                onChange={e => setDeleteData(e.target.checked)}
+              />
+              <span className="text-sm text-gray-700">
+                <span className="font-medium">Also delete my personal data</span> — your name, email address,
+                and phone number will be permanently removed and cannot be recovered.
+              </span>
+            </label>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Confirm with your password
+              </label>
+              <input
+                type="password"
+                className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-red-500"
+                value={closePassword}
+                onChange={e => setClosePassword(e.target.value)}
+                required
+                placeholder="Enter your password to confirm"
+                autoComplete="current-password"
+              />
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={() => { setCloseStep("idle"); setClosePassword(""); setDeleteData(false); setCloseMsg(null); }}
+                className="px-4 py-2 rounded-lg bg-gray-100 text-sm font-medium hover:bg-gray-200"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={closing || !closePassword}
+                className="px-4 py-2 rounded-lg bg-red-600 text-white text-sm font-medium hover:bg-red-700 disabled:opacity-50"
+              >
+                {closing ? "Processing…" : deleteData ? "Delete my data & close account" : "Close my account"}
+              </button>
+            </div>
+            {closeMsg && <Alert msg={closeMsg} />}
+          </form>
+        )}
+      </section>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/user/reset-password/page.tsx b/frontend/src/app/dashboard/user/reset-password/page.tsx
new file mode 100644
index 0000000..606fba5
--- /dev/null
+++ b/frontend/src/app/dashboard/user/reset-password/page.tsx
@@ -0,0 +1,110 @@
+"use client";
+import React, { useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import { useRouter } from "next/navigation";
+
+export default function ResetPasswordPage() {
+  const { token } = useAuth();
+  const router = useRouter();
+  const [current, setCurrent] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const canSubmit = useMemo(() => current.length > 0 && password.length >= 8 && password === confirm, [current, password, confirm]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus(null);
+    setError(null);
+    if (!token) {
+      setError("You must be logged in to change your password.");
+      return;
+    }
+    if (!canSubmit) return;
+    try {
+      setLoading(true);
+      await apiFetch("/api/users/profile", { method: "PUT", authToken: token, body: { password, currentPassword: current } });
+      setStatus("Your password has been updated successfully.");
+      setCurrent("");
+      setPassword("");
+      setConfirm("");
+      setTimeout(() => router.push("/dashboard/user"), 1200);
+    } catch (err: any) {
+      setError(err?.message || "Failed to update password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Reset password</h1>
+        <button
+          className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+          onClick={() => router.push("/dashboard/user")}
+        >Back to dashboard</button>
+      </div>
+
+      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
+      {status && <p className="text-green-700 text-sm mb-3">{status}</p>}
+
+      <div className="border rounded-xl p-5 bg-white shadow-sm">
+        <form onSubmit={submit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Current password</label>
+            <input
+              type="password"
+              value={current}
+              onChange={e => setCurrent(e.target.value)}
+              required
+              className="w-full border rounded px-3 py-2"
+              placeholder="Enter your current password"
+            />
+            <p className="text-xs text-gray-500 mt-1">For your security, please confirm your current password.</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">New password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              required
+              className="w-full border rounded px-3 py-2"
+              placeholder="At least 8 characters"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Confirm new password</label>
+            <input
+              type="password"
+              value={confirm}
+              onChange={e => setConfirm(e.target.value)}
+              required
+              className="w-full border rounded px-3 py-2"
+            />
+            {password && confirm && password !== confirm && (
+              <p className="text-xs text-red-600 mt-1">Passwords do not match.</p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="submit"
+              disabled={!canSubmit || loading}
+              className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60"
+            >{loading ? "Saving…" : "Update password"}</button>
+            <button
+              type="button"
+              className="px-3 py-2 rounded bg-gray-100 hover:bg-gray-200 text-gray-800"
+              onClick={() => router.push("/dashboard/user")}
+            >Cancel</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/app/events/[id]/ClientActions.tsx b/frontend/src/app/events/[id]/ClientActions.tsx
new file mode 100644
index 0000000..0b99ec8
--- /dev/null
+++ b/frontend/src/app/events/[id]/ClientActions.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { Share2, QrCode } from "lucide-react";
+import QRCode from "qrcode";
+
+export default function ClientActions({ event }: { event: any }) {
+    return (
+        <div className="flex gap-2">
+            <button
+                onClick={async () => {
+                    try {
+                        await navigator.share({
+                            title: event.title,
+                            text: event.description,
+                            url: window.location.href,
+                        });
+                    } catch (err) {
+                        console.error("Error sharing:", err);
+                    }
+                }}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded hover:bg-gray-200"
+            >
+                <Share2 className="w-4 h-4" />
+                Share
+            </button>
+            <button
+                onClick={async () => {
+                    try {
+                        const url = window.location.href;
+                        const qrDataUrl = await QRCode.toDataURL(url);
+                        const link = document.createElement("a");
+                        link.href = qrDataUrl;
+                        link.download = `${event.title}-qr.png`;
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    } catch (err) {
+                        console.error("Error generating QR code:", err);
+                    }
+                }}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded hover:bg-gray-200"
+            >
+                <QrCode className="w-4 h-4" />
+                Save QR
+            </button>
+        </div>
+    );
+}
diff --git a/frontend/src/app/events/[id]/page.tsx b/frontend/src/app/events/[id]/page.tsx
new file mode 100644
index 0000000..178e39a
--- /dev/null
+++ b/frontend/src/app/events/[id]/page.tsx
@@ -0,0 +1,201 @@
+import { notFound } from "next/navigation";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import ClientActions from "@/app/events/[id]/ClientActions";
+
+export const revalidate = 60;
+
+type OptionVariant = { id: string; name: string; price: number | null; stockLimit?: number; availableCount?: number };
+type EventOption = {
+  id: string;
+  name: string;
+  price: number;
+  stockLimit?: number;
+  availableCount?: number;
+  isMainTicket?: boolean;
+  earlyBirdTiers?: { id: string; deadline: string; price: number; stockLimit?: number }[];
+  variants?: OptionVariant[];
+};
+
+type EventAttachment = { id: string; originalName: string; url: string; size: number; mimeType: string };
+type Event = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  registrationDeadline?: string | null;
+  goLiveAt?: string;
+  price: number;
+  picture?: string;
+  eventOptions?: EventOption[];
+  attachments?: EventAttachment[];
+  requiresAuth?: boolean;
+};
+
+import { apiFetch, ApiError } from "@/lib/api";
+import { ApiImage } from "@/components/shared/ApiImage";
+import { formatDateTimeRange } from "@/lib/date";
+
+// Tiered low-stock threshold: larger events use a smaller percentage.
+// Math.round avoids Math.ceil inflating the threshold (e.g. ceil(1.5)=2 made
+// a 10-ticket event warn at 20% when the stated threshold was 15%).
+function lowStockThreshold(stockLimit: number): number {
+  let pct: number;
+  if (stockLimit <= 50) pct = 0.20;
+  else if (stockLimit <= 200) pct = 0.15;
+  else if (stockLimit <= 1000) pct = 0.10;
+  else pct = 0.05;
+  return Math.round(stockLimit * pct);
+}
+
+export default async function EventDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  let event: Event;
+  try {
+    event = await apiFetch<Event>(`/api/events/${id}`, { nextOptions: { next: { revalidate } } });
+  } catch (e) {
+    // The event endpoint 404s for missing, inactive, or not-yet-live events —
+    // render the standard not-found page instead of crashing.
+    if (e instanceof ApiError && e.status === 404) notFound();
+    throw e;
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 py-10 px-4 max-w-3xl mx-auto w-full">
+        <div className="space-y-4">
+          <h1 className="text-3xl font-bold">{event.title}</h1>
+          <p className="text-sm text-gray-500">{formatDateTimeRange(event.startDate, event.endDate)}</p>
+          <ClientActions event={event} />
+          {event.picture && (
+            <ApiImage src={event.picture} alt={event.title} className="w-full aspect-video object-cover rounded" />
+          )}
+          <p className="text-gray-700 whitespace-pre-line">{event.description}</p>
+          {event.attachments && event.attachments.length > 0 && (
+            <div>
+              <h2 className="text-xl font-semibold mt-6">Downloads</h2>
+              <ul className="list-disc pl-5 text-gray-700">
+                {event.attachments.map((att) => (
+                  <li key={att.id}>
+                    <a className="text-blue-600 hover:underline" href={att.url} target="_blank" rel="noopener noreferrer">
+                      {att.originalName}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <h2 className="text-xl font-semibold mt-6">Tickets</h2>
+          <div className="space-y-2">
+            {(event.eventOptions || []).map((opt) => {
+              const hasVariants = Array.isArray(opt.variants) && opt.variants.length > 0;
+              const soldOut = (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= 0;
+              const nearlyOut = !soldOut && (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= lowStockThreshold(opt.stockLimit ?? 0);
+
+              if (hasVariants) {
+                const prices = opt.variants!.map((v) => v.price !== null && v.price !== undefined ? v.price : opt.price);
+                const minPrice = Math.min(...prices);
+                const maxPrice = Math.max(...prices);
+                const priceLabel = minPrice === 0 && maxPrice === 0 ? "Free" : minPrice === maxPrice ? `R${minPrice.toFixed(2)}` : minPrice === 0 ? `Free – R${maxPrice.toFixed(2)}` : `From R${minPrice.toFixed(2)}`;
+                return (
+                  <div key={opt.id} className="border rounded-lg overflow-hidden">
+                    <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
+                      <span className="font-medium text-sm">{opt.name}</span>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm text-gray-600">{priceLabel}</span>
+                        {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+                        {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
+                      </div>
+                    </div>
+                    <ul className="divide-y">
+                      {opt.variants!.slice().sort((a, b) => (a as any).order - (b as any).order).map((v) => {
+                        const vPrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
+                        const vSoldOut = (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= 0;
+                        const vNearlyOut = !vSoldOut && (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= lowStockThreshold(v.stockLimit ?? 0);
+                        return (
+                          <li key={v.id} className="flex items-center justify-between px-3 py-2 text-sm text-gray-700">
+                            <span>{v.name}</span>
+                            <div className="flex items-center gap-2">
+                              <span>{vPrice === 0 ? "Free" : `R${vPrice.toFixed(2)}`}</span>
+                              {vSoldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+                              {vNearlyOut && !vSoldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{v.availableCount} remaining</span>}
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </div>
+                );
+              }
+
+              // Early bird pricing display
+              const now = new Date();
+              const activeTiers = (opt.earlyBirdTiers || [])
+                .filter((t) => now < new Date(t.deadline))
+                .sort((a, b) => a.price - b.price);
+              const displayPrice = activeTiers.length > 0 ? activeTiers[0].price : opt.price;
+
+              return (
+                <div key={opt.id} className="flex items-center justify-between border rounded-lg px-3 py-2 text-sm text-gray-700">
+                  <span className="font-medium">{opt.name}</span>
+                  <div className="flex items-center gap-2">
+                    {activeTiers.length > 0 ? (
+                      <>
+                        <span className="text-indigo-700 font-medium">R{displayPrice.toFixed(2)}</span>
+                        <span className="text-xs text-gray-400 line-through">R{opt.price.toFixed(2)}</span>
+                        <span className="text-xs text-indigo-600">Early bird</span>
+                      </>
+                    ) : (
+                      <span>{displayPrice === 0 ? "Free" : `R${displayPrice.toFixed(2)}`}</span>
+                    )}
+                    {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+                    {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {(() => {
+            const now = new Date();
+            const end = new Date(event.endDate);
+            const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+            const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
+            const notYetOpen = goLive ? now < goLive : false;
+            const closed = (deadline ? now >= deadline : false) || now >= end;
+            const limitedOpts = (event.eventOptions || []).filter(o => (o.stockLimit ?? 0) > 0);
+            const eventSoldOut = limitedOpts.length > 0 && limitedOpts.every(o => o.availableCount !== undefined && o.availableCount <= 0);
+            if (notYetOpen) {
+              return (
+                <button disabled className="inline-block bg-gray-300 text-gray-600 px-4 py-2 rounded cursor-not-allowed" title="Registration not yet open">
+                  Opens {goLive?.toLocaleString()}
+                </button>
+              );
+            }
+            if (closed) {
+              return (
+                <button disabled className="inline-block bg-gray-300 text-gray-600 px-4 py-2 rounded cursor-not-allowed" title="Registration closed">
+                  Registration closed
+                </button>
+              );
+            }
+            if (eventSoldOut) {
+              return (
+                <button disabled className="inline-block bg-red-50 text-red-700 border border-red-200 px-4 py-2 rounded cursor-not-allowed">
+                  Sold Out
+                </button>
+              );
+            }
+            return (
+              <a href={`/register/${event.id}`} className="inline-block bg-blue-600 text-white px-4 py-2 rounded">
+                Register
+              </a>
+            );
+          })()}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/events/page.tsx b/frontend/src/app/events/page.tsx
new file mode 100644
index 0000000..f006ba7
--- /dev/null
+++ b/frontend/src/app/events/page.tsx
@@ -0,0 +1,50 @@
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { EventCard } from "@/components/events/EventCard";
+import { apiFetch } from "@/lib/api";
+
+export const revalidate = 60;
+
+type Event = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  registrationDeadline?: string | null;
+  goLiveAt?: string;
+  price: number;
+  picture?: string;
+  isSoldOut?: boolean;
+  cashupStatus?: string;
+};
+
+export default async function EventsPage() {
+    const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
+    const now = Date.now();
+    const upcoming = (events || []).filter(e => {
+        if (e.cashupStatus === "closed") return false;
+        const t = new Date(e.startDate).getTime();
+        return !isNaN(t) && t > now;
+    });
+    const sorted = [...upcoming].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 py-10 px-4 max-w-7xl mx-auto w-full">
+        <h1 className="text-3xl font-bold mb-6">All Events</h1>
+        {sorted.length === 0 ? (
+          <p className="text-gray-600">No events available.</p>
+        ) : (
+          <div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
+            {sorted.map((event) => (
+              <EventCard key={event.id} event={event} />)
+            )}
+          </div>
+        )}
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
new file mode 100644
index 0000000..d588100
Binary files /dev/null and b/frontend/src/app/favicon.ico differ
diff --git a/frontend/src/app/favicon_back.ico b/frontend/src/app/favicon_back.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/frontend/src/app/favicon_back.ico differ
diff --git a/frontend/src/app/forms/page.tsx b/frontend/src/app/forms/page.tsx
new file mode 100644
index 0000000..faa46b2
--- /dev/null
+++ b/frontend/src/app/forms/page.tsx
@@ -0,0 +1,253 @@
+"use client";
+import React, { Suspense, useEffect, useMemo, useState } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+// Types for form fields
+type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
+
+function FormsContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const { token } = useAuth();
+  const registrationId = search.get("registrationId");
+
+  const [registration, setRegistration] = useState<any | null>(null);
+  const [eventForm, setEventForm] = useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  // Local entry state for new responses
+  const [formsData, setFormsData] = useState<Record<number, Record<string, string>>>({});
+
+  useEffect(() => {
+    (async () => {
+      if (!registrationId) return;
+      setLoading(true);
+      setError(null);
+      setInfo(null);
+      try {
+        // authToken optional — guests access via registrationId alone
+        const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token || undefined });
+        setRegistration(reg);
+        const ev = await apiFetch<any>(`/api/events/${encodeURIComponent(reg.eventId)}`);
+        if (ev?.form) setEventForm(ev.form);
+        // Load any saved draft to prefill fields
+        try {
+          const draft = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, { authToken: token || undefined });
+          if (draft && draft.data && typeof draft.data === 'object') setFormsData(draft.data);
+        } catch {}
+      } catch (e: any) {
+        setError(e?.message || 'Failed to load registration');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [token, registrationId]);
+
+  const submittedCount = useMemo(() => {
+    return (registration?.formResponses || []).length;
+  }, [registration]);
+
+  const requiredCount = useMemo(() => {
+    if (!registration) return 0;
+    try {
+      return (registration.registrationOptions || [])
+        .filter((ro: any) => ro.eventOption?.isMainTicket)
+        .reduce((s: number, ro: any) => s + (ro.quantity || 0), 0);
+    } catch {
+      return 0;
+    }
+  }, [registration]);
+
+  const remaining = Math.max(0, requiredCount - submittedCount);
+
+  // Determine if all required fields are filled for each attendee form to be submitted
+  const canSubmit = useMemo(() => {
+    if (!eventForm || remaining <= 0) return false;
+    const reqFields = (eventForm.fields || [])
+      .filter(f => !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph')
+      .map(f => f.id);
+    for (let i = 0; i < remaining; i++) {
+      const data = formsData[i] || {};
+      for (const fid of reqFields) {
+        const v = data[fid];
+        if (v === undefined || v === null || String(v).trim() === '') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [eventForm, formsData, remaining]);
+
+  const submit = async () => {
+    if (!registrationId) return;
+    try {
+      setError(null); setInfo(null);
+      const payload: any[] = [];
+      for (let i = 0; i < remaining; i++) {
+        payload.push({ answers: formsData[i] || {} });
+      }
+      if (payload.length === 0) {
+        // Nothing left to submit – still go to success page to continue the flow
+        const totalDue = (registration?.registrationOptions || []).reduce((s: number, ro: any) => s + ((ro.eventOption?.price || 0) * (ro.quantity || 0)), 0);
+        router.push(`/registration/success?registrationId=${encodeURIComponent(registrationId)}${totalDue>0?`&totalDue=${encodeURIComponent(totalDue.toFixed(2))}`:''}`);
+        return;
+      }
+      await apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/responses`, {
+        method: 'POST',
+        authToken: token || undefined,
+        body: { responses: payload }
+      });
+      // On success, redirect to the success page
+      const totalDue = (registration?.registrationOptions || []).reduce((s: number, ro: any) => s + ((ro.eventOption?.price || 0) * (ro.quantity || 0)), 0);
+      router.push(`/registration/success?registrationId=${encodeURIComponent(registrationId)}${totalDue>0?`&totalDue=${encodeURIComponent(totalDue.toFixed(2))}`:''}`);
+    } catch (e: any) {
+      setError(e?.message || 'Failed to submit forms');
+    }
+  };
+
+  const saveDraft = async () => {
+    if (!registrationId) return;
+    try {
+      setError(null); setInfo(null);
+      await apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, {
+        method: 'PUT',
+        authToken: token || undefined,
+        body: { data: formsData }
+      });
+      setInfo('Draft saved. You can come back and finish later.');
+      if (!token || !registrationId) return;
+      try {
+        // Redirect to the success page
+        const totalDue = (registration?.registrationOptions || []).reduce((s: number, ro: any) => s + ((ro.eventOption?.price || 0) * (ro.quantity || 0)), 0);
+        router.push(`/registration/success?registrationId=${encodeURIComponent(registrationId)}${totalDue>0?`&totalDue=${encodeURIComponent(totalDue.toFixed(2))}`:''}`);
+      } catch (e: any) {
+        setError(e?.message || 'Failded to go to next step');
+      }
+    } catch (e: any) {
+      setError(e?.message || 'Failed to save draft');
+    }
+  };
+
+  const skip = async () => {
+    if (!registrationId) return;
+    try {
+      // Redirect to the success page
+      const totalDue = (registration?.registrationOptions || []).reduce((s: number, ro: any) => s + ((ro.eventOption?.price || 0) * (ro.quantity || 0)), 0);
+      router.push(`/registration/success?registrationId=${encodeURIComponent(registrationId)}${totalDue>0?`&totalDue=${encodeURIComponent(totalDue.toFixed(2))}`:''}`);
+    } catch (e: any) {
+      setError(e?.message || 'Failded to skip');
+    }
+  };
+
+  if (!registrationId) return <div className="p-6">Missing registrationId.</div>;
+
+  return (
+    <div className="max-w-2xl mx-auto w-full p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">Attendee forms</h1>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={skip}>Skip for now</button>
+      </div>
+
+      {loading && <div className="text-sm text-gray-600 mb-2">Loading…</div>}
+      {error && <div className="text-sm text-red-600 mb-2">{error}</div>}
+      {info && <div className="text-sm text-emerald-700 mb-2">{info}</div>}
+
+      {registration && (
+        <div className="border rounded p-3 mb-4 bg-white">
+          <div className="font-medium">{registration.event?.title || registration.eventId}</div>
+          <div className="text-xs text-gray-600">Registration #{registration.id.slice(0,8)}</div>
+          <div className="text-sm mt-1">Forms submitted: {submittedCount} / {requiredCount}</div>
+        </div>
+      )}
+
+      {/* Existing responses (read-only list) */}
+      {registration && (registration.formResponses || []).length > 0 && (
+        <div className="border rounded p-3 mb-4 bg-gray-50">
+          <div className="text-sm font-medium mb-2">Submitted responses</div>
+          <ul className="space-y-2">
+            {(registration.formResponses || []).map((resp: any, idx: number) => (
+              <li key={resp.id} className="bg-white border rounded p-2">
+                <div className="font-medium text-sm mb-1">Attendee {idx + 1}</div>
+                {(resp.answers || []).length === 0 ? (
+                  <div className="text-xs text-gray-600">No answers recorded.</div>
+                ) : (
+                  <ul className="text-xs list-disc pl-5 space-y-0.5">
+                    {resp.answers.map((a: any) => (
+                      <li key={a.id}>
+                        <span className="text-gray-600">{eventForm?.fields.find(f => f.id === a.fieldId)?.label || (`Field ${a.fieldId}`)}</span>: {a.value}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Remaining forms to fill */}
+      {eventForm && remaining > 0 && (
+        <div className="border rounded p-3 bg-gray-50">
+          <div className="text-sm font-medium mb-2">Fill remaining attendee details ({remaining})</div>
+          <div className="space-y-4">
+            {Array.from({ length: remaining }, (_, idx) => (
+              <div key={idx} className="bg-white border rounded p-3">
+                <div className="font-medium mb-2">Attendee {submittedCount + idx + 1}</div>
+                {eventForm.fields.map((f) => (
+                  <div key={f.id} className="mb-2">
+                    {f.type === 'statement' ? (
+                      <div className="text-sm text-gray-700 whitespace-pre-line">{f.label}</div>
+                    ) : f.type === 'paragraph' ? (
+                      <div className="text-sm text-gray-700">
+                        {f.label && <div className="font-medium mb-1 whitespace-pre-line">{f.label}</div>}
+                        {f.helpText && <div className="whitespace-pre-line">{f.helpText}</div>}
+                      </div>
+                    ) : (
+                      <>
+                        <label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
+                        {f.type === 'yes_no' ? (
+                          <select className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))}>
+                            <option value="">Select</option>
+                            <option value="yes">Yes</option>
+                            <option value="no">No</option>
+                          </select>
+                        ) : f.type === 'date' ? (
+                          <input type="date" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        ) : f.type === 'numeric' ? (
+                          <input type="number" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        ) : (
+                          <input type="text" className="border rounded px-2 py-1 text-sm w-full" value={formsData[idx]?.[f.id] || ''} onChange={e => setFormsData(prev => ({ ...prev, [idx]: { ...(prev[idx]||{}), [f.id]: e.target.value } }))} />
+                        )}
+                        {f.helpText && <div className="text-xs text-gray-500 mt-1">{f.helpText}</div>}
+                      </>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 flex gap-2">
+            <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" disabled={!canSubmit} onClick={submit}>Submit</button>
+            <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={saveDraft}>Save for later</button>
+          </div>
+        </div>
+      )}
+
+      {eventForm && remaining === 0 && (
+        <div className="text-sm text-emerald-700">All required attendee forms are completed for this registration.</div>
+      )}
+    </div>
+  );
+}
+
+export default function FormsPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading…</div>}>
+      <FormsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
new file mode 100644
index 0000000..3117b6c
--- /dev/null
+++ b/frontend/src/app/globals.css
@@ -0,0 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+html {
+    scroll-behavior: smooth;
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
new file mode 100644
index 0000000..6454609
--- /dev/null
+++ b/frontend/src/app/layout.tsx
@@ -0,0 +1,47 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { AuthProvider } from "@/contexts/AuthContext";
+import { SiteSettingsProvider } from "@/contexts/SiteSettingsContext";
+import { ToastProvider } from "@/components/shared/ToastProvider";
+import { BannerBar } from "@/components/shared/BannerBar";
+import { SetupGuard } from "@/components/shared/SetupGuard";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+const appName = process.env.NEXT_PUBLIC_APP_NAME || 'Hope Events';
+
+export const metadata: Metadata = {
+  title: appName,
+  description: `Manage and register for events with ${appName}`,
+  icons: {
+    icon: "/favicon.ico",
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body>
+                <SiteSettingsProvider>
+                    <AuthProvider>
+                        <ToastProvider>
+                            <SetupGuard />
+                            <BannerBar />
+                            {children}
+                        </ToastProvider>
+                    </AuthProvider>
+                </SiteSettingsProvider>
+            </body>
+        </html>
+
+    );
+}
diff --git a/frontend/src/app/legal/privacy/page.tsx b/frontend/src/app/legal/privacy/page.tsx
new file mode 100644
index 0000000..74ea10a
--- /dev/null
+++ b/frontend/src/app/legal/privacy/page.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useScrollSpy } from "@/hooks/useScrollSpy";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+
+const sections = [
+    { id: "summary",     title: "Plain English Summary" },
+    { id: "introduction",title: "1. Introduction" },
+    { id: "information", title: "2. Information We Collect" },
+    { id: "use",         title: "3. How We Use Your Information" },
+    { id: "whatsapp",   title: "4. WhatsApp Communications" },
+    { id: "storage",     title: "5. Where We Store Your Data" },
+    { id: "retention",   title: "6. Data Retention" },
+    { id: "children",    title: "7. Children and Minors" },
+    { id: "sharing",     title: "8. Sharing of Information" },
+    { id: "rights",      title: "9. Your Rights (under POPIA)" },
+    { id: "cookies",     title: "10. Cookies and Local Storage" },
+    { id: "security",    title: "11. Security" },
+    { id: "changes",     title: "12. Changes to This Policy" },
+    { id: "officer",     title: "13. Information Officer" },
+    { id: "contact",     title: "14. Contact" },
+];
+
+export default function PrivacyPolicyPage() {
+    const activeId = useScrollSpy(sections.map((s) => s.id));
+    const { settings } = useSiteSettings();
+
+    const orgName       = settings.org_name          || "Hope Family Church";
+    const orgEmail      = settings.org_email         || "admin@hopehenley.co.za";
+    const websiteUrl    = settings.legal_website_url || "events.hopehenley.co.za";
+    const ioName        = settings.legal_io_name     || "Joshua Oosthuizen";
+    const ioEmail       = settings.legal_io_email    || "joshua@crosscode.co.za";
+    const effectiveDate = settings.legal_effective_date || "April 2026";
+
+    return (
+        <div className="min-h-screen flex flex-col bg-gray-50">
+            <Navbar />
+            <main className="flex-1 max-w-6xl mx-auto px-6 py-12 grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-10">
+                {/* Sidebar */}
+                <aside className="hidden lg:block text-sm text-gray-600 space-y-2 self-start sticky top-24 h-fit">
+                <h3 className="font-semibold text-gray-800 mb-3">On this page</h3>
+                    <ul className="space-y-2 border-l border-gray-300 pl-3">
+                        {sections.map((section) => (
+                            <li key={section.id}>
+                                <a
+                                    href={`#${section.id}`}
+                                    className={`block hover:text-blue-600 transition-colors ${
+                                        activeId === section.id ? "text-blue-600 font-semibold" : ""
+                                    }`}
+                                >
+                                    {section.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </aside>
+
+                {/* Main Content */}
+                <article className="bg-white rounded-2xl shadow p-8 text-gray-700 leading-relaxed">
+                    <h1 className="text-4xl font-bold text-blue-700 mb-2">Privacy Policy</h1>
+                    <p className="text-sm text-gray-500 mb-6">Effective Date: {effectiveDate}</p>
+
+                    <div className="border-l-4 border-blue-600 pl-4 mb-8 text-gray-700">
+                        <p>
+                            <strong>Website:</strong>{" "}
+                            <a href={`https://${websiteUrl}`} className="text-blue-600 hover:underline">
+                                {websiteUrl}
+                            </a>
+                        </p>
+                        <p><strong>Responsible Party:</strong> {orgName}</p>
+                        <p>
+                            <strong>Email:</strong>{" "}
+                            <a href={`mailto:${orgEmail}`} className="text-blue-600 hover:underline">
+                                {orgEmail}
+                            </a>
+                        </p>
+                    </div>
+
+                    <section id="summary" className="mb-10">
+                        <h2 className="text-2xl font-semibold text-blue-600 mb-4">🟢 Plain English Summary</h2>
+                        <p>We respect your privacy — here&apos;s what you need to know:</p>
+                        <ul className="list-disc ml-6 space-y-1">
+                            <li>We only collect info needed to register you for events and process payments.</li>
+                            <li>We store your info safely on South African servers.</li>
+                            <li>We don&apos;t sell or share your data with anyone.</li>
+                            <li>You can ask us what info we have about you or request deletion at any time.</li>
+                            <li>Under 18s must register with a parent&apos;s permission.</li>
+                            <li>Payments go through Yoco; we never see your card details.</li>
+                            <li>We may send you security alerts (e.g. new login notifications) via email and/or WhatsApp to keep your account safe.</li>
+                            <li>If you opt in to WhatsApp notifications, we use your mobile number to send you event updates, tickets, and account alerts via WhatsApp (powered by WAWP).</li>
+                            <li>We keep your data for up to 5 years after your last event registration.</li>
+                        </ul>
+                    </section>
+
+                    {sections.slice(1).map((section) => (
+                        <Section key={section.id} id={section.id} title={section.title}
+                            orgName={orgName} orgEmail={orgEmail} ioName={ioName} ioEmail={ioEmail} />
+                    ))}
+                </article>
+            </main>
+            <Footer />
+        </div>
+    );
+}
+
+function Section({
+    id, title, orgName, orgEmail, ioName, ioEmail,
+}: {
+    id: string;
+    title: string;
+    orgName: string;
+    orgEmail: string;
+    ioName: string;
+    ioEmail: string;
+}) {
+    const content: Record<string, string[]> = {
+        introduction: [
+            `${orgName} ('we', 'us', 'our') values your privacy and is committed to protecting your personal information in accordance with the Protection of Personal Information Act (POPIA).`,
+            "This policy explains what data we collect, how we use it, and your rights.",
+        ],
+        information: [
+            "We collect the following information when you interact with our platform:",
+            "• Account Information: name, email address, phone number, and password (encrypted).",
+            "• Event Information: events you register for, ticket selections, and related preferences.",
+            "• Payment Information: processed by Yoco; we receive only payment status and reference numbers.",
+            "• Communication Data: emails or messages exchanged with our team.",
+            "We do not collect or store credit card numbers or bank details.",
+            "Administrator-created accounts (e.g. walk-in event registrations) may be created with a mobile number only. These accounts use a placeholder email address and can be activated by the account holder at any time.",
+        ],
+        use: [
+            "We use your information to:",
+            "• Process event registrations and payments.",
+            "• Communicate event updates, confirmations, or changes via email and/or WhatsApp (based on your preference).",
+            "• Send security notifications for new logins, password changes, and account actions on your account.",
+            "• Deliver your event tickets via email attachment and/or WhatsApp PDF (based on your preference).",
+            "• Manage user accounts and event attendance records.",
+            "• Improve our website and event experience.",
+            "• Comply with legal obligations.",
+        ],
+        whatsapp: [
+            "If you choose 'WhatsApp' or 'Both' as your notification preference, we will use your South African mobile number to send you messages via WhatsApp. These messages may include:",
+            "• Event registration confirmations and updates.",
+            "• Payment receipts.",
+            "• Your event tickets (as a PDF document).",
+            "• Security alerts such as new login notifications, password changes, and account closure confirmations.",
+            "WhatsApp communications are delivered through WAWP (wawp.net), a third-party WhatsApp Business API provider. Your mobile number is transmitted to WAWP solely for the purpose of delivering your messages. WAWP does not retain your data beyond what is necessary for message delivery.",
+            "Security-critical messages (login alerts, password resets, account closures) are always sent via email regardless of your preference, and additionally sent via WhatsApp if your preference includes it.",
+            "You may change your notification preference at any time from the Profile & Security page in your account. Selecting 'Email only' will stop WhatsApp messages from being sent to you.",
+            "For accounts registered without a valid email address (e.g. walk-in or at-the-door registrations), WhatsApp will be used as the primary delivery channel for payment confirmations and ticket delivery, regardless of notification preference, since email is unavailable.",
+            "If your account requires activation and no email address is on file, the activation link will be sent to your WhatsApp number instead.",
+            "WhatsApp is a product of Meta Platforms, Inc. By receiving WhatsApp messages from us, you are subject to WhatsApp's own Terms of Service and Privacy Policy.",
+        ],
+        storage: [
+            "All data is securely stored on cloud servers hosted in South Africa.",
+            "We use appropriate technical and organisational measures to protect your information from unauthorised access, alteration, or disclosure.",
+        ],
+        retention: [
+            "We retain your personal data for up to 5 years after your last event registration, or until you request deletion of your account — whichever comes first.",
+            "You can delete your account at any time from the Profile & Security page in your account. Deletion anonymises your personal information (name, email address, and phone number are replaced with placeholder values) while retaining event and payment records in anonymised form for financial record-keeping purposes.",
+            "An administrator may also anonymise your account data on your request. To request this, contact our Information Officer (see section 13).",
+        ],
+        children: [
+            "Users under 18 may only create an account or register for events with the consent and supervision of a parent or guardian.",
+            "We do not knowingly collect or process personal information of minors without such consent.",
+        ],
+        sharing: [
+            "We do not sell, rent, or share your personal information with any third parties.",
+            "The only exceptions are:",
+            "• Processing payments securely through Yoco (a South African payment processor).",
+            "• Delivering WhatsApp messages through WAWP (wawp.net), a WhatsApp Business API provider — only your mobile number and message content are shared, solely for delivery purposes.",
+            "• Where required by South African law.",
+        ],
+        rights: [
+            "Under POPIA, you have the right to:",
+            "• Access your personal information.",
+            "• Request correction or deletion of your data.",
+            "• Withdraw consent for processing.",
+            "• Lodge a complaint with the Information Regulator of South Africa.",
+            "To contact the Information Regulator:",
+            "• Website: www.inforeg.org.za",
+            "• Email: enquiries@inforeg.org.za",
+            "To exercise your rights directly with us, contact our Information Officer using the details in section 13 below.",
+        ],
+        cookies: [
+            "This website uses browser localStorage to store your login session token and user interface preferences (such as dismissed notifications). No third-party cookies, tracking pixels, or analytics tools are used.",
+            "You can clear your browser's local storage at any time through your browser settings, which will log you out of the site.",
+        ],
+        security: [
+            "Your personal data is encrypted during transmission and stored using industry-standard security protocols.",
+            "Passwords are encrypted and cannot be viewed by anyone, including administrators.",
+            "In the event of a data breach that poses a risk to your rights, we will notify you and the Information Regulator of South Africa as required under POPIA section 22, without unreasonable delay.",
+        ],
+        changes: [
+            "We may update this Privacy Policy periodically.",
+            "Any changes will be posted on this page with an updated effective date.",
+        ],
+        officer: [
+            `The Information Officer responsible for overseeing compliance with POPIA on behalf of ${orgName} is:`,
+            `• Name: ${ioName}`,
+            `• Email: ${ioEmail}`,
+            "You may contact the Information Officer for any POPIA-related requests, including access to your personal data, requests for correction or deletion, and formal complaints.",
+        ],
+        contact: [
+            "For general privacy-related questions or requests, you can also contact us at:",
+            `📧 ${orgEmail}`,
+        ],
+    };
+
+    return (
+        <section id={id} className="mb-10 scroll-mt-24">
+            <h3 className="text-xl font-semibold text-blue-600 mb-3">{title}</h3>
+            {content[id]?.map((line, i) => {
+                // Render email addresses as links
+                const emailMatch = line.match(/[\w.+-]+@[\w-]+\.[\w.]+/);
+                if (emailMatch) {
+                    const email = emailMatch[0];
+                    const parts = line.split(email);
+                    return (
+                        <p key={i} className="mb-2">
+                            {parts[0]}
+                            <a href={`mailto:${email}`} className="text-blue-600 hover:underline">
+                                {email}
+                            </a>
+                            {parts[1] || ""}
+                        </p>
+                    );
+                }
+                if (line.includes("www.inforeg.org.za")) {
+                    return (
+                        <p key={i} className="mb-2">
+                            {line.replace("www.inforeg.org.za", "")}
+                            <a href="https://www.inforeg.org.za" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                                www.inforeg.org.za
+                            </a>
+                        </p>
+                    );
+                }
+                return (
+                    <p key={i} className="mb-2">
+                        {line}
+                    </p>
+                );
+            })}
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/legal/terms/page.tsx b/frontend/src/app/legal/terms/page.tsx
new file mode 100644
index 0000000..6b50f17
--- /dev/null
+++ b/frontend/src/app/legal/terms/page.tsx
@@ -0,0 +1,214 @@
+"use client";
+
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useScrollSpy } from "@/hooks/useScrollSpy";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+
+const sections = [
+    { id: "summary",       title: "Plain English Summary" },
+    { id: "acceptance",    title: "1. Acceptance of Terms" },
+    { id: "purpose",       title: "2. Purpose of the Website" },
+    { id: "accounts",      title: "3. User Accounts" },
+    { id: "payments",      title: "4. Payments & Refunds" },
+    { id: "registrations", title: "5. Registrations & Tickets" },
+    { id: "acceptable",    title: "6. Acceptable Use" },
+    { id: "communication", title: "7. Communication" },
+    { id: "intellectual",  title: "8. Intellectual Property" },
+    { id: "liability",     title: "9. Limitation of Liability" },
+    { id: "forcemajeure",  title: "10. Force Majeure" },
+    { id: "termination",   title: "11. Termination of Access" },
+    { id: "law",           title: "12. Governing Law" },
+    { id: "contact",       title: "13. Contact" },
+];
+
+export default function TermsOfUsePage() {
+    const activeId = useScrollSpy(sections.map((s) => s.id));
+    const { settings } = useSiteSettings();
+
+    const orgName       = settings.org_name          || "Hope Family Church";
+    const orgEmail      = settings.org_email         || "admin@hopehenley.co.za";
+    const websiteUrl    = settings.legal_website_url || "events.hopehenley.co.za";
+    const operatorName  = settings.legal_operator_name || "Joshua Oosthuizen on behalf of Hope Family Church, Henley-on-Klip, South Africa";
+    const effectiveDate = settings.legal_effective_date || "April 2026";
+
+    return (
+        <div className="min-h-screen flex flex-col bg-gray-50">
+            <Navbar />
+            <main className="flex-1 max-w-6xl mx-auto px-6 py-12 grid grid-cols-1 lg:grid-cols-[250px_1fr] gap-10">
+                {/* Sidebar */}
+                <aside className="hidden lg:block text-sm text-gray-600 space-y-2 self-start sticky top-24 h-fit">
+                <h3 className="font-semibold text-gray-800 mb-3">On this page</h3>
+                    <ul className="space-y-2 border-l border-gray-300 pl-3">
+                        {sections.map((section) => (
+                            <li key={section.id}>
+                                <a
+                                    href={`#${section.id}`}
+                                    className={`block hover:text-blue-600 transition-colors ${
+                                        activeId === section.id ? "text-blue-600 font-semibold" : ""
+                                    }`}
+                                >
+                                    {section.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </aside>
+
+                {/* Main Content */}
+                <article className="bg-white rounded-2xl shadow p-8 text-gray-700 leading-relaxed">
+                    <h1 className="text-4xl font-bold text-blue-700 mb-2">Terms of Use</h1>
+                    <p className="text-sm text-gray-500 mb-6">Effective Date: {effectiveDate}</p>
+
+                    <div className="border-l-4 border-blue-600 pl-4 mb-8 text-gray-700">
+                        <p>
+                            <strong>Website:</strong>{" "}
+                            <a href={`https://${websiteUrl}`} className="text-blue-600 hover:underline">
+                                {websiteUrl}
+                            </a>
+                        </p>
+                        <p><strong>Owned and operated by:</strong> {operatorName}</p>
+                    </div>
+
+                    <section id="summary" className="mb-10">
+                        <h2 className="text-2xl font-semibold text-blue-600 mb-4">🟢 Plain English Summary</h2>
+                        <p>Welcome to {orgName}! This site helps you book and pay for events hosted or supported by {orgName}.</p>
+                        <p>By using it, you agree to:</p>
+                        <ul className="list-disc ml-6 space-y-1">
+                            <li>Use the platform responsibly and only for legitimate event participation.</li>
+                            <li>Provide accurate information during registration and payments.</li>
+                            <li>Keep your login details safe.</li>
+                            <li>Respect that under 18s need parental permission to register.</li>
+                            <li>Understand that all payments go through Yoco, and we don&apos;t store your card details.</li>
+                            <li>Accept that we may contact you via email and/or WhatsApp (based on your preference) about events you register for, your tickets, and account security alerts.</li>
+                            <li>Understand that registrations are personal to you and non-transferable.</li>
+                            <li>If we cancel an event, you&apos;ll get a full refund on request or your registration moved to the new date.</li>
+                        </ul>
+                        <p className="mt-2">If you disagree with these terms, please don&apos;t use the site.</p>
+                    </section>
+
+                    {sections.slice(1).map((section) => (
+                        <Section key={section.id} id={section.id} title={section.title}
+                            orgName={orgName} orgEmail={orgEmail} />
+                    ))}
+                </article>
+            </main>
+            <Footer />
+        </div>
+    );
+}
+
+function Section({
+    id, title, orgName, orgEmail,
+}: {
+    id: string;
+    title: string;
+    orgName: string;
+    orgEmail: string;
+}) {
+    const content: Record<string, string[]> = {
+        acceptance: [
+            `By accessing or using the platform, you agree to be bound by these Terms of Use and any policies referenced herein.`,
+            `${orgName} ('we', 'our', or 'us') reserves the right to modify these terms at any time. Updated versions will be posted on this page with a new effective date.`,
+        ],
+        purpose: [
+            `The platform is designed to:`,
+            `• Allow users to view, register, and pay for events hosted or co-hosted by ${orgName}.`,
+            `• Manage event registration details, communication, and participation records.`,
+            `The site may also provide updates or communication related to events.`,
+        ],
+        accounts: [
+            "You must create an account to register for certain events or access restricted features.",
+            "You are responsible for keeping your password secure.",
+            "Passwords are encrypted and not accessible to any staff member.",
+            "Users under the age of 18 must only register or create an account with the consent and supervision of a parent or guardian.",
+            "You agree to provide accurate, current, and complete information when creating your account.",
+            `Accounts may also be created on your behalf by an administrator (e.g. for walk-in event registration). In this case, you will receive a WhatsApp message with an activation link if your mobile number is provided.`,
+        ],
+        payments: [
+            "Payments are processed securely through Yoco, a third-party payment processor.",
+            `${orgName} does not store or process credit card information.`,
+            "Payment confirmations and receipts are issued electronically.",
+            "All prices are listed in South African Rand (ZAR) unless stated otherwise.",
+            "Where an event permits it, partial payments may be made. A minimum payment of R15 applies per transaction. The outstanding balance must be settled before your registration can be considered fully paid.",
+            "Early-bird pricing: Certain events offer reduced 'early-bird' prices for a limited time or while a limited number of places are available. Early-bird prices are locked in at the time of registration, provided that payment is completed before the stated early-bird deadline. If payment is not completed before the deadline, the early-bird price is forfeited and the standard price applies. Early-bird availability is subject to both time limits and stock limits; once the allocated places are filled, the early-bird tier closes regardless of the deadline. By registering at an early-bird price, you acknowledge these conditions.",
+            `Refund Policy: Refunds are handled on a per-event basis. As a baseline, if you are unable to attend an event you have paid for, please contact us at ${orgEmail} at least 48 hours before the event. Refund requests at this stage are at the discretion of the event organiser. No refunds will be issued for no-shows. Any event-specific refund terms will be communicated at the time of registration and take precedence over this baseline.`,
+        ],
+        registrations: [
+            `Registrations and tickets are personal to the registered individual and are non-transferable unless explicitly authorised by ${orgName} in writing.`,
+            "You may not sell, gift, or pass on your registration to another person without written authorisation.",
+            "You may cancel your own registration at any time before any payment has been made. Once a payment has been recorded against your registration, cancellation must be requested through the organisation. Please contact us to arrange this.",
+            `If ${orgName} cancels or significantly postpones an event, affected registrants will be notified by email. In this case, a full refund will be issued upon request, or your registration may be transferred to the rescheduled or replacement event — whichever you prefer. Refund requests for organiser-initiated cancellations must be submitted to ${orgEmail} within 30 days of the cancellation notice.`,
+        ],
+        acceptable: [
+            "You agree not to:",
+            "• Use the website for any unlawful or fraudulent purpose.",
+            "• Impersonate another person or misrepresent your identity.",
+            "• Interfere with or disrupt the operation of the site.",
+            "• Attempt to gain unauthorised access to our systems.",
+            "• Resell, tout, or transfer your registration or tickets without written authorisation.",
+            "• Use automated tools, bots, or scrapers to access or extract data from the site.",
+        ],
+        communication: [
+            "By registering, you consent to receive communications related to your registrations, payments, tickets, and account security.",
+            "Depending on your notification preference, these may be delivered via email and/or WhatsApp. You can update your preference at any time from the Profile & Security page in your account.",
+            "Certain communications are required for the operation of the platform and cannot be opted out of entirely — these include payment confirmations, ticket delivery, and account security alerts (e.g. new login notifications, password resets, and account closure confirmations). Security alerts are always sent via email; WhatsApp delivery is additional when you have opted in.",
+            "For accounts without a valid email address (e.g. walk-in or at-the-door registrations), these required communications will be delivered via WhatsApp if a mobile number is on file.",
+            "WhatsApp messages are delivered via WAWP, a third-party WhatsApp Business API provider. By enabling WhatsApp notifications, you consent to your mobile number being used to send you messages via this service.",
+        ],
+        intellectual: [
+            `All content on the platform, including text, graphics, and logos, is owned by ${orgName} unless otherwise stated.`,
+            "You may not copy, modify, or distribute any content without written permission.",
+            `By submitting any content through the platform (such as attendee details or form responses), you grant ${orgName} a limited licence to use that content solely for the purpose of managing your event registration.`,
+        ],
+        liability: [
+            `${orgName} provides this platform on an 'as is' basis. We make no guarantees regarding uninterrupted access or error-free performance.`,
+            "We are not liable for any loss or damages arising from:",
+            "• Technical failures; or",
+            "• Misuse of the platform.",
+            "Liability for event cancellations or schedule changes is addressed under section 5 (Registrations & Tickets) and section 10 (Force Majeure).",
+        ],
+        forcemajeure: [
+            `${orgName} shall not be liable for any failure or delay in performing its obligations where such failure or delay results from causes beyond its reasonable control, including but not limited to: acts of God, natural disasters, government restrictions or regulations, public health emergencies, venue closures, or any other event outside our reasonable control ('force majeure event').`,
+            `In the event of a force majeure event affecting a scheduled event, ${orgName} will endeavour to reschedule or provide reasonable alternatives where possible. Refunds in force majeure circumstances will be handled at our discretion and communicated to affected registrants as soon as reasonably practicable.`,
+        ],
+        termination: [
+            "We may suspend or terminate access to your account if we believe you have violated these Terms of Use or engaged in behaviour harmful to others or the organisation.",
+            `You may delete your own account at any time from the Profile & Security page in your account, or by contacting ${orgEmail}. Upon deletion, your personal data will be handled in accordance with our Privacy Policy.`,
+            "Certain data may be retained for legal or financial record-keeping purposes even after account deletion.",
+        ],
+        law: [
+            "These Terms of Use are governed by the laws of the Republic of South Africa.",
+        ],
+        contact: [
+            "For questions or concerns about these Terms, contact:",
+            `📧 ${orgEmail}`,
+        ],
+    };
+
+    return (
+        <section id={id} className="mb-10 scroll-mt-24">
+            <h3 className="text-xl font-semibold text-blue-600 mb-3">{title}</h3>
+            {content[id]?.map((line, i) => {
+                if (line.includes("@") && !line.startsWith("•") && (line.includes("📧") || line.endsWith(orgEmail))) {
+                    const email = orgEmail;
+                    const parts = line.split(email);
+                    return (
+                        <p key={i} className="mb-2">
+                            {parts[0]}
+                            <a href={`mailto:${email}`} className="text-blue-600 hover:underline">
+                                {email}
+                            </a>
+                            {parts[1] || ""}
+                        </p>
+                    );
+                }
+                return (
+                    <p key={i} className="mb-2">
+                        {line}
+                    </p>
+                );
+            })}
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/app/lockdown-rules/page.tsx b/frontend/src/app/lockdown-rules/page.tsx
new file mode 100644
index 0000000..8e88939
--- /dev/null
+++ b/frontend/src/app/lockdown-rules/page.tsx
@@ -0,0 +1,134 @@
+import React from "react";
+
+export default function LockdownRulesPage() {
+    const rules = [
+        {
+            icon: "💡",
+            title: "1. Respect People",
+            items: [
+                "Treat all leaders, volunteers, and other youth with kindness and respect.",
+                "Listen when leaders are speaking and follow all instructions the first time.",
+                "No bullying, name-calling, gossip, or exclusion of others.",
+            ],
+        },
+        {
+            icon: "🏠",
+            title: "2. Stay in the Venue",
+            items: [
+                "Once checked in, no one may leave the premises until pick-up time (8 AM), unless approved by a leader.",
+                "For everyone’s safety, doors will remain locked from the inside during the event.",
+                "If you need to leave early, a parent or guardian must collect you in person and notify a leader.",
+                "Certain areas may be off-limits; please respect the signs and leader directions.",
+            ],
+        },
+        {
+            icon: "🔇",
+            title: "3. Respect the Space",
+            items: [
+                "Keep all areas tidy and take care of church property and equipment.",
+                "Keep your area clean; bins are there for a reason.",
+                "No running or roughhousing inside unless part of a supervised activity.",
+            ],
+        },
+        {
+            icon: "📱",
+            title: "4. Use Phones Wisely",
+            items: [
+                "Phones are allowed, but this is a time to connect with people in person!",
+                "No inappropriate photos, videos, or social media posts during the event.",
+                "If your phone becomes a distraction, a leader may ask to hold it safely until morning.",
+            ],
+        },
+        {
+            icon: "🚫",
+            title: "5. No Forbidden Items",
+            items: [
+                "Do not bring or use any of the following:",
+                "• Alcohol, drugs, cigarettes, vapes, or any dangerous items",
+                "• Weapons, lighters, or fireworks",
+                "• Inappropriate material of any kind",
+            ],
+            note:
+                "Any of these items will be confiscated and parents will be contacted immediately.",
+        },
+        {
+            icon: "⚡",
+            title: "6. Participate in Everything",
+            items: [
+                "The night is packed with awesome games, challenges, and sessions; get involved!",
+                "No sitting out unless you’re unwell or a leader has excused you.",
+                "Be a team player; encourage others and bring positive vibes.",
+            ],
+        },
+        {
+            icon: "🕒",
+            title: "7. Stay Awake, Stay Safe",
+            items: [
+                "This is an all-nighter! No sleeping bags or nap zones; the goal is to stay awake and enjoy it together.",
+                "If you start feeling too tired, talk to a leader; they’ll help you grab some water or take a quiet moment.",
+                "Respect quiet moments during worship or reflection time; it’s not a nap zone, but it is sacred space.",
+            ],
+        },
+        {
+            icon: "🙏",
+            title: "8. Represent Christ Well",
+            items: [
+                "Everything you say and do represents Wave Youth and Jesus.",
+                "Show love, joy, and respect in your words and actions.",
+                "Let’s make this night unforgettable for all the right reasons!",
+            ],
+        },
+    ];
+
+    return (
+        <div className="min-h-screen bg-slate-950 text-gray-100 flex flex-col items-center py-10 px-4">
+            <div className="max-w-5xl w-full bg-slate-900/70 backdrop-blur-md rounded-2xl shadow-2xl border border-slate-800 p-8">
+                <header className="mb-8 text-center">
+                    <h1 className="text-3xl md:text-4xl font-extrabold text-blue-400">
+                        Hope Youth Lockdown — Rules & Expectations
+                    </h1>
+                    <p className="text-slate-400 mt-3 max-w-2xl mx-auto">
+                        The Hope Youth Lockdown is designed to be a night of fun,
+                        friendship, and faith. To make sure everyone has a great experience,
+                        all participants agree to the following:
+                    </p>
+                </header>
+
+                <div className="bg-slate-800/60 text-cyan-300 rounded-full text-center py-2 px-4 font-medium text-sm mb-6">
+                    ✅ Be kind • 🔐 Stay safe • 🙏 Honor God • 🎉 Have fun
+                </div>
+
+                <section className="grid gap-5 md:grid-cols-2">
+                    {rules.map((rule) => (
+                        <div
+                            key={rule.title}
+                            className="bg-slate-800/60 border border-slate-700 rounded-xl p-5 shadow-md hover:shadow-blue-500/20 transition-shadow"
+                        >
+                            <h2 className="text-lg font-semibold mb-2 flex items-center gap-2 text-blue-300">
+                                <span className="text-xl">{rule.icon}</span>
+                                {rule.title}
+                            </h2>
+                            <ul className="list-disc pl-6 text-gray-300 text-sm space-y-1">
+                                {rule.items.map((item, idx) => (
+                                    <li key={idx}>{item}</li>
+                                ))}
+                            </ul>
+                            {rule.note && (
+                                <p className="text-sm text-slate-400 italic mt-3">{rule.note}</p>
+                            )}
+                        </div>
+                    ))}
+                </section>
+
+                <footer className="mt-10 text-center border-t border-slate-800 pt-6 text-sm text-slate-400">
+                    <p>Questions or concerns? Chat to a leader anytime during the night.
+                    Alternatively, you can contact Joshua on 072 160 3010 or Eben on 084 862 7655</p>
+                    <p className="mt-1">
+                        By attending, you agree to follow these rules so everyone can have a
+                        safe, legendary night. 💙
+                    </p>
+                </footer>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/app/package.json b/frontend/src/app/package.json
new file mode 100644
index 0000000..afdd726
--- /dev/null
+++ b/frontend/src/app/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "hope-events",
+  "version": "1.2",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "private": true
+}
diff --git a/frontend/src/app/page.module.css b/frontend/src/app/page.module.css
new file mode 100644
index 0000000..58c71af
--- /dev/null
+++ b/frontend/src/app/page.module.css
@@ -0,0 +1,167 @@
+.page {
+  --gray-rgb: 0, 0, 0;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
+
+  --button-primary-hover: #383838;
+  --button-secondary-hover: #f2f2f2;
+
+  display: grid;
+  grid-template-rows: 20px 1fr 20px;
+  align-items: center;
+  justify-items: center;
+  min-height: 100svh;
+  padding: 80px;
+  gap: 64px;
+  font-family: var(--font-geist-sans);
+}
+
+@media (prefers-color-scheme: dark) {
+  .page {
+    --gray-rgb: 255, 255, 255;
+    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+
+    --button-primary-hover: #ccc;
+    --button-secondary-hover: #1a1a1a;
+  }
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-row-start: 2;
+}
+
+.main ol {
+  font-family: var(--font-geist-mono);
+  padding-left: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  list-style-position: inside;
+}
+
+.main li:not(:last-of-type) {
+  margin-bottom: 8px;
+}
+
+.main code {
+  font-family: inherit;
+  background: var(--gray-alpha-100);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.ctas {
+  display: flex;
+  gap: 16px;
+}
+
+.ctas a {
+  appearance: none;
+  border-radius: 128px;
+  height: 48px;
+  padding: 0 20px;
+  border: 1px solid transparent;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+a.primary {
+  background: var(--foreground);
+  color: var(--background);
+  gap: 8px;
+}
+
+a.secondary {
+  border-color: var(--gray-alpha-200);
+  min-width: 158px;
+}
+
+.footer {
+  grid-row-start: 3;
+  display: flex;
+  gap: 24px;
+}
+
+.footer a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer img {
+  flex-shrink: 0;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  a.primary:hover {
+    background: var(--button-primary-hover);
+    border-color: transparent;
+  }
+
+  a.secondary:hover {
+    background: var(--button-secondary-hover);
+    border-color: transparent;
+  }
+
+  .footer a:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+@media (max-width: 600px) {
+  .page {
+    padding: 32px;
+    padding-bottom: 80px;
+  }
+
+  .main {
+    align-items: center;
+  }
+
+  .main ol {
+    text-align: center;
+  }
+
+  .ctas {
+    flex-direction: column;
+  }
+
+  .ctas a {
+    font-size: 14px;
+    height: 40px;
+    padding: 0 16px;
+  }
+
+  a.secondary {
+    min-width: auto;
+  }
+
+  .footer {
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    filter: invert();
+  }
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
new file mode 100644
index 0000000..531d26b
--- /dev/null
+++ b/frontend/src/app/page.tsx
@@ -0,0 +1,70 @@
+import { EventCard } from "@/components/events/EventCard";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { SectionHeader } from "@/components/shared/SectionHeader";
+import { ContactSection } from "@/components/shared/ContactSection";
+import { appName } from "@/lib/siteConfig";
+
+
+type Event = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  registrationDeadline?: string | null;
+  goLiveAt?: string;
+  price: number;
+  picture?: string;
+};
+
+import { apiFetch } from "@/lib/api";
+
+export default async function HomePage() {
+    const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
+    const now = Date.now();
+    const upcoming = (events || []).filter(e => {
+        const t = new Date(e.startDate).getTime();
+        return !isNaN(t) && t > now;
+    });
+    const sorted = [...upcoming].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+
+    return (
+        <div className="min-h-screen flex flex-col">
+            <Navbar />
+
+            <main className="flex-1">
+                <section className="bg-gradient-to-br from-blue-100 to-white py-16 text-center">
+                    <h1 className="text-4xl font-bold mb-4">Welcome to {appName}</h1>
+                    <p className="text-gray-600 text-lg mb-6">Experience unforgettable moments. Powered by purpose.</p>
+                    <div className="space-x-4">
+                        <a href="/events" className="px-6 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700">
+                            View Events
+                        </a>
+                        <a href="/register" className="px-6 py-2 border border-blue-600 text-blue-600 rounded-xl hover:bg-blue-50">
+                            Join Us
+                        </a>
+                    </div>
+                </section>
+
+                <section className="py-12 px-4 max-w-7xl mx-auto">
+                    <SectionHeader title="Upcoming Events" />
+                    <div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
+                        {sorted.slice(0, 3).map(event => (
+                            <EventCard key={event.id} event={event} />
+                        ))}
+                    </div>
+                    <div className="text-center mt-8">
+                        <a href="/events" className="text-blue-600 hover:underline text-sm">
+                            View all events →
+                        </a>
+                    </div>
+                </section>
+
+                <ContactSection />
+            </main>
+
+            <Footer />
+        </div>
+    );
+}
diff --git a/frontend/src/app/payment/cancel/page.tsx b/frontend/src/app/payment/cancel/page.tsx
new file mode 100644
index 0000000..09226f8
--- /dev/null
+++ b/frontend/src/app/payment/cancel/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export default function PaymentCancelPage() {
+  const router = useRouter();
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 p-6 max-w-2xl mx-auto w-full">
+        <h1 className="text-2xl font-semibold mb-2">Payment cancelled</h1>
+        <p className="text-gray-700">Your checkout was cancelled. You can resume payment from your dashboard later.</p>
+        <button className="px-3 py-1.5 text-sm rounded bg-indigo-100 hover:bg-indigo-200 text-indigo-800 shadow-sm" onClick={() => router.push('/dashboard/user')}>Go to Dashboard</button>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/payment/failure/page.tsx b/frontend/src/app/payment/failure/page.tsx
new file mode 100644
index 0000000..3c888a9
--- /dev/null
+++ b/frontend/src/app/payment/failure/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export default function PaymentFailurePage() {
+  const router = useRouter();
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 p-6 max-w-2xl mx-auto w-full">
+        <h1 className="text-2xl font-semibold mb-2">Payment failed</h1>
+        <p className="text-gray-700">Unfortunately, your payment failed. Please try again or use a different method.</p>
+        <button className="px-3 py-1.5 text-sm rounded bg-indigo-100 hover:bg-indigo-200 text-indigo-800 shadow-sm" onClick={() => router.push('/dashboard/user')}>Go to Dashboard</button>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/payment/success/page.tsx b/frontend/src/app/payment/success/page.tsx
new file mode 100644
index 0000000..8dfa782
--- /dev/null
+++ b/frontend/src/app/payment/success/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useRouter } from "next/navigation";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import React from "react";
+
+export default function PaymentSuccessPage() {
+  const router = useRouter();
+  const { settings } = useSiteSettings();
+  const contactEmail = settings.org_email || "";
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 p-6 max-w-2xl mx-auto w-full">
+        <h1 className="text-2xl font-semibold mb-2">Payment successful</h1>
+        <p className="text-gray-700">
+          Thank you! Your payment was received. Your tickets will be sent to you shortly.
+          {contactEmail && (
+            <>
+              {" "}If you have any questions, contact us at{" "}
+              <a href={`mailto:${contactEmail}`} className="text-blue-600 hover:underline">
+                {contactEmail}
+              </a>.
+            </>
+          )}
+        </p>
+        <button
+          className="mt-4 px-3 py-1.5 text-sm rounded bg-indigo-100 hover:bg-indigo-200 text-indigo-800 shadow-sm"
+          onClick={() => router.push('/dashboard/user')}
+        >
+          Go to Dashboard
+        </button>
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/register/[eventId]/RegisterForm.tsx b/frontend/src/app/register/[eventId]/RegisterForm.tsx
new file mode 100644
index 0000000..3b58466
--- /dev/null
+++ b/frontend/src/app/register/[eventId]/RegisterForm.tsx
@@ -0,0 +1,508 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+// Tiered low-stock threshold — mirrors events/[id]/page.tsx
+function lowStockThreshold(stockLimit: number): number {
+  let pct: number;
+  if (stockLimit <= 50) pct = 0.20;
+  else if (stockLimit <= 200) pct = 0.15;
+  else if (stockLimit <= 1000) pct = 0.10;
+  else pct = 0.05;
+  return Math.round(stockLimit * pct);
+}
+
+type EarlyBirdTier = { id: string; deadline: string; price: number; stockLimit?: number; order?: number };
+type OptionVariant = { id: string; name: string; price: number | null; stockLimit?: number; availableCount?: number; order?: number };
+type EventOption = {
+  id: string;
+  name: string;
+  price: number;
+  stockLimit?: number;
+  availableCount?: number;
+  isMainTicket?: boolean;
+  earlyBirdTiers?: EarlyBirdTier[];
+  variants?: OptionVariant[];
+};
+
+type Event = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  registrationDeadline?: string | null;
+  price: number;
+  picture?: string;
+  eventOptions?: EventOption[];
+  form?: { isRequired: boolean; fields?: any[] } | null;
+  requiresAuth?: boolean;
+};
+
+// Key format: "optionId" for no-variant options, "optionId:variantId" for variant options
+type QtyMap = Record<string, number>;
+
+function effectiveUnitForOption(opt: EventOption): number {
+  const base = opt.price || 0;
+  const tiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers.slice() : [];
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t) => ({ ...t, _d: new Date(t.deadline) }))
+    .filter((t) => now < t._d && (t.stockLimit === undefined || t.stockLimit === 0 || (t as any).availableCount === undefined || (t as any).availableCount > 0))
+    .sort((a, b) => a.price - b.price || a._d.getTime() - b._d.getTime());
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+function effectiveUnitForVariant(opt: EventOption, variant: OptionVariant): number {
+  if (variant.price !== null && variant.price !== undefined) return variant.price;
+  return effectiveUnitForOption(opt);
+}
+
+function nextTierForOption(opt: EventOption): EarlyBirdTier | null {
+  const tiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers.slice() : [];
+  if (tiers.length === 0) return null;
+  const now = new Date();
+  const applicable = tiers
+    .map((t) => ({ ...t, _d: new Date(t.deadline) }))
+    .filter((t) => now < t._d)
+    .sort((a, b) => a.price - b.price || a._d.getTime() - b._d.getTime());
+  if (applicable.length === 0) return null;
+  return applicable[0];
+}
+
+function StockBadge({ stockLimit, availableCount }: { stockLimit?: number; availableCount?: number }) {
+  if (!stockLimit || stockLimit === 0) return null;
+  if (availableCount === undefined) return null;
+  if (availableCount <= 0) {
+    return <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>;
+  }
+  const threshold = lowStockThreshold(stockLimit);
+  if (availableCount <= threshold) {
+    return <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{availableCount} remaining</span>;
+  }
+  return null;
+}
+
+function QtyControl({
+  value,
+  onChange,
+  disabled,
+  max,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  disabled?: boolean;
+  max?: number;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <button
+        type="button"
+        className="w-7 h-7 flex items-center justify-center border rounded text-gray-600 hover:bg-gray-50 disabled:opacity-40"
+        onClick={() => onChange(Math.max(0, value - 1))}
+        disabled={disabled || value <= 0}
+      >
+        −
+      </button>
+      <span className="w-6 text-center text-sm font-medium">{value}</span>
+      <button
+        type="button"
+        className="w-7 h-7 flex items-center justify-center border rounded text-gray-600 hover:bg-gray-50 disabled:opacity-40"
+        onClick={() => onChange(value + 1)}
+        disabled={disabled || (max !== undefined && max > 0 && value >= max)}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+
+function OptionCard({
+  opt,
+  quantities,
+  onQtyChange,
+}: {
+  opt: EventOption;
+  quantities: QtyMap;
+  onQtyChange: (key: string, val: number) => void;
+}) {
+  const hasVariants = Array.isArray(opt.variants) && opt.variants.length > 0;
+  const isSoldOut = (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= 0;
+
+  if (hasVariants) {
+    const variants = opt.variants!.slice().sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    // Compute "From R..." display
+    const variantPrices = variants.map((v) => effectiveUnitForVariant(opt, v));
+    const minPrice = Math.min(...variantPrices);
+    const maxPrice = Math.max(...variantPrices);
+    const priceLabel = minPrice === maxPrice ? `R${minPrice.toFixed(2)}` : `From R${minPrice.toFixed(2)}`;
+
+    return (
+      <div className="border rounded-lg overflow-hidden bg-white shadow-sm">
+        {/* Option header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b bg-gray-50">
+          <div>
+            <div className="font-medium text-sm">{opt.name}</div>
+            <div className="text-xs text-gray-500 mt-0.5">{priceLabel}</div>
+          </div>
+          <div className="flex items-center gap-2">
+            {isSoldOut ? (
+              <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>
+            ) : (
+              <StockBadge stockLimit={opt.stockLimit} availableCount={opt.availableCount} />
+            )}
+          </div>
+        </div>
+
+        {/* Variant rows */}
+        <div className="divide-y">
+          {variants.map((variant) => {
+            const key = `${opt.id}:${variant.id}`;
+            const qty = quantities[key] || 0;
+            const unitPrice = effectiveUnitForVariant(opt, variant);
+            const variantSoldOut = (variant.stockLimit ?? 0) > 0 && variant.availableCount !== undefined && variant.availableCount <= 0;
+            const maxQty = ((variant.stockLimit ?? 0) > 0 && variant.availableCount !== undefined)
+              ? variant.availableCount
+              : undefined;
+
+            return (
+              <div key={variant.id} className="flex items-center justify-between px-4 py-2.5">
+                <div className="flex items-center gap-2 min-w-0">
+                  <span className="text-sm">{variant.name}</span>
+                  <span className="text-xs text-gray-500">R{unitPrice.toFixed(2)}</span>
+                  <StockBadge stockLimit={variant.stockLimit} availableCount={variant.availableCount} />
+                </div>
+                <QtyControl
+                  value={qty}
+                  onChange={(v) => onQtyChange(key, v)}
+                  disabled={!!(isSoldOut || variantSoldOut)}
+                  max={maxQty}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // No variants — simple row
+  const key = opt.id;
+  const qty = quantities[key] || 0;
+  const tier = nextTierForOption(opt);
+  const price = effectiveUnitForOption(opt);
+  const maxQty = ((opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined)
+    ? opt.availableCount
+    : undefined;
+
+  return (
+    <div className="flex items-center justify-between border rounded-lg p-3 bg-white shadow-sm">
+      <div className="min-w-0 flex-1 mr-3">
+        <div className="font-medium text-sm">{opt.name}</div>
+        <div className="text-xs text-gray-500 mt-0.5 flex items-center gap-2 flex-wrap">
+          {tier ? (
+            <>
+              <span>R{price.toFixed(2)}</span>
+              <span className="text-indigo-600">
+                Early bird — ends {new Date(tier.deadline).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "2-digit" })}
+              </span>
+            </>
+          ) : (
+            <span>R{price.toFixed(2)}</span>
+          )}
+          <StockBadge stockLimit={opt.stockLimit} availableCount={opt.availableCount} />
+        </div>
+      </div>
+      <QtyControl
+        value={qty}
+        onChange={(v) => onQtyChange(key, v)}
+        disabled={!!(isSoldOut)}
+        max={maxQty}
+      />
+    </div>
+  );
+}
+
+export default function RegisterForm({ event }: { event: Event }) {
+  const { token, user } = useAuth();
+  const eventId = event.id;
+
+  const [quantities, setQuantities] = useState<QtyMap>(() => {
+    const initial: QtyMap = {};
+    (event.eventOptions || []).forEach((o) => {
+      if (Array.isArray(o.variants) && o.variants.length > 0) {
+        o.variants.forEach((v) => { initial[`${o.id}:${v.id}`] = 0; });
+      } else {
+        initial[o.id] = 0;
+      }
+    });
+    return initial;
+  });
+  const [error, setError] = useState<string | null>(null);
+  const [registrationId, setRegistrationId] = useState<string | null>(null);
+  const [creatingCheckout, setCreatingCheckout] = useState(false);
+  const [creatingRegistration, setCreatingRegistration] = useState(false);
+
+  // Guest details (for unauthenticated free-event registration)
+  const [guestName, setGuestName] = useState("");
+  const [guestEmail, setGuestEmail] = useState("");
+  const [guestPhone, setGuestPhone] = useState("");
+
+  // Event data is server-rendered, but "now" has to be evaluated in the browser (and this page
+  // can be served from a up-to-60s-old cache — see revalidate in page.tsx), so still guard against
+  // someone loading a link after registration has actually closed.
+  useEffect(() => {
+    try {
+      const now = new Date();
+      const end = event.endDate ? new Date(event.endDate) : null;
+      const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+      if ((deadline && now >= deadline) || (end && now >= end)) {
+        window.location.replace('/events');
+      }
+    } catch {}
+  }, [event.endDate, event.registrationDeadline]);
+
+  const handleQtyChange = (key: string, val: number) => {
+    setQuantities((q) => ({ ...q, [key]: val }));
+  };
+
+  const total = useMemo(() => {
+    return (event.eventOptions || []).reduce((sum, opt) => {
+      const hasVariants = Array.isArray(opt.variants) && opt.variants.length > 0;
+      if (hasVariants) {
+        return sum + opt.variants!.reduce((vsum, v) => {
+          const qty = quantities[`${opt.id}:${v.id}`] || 0;
+          return vsum + qty * effectiveUnitForVariant(opt, v);
+        }, 0);
+      }
+      return sum + (quantities[opt.id] || 0) * effectiveUnitForOption(opt);
+    }, 0);
+  }, [event, quantities]);
+
+  const isGuestEligible = !!(event.requiresAuth === false);
+  const isLoggedIn = !!user || !!token;
+  const showGuestForm = isGuestEligible && !isLoggedIn;
+
+  const eventSoldOut = useMemo(() => {
+    const limitedOpts = (event.eventOptions || []).filter(o => (o.stockLimit ?? 0) > 0);
+    return limitedOpts.length > 0 && limitedOpts.every(o => o.availableCount !== undefined && o.availableCount <= 0);
+  }, [event]);
+
+  const buildItems = () => {
+    const items: { eventOptionId: string; quantity: number; variantId?: string }[] = [];
+    Object.entries(quantities).forEach(([key, qty]) => {
+      if (qty <= 0) return;
+      if (key.includes(":")) {
+        const [eventOptionId, variantId] = key.split(":");
+        items.push({ eventOptionId, quantity: qty, variantId });
+      } else {
+        items.push({ eventOptionId: key, quantity: qty });
+      }
+    });
+    return items;
+  };
+
+  const submitRegistration = async () => {
+    const items = buildItems();
+    if (items.length === 0) {
+      setError("Select at least one ticket.");
+      return;
+    }
+
+    if (isLoggedIn) {
+      if (!token) {
+        setError("Session expired — please log in again.");
+        window.location.href = `/login?redirect=/register/${eventId}`;
+        return;
+      }
+      try {
+        setError(null);
+        setCreatingRegistration(true);
+        const res = await apiFetch<{ id: string }>("/api/registrations", {
+          method: "POST",
+          body: { eventId, options: items },
+          authToken: token,
+        });
+        if (res?.id) {
+          const hasForm = !!(event?.form && Array.isArray(event.form.fields) && event.form.fields.length > 0);
+          if (hasForm) {
+            window.location.href = `/forms?registrationId=${encodeURIComponent(res.id)}`;
+          } else {
+            window.location.href = `/registration/success?registrationId=${encodeURIComponent(res.id)}&totalDue=${encodeURIComponent((total || 0).toFixed(2))}`;
+          }
+        }
+      } catch (e: any) {
+        setError(e?.message || "Registration failed");
+      } finally {
+        setCreatingRegistration(false);
+      }
+      return;
+    }
+
+    if (!showGuestForm) {
+      setError("Please log in to register for this event.");
+      window.location.href = `/login?redirect=/register/${eventId}`;
+      return;
+    }
+
+    if (!guestName.trim()) { setError("Please enter your name."); return; }
+    if (!guestEmail.trim() || !guestEmail.includes("@")) { setError("Please enter a valid email address."); return; }
+
+    try {
+      setError(null);
+      setCreatingRegistration(true);
+      const res = await apiFetch<{ id: string }>("/api/registrations", {
+        method: "POST",
+        body: { eventId, options: items, guestName: guestName.trim(), guestEmail: guestEmail.trim(), guestPhone: guestPhone.trim() || undefined },
+      });
+      if (res?.id) {
+        const hasForm = !!(event?.form && Array.isArray(event.form.fields) && event.form.fields.length > 0);
+        if (hasForm) {
+          window.location.href = `/forms?registrationId=${encodeURIComponent(res.id)}`;
+        } else {
+          window.location.href = `/registration/success?registrationId=${encodeURIComponent(res.id)}&totalDue=0.00`;
+        }
+      }
+    } catch (e: any) {
+      setError(e?.message || "Registration failed");
+    } finally {
+      setCreatingRegistration(false);
+    }
+  };
+
+  const createYocoCheckout = async () => {
+    if (!token || !registrationId) return;
+    try {
+      setCreatingCheckout(true);
+      const res = await apiFetch<{ redirectUrl: string }>("/api/payments/yoco-checkout", {
+        method: "POST",
+        body: {
+          registrationId,
+          successUrl: window.location.origin + "/payment/success",
+          cancelUrl: window.location.origin + "/payment/cancel",
+          failureUrl: window.location.origin + "/payment/failure",
+        },
+        authToken: token,
+      });
+      window.open(res.redirectUrl, "_blank");
+    } catch (e: any) {
+      setError(e?.message || "Failed to create checkout");
+    } finally {
+      setCreatingCheckout(false);
+    }
+  };
+
+  return (
+    <>
+      <h1 className="text-2xl font-semibold mb-4">Register for {event.title}</h1>
+
+      {eventSoldOut && (
+        <div className="mb-4 p-4 border rounded-lg bg-red-50 border-red-200 text-sm text-red-800 font-medium">
+          This event is sold out. Registration is no longer available.
+        </div>
+      )}
+
+      {!isLoggedIn && !isGuestEligible && (
+        <div className="mb-4 p-4 border rounded-lg bg-amber-50 border-amber-200 text-sm text-amber-800">
+          You need to <a href={`/login?redirect=/register/${eventId}`} className="font-semibold underline">log in</a> or <a href={`/register?redirect=/register/${eventId}`} className="font-semibold underline">create an account</a> to register for this event.
+        </div>
+      )}
+
+      {showGuestForm && (
+        <div className="mb-6 border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-base font-semibold mb-1">Your details</div>
+          <p className="text-sm text-gray-500 mb-3">
+            No account needed for this event.{" "}
+            <a href={`/login?redirect=/register/${eventId}`} className="text-indigo-600 hover:underline">Log in</a> if you already have one.
+          </p>
+          <div className="space-y-2">
+            <input
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Full name *"
+              value={guestName}
+              onChange={e => setGuestName(e.target.value)}
+              required
+            />
+            <input
+              type="email"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Email address *"
+              value={guestEmail}
+              onChange={e => setGuestEmail(e.target.value)}
+              required
+            />
+            <input
+              type="tel"
+              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              placeholder="Phone number (optional)"
+              value={guestPhone}
+              onChange={e => setGuestPhone(e.target.value)}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {(event.eventOptions || []).map((opt) => (
+          <OptionCard
+            key={opt.id}
+            opt={opt}
+            quantities={quantities}
+            onQtyChange={handleQtyChange}
+          />
+        ))}
+      </div>
+
+      {(() => {
+        // Collect all upcoming early-bird tiers across all options
+        const now = new Date();
+        const upcomingTiers = (event.eventOptions || []).flatMap(opt =>
+          (opt.earlyBirdTiers || [])
+            .map((t: any) => ({ ...t, deadline: new Date(t.deadline) }))
+            .filter((t: any) => t.deadline > now)
+        ).sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime());
+        if (upcomingTiers.length === 0) return null;
+        const soonest = upcomingTiers[0].deadline as Date;
+        const dateStr = soonest.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" });
+        return (
+          <div className="mt-4 p-3 rounded-lg bg-amber-50 border border-amber-200 text-sm text-amber-800">
+            <strong>Early bird pricing notice:</strong> Reduced early-bird prices are available until {dateStr}. Prices are subject to deadline and availability — your price is locked at registration but payment must be completed before the deadline to guarantee the early-bird rate.
+          </div>
+        );
+      })()}
+
+      <div className="mt-6 flex items-center justify-between">
+        <div className="text-lg font-semibold">Total: R{total.toFixed(2)}</div>
+        {!registrationId ? (
+          eventSoldOut ? (
+            <button disabled className="bg-red-50 text-red-700 border border-red-200 px-4 py-2 rounded cursor-not-allowed">
+              Sold Out
+            </button>
+          ) : (
+          <button
+            onClick={submitRegistration}
+            disabled={creatingRegistration || (!isLoggedIn && !isGuestEligible)}
+            className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-60"
+          >
+            {creatingRegistration ? "Registering..." : "Register"}
+          </button>
+          )
+        ) : (
+          <button
+            onClick={createYocoCheckout}
+            disabled={creatingCheckout}
+            className="bg-green-600 text-white px-4 py-2 rounded disabled:opacity-60"
+          >
+            {creatingCheckout ? "Creating checkout..." : "Pay with Yoco"}
+          </button>
+        )}
+      </div>
+
+      {error && <p className="text-sm text-red-600 mt-3">{error}</p>}
+    </>
+  );
+}
diff --git a/frontend/src/app/register/[eventId]/page.tsx b/frontend/src/app/register/[eventId]/page.tsx
new file mode 100644
index 0000000..195e02d
--- /dev/null
+++ b/frontend/src/app/register/[eventId]/page.tsx
@@ -0,0 +1,30 @@
+import { notFound } from "next/navigation";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { apiFetch, ApiError } from "@/lib/api";
+import RegisterForm from "./RegisterForm";
+
+export const revalidate = 60;
+
+export default async function RegisterPage({ params }: { params: Promise<{ eventId: string }> }) {
+  const { eventId } = await params;
+  let event: any;
+  try {
+    // Fetched server-side (same pattern as /events/[id]) so the form's content is part of
+    // the initial HTML instead of showing a loading skeleton after a client-side fetch.
+    event = await apiFetch<any>(`/api/events/${eventId}`, { nextOptions: { next: { revalidate } } });
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 404) notFound();
+    throw e;
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 p-6 max-w-2xl mx-auto w-full">
+        <RegisterForm event={event} />
+      </main>
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/registration/success/page.tsx b/frontend/src/app/registration/success/page.tsx
new file mode 100644
index 0000000..89c85cb
--- /dev/null
+++ b/frontend/src/app/registration/success/page.tsx
@@ -0,0 +1,249 @@
+"use client";
+import React, { Suspense } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { useSearchParams, useRouter } from "next/navigation";
+
+type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
+
+function RegistrationSuccessContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const registrationId = search.get("registrationId") || search.get("id");
+  const fallbackTotalParam = search.get("totalDue");
+  const fallbackTotalDue = React.useMemo(() => {
+    const n = fallbackTotalParam ? Number(fallbackTotalParam) : 0;
+    return isNaN(n) ? 0 : n;
+  }, [fallbackTotalParam]);
+
+  const [reg, setReg] = React.useState<any | null>(null);
+  const [form, setForm] = React.useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
+  const [formsData, setFormsData] = React.useState<Record<number, Record<string, string>>>({});
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [info, setInfo] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    (async () => {
+      setError(null);
+      setInfo(null);
+      if (!registrationId) return;
+      try {
+        setLoading(true);
+        // Try to fetch registration and event form
+        const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
+        const r = token ? await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token }) : null;
+        if (r) {
+          setReg(r);
+          const ev = await (await import('@/lib/api')).apiFetch(`/api/events/${encodeURIComponent(r.eventId)}`);
+          if (ev?.form) setForm(ev.form);
+          // Load any saved draft
+          try {
+            const d = await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, { authToken: token || undefined });
+            if (d && d.data && typeof d.data === 'object') setFormsData(d.data);
+          } catch {}
+        }
+      } catch (e: any) {
+        setError(e?.message || 'Failed to load details');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [registrationId]);
+
+  const totalDue = React.useMemo(() => {
+    if (!reg) return 0;
+    try {
+      return (reg.registrationOptions || []).reduce((s: number, ro: any) => {
+        const unit = (ro.priceSnapshot !== null && ro.priceSnapshot !== undefined)
+          ? Number(ro.priceSnapshot)
+          : (ro.variant?.price ?? ro.eventOption?.price ?? 0);
+        return s + unit * (ro.quantity || 0);
+      }, 0);
+    } catch { return 0; }
+  }, [reg]);
+
+  React.useEffect(() => {
+    // If free registration, do not show Yoco and redirect to dashboard after a short delay
+    if (reg && totalDue === 0) {
+      // attempt ticket generation if status is paid (may fail if required forms aren't completed)
+      (async () => {
+        try {
+          const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
+          if (token && reg?.id) {
+            await (await import('@/lib/api')).apiFetch('/api/tickets/generate', { method: 'POST', authToken: token, body: { registrationId: reg.id } });
+          }
+        } catch {}
+        setTimeout(() => router.replace('/dashboard'), 600);
+      })();
+    }
+  }, [reg, totalDue, router]);
+
+  const goPay = () => {
+    if (!registrationId) return;
+    router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(registrationId)}`);
+  };
+
+  const goDashboard = () => {
+    router.push("/dashboard/user");
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 px-4 py-10 max-w-2xl mx-auto w-full">
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+          <div className="text-2xl font-semibold mb-2">Registration successful</div>
+          <p className="text-gray-700 mb-4">Thank you! Your registration has been created{registrationId ? ` (#${registrationId.slice(0,8)})` : ""}.</p>
+          {form?.isRequired && reg ? (
+            <div className="mb-6 p-3 border rounded bg-yellow-50 text-yellow-800">
+              <div className="font-medium">This event requires attendee details.</div>
+              <div className="text-sm">Please complete one form per main ticket to receive tickets. You can also do this later from your dashboard, but tickets cannot be generated until completed.</div>
+            </div>
+          ) : (totalDue > 0 || (!reg && fallbackTotalDue > 0)) ? (
+            <p className="text-gray-700 mb-6">Would you like to pay with Yoco now?</p>
+          ) : null}
+
+          <div className="flex flex-col sm:flex-row gap-3 mt-4">
+            {(totalDue > 0 || (!reg && fallbackTotalDue > 0)) && (
+              <button
+                onClick={goPay}
+                disabled={!registrationId}
+                className="px-4 py-2 rounded bg-green-600 text-white disabled:opacity-60"
+              >Pay with Yoco</button>
+            )}
+            <button
+              onClick={goDashboard}
+              className="px-4 py-2 rounded bg-gray-100 text-gray-800 hover:bg-gray-200"
+            >{(totalDue > 0 || (!reg && fallbackTotalDue > 0)) ? "Go to Dashboard (Pay Later)" : "Go to Dashboard"}</button>
+          </div>
+          {error && <p className="text-sm text-red-600 mt-3">{error}</p>}
+          {!registrationId && (
+            <p className="text-sm text-red-600 mt-4">Missing registration reference. You can still go to your Dashboard to view registrations.</p>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+function AttendeeForms({ reg, form, formsData, setFormsData, setError, setInfo }: { reg: any; form: { isRequired: boolean; fields: FormField[] }; formsData: Record<number, Record<string,string>>; setFormsData: any; setError: any; setInfo: any; }) {
+  const registrationId = reg?.id;
+  const mainTickets = (reg?.registrationOptions || []).filter((o: any) => o?.eventOption?.isMainTicket).reduce((s: number, o: any) => s + (o.quantity || 0), 0);
+  const count = Math.max(0, mainTickets);
+
+  const canSubmit = React.useMemo(() => {
+    if (!form || count <= 0) return false;
+    const reqFields = (form.fields || [])
+      .filter(f => !!f.isRequired && f.type !== 'statement' && f.type !== 'paragraph')
+      .map(f => f.id);
+    for (let i = 0; i < count; i++) {
+      const data = formsData[i] || {};
+      for (const fid of reqFields) {
+        const v = data[fid];
+        if (v === undefined || v === null || String(v).trim() === '') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [form, formsData, count]);
+
+  const update = (idx: number, fieldId: string, value: string) => {
+    setFormsData((prev: any) => ({ ...prev, [idx]: { ...(prev[idx]||{}), [fieldId]: value } }));
+  };
+
+  const submit = async () => {
+    try {
+      setError(null); setInfo(null);
+      const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
+      if (!token) { setError('Please login to submit forms.'); return; }
+      const payload = [] as any[];
+      for (let i = 0; i < count; i++) {
+        payload.push({ answers: formsData[i] || {} });
+      }
+      await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/responses`, {
+        method: 'POST',
+        authToken: token,
+        body: { responses: payload }
+      });
+      setInfo('Attendee forms submitted. You will receive tickets once payment is confirmed.');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to submit forms');
+    }
+  };
+
+  const saveDraft = async () => {
+    try {
+      setError(null); setInfo(null);
+      const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
+      if (!token) { setError('Please login to save drafts.'); return; }
+      await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, {
+        method: 'PUT',
+        authToken: token,
+        body: { data: formsData }
+      });
+      setInfo('Draft saved. You can finish later from your dashboard.');
+    } catch (e: any) {
+      setError(e?.message || 'Failed to save draft');
+    }
+  };
+
+  if (!form || !Array.isArray(form.fields) || count === 0) return null;
+
+  return (
+    <div className="border rounded p-3 bg-gray-50 mb-4">
+      <div className="text-sm font-medium mb-2">Attendee details</div>
+      <div className="space-y-4">
+        {Array.from({ length: count }, (_, idx) => (
+          <div key={idx} className="bg-white border rounded p-3">
+            <div className="font-medium mb-2">Attendee {idx + 1}</div>
+            {form.fields.map((f) => (
+              <div key={f.id} className="mb-2">
+                {f.type === 'statement' ? (
+                  <div className="text-sm text-gray-700 whitespace-pre-line">{f.label}</div>
+                ) : f.type === 'paragraph' ? (
+                  <div className="text-sm text-gray-700">
+                    {f.label && <div className="font-medium mb-1 whitespace-pre-line">{f.label}</div>}
+                    {f.helpText && <div className="whitespace-pre-line">{f.helpText}</div>}
+                  </div>
+                ) : (
+                  <>
+                    <label className="block text-xs text-gray-600 mb-1">{f.label}{f.isRequired ? ' *' : ''}</label>
+                    {f.type === 'yes_no' ? (
+                      <select className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)}>
+                        <option value="">Select</option>
+                        <option value="yes">Yes</option>
+                        <option value="no">No</option>
+                      </select>
+                    ) : f.type === 'date' ? (
+                      <input type="date" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    ) : f.type === 'numeric' ? (
+                      <input type="number" className="border rounded px-2 py-1 text-sm" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    ) : (
+                      <input type="text" className="border rounded px-2 py-1 text-sm w-full" value={formsData[idx]?.[f.id] || ''} onChange={e => update(idx, f.id, e.target.value)} />
+                    )}
+                    {f.helpText && <div className="text-xs text-gray-500 mt-1">{f.helpText}</div>}
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="mt-3 flex gap-2">
+        <button className="px-3 py-1.5 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50" disabled={!canSubmit} onClick={submit}>Submit attendee forms</button>
+        <button className="px-3 py-1.5 text-sm rounded bg-gray-100 hover:bg-gray-200" onClick={saveDraft}>Save for later</button>
+      </div>
+    </div>
+  );
+}
+
+export default function RegistrationSuccessPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <RegistrationSuccessContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/reset-password/page.tsx b/frontend/src/app/reset-password/page.tsx
new file mode 100644
index 0000000..d9b4656
--- /dev/null
+++ b/frontend/src/app/reset-password/page.tsx
@@ -0,0 +1,70 @@
+"use client";
+import React, { Suspense, useMemo, useState } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { apiFetch } from "@/lib/api";
+import { useSearchParams, useRouter } from "next/navigation";
+
+function ResetPasswordContent() {
+  const search = useSearchParams();
+  const router = useRouter();
+  const token = search.get("token") || "";
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const canSubmit = useMemo(() => password.length >= 8 && password === confirm && !!token, [password, confirm, token]);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit) return;
+    try {
+      setLoading(true);
+      setStatus(null);
+      await apiFetch("/api/users/reset", { method: "POST", body: { token, password } });
+      setStatus("Your password has been reset. You can now log in.");
+      setTimeout(() => router.push("/login"), 1500);
+    } catch (err: any) {
+      setStatus(err?.message || "Reset failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Navbar />
+      <main className="flex-1 px-4 py-10 max-w-md mx-auto w-full">
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+          <h1 className="text-2xl font-semibold mb-4">Reset your password</h1>
+          {!token && <p className="text-red-600 mb-4">Missing or invalid token.</p>}
+          <form onSubmit={submit} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">New Password</label>
+              <input type="password" value={password} onChange={e => setPassword(e.target.value)} required className="w-full border rounded px-3 py-2" />
+              <p className="text-xs text-gray-500 mt-1">At least 8 characters.</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Confirm Password</label>
+              <input type="password" value={confirm} onChange={e => setConfirm(e.target.value)} required className="w-full border rounded px-3 py-2" />
+            </div>
+            <button disabled={loading || !canSubmit} className="px-4 py-2 rounded bg-green-600 text-white disabled:opacity-60">
+              {loading ? "Saving..." : "Set new password"}
+            </button>
+          </form>
+          {status && <p className="text-sm text-gray-700 mt-4">{status}</p>}
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <ResetPasswordContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/self-service/page.tsx b/frontend/src/app/self-service/page.tsx
new file mode 100644
index 0000000..d56e5cd
--- /dev/null
+++ b/frontend/src/app/self-service/page.tsx
@@ -0,0 +1,1027 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { apiFetch } from "@/lib/api";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+type EarlyBirdTier = { deadline: string; price: number; order?: number; variantId?: string | null };
+type OptionVariant = { id: string; name: string; price: number | null; stockLimit?: number; availableCount?: number | null };
+type EventOption = {
+  id: string;
+  name: string;
+  price: number;
+  isMainTicket?: boolean;
+  earlyBirdTiers?: EarlyBirdTier[];
+  variants?: OptionVariant[];
+};
+type FormField = {
+  id: string;
+  type: string;
+  label: string;
+  isRequired: boolean;
+  order: number;
+  helpText?: string | null;
+  options?: any;
+};
+type EventForm = {
+  id: string;
+  isRequired: boolean;
+  fields: FormField[];
+};
+type KioskEvent = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  picture?: string;
+  eventOptions?: EventOption[];
+  form?: EventForm | null;
+};
+
+type Screen = "setup" | "form" | "eventform" | "confirmation";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function effectiveUnit(opt: EventOption): number {
+  const base = opt.price || 0;
+  const tiers = (Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : []).filter(t => !t.variantId);
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t) => ({ ...t, deadline: new Date(t.deadline) }))
+    .filter((t) => now < t.deadline)
+    .sort((a, b) => a.deadline.getTime() - b.deadline.getTime() || (a.order || 0) - (b.order || 0) || a.price - b.price);
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+function effectiveVariantUnit(opt: EventOption, variant: OptionVariant): number {
+  const base = variant.price !== null && variant.price !== undefined ? variant.price : opt.price || 0;
+  const allTiers = Array.isArray(opt.earlyBirdTiers) ? opt.earlyBirdTiers : [];
+  const variantTiers = allTiers.filter(t => t.variantId === variant.id);
+  const tiers = variantTiers.length > 0 ? variantTiers : allTiers.filter(t => !t.variantId);
+  if (tiers.length === 0) return base;
+  const now = new Date();
+  const applicable = tiers
+    .map((t) => ({ ...t, deadline: new Date(t.deadline) }))
+    .filter((t) => now < t.deadline)
+    .sort((a, b) => a.deadline.getTime() - b.deadline.getTime() || (a.order || 0) - (b.order || 0) || a.price - b.price);
+  return applicable.length > 0 ? applicable[0].price : base;
+}
+
+function fmtDate(dateStr: string) {
+  try {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      weekday: "short",
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function fmtCurrency(val: number) {
+  return val === 0 ? "Free" : `R${val.toFixed(2)}`;
+}
+
+// ─── Kiosk Page ───────────────────────────────────────────────────────────────
+export default function SelfServicePage() {
+  const [screen, setScreen] = useState<Screen>("setup");
+
+  // ── Setup state ─────────────────────────────────────────────────
+  const [setupEmail, setSetupEmail] = useState("");
+  const [setupPassword, setSetupPassword] = useState("");
+  const [setupLoading, setSetupLoading] = useState(false);
+  const [setupError, setSetupError] = useState<string | null>(null);
+  const [supervisorToken, setSupervisorToken] = useState<string | null>(null);
+  const [events, setEvents] = useState<KioskEvent[]>([]);
+  const [selectedEventId, setSelectedEventId] = useState("");
+  const [eventsLoading, setEventsLoading] = useState(false);
+
+  // ── Change-event modal ───────────────────────────────────────────
+  const [showChangeModal, setShowChangeModal] = useState(false);
+  const [changePassword, setChangePassword] = useState("");
+  const [changeError, setChangeError] = useState<string | null>(null);
+  const [changeLoading, setChangeLoading] = useState(false);
+
+  // ── Visitor form state ───────────────────────────────────────────
+  const [visitorName, setVisitorName] = useState("");
+  const [visitorEmail, setVisitorEmail] = useState("");
+  const [visitorPhone, setVisitorPhone] = useState("");
+  const [notificationPref, setNotificationPref] = useState<"email" | "whatsapp" | "both">("email");
+  const [createAccount, setCreateAccount] = useState(false);
+  const [visitorPassword, setVisitorPassword] = useState("");
+  const [accountExists, setAccountExists] = useState(false);
+  const [checkingAccount, setCheckingAccount] = useState(false);
+  const [quantities, setQuantities] = useState<Record<string, number>>({});
+  const [formLoading, setFormLoading] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  // ── Event form (attendee form) state ────────────────────────────
+  const [currentRegistrationId, setCurrentRegistrationId] = useState<string | null>(null);
+  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+  const [currentTicketIndex, setCurrentTicketIndex] = useState(0);
+  const [allFormAnswers, setAllFormAnswers] = useState<Record<string, string>[]>([]);
+  const [currentTicketAnswers, setCurrentTicketAnswers] = useState<Record<string, string>>({});
+  const [formSubmitLoading, setFormSubmitLoading] = useState(false);
+  const [formSubmitError, setFormSubmitError] = useState<string | null>(null);
+
+  // ── Confirmation state ───────────────────────────────────────────
+  const [confirmationName, setConfirmationName] = useState("");
+  const [registrationIsFree, setRegistrationIsFree] = useState(false);
+  const [countdown, setCountdown] = useState(10);
+  const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // ─── Derived ────────────────────────────────────────────────────
+  const selectedEvent = useMemo(
+    () => events.find((e) => e.id === selectedEventId) || null,
+    [events, selectedEventId]
+  );
+
+  const total = useMemo(() => {
+    if (!selectedEvent) return 0;
+    return (selectedEvent.eventOptions || []).reduce((sum, o) => {
+      if ((o.variants || []).length > 0) {
+        return sum + (o.variants || []).reduce((vs, v) => vs + (quantities[`${o.id}::${v.id}`] || 0) * effectiveVariantUnit(o, v), 0);
+      }
+      return sum + (quantities[o.id] || 0) * effectiveUnit(o);
+    }, 0);
+  }, [selectedEvent, quantities]);
+
+  // Does the selected event have a required form?
+  const eventHasRequiredForm = useMemo(() => {
+    return !!(selectedEvent?.form?.isRequired && (selectedEvent.form.fields || []).some(f => f.type !== 'statement'));
+  }, [selectedEvent]);
+
+  // Answerable form fields (exclude statement-type display fields)
+  const answerableFields = useMemo(() => {
+    if (!selectedEvent?.form) return [];
+    return (selectedEvent.form.fields || [])
+      .filter(f => f.type !== 'statement')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  }, [selectedEvent]);
+
+  // Number of main tickets selected (for form count)
+  const mainTicketCount = useMemo(() => {
+    if (!selectedEvent) return 0;
+    return (selectedEvent.eventOptions || [])
+      .filter(o => o.isMainTicket)
+      .reduce((sum, o) => {
+        if ((o.variants || []).length > 0) {
+          return sum + (o.variants || []).reduce((vs, v) => vs + (quantities[`${o.id}::${v.id}`] || 0), 0);
+        }
+        return sum + (quantities[o.id] || 0);
+      }, 0);
+  }, [selectedEvent, quantities]);
+
+  // ─── Load events after supervisor login ─────────────────────────
+  const loadEvents = useCallback(async (token: string) => {
+    setEventsLoading(true);
+    try {
+      const data: KioskEvent[] = await apiFetch(
+        "/api/events/all?includePast=false&includeInactive=false",
+        { authToken: token }
+      );
+      setEvents(data);
+    } catch {
+      setEvents([]);
+    } finally {
+      setEventsLoading(false);
+    }
+  }, []);
+
+  // ─── Setup: supervisor login ─────────────────────────────────────
+  async function handleSetupLogin(e: React.FormEvent) {
+    e.preventDefault();
+    setSetupError(null);
+    setSetupLoading(true);
+    try {
+      const data = await apiFetch("/api/users/login", {
+        method: "POST",
+        body: { email: setupEmail, password: setupPassword },
+      });
+      const role: string = data.role || "";
+      if (!["admin", "supervisor"].includes(role)) {
+        setSetupError("Only admins and supervisors can set up the kiosk.");
+        setSetupLoading(false);
+        return;
+      }
+      setSupervisorToken(data.token);
+      await loadEvents(data.token);
+    } catch (err: any) {
+      setSetupError(err?.message || "Login failed. Please check your credentials.");
+    } finally {
+      setSetupLoading(false);
+    }
+  }
+
+  function handleStartKiosk() {
+    if (!selectedEventId || !selectedEvent) return;
+    const initial: Record<string, number> = {};
+    (selectedEvent.eventOptions || []).forEach((o) => {
+      if ((o.variants || []).length > 0) {
+        (o.variants || []).forEach((v) => (initial[`${o.id}::${v.id}`] = 0));
+      } else {
+        initial[o.id] = 0;
+      }
+    });
+    setQuantities(initial);
+    setScreen("form");
+  }
+
+  // ─── Change event modal ──────────────────────────────────────────
+  async function handleChangeEvent(e: React.FormEvent) {
+    e.preventDefault();
+    setChangeError(null);
+    setChangeLoading(true);
+    try {
+      const data = await apiFetch("/api/users/login", {
+        method: "POST",
+        body: { email: setupEmail, password: changePassword },
+      });
+      const role: string = data.role || "";
+      if (!["admin", "supervisor"].includes(role)) {
+        setChangeError("Only admins and supervisors can change the event.");
+        setChangeLoading(false);
+        return;
+      }
+      setSupervisorToken(data.token);
+      await loadEvents(data.token);
+      setChangePassword("");
+      setChangeError(null);
+      setShowChangeModal(false);
+      setScreen("setup");
+      setSelectedEventId("");
+      resetForm();
+    } catch (err: any) {
+      setChangeError(err?.message || "Incorrect password.");
+    } finally {
+      setChangeLoading(false);
+    }
+  }
+
+  // ─── Visitor registration ────────────────────────────────────────
+  async function handleRegister(e: React.FormEvent) {
+    e.preventDefault();
+    setFormError(null);
+    if (!visitorName.trim() || (!visitorEmail.trim() && !visitorPhone.trim())) {
+      setFormError("Name and at least an email or phone number are required.");
+      return;
+    }
+    if (createAccount && visitorPassword.trim().length < 6) {
+      setFormError("Password must be at least 6 characters.");
+      return;
+    }
+    if (!selectedEventId) {
+      setFormError("No event selected.");
+      return;
+    }
+
+    setFormLoading(true);
+    try {
+      const payload: any = {
+        eventId: selectedEventId,
+        options: Object.entries(quantities)
+          .filter(([, qty]) => qty > 0)
+          .map(([key, quantity]) => {
+            const [eventOptionId, variantId] = key.split("::");
+            return { eventOptionId, quantity, ...(variantId ? { variantId } : {}) };
+          }),
+        user: {
+          name: visitorName.trim(),
+          ...(visitorEmail.trim() ? { email: visitorEmail.trim() } : {}),
+          ...(visitorPhone.trim() ? { phoneNumber: visitorPhone.trim() } : {}),
+        },
+        guestOnly: !createAccount,
+        notificationPreference: notificationPref,
+      };
+      if (createAccount && visitorPassword) {
+        payload.user.password = visitorPassword;
+      }
+
+      const result: any = await apiFetch("/api/registrations/manual", {
+        method: "POST",
+        body: payload,
+        authToken: supervisorToken,
+      });
+
+      setCurrentRegistrationId(result?.id || null);
+      setCurrentUserId(result?.userId || null);
+      setRegistrationIsFree(result?.status === "paid" || total === 0);
+      setConfirmationName(visitorName.trim());
+
+      // If event has a required form and there are main tickets, show form step
+      if (eventHasRequiredForm && mainTicketCount > 0 && result?.id) {
+        setCurrentTicketIndex(0);
+        setAllFormAnswers([]);
+        setCurrentTicketAnswers({});
+        setFormSubmitError(null);
+        setScreen("eventform");
+      } else {
+        setScreen("confirmation");
+        startCountdown();
+      }
+    } catch (err: any) {
+      setFormError(err?.message || "Registration failed. Please try again.");
+    } finally {
+      setFormLoading(false);
+    }
+  }
+
+  // ─── Event form submission (per-ticket) ──────────────────────────
+  async function handleFormSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setFormSubmitError(null);
+
+    // Validate required fields for current ticket
+    for (const field of answerableFields) {
+      if (field.isRequired && !currentTicketAnswers[field.id]?.trim()) {
+        setFormSubmitError(`"${field.label}" is required.`);
+        return;
+      }
+    }
+
+    if (!currentRegistrationId) {
+      setFormSubmitError("No registration found.");
+      return;
+    }
+
+    const collectedAnswers = [...allFormAnswers, currentTicketAnswers];
+
+    // If more tickets remain, advance to the next one
+    if (currentTicketIndex < mainTicketCount - 1) {
+      setAllFormAnswers(collectedAnswers);
+      setCurrentTicketAnswers({});
+      setCurrentTicketIndex((i) => i + 1);
+      return;
+    }
+
+    // Last ticket — submit all responses
+    setFormSubmitLoading(true);
+    try {
+      const responses = collectedAnswers.map((answers) => ({ answers }));
+
+      await apiFetch(`/api/registrations/${currentRegistrationId}/forms/responses`, {
+        method: "POST",
+        body: { responses },
+        authToken: supervisorToken,
+      });
+
+      setScreen("confirmation");
+      startCountdown();
+    } catch (err: any) {
+      setFormSubmitError(err?.message || "Form submission failed. Please try again.");
+    } finally {
+      setFormSubmitLoading(false);
+    }
+  }
+
+  // ─── Confirmation countdown ──────────────────────────────────────
+  function startCountdown() {
+    setCountdown(10);
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    countdownRef.current = setInterval(() => {
+      setCountdown((c) => {
+        if (c <= 1) {
+          clearInterval(countdownRef.current!);
+          resetAndGoToForm();
+          return 0;
+        }
+        return c - 1;
+      });
+    }, 1000);
+  }
+
+  function resetAndGoToForm() {
+    if (countdownRef.current) clearInterval(countdownRef.current);
+    resetForm();
+    setScreen("form");
+    const initial: Record<string, number> = {};
+    (selectedEvent?.eventOptions || []).forEach((o) => {
+      if ((o.variants || []).length > 0) {
+        (o.variants || []).forEach((v) => (initial[`${o.id}::${v.id}`] = 0));
+      } else {
+        initial[o.id] = 0;
+      }
+    });
+    setQuantities(initial);
+  }
+
+  function resetForm() {
+    setVisitorName("");
+    setVisitorEmail("");
+    setVisitorPhone("");
+    setNotificationPref("email");
+    setCreateAccount(false);
+    setVisitorPassword("");
+    setAccountExists(false);
+    setFormError(null);
+    setCurrentRegistrationId(null);
+    setCurrentUserId(null);
+    setCurrentTicketIndex(0);
+    setAllFormAnswers([]);
+    setCurrentTicketAnswers({});
+    setFormSubmitError(null);
+  }
+
+  useEffect(() => {
+    return () => {
+      if (countdownRef.current) clearInterval(countdownRef.current);
+    };
+  }, []);
+
+  // ─── Check whether an account already exists for the entered email/phone ──
+  useEffect(() => {
+    const email = visitorEmail.trim();
+    const phone = visitorPhone.trim();
+    if (!supervisorToken || (!email && !phone)) {
+      setAccountExists(false);
+      return;
+    }
+    const handle = setTimeout(async () => {
+      setCheckingAccount(true);
+      try {
+        const params = new URLSearchParams();
+        if (email) params.set("email", email);
+        if (phone) params.set("phone", phone);
+        const data = await apiFetch<{ exists: boolean }>(
+          `/api/users/check-exists?${params.toString()}`,
+          { authToken: supervisorToken }
+        );
+        setAccountExists(!!data?.exists);
+      } catch {
+        setAccountExists(false);
+      } finally {
+        setCheckingAccount(false);
+      }
+    }, 400);
+    return () => clearTimeout(handle);
+  }, [visitorEmail, visitorPhone, supervisorToken]);
+
+  // Existing accounts are linked automatically — never show the "create account" toggle for them
+  useEffect(() => {
+    if (accountExists && createAccount) {
+      setCreateAccount(false);
+      setVisitorPassword("");
+    }
+  }, [accountExists, createAccount]);
+
+  // ─── Setup screen ────────────────────────────────────────────────
+  const isLoggedIn = !!supervisorToken;
+
+  // ─── Render ──────────────────────────────────────────────────────
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col">
+      {/* Change Event button */}
+      {screen === "form" && (
+        <div className="fixed top-3 right-3 z-50">
+          <button
+            onClick={() => { setShowChangeModal(true); setChangePassword(""); setChangeError(null); }}
+            className="text-xs bg-white border border-gray-300 text-gray-500 rounded px-3 py-1.5 shadow-sm hover:bg-gray-100 transition"
+          >
+            Change Event
+          </button>
+        </div>
+      )}
+
+      {/* ── Change Event Modal ─────────────────────────────────────── */}
+      {showChangeModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-sm mx-4">
+            <h2 className="text-xl font-bold text-gray-800 mb-1">Change Event</h2>
+            <p className="text-sm text-gray-500 mb-5">Re-enter your password to change the event.</p>
+            <form onSubmit={handleChangeEvent} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                <input
+                  type="password"
+                  value={changePassword}
+                  onChange={(e) => setChangePassword(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="Your password"
+                  autoFocus
+                  required
+                />
+              </div>
+              {changeError && <p className="text-red-600 text-sm">{changeError}</p>}
+              <div className="flex gap-3 pt-1">
+                <button
+                  type="button"
+                  onClick={() => setShowChangeModal(false)}
+                  className="flex-1 border border-gray-300 text-gray-700 rounded-lg py-3 text-base font-medium hover:bg-gray-50 transition"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={changeLoading}
+                  className="flex-1 bg-blue-600 text-white rounded-lg py-3 text-base font-semibold hover:bg-blue-700 disabled:opacity-60 transition"
+                >
+                  {changeLoading ? "Verifying…" : "Confirm"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* ── Setup Screen ───────────────────────────────────────────── */}
+      {screen === "setup" && (
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
+            <div className="text-center mb-8">
+              <h1 className="text-3xl font-bold text-gray-900">Self-Service Kiosk</h1>
+              <p className="text-gray-500 mt-2">Supervisor setup required</p>
+            </div>
+
+            {!isLoggedIn && (
+              <form onSubmit={handleSetupLogin} className="space-y-5">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+                  <input
+                    type="email"
+                    value={setupEmail}
+                    onChange={(e) => setSetupEmail(e.target.value)}
+                    className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="supervisor@example.com"
+                    required
+                    autoComplete="email"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+                  <input
+                    type="password"
+                    value={setupPassword}
+                    onChange={(e) => setSetupPassword(e.target.value)}
+                    className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    placeholder="••••••••"
+                    required
+                    autoComplete="current-password"
+                  />
+                </div>
+                {setupError && <p className="text-red-600 text-sm">{setupError}</p>}
+                <button
+                  type="submit"
+                  disabled={setupLoading}
+                  className="w-full bg-blue-600 text-white rounded-xl py-3.5 text-lg font-semibold hover:bg-blue-700 disabled:opacity-60 transition mt-2"
+                >
+                  {setupLoading ? "Signing in…" : "Sign In"}
+                </button>
+              </form>
+            )}
+
+            {isLoggedIn && (
+              <div className="space-y-5">
+                <p className="text-green-700 text-sm font-medium bg-green-50 border border-green-200 rounded-lg px-4 py-2">
+                  Signed in as supervisor. Select an event to begin.
+                </p>
+                {eventsLoading ? (
+                  <p className="text-gray-500 text-center py-4">Loading events…</p>
+                ) : (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">Event</label>
+                    <select
+                      value={selectedEventId}
+                      onChange={(e) => setSelectedEventId(e.target.value)}
+                      className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="">— Select an event —</option>
+                      {events.map((ev) => (
+                        <option key={ev.id} value={ev.id}>
+                          {ev.title} ({fmtDate(ev.startDate)})
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+                {selectedEvent && (
+                  <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-sm text-blue-800">
+                    <p className="font-semibold">{selectedEvent.title}</p>
+                    <p className="text-blue-600">{fmtDate(selectedEvent.startDate)} — {fmtDate(selectedEvent.endDate)}</p>
+                    {selectedEvent.form?.isRequired && (
+                      <p className="text-orange-600 mt-1 text-xs font-medium">This event requires an attendee form to be completed at registration.</p>
+                    )}
+                  </div>
+                )}
+                <button
+                  onClick={handleStartKiosk}
+                  disabled={!selectedEventId}
+                  className="w-full bg-blue-600 text-white rounded-xl py-3.5 text-lg font-semibold hover:bg-blue-700 disabled:opacity-50 transition"
+                >
+                  Start Kiosk
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ── Registration Form Screen ───────────────────────────────── */}
+      {screen === "form" && selectedEvent && (
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg p-8">
+            <div className="text-center mb-7">
+              <p className="text-sm text-gray-500 uppercase tracking-wide font-medium">Registering for</p>
+              <h2 className="text-2xl font-bold text-gray-900 mt-1">{selectedEvent.title}</h2>
+              <p className="text-gray-500 text-sm mt-1">{fmtDate(selectedEvent.startDate)}</p>
+            </div>
+
+            <form onSubmit={handleRegister} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Full Name <span className="text-red-500">*</span></label>
+                <input
+                  type="text"
+                  value={visitorName}
+                  onChange={(e) => setVisitorName(e.target.value)}
+                  className="w-full border border-gray-300 rounded-xl px-4 py-3.5 text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="John Smith"
+                  required
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Email Address
+                  {!visitorPhone.trim() && <span className="text-red-500"> *</span>}
+                  {visitorPhone.trim() && <span className="text-gray-400 font-normal"> (optional if phone provided)</span>}
+                </label>
+                <input
+                  type="email"
+                  value={visitorEmail}
+                  onChange={(e) => {
+                    const v = e.target.value;
+                    setVisitorEmail(v);
+                    // Auto-derive preference when only one contact channel is present
+                    if (v.trim() && !visitorPhone.trim()) setNotificationPref("email");
+                    else if (!v.trim() && visitorPhone.trim()) setNotificationPref("whatsapp");
+                  }}
+                  className="w-full border border-gray-300 rounded-xl px-4 py-3.5 text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="john@example.com"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Cell Number
+                  {!visitorEmail.trim() && <span className="text-red-500"> *</span>}
+                  {visitorEmail.trim() && <span className="text-gray-400 font-normal"> (optional if email provided)</span>}
+                </label>
+                <input
+                  type="tel"
+                  value={visitorPhone}
+                  onChange={(e) => {
+                    const v = e.target.value;
+                    setVisitorPhone(v);
+                    if (v.trim() && !visitorEmail.trim()) setNotificationPref("whatsapp");
+                    else if (!v.trim() && visitorEmail.trim()) setNotificationPref("email");
+                  }}
+                  className="w-full border border-gray-300 rounded-xl px-4 py-3.5 text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  placeholder="+27 82 000 0000"
+                />
+              </div>
+
+              {/* Preference selector — only shown when both channels are available */}
+              {visitorEmail.trim() && visitorPhone.trim() && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">Send tickets via</label>
+                  <div className="flex rounded-xl border border-gray-200 overflow-hidden text-sm font-medium">
+                    {(["email", "whatsapp", "both"] as const).map((p) => (
+                      <button
+                        key={p}
+                        type="button"
+                        onClick={() => setNotificationPref(p)}
+                        className={`flex-1 py-3 transition-colors ${
+                          notificationPref === p
+                            ? p === "whatsapp" ? "bg-green-600 text-white"
+                              : p === "both" ? "bg-indigo-600 text-white"
+                              : "bg-blue-600 text-white"
+                            : "bg-white text-gray-600 hover:bg-gray-50"
+                        }`}
+                      >
+                        {p === "email" ? "Email" : p === "whatsapp" ? "WhatsApp" : "Both"}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Ticket options */}
+              {(selectedEvent.eventOptions || []).length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-3">Ticket Options</label>
+                  <div className="space-y-3">
+                    {(selectedEvent.eventOptions || []).map((opt) => {
+                      const hasVariants = (opt.variants || []).length > 0;
+                      if (hasVariants) {
+                        return (
+                          <div key={opt.id} className="border border-gray-200 rounded-xl overflow-hidden">
+                            <div className="px-4 py-2.5 bg-gray-50 border-b border-gray-200">
+                              <p className="font-medium text-gray-800 text-sm">{opt.name}</p>
+                            </div>
+                            <div className="divide-y divide-gray-100">
+                              {(opt.variants || []).map((v) => {
+                                const unit = effectiveVariantUnit(opt, v);
+                                const baseVariantPrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
+                                const key = `${opt.id}::${v.id}`;
+                                return (
+                                  <div key={v.id} className="flex items-center justify-between px-4 py-3">
+                                    <div>
+                                      <p className="text-gray-800">{v.name}</p>
+                                      <p className="text-sm text-gray-500">
+                                        {fmtCurrency(unit)}
+                                        {unit !== baseVariantPrice && baseVariantPrice > 0 ? ` (was ${fmtCurrency(baseVariantPrice)})` : ""}
+                                      </p>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                      <button
+                                        type="button"
+                                        onClick={() => setQuantities((q) => ({ ...q, [key]: Math.max(0, (q[key] || 0) - 1) }))}
+                                        className="w-10 h-10 rounded-full border-2 border-gray-300 text-xl font-bold text-gray-600 hover:bg-gray-100 flex items-center justify-center transition"
+                                      >
+                                        −
+                                      </button>
+                                      <span className="w-8 text-center text-lg font-semibold">{quantities[key] || 0}</span>
+                                      <button
+                                        type="button"
+                                        onClick={() => setQuantities((q) => ({ ...q, [key]: (q[key] || 0) + 1 }))}
+                                        className="w-10 h-10 rounded-full border-2 border-blue-500 text-xl font-bold text-blue-600 hover:bg-blue-50 flex items-center justify-center transition"
+                                      >
+                                        +
+                                      </button>
+                                    </div>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        );
+                      }
+                      const unit = effectiveUnit(opt);
+                      return (
+                        <div key={opt.id} className="flex items-center justify-between border border-gray-200 rounded-xl px-4 py-3.5">
+                          <div>
+                            <p className="font-medium text-gray-800">{opt.name}</p>
+                            <p className="text-sm text-gray-500">{fmtCurrency(unit)}{unit !== opt.price && opt.price > 0 ? ` (was ${fmtCurrency(opt.price)})` : ""}</p>
+                          </div>
+                          <div className="flex items-center gap-3">
+                            <button
+                              type="button"
+                              onClick={() => setQuantities((q) => ({ ...q, [opt.id]: Math.max(0, (q[opt.id] || 0) - 1) }))}
+                              className="w-10 h-10 rounded-full border-2 border-gray-300 text-xl font-bold text-gray-600 hover:bg-gray-100 flex items-center justify-center transition"
+                            >
+                              −
+                            </button>
+                            <span className="w-8 text-center text-lg font-semibold">{quantities[opt.id] || 0}</span>
+                            <button
+                              type="button"
+                              onClick={() => setQuantities((q) => ({ ...q, [opt.id]: (q[opt.id] || 0) + 1 }))}
+                              className="w-10 h-10 rounded-full border-2 border-blue-500 text-xl font-bold text-blue-600 hover:bg-blue-50 flex items-center justify-center transition"
+                            >
+                              +
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  {total > 0 && (
+                    <div className="mt-3 text-right text-base font-semibold text-gray-800">
+                      Total: {fmtCurrency(total)}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Account creation toggle — hidden once we know an account already exists */}
+              {accountExists ? (
+                <div className="border border-green-200 bg-green-50 rounded-xl px-4 py-3 text-sm text-green-700">
+                  An account with this email/number already exists — you&apos;ll be registered using that account.
+                </div>
+              ) : (
+                <div className="border border-gray-200 rounded-xl px-4 py-4">
+                  <label className="flex items-center gap-3 cursor-pointer">
+                    <div
+                      onClick={() => setCreateAccount((v) => !v)}
+                      className={`relative w-12 h-6 rounded-full transition-colors ${createAccount ? "bg-blue-600" : "bg-gray-300"}`}
+                    >
+                      <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${createAccount ? "translate-x-6" : ""}`} />
+                    </div>
+                    <div>
+                      <p className="font-medium text-gray-800">Create an account</p>
+                      <p className="text-sm text-gray-500">
+                        {checkingAccount ? "Checking for an existing account…" : "Save your details for future events"}
+                      </p>
+                    </div>
+                  </label>
+                  {createAccount && (
+                    <div className="mt-3">
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Choose a password</label>
+                      <input
+                        type="password"
+                        value={visitorPassword}
+                        onChange={(e) => setVisitorPassword(e.target.value)}
+                        className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Min. 6 characters"
+                        autoComplete="new-password"
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {formError && (
+                <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-red-700 text-sm">
+                  {formError}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={formLoading}
+                className="w-full bg-blue-600 text-white rounded-xl py-4 text-xl font-bold hover:bg-blue-700 disabled:opacity-60 transition"
+              >
+                {formLoading ? "Registering…" : eventHasRequiredForm && mainTicketCount > 0 ? "Next — Fill in Form" : "Register"}
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* ── Event Form Screen ──────────────────────────────────────── */}
+      {screen === "eventform" && selectedEvent?.form && (
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg p-8">
+            <div className="text-center mb-6">
+              <p className="text-sm text-gray-500 uppercase tracking-wide font-medium">{selectedEvent.title}</p>
+              <h2 className="text-2xl font-bold text-gray-900 mt-1">Attendee Information</h2>
+              {mainTicketCount > 1 && (
+                <div className="mt-3">
+                  <p className="text-base font-semibold text-blue-700">
+                    Attendee {currentTicketIndex + 1} of {mainTicketCount}
+                  </p>
+                  <div className="flex gap-1.5 justify-center mt-2">
+                    {Array.from({ length: mainTicketCount }).map((_, i) => (
+                      <div
+                        key={i}
+                        className={`h-2 rounded-full transition-all ${
+                          i < currentTicketIndex
+                            ? "w-6 bg-green-500"
+                            : i === currentTicketIndex
+                            ? "w-6 bg-blue-600"
+                            : "w-6 bg-gray-200"
+                        }`}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+              {mainTicketCount <= 1 && (
+                <p className="text-sm text-gray-500 mt-1">This form is required to complete your registration.</p>
+              )}
+            </div>
+
+            <form onSubmit={handleFormSubmit} className="space-y-5">
+              {answerableFields.map((field) => (
+                <div key={field.id}>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {field.label}
+                    {field.isRequired && <span className="text-red-500 ml-1">*</span>}
+                  </label>
+                  {field.helpText && (
+                    <p className="text-xs text-gray-500 mb-1">{field.helpText}</p>
+                  )}
+                  {field.type === "yes_no" ? (
+                    <div className="flex gap-4">
+                      {["Yes", "No"].map((opt) => (
+                        <label key={opt} className="flex items-center gap-2 cursor-pointer">
+                          <input
+                            type="radio"
+                            name={field.id}
+                            value={opt}
+                            checked={currentTicketAnswers[field.id] === opt}
+                            onChange={() => setCurrentTicketAnswers(a => ({ ...a, [field.id]: opt }))}
+                            required={field.isRequired && !currentTicketAnswers[field.id]}
+                            className="accent-blue-600"
+                          />
+                          <span className="text-base">{opt}</span>
+                        </label>
+                      ))}
+                    </div>
+                  ) : field.type === "numeric" ? (
+                    <input
+                      type="number"
+                      value={currentTicketAnswers[field.id] || ""}
+                      onChange={e => setCurrentTicketAnswers(a => ({ ...a, [field.id]: e.target.value }))}
+                      required={field.isRequired}
+                      className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  ) : field.type === "date" ? (
+                    <input
+                      type="date"
+                      value={currentTicketAnswers[field.id] || ""}
+                      onChange={e => setCurrentTicketAnswers(a => ({ ...a, [field.id]: e.target.value }))}
+                      required={field.isRequired}
+                      className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  ) : field.type === "paragraph" ? (
+                    <textarea
+                      value={currentTicketAnswers[field.id] || ""}
+                      onChange={e => setCurrentTicketAnswers(a => ({ ...a, [field.id]: e.target.value }))}
+                      required={field.isRequired}
+                      rows={3}
+                      className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+                    />
+                  ) : (
+                    <input
+                      type="text"
+                      value={currentTicketAnswers[field.id] || ""}
+                      onChange={e => setCurrentTicketAnswers(a => ({ ...a, [field.id]: e.target.value }))}
+                      required={field.isRequired}
+                      className="w-full border border-gray-300 rounded-xl px-4 py-3 text-base focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                  )}
+                </div>
+              ))}
+
+              {formSubmitError && (
+                <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-red-700 text-sm">
+                  {formSubmitError}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={formSubmitLoading}
+                className="w-full bg-blue-600 text-white rounded-xl py-4 text-xl font-bold hover:bg-blue-700 disabled:opacity-60 transition"
+              >
+                {formSubmitLoading
+                  ? "Submitting…"
+                  : currentTicketIndex < mainTicketCount - 1
+                  ? `Next — Attendee ${currentTicketIndex + 2} of ${mainTicketCount}`
+                  : "Complete Registration"}
+              </button>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* ── Confirmation Screen ────────────────────────────────────── */}
+      {screen === "confirmation" && (
+        <div className="flex-1 flex items-center justify-center p-6">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-10 text-center">
+            <div className="mx-auto mb-6 w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
+              <svg className="w-10 h-10 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+
+            <h2 className="text-3xl font-bold text-gray-900 mb-2">You&apos;re Registered!</h2>
+            {confirmationName && (
+              <p className="text-lg text-gray-600 mb-3">Welcome, <span className="font-semibold">{confirmationName}</span>!</p>
+            )}
+            {selectedEvent && (
+              <p className="text-blue-700 font-medium mb-4">{selectedEvent.title}</p>
+            )}
+
+            {registrationIsFree ? (
+              <div className="bg-green-50 border border-green-200 rounded-xl px-4 py-3 text-green-800 text-sm mb-5">
+                <p className="font-semibold">
+                  {notificationPref === "whatsapp"
+                    ? "Your tickets have been sent to your WhatsApp."
+                    : notificationPref === "both"
+                    ? "Your tickets have been sent via email and WhatsApp."
+                    : "Your tickets have been emailed to you."}
+                </p>
+              </div>
+            ) : (
+              <div className="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 text-blue-800 text-sm mb-5 text-left">
+                <p className="font-semibold mb-1">
+                  {notificationPref === "whatsapp"
+                    ? "Payment instructions have been sent to your WhatsApp."
+                    : notificationPref === "both"
+                    ? "Payment instructions have been sent via email and WhatsApp."
+                    : "Payment instructions have been emailed to you."}
+                </p>
+                <p className="text-blue-700">Payment can also be made at the door — cash and card accepted.</p>
+              </div>
+            )}
+
+            <div className="mb-6">
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full border-4 border-blue-200 bg-blue-50 text-2xl font-bold text-blue-700">
+                {countdown}
+              </div>
+              <p className="text-sm text-gray-500 mt-2">Returning to registration in {countdown}s</p>
+            </div>
+
+            <button
+              onClick={resetAndGoToForm}
+              className="w-full bg-blue-600 text-white rounded-xl py-4 text-xl font-bold hover:bg-blue-700 transition"
+            >
+              OK — Next Person
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/set-banner/page.tsx b/frontend/src/app/set-banner/page.tsx
new file mode 100644
index 0000000..09a55f4
--- /dev/null
+++ b/frontend/src/app/set-banner/page.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+type BannerType = "info" | "warning" | "success" | "danger";
+
+const TYPE_LABELS: Record<BannerType, string> = {
+  info:    "Info (blue)",
+  warning: "Warning (amber)",
+  success: "Success (green)",
+  danger:  "Danger (red)",
+};
+
+export default function SetBannerPage() {
+  const { user, token, loading } = useAuth();
+  const router = useRouter();
+
+  const [message, setMessage] = useState("");
+  const [type, setType] = useState<BannerType>("info");
+  const [liveFrom, setLiveFrom] = useState("");
+  const [liveTill, setLiveTill] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) { router.replace("/login"); return; }
+    if (user.role !== "admin" && user.role !== "supervisor") {
+      router.replace("/dashboard");
+    }
+  }, [user, loading, router]);
+
+  // Load current banner
+  useEffect(() => {
+    apiFetch<any>("/api/banner")
+      .then(b => {
+        if (!b) return;
+        setMessage(b.message || "");
+        setType(b.type || "info");
+        // Convert ISO strings back to datetime-local format
+        setLiveFrom(b.liveFrom ? toLocalInput(b.liveFrom) : "");
+        setLiveTill(b.liveTill ? toLocalInput(b.liveTill) : "");
+      })
+      .catch(() => {});
+  }, []);
+
+  function toLocalInput(iso: string) {
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return "";
+    // datetime-local wants "YYYY-MM-DDTHH:MM"
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!token) return;
+    setError(null);
+    setStatus(null);
+    setBusy(true);
+    try {
+      await apiFetch("/api/banner", {
+        method: "POST",
+        authToken: token,
+        body: {
+          message,
+          type,
+          liveFrom: liveFrom ? new Date(liveFrom).toISOString() : null,
+          liveTill: liveTill ? new Date(liveTill).toISOString() : null,
+        },
+      });
+      setStatus("Banner saved.");
+    } catch (e: any) {
+      setError(e?.message || "Failed to save banner.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const clear = async () => {
+    if (!token) return;
+    setError(null);
+    setStatus(null);
+    setBusy(true);
+    try {
+      await apiFetch("/api/banner", {
+        method: "POST",
+        authToken: token,
+        body: { message: "", type: "info", liveFrom: null, liveTill: null },
+      });
+      setMessage("");
+      setType("info");
+      setLiveFrom("");
+      setLiveTill("");
+      setStatus("Banner cleared.");
+    } catch (e: any) {
+      setError(e?.message || "Failed to clear banner.");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-start justify-center px-4 py-12">
+      <div className="w-full max-w-lg border rounded-xl bg-white shadow-sm p-6">
+        <h1 className="text-xl font-semibold mb-1">Site Banner</h1>
+        <p className="text-sm text-gray-500 mb-6">Set a message that appears at the top of every page for visitors within the scheduled window.</p>
+
+        <form onSubmit={submit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Message</label>
+            <input
+              className="w-full border rounded px-3 py-2 text-sm"
+              placeholder="e.g. Registration for Camp 2026 is now open!"
+              value={message}
+              onChange={e => setMessage(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-1">Type</label>
+            <select className="w-full border rounded px-3 py-2 text-sm" value={type} onChange={e => setType(e.target.value as BannerType)}>
+              {(Object.keys(TYPE_LABELS) as BannerType[]).map(t => (
+                <option key={t} value={t}>{TYPE_LABELS[t]}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Live from</label>
+              <input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveFrom} onChange={e => setLiveFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Live until</label>
+              <input type="datetime-local" className="w-full border rounded px-3 py-2 text-sm" value={liveTill} onChange={e => setLiveTill(e.target.value)} />
+            </div>
+          </div>
+
+          <p className="text-xs text-gray-500">Leave dates empty to show the banner immediately with no end date. Times use your local timezone.</p>
+
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          {status && <p className="text-sm text-emerald-700">{status}</p>}
+
+          <div className="flex gap-3 pt-1">
+            <button type="submit" disabled={busy} className="px-4 py-2 rounded bg-indigo-600 text-white text-sm disabled:opacity-60 hover:bg-indigo-700">
+              {busy ? "Saving…" : "Save banner"}
+            </button>
+            <button type="button" onClick={clear} disabled={busy} className="px-4 py-2 rounded bg-gray-100 text-gray-700 text-sm disabled:opacity-60 hover:bg-gray-200">
+              Clear banner
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/setup/page.tsx b/frontend/src/app/setup/page.tsx
new file mode 100644
index 0000000..9cc374e
--- /dev/null
+++ b/frontend/src/app/setup/page.tsx
@@ -0,0 +1,531 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { apiFetch, API_BASE } from "@/lib/api";
+
+type Step = 1 | 2 | 3 | 4 | 5 | 6;
+
+const TOTAL_STEPS = 5; // steps 1-5; step 6 is the done screen
+
+function ProgressBar({ step }: { step: Step }) {
+  return (
+    <div className="flex items-center gap-1 mb-8">
+      {Array.from({ length: TOTAL_STEPS }, (_, i) => i + 1).map((s) => (
+        <React.Fragment key={s}>
+          <div
+            className={`h-2 flex-1 rounded-full transition-colors ${
+              s < step ? "bg-indigo-600" : s === step ? "bg-indigo-400" : "bg-gray-200"
+            }`}
+          />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function Field({
+  label, required, hint, children,
+}: {
+  label: string; required?: boolean; hint?: string; children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-700 mb-1">
+        {label} {required && <span className="text-red-500">*</span>}
+      </label>
+      {children}
+      {hint && <p className="text-xs text-gray-400 mt-1">{hint}</p>}
+    </div>
+  );
+}
+
+const inputCls = "w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400";
+
+export default function SetupPage() {
+  const router = useRouter();
+  const [step, setStep] = useState<Step>(1);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [setupToken, setSetupToken] = useState<string | null>(null);
+
+  // SMTP test state
+  const [smtpTesting, setSmtpTesting] = useState(false);
+  const [smtpTestResult, setSmtpTestResult] = useState<{ ok: boolean; message: string } | null>(null);
+
+  // Step 1 — Organisation
+  const [orgName, setOrgName] = useState("");
+  const [orgTagline, setOrgTagline] = useState("");
+  const [orgEmail, setOrgEmail] = useState("");
+  const [orgPhone, setOrgPhone] = useState("");
+  const [orgAddress, setOrgAddress] = useState("");
+  const [appBaseUrl, setAppBaseUrl] = useState("");
+
+  // Step 2 — Admin account
+  const [adminName, setAdminName] = useState("");
+  const [adminEmail, setAdminEmail] = useState("");
+  const [adminPassword, setAdminPassword] = useState("");
+  const [adminConfirm, setAdminConfirm] = useState("");
+
+  // Step 3 — Branding
+  const [accentColor, setAccentColor] = useState("#2563eb");
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoPreview, setLogoPreview] = useState<string | null>(null);
+  const [notifEmail, setNotifEmail] = useState("");
+
+  // Step 4 — Legal
+  const [legalOperatorName, setLegalOperatorName] = useState("");
+  const [legalWebsiteUrl, setLegalWebsiteUrl] = useState("");
+  const [legalEffectiveDate, setLegalEffectiveDate] = useState("");
+  const [legalIoName, setLegalIoName] = useState("");
+  const [legalIoEmail, setLegalIoEmail] = useState("");
+
+  // Step 5 — Email / SMTP (skippable)
+  const [smtpHost, setSmtpHost] = useState("");
+  const [smtpPort, setSmtpPort] = useState("587");
+  const [smtpSecure, setSmtpSecure] = useState(false);
+  const [smtpFrom, setSmtpFrom] = useState("");
+  const [smtpUser, setSmtpUser] = useState("");
+  const [smtpPass, setSmtpPass] = useState("");
+
+  // Check setup isn't already done
+  useEffect(() => {
+    apiFetch<{ needsSetup: boolean }>("/api/settings/needs-setup")
+      .then((d) => { if (!d?.needsSetup) router.replace("/login"); })
+      .catch(() => {});
+  }, []);
+
+  const next = () => setStep((s) => Math.min(s + 1, 6) as Step);
+  const back = () => { setError(null); setStep((s) => Math.max(s - 1, 1) as Step); };
+
+  const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setLogoFile(file);
+    setLogoPreview(URL.createObjectURL(file));
+  };
+
+  // ── Step validators ───────────────────────────────────────────────────────
+
+  const handleStep1 = (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!orgName.trim()) { setError("Organisation name is required."); return; }
+    next();
+  };
+
+  const handleStep2 = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (!adminName.trim()) { setError("Your name is required."); return; }
+    if (!adminEmail.trim()) { setError("Email is required."); return; }
+    if (adminPassword.length < 8) { setError("Password must be at least 8 characters."); return; }
+    if (adminPassword !== adminConfirm) { setError("Passwords do not match."); return; }
+    setLoading(true);
+    try {
+      const res = await apiFetch<{ token: string }>("/api/setup/register", {
+        method: "POST",
+        body: { adminName, adminEmail, adminPassword },
+      });
+      setSetupToken(res.token);
+      next();
+    } catch (e: any) {
+      setError(e?.message || "Failed to create admin account. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleStep3 = (e: React.FormEvent) => { e.preventDefault(); setError(null); next(); };
+  const handleStep4 = (e: React.FormEvent) => { e.preventDefault(); setError(null); next(); };
+
+  // ── SMTP connection test ──────────────────────────────────────────────────
+
+  const handleTestSmtp = async () => {
+    setSmtpTesting(true);
+    setSmtpTestResult(null);
+    try {
+      const res = await apiFetch<{ ok: boolean; message?: string }>("/api/settings/test-smtp", {
+        method: "POST",
+        authToken: setupToken,
+        body: {
+          host: smtpHost.trim(),
+          port: smtpPort.trim(),
+          secure: smtpSecure,
+          from: smtpFrom.trim() || undefined,
+          user: smtpUser.trim() || undefined,
+          pass: smtpPass || undefined,
+        },
+      });
+      setSmtpTestResult({ ok: true, message: res.message || "Connection successful." });
+    } catch (e: any) {
+      setSmtpTestResult({ ok: false, message: e?.message || "Connection failed." });
+    } finally {
+      setSmtpTesting(false);
+    }
+  };
+
+  // ── Finish (called from step 5 or skip) ──────────────────────────────────
+
+  const handleFinish = async (skipSmtp = false) => {
+    setError(null);
+    setLoading(true);
+    try {
+      let logoUrl = "";
+      if (logoFile) {
+        const fd = new FormData();
+        fd.append("image", logoFile);
+        const uploadRes = await fetch(`${API_BASE}/api/uploads/logo`, { method: "POST", body: fd });
+        if (uploadRes.ok) {
+          const up = await uploadRes.json();
+          logoUrl = up.url || "";
+        }
+      }
+
+      const settings: Record<string, string> = {
+        org_name: orgName.trim(),
+        accent_color: accentColor,
+      };
+      if (orgTagline.trim())       settings.org_tagline              = orgTagline.trim();
+      if (orgEmail.trim())         settings.org_email                = orgEmail.trim();
+      if (orgPhone.trim())         settings.org_phone                = orgPhone.trim();
+      if (orgAddress.trim())       settings.org_address              = orgAddress.trim();
+      if (appBaseUrl.trim())       settings.app_base_url             = appBaseUrl.trim();
+      if (notifEmail.trim())       settings.reg_notification_emails  = notifEmail.trim();
+      if (logoUrl)                 settings.logo_url                 = logoUrl;
+      // Legal
+      if (legalOperatorName.trim()) settings.legal_operator_name    = legalOperatorName.trim();
+      if (legalWebsiteUrl.trim())   settings.legal_website_url      = legalWebsiteUrl.trim();
+      if (legalEffectiveDate.trim()) settings.legal_effective_date  = legalEffectiveDate.trim();
+      if (legalIoName.trim())       settings.legal_io_name          = legalIoName.trim();
+      if (legalIoEmail.trim())      settings.legal_io_email         = legalIoEmail.trim();
+      // SMTP (only if not skipped and host provided)
+      if (!skipSmtp && smtpHost.trim()) {
+        settings.smtp_host   = smtpHost.trim();
+        settings.smtp_port   = smtpPort.trim();
+        settings.smtp_secure = smtpSecure ? "true" : "false";
+        if (smtpFrom.trim()) settings.smtp_from = smtpFrom.trim();
+        if (smtpUser.trim()) settings.smtp_user = smtpUser.trim();
+        if (smtpPass.trim()) settings.smtp_pass = smtpPass.trim();
+      }
+
+      await apiFetch("/api/setup", {
+        method: "POST",
+        authToken: setupToken,
+        body: { settings },
+      });
+
+      next(); // → step 6 (done)
+    } catch (e: any) {
+      setError(e?.message || "Setup failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-100 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-lg w-full max-w-lg p-8">
+
+        {/* Heading */}
+        <div className="text-center mb-6">
+          <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-indigo-100 mb-3">
+            <svg className="w-7 h-7 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900">Welcome</h1>
+          <p className="text-sm text-gray-500 mt-1">Let&apos;s set up your events platform</p>
+        </div>
+
+        {step < 6 && <ProgressBar step={step} />}
+
+        {error && (
+          <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">
+            {error}
+          </div>
+        )}
+
+        {/* ── Step 1: Organisation ──────────────────────────── */}
+        {step === 1 && (
+          <form onSubmit={handleStep1} className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Organisation details</h2>
+              <p className="text-sm text-gray-500">These appear throughout the site and in emails.</p>
+            </div>
+
+            <Field label="Organisation name" required>
+              <input className={inputCls} placeholder="e.g. Hope Family Church"
+                value={orgName} onChange={e => setOrgName(e.target.value)} autoFocus />
+            </Field>
+            <Field label="Tagline">
+              <input className={inputCls} placeholder="e.g. Connecting community through events"
+                value={orgTagline} onChange={e => setOrgTagline(e.target.value)} />
+            </Field>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <Field label="Contact email">
+                <input type="email" className={inputCls} placeholder="admin@yourchurch.org"
+                  value={orgEmail} onChange={e => setOrgEmail(e.target.value)} />
+              </Field>
+              <Field label="Phone number">
+                <input className={inputCls} placeholder="+27 12 345 6789"
+                  value={orgPhone} onChange={e => setOrgPhone(e.target.value)} />
+              </Field>
+            </div>
+            <Field label="Address">
+              <input className={inputCls} placeholder="123 Church St, City"
+                value={orgAddress} onChange={e => setOrgAddress(e.target.value)} />
+            </Field>
+            <Field label="Site URL" hint="The public URL of this site — used in email links. e.g. https://events.yourchurch.org">
+              <input className={inputCls} placeholder="https://events.yourchurch.org"
+                value={appBaseUrl} onChange={e => setAppBaseUrl(e.target.value)} />
+            </Field>
+
+            <div className="pt-2 flex justify-end">
+              <button type="submit" className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">
+                Next →
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* ── Step 2: Admin account ─────────────────────────── */}
+        {step === 2 && (
+          <form onSubmit={handleStep2} className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Create admin account</h2>
+              <p className="text-sm text-gray-500">Your primary administrator login.</p>
+            </div>
+
+            <Field label="Full name" required>
+              <input className={inputCls} placeholder="Your name"
+                value={adminName} onChange={e => setAdminName(e.target.value)} autoFocus />
+            </Field>
+            <Field label="Email address" required>
+              <input type="email" className={inputCls} placeholder="admin@yourchurch.org"
+                value={adminEmail} onChange={e => setAdminEmail(e.target.value)} />
+            </Field>
+            <Field label="Password" required>
+              <input type="password" className={inputCls} placeholder="Minimum 8 characters"
+                value={adminPassword} onChange={e => setAdminPassword(e.target.value)} />
+            </Field>
+            <Field label="Confirm password" required>
+              <input type="password" className={inputCls} placeholder="Repeat password"
+                value={adminConfirm} onChange={e => setAdminConfirm(e.target.value)} />
+            </Field>
+
+            <div className="pt-2 flex justify-between">
+              <button type="button" onClick={back} className="px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100">← Back</button>
+              <button type="submit" disabled={loading} className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium">
+                {loading ? "Creating account…" : "Next →"}
+              </button>
+            </div>
+          </form>
+        )}
+
+        {/* ── Step 3: Branding ─────────────────────────────── */}
+        {step === 3 && (
+          <form onSubmit={handleStep3} className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Branding &amp; notifications</h2>
+              <p className="text-sm text-gray-500">Customise the look of your site. You can change this later.</p>
+            </div>
+
+            <Field label="Accent / brand colour">
+              <div className="flex items-center gap-3">
+                <input type="color" className="h-10 w-20 border rounded cursor-pointer"
+                  value={accentColor} onChange={e => setAccentColor(e.target.value)} />
+                <input className={`${inputCls} font-mono`} value={accentColor}
+                  onChange={e => setAccentColor(e.target.value)} placeholder="#2563eb" />
+              </div>
+              <div className="mt-2 h-8 rounded-lg" style={{ background: accentColor }} />
+            </Field>
+
+            <Field label="Logo image (optional)" hint="PNG, JPG, SVG or WebP, max 2 MB. If skipped, a default logo is used.">
+              <input type="file" accept="image/*" onChange={handleLogoChange} className="text-sm" />
+              {logoPreview && (
+                <img src={logoPreview} alt="Preview" className="mt-2 h-16 object-contain rounded border" />
+              )}
+            </Field>
+
+            <Field label="Registration notification email"
+              hint="Who to notify when someone registers for an event. Separate multiple addresses with commas.">
+              <input type="email" className={inputCls} placeholder="registrations@yourchurch.org"
+                value={notifEmail} onChange={e => setNotifEmail(e.target.value)} />
+            </Field>
+
+            <div className="pt-2 flex justify-between">
+              <button type="button" onClick={back} className="px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100">← Back</button>
+              <button type="submit" className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">Next →</button>
+            </div>
+          </form>
+        )}
+
+        {/* ── Step 4: Legal ─────────────────────────────────── */}
+        {step === 4 && (
+          <form onSubmit={handleStep4} className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Legal pages</h2>
+              <p className="text-sm text-gray-500">
+                These values populate your Terms of Use and Privacy Policy. All fields are optional
+                — you can fill them in later under Admin → Site Settings.
+              </p>
+            </div>
+
+            <Field label="Operator / responsible party"
+              hint='Shown in "Owned and operated by" on the Terms of Use page.'>
+              <input className={inputCls}
+                placeholder="Jane Smith on behalf of Example Church, City, South Africa"
+                value={legalOperatorName} onChange={e => setLegalOperatorName(e.target.value)} />
+            </Field>
+            <Field label="Website URL (without https://)"
+              hint="e.g. events.yourchurch.org">
+              <input className={inputCls} placeholder="events.yourchurch.org"
+                value={legalWebsiteUrl} onChange={e => setLegalWebsiteUrl(e.target.value)} />
+            </Field>
+            <Field label="Effective date" hint='e.g. "April 2026" or "1 April 2026"'>
+              <input className={inputCls} placeholder="April 2026"
+                value={legalEffectiveDate} onChange={e => setLegalEffectiveDate(e.target.value)} />
+            </Field>
+
+            <div className="border-t pt-4">
+              <p className="text-sm font-medium text-gray-700 mb-3">Information Officer (POPIA)</p>
+              <div className="grid sm:grid-cols-2 gap-4">
+                <Field label="Full name">
+                  <input className={inputCls} placeholder="Jane Smith"
+                    value={legalIoName} onChange={e => setLegalIoName(e.target.value)} />
+                </Field>
+                <Field label="Email">
+                  <input type="email" className={inputCls} placeholder="io@yourchurch.org"
+                    value={legalIoEmail} onChange={e => setLegalIoEmail(e.target.value)} />
+                </Field>
+              </div>
+            </div>
+
+            <div className="pt-2 flex justify-between">
+              <button type="button" onClick={back} className="px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100">← Back</button>
+              <button type="submit" className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">Next →</button>
+            </div>
+          </form>
+        )}
+
+        {/* ── Step 5: Email / SMTP (skippable) ─────────────── */}
+        {step === 5 && (
+          <div className="space-y-4">
+            <div>
+              <h2 className="text-lg font-semibold">Email delivery</h2>
+              <p className="text-sm text-gray-500">
+                Configure outgoing email so tickets, payment confirmations, and account
+                notifications get delivered. <span className="font-medium text-gray-700">You can skip this and configure it later</span> under
+                Admin → Site Settings (where you can also test the connection).
+              </p>
+            </div>
+
+            <div className="grid sm:grid-cols-2 gap-4">
+              <Field label="SMTP host">
+                <input className={inputCls} placeholder="smtp.yourprovider.com"
+                  value={smtpHost} onChange={e => setSmtpHost(e.target.value)} autoFocus />
+              </Field>
+              <Field label="Port">
+                <input type="number" className={inputCls} placeholder="587"
+                  value={smtpPort} onChange={e => setSmtpPort(e.target.value)} />
+              </Field>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <input type="checkbox" id="smtpSecure" checked={smtpSecure}
+                onChange={e => setSmtpSecure(e.target.checked)} className="rounded" />
+              <label htmlFor="smtpSecure" className="text-sm text-gray-700">Use TLS/SSL (port 465)</label>
+            </div>
+
+            <Field label="From address" hint="The address emails appear to come from.">
+              <input type="email" className={inputCls} placeholder="no-reply@yourchurch.org"
+                value={smtpFrom} onChange={e => setSmtpFrom(e.target.value)} />
+            </Field>
+
+            <div className="grid sm:grid-cols-2 gap-4">
+              <Field label="SMTP username">
+                <input type="email" className={inputCls} placeholder="mail@yourchurch.org"
+                  value={smtpUser} onChange={e => setSmtpUser(e.target.value)} autoComplete="username" />
+              </Field>
+              <Field label="SMTP password" hint="Stored encrypted.">
+                <input type="password" className={inputCls} placeholder="Password"
+                  value={smtpPass} onChange={e => setSmtpPass(e.target.value)} autoComplete="new-password" />
+              </Field>
+            </div>
+
+            {smtpHost.trim() && (
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  disabled={smtpTesting}
+                  onClick={handleTestSmtp}
+                  className="px-4 py-2 rounded-lg text-sm border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+                >
+                  {smtpTesting ? "Testing…" : "Test connection"}
+                </button>
+                {smtpTestResult && (
+                  <span className={`text-sm ${smtpTestResult.ok ? "text-green-600" : "text-red-600"}`}>
+                    {smtpTestResult.ok ? "✓ " : "✗ "}{smtpTestResult.message}
+                  </span>
+                )}
+              </div>
+            )}
+
+            <div className="pt-2 flex justify-between items-center flex-wrap gap-2">
+              <button type="button" onClick={back} className="px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100">← Back</button>
+              <div className="flex items-center gap-3">
+                <button
+                  type="button"
+                  disabled={loading}
+                  onClick={() => handleFinish(true)}
+                  className="px-4 py-2 rounded-lg text-sm text-gray-500 hover:bg-gray-100 disabled:opacity-50"
+                >
+                  Skip for now
+                </button>
+                <button
+                  type="button"
+                  disabled={loading}
+                  onClick={() => handleFinish(false)}
+                  className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
+                >
+                  {loading ? "Setting up…" : "Finish setup"}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── Step 6: Done ─────────────────────────────────── */}
+        {step === 6 && (
+          <div className="text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-2">
+              <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h2 className="text-xl font-bold text-gray-900">You&apos;re all set!</h2>
+            <p className="text-sm text-gray-500">
+              {orgName || "Your organisation"}&apos;s events platform is ready. Log in with the admin account you just created.
+            </p>
+            {!smtpHost && (
+              <p className="text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+                Email delivery is not configured yet. Set it up under Admin → Site Settings after logging in.
+              </p>
+            )}
+            <button
+              onClick={() => router.push("/login")}
+              className="mt-4 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium"
+            >
+              Go to login
+            </button>
+          </div>
+        )}
+
+        {step < 6 && (
+          <p className="text-center text-xs text-gray-400 mt-6">Step {step} of {TOTAL_STEPS}</p>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/auth/ChangePasswordForm.tsx b/frontend/src/components/auth/ChangePasswordForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/auth/ForgotPasswordForm.tsx b/frontend/src/components/auth/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..d1774c2
--- /dev/null
+++ b/frontend/src/components/auth/LoginForm.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import React, { useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+
+export function LoginForm() {
+  const { login } = useAuth();
+  const searchParams = useSearchParams();
+  const raw = searchParams.get("redirect") || "";
+  const hasExplicitRedirect = raw.startsWith("/") && !raw.startsWith("//");
+  const redirectTo = hasExplicitRedirect ? raw : "/dashboard";
+  const registerHref = redirectTo !== "/dashboard" ? `/register?redirect=${encodeURIComponent(redirectTo)}` : "/register";
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const getErrorMessage = (err: any) => {
+    if (!err) return "Login failed";
+
+    // If it's already a normal Error
+    if (err.message && typeof err.message === "string") {
+      // Handle case where message is accidentally JSON string
+      try {
+        const parsed = JSON.parse(err.message);
+        return parsed.message || err.message;
+      } catch {
+        return err.message;
+      }
+    }
+
+    // If API response object was thrown directly
+    if (err.message) return err.message;
+
+    return "Login failed";
+  };
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const loggedInUser = await login(email, password);
+      // Skip the generic /dashboard hop (which just redirects again once the role is known)
+      // and go straight to the role-specific dashboard, unless the caller asked for a specific
+      // page back (e.g. returning to a registration flow after login).
+      const target = hasExplicitRedirect ? redirectTo : `/dashboard/${loggedInUser.role || "user"}`;
+      window.location.href = target;
+    } catch (err: any) {
+      setError(getErrorMessage(err) || "Login failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+      <form onSubmit={onSubmit} className="space-y-4 max-w-sm w-full">
+        <div>
+          <label className="block text-sm font-medium mb-1">Email or phone</label>
+          <input
+              type="text"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full border rounded px-3 py-2"
+              required
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium mb-1">Password</label>
+          <div className="relative">
+            <input
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full border rounded px-3 py-2 pr-20"
+                required
+            />
+            <button
+                type="button"
+                onClick={() => setShowPassword((s) => !s)}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-sm text-blue-600"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+            >
+              {showPassword ? "Hide" : "Show"}
+            </button>
+          </div>
+          <div className="mt-1">
+            <a
+                href="/forgot-password"
+                className="text-xs text-blue-600 hover:underline"
+            >
+              Forgot your password?
+            </a>
+          </div>
+          <div className="mt-1">
+            <a
+                href={registerHref}
+                className="text-xs text-blue-600 hover:underline"
+            >
+              Don't have an account? Sign up here.
+            </a>
+          </div>
+        </div>
+
+        {error && (
+          <div className="text-sm text-red-600">
+            <p>{error}</p>
+            {error.toLowerCase().includes('not yet active') && (
+              <p className="mt-1 text-gray-600">Check your inbox for an activation email. If you didn&apos;t receive it, try logging in again to resend it.</p>
+            )}
+          </div>
+        )}
+
+        <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-blue-600 text-white rounded py-2 disabled:opacity-60"
+        >
+          {loading ? "Logging in..." : "Login"}
+        </button>
+
+        <p className="text-xs text-gray-500 text-center mt-3">
+          By signing in, you acknowledge that you’ve read and agree to our{" "}
+          <Link
+              href="/legal/terms"
+              target="_blank"
+              className="text-blue-600 hover:underline"
+          >
+            Terms of Use
+          </Link>{" "}
+          and{" "}
+          <Link
+              href="/legal/privacy"
+              target="_blank"
+              className="text-blue-600 hover:underline"
+          >
+            Privacy Policy
+          </Link>.
+        </p>
+      </form>
+  );
+}
diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
new file mode 100644
index 0000000..2b6d12c
--- /dev/null
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import React, { useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import { isValidZAPhone } from "@/lib/phone";
+
+export function RegisterForm() {
+    const { register } = useAuth();
+    const searchParams = useSearchParams();
+    const raw = searchParams.get("redirect") || "";
+    const redirectTo = raw.startsWith("/") && !raw.startsWith("//") ? raw : "/dashboard";
+    const loginHref = redirectTo !== "/dashboard" ? `/login?redirect=${encodeURIComponent(redirectTo)}` : "/login";
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [notificationPreference, setNotificationPreference] = useState<"email" | "whatsapp" | "both">("email");
+    const [accepted, setAccepted] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const hasValidPhone = isValidZAPhone(phoneNumber);
+
+    const getErrorMessage = (err: any) => {
+        if (!err) return "Login failed";
+
+        // If it's already a normal Error
+        if (err.message && typeof err.message === "string") {
+            // Handle case where message is accidentally JSON string
+            try {
+                const parsed = JSON.parse(err.message);
+                return parsed.message || err.message;
+            } catch {
+                return err.message;
+            }
+        }
+
+        // If API response object was thrown directly
+        if (err.message) return err.message;
+
+        return "Registration failed. Please try again.";
+    };
+
+    const onSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!accepted) {
+            setError("Please accept the Terms of Use and Privacy Policy before continuing.");
+            return;
+        }
+
+        setError(null);
+        setLoading(true);
+
+        try {
+            await register({
+                name,
+                email,
+                password,
+                phoneNumber: phoneNumber || undefined,
+                notificationPreference: hasValidPhone ? notificationPreference : "email",
+            });
+            window.location.href = redirectTo;
+        } catch (err: any) {
+            setError(getErrorMessage(err) || "Registration failed. Please try again.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <form onSubmit={onSubmit} className="space-y-4 max-w-sm w-full">
+            <div>
+                <label className="block text-sm font-medium mb-1">Full Name</label>
+                <input
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="w-full border rounded px-3 py-2"
+                    required
+                />
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full border rounded px-3 py-2"
+                    required
+                />
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium mb-1">Password</label>
+                <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full border rounded px-3 py-2"
+                    required
+                />
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium mb-1">Phone Number (optional)</label>
+                <input
+                    value={phoneNumber}
+                    onChange={(e) => setPhoneNumber(e.target.value)}
+                    placeholder="e.g. 082 123 4567"
+                    className="w-full border rounded px-3 py-2"
+                />
+            </div>
+
+            {hasValidPhone && (
+                <div>
+                    <label className="block text-sm font-medium mb-1">Notification Preference</label>
+                    <select
+                        value={notificationPreference}
+                        onChange={(e) => setNotificationPreference(e.target.value as "email" | "whatsapp" | "both")}
+                        className="w-full border rounded px-3 py-2"
+                    >
+                        <option value="email">Email only</option>
+                        <option value="whatsapp">WhatsApp only</option>
+                        <option value="both">Email &amp; WhatsApp</option>
+                    </select>
+                </div>
+            )}
+
+            <div className="flex items-start gap-2">
+                <input
+                    id="terms"
+                    type="checkbox"
+                    checked={accepted}
+                    onChange={(e) => setAccepted(e.target.checked)}
+                    className="mt-1 h-4 w-4 border-gray-300 rounded accent-blue-600"
+                    required
+                />
+                <label htmlFor="terms" className="text-sm text-gray-700 leading-snug">
+                    I confirm that I’ve read and agree to the{" "}
+                    <Link
+                        href="/legal/terms"
+                        target="_blank"
+                        className="text-blue-600 hover:underline"
+                    >
+                        Terms of Use
+                    </Link>{" "}
+                    and{" "}
+                    <Link
+                        href="/legal/privacy"
+                        target="_blank"
+                        className="text-blue-600 hover:underline"
+                    >
+                        Privacy Policy
+                    </Link>.
+                </label>
+            </div>
+
+            <div className="mt-1">
+                <a
+                    href={loginHref}
+                    className="text-xs text-blue-600 hover:underline"
+                >
+                    Already have an account? Sign in here.
+                </a>
+            </div>
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+
+            <button
+                type="submit"
+                disabled={loading || !accepted}
+                className={`w-full rounded py-2 text-white transition ${
+                    accepted
+                        ? "bg-blue-600 hover:bg-blue-700"
+                        : "bg-gray-400 cursor-not-allowed"
+                }`}
+            >
+                {loading ? "Creating account..." : "Create account"}
+            </button>
+        </form>
+    );
+}
diff --git a/frontend/src/components/events/EventCard.tsx b/frontend/src/components/events/EventCard.tsx
new file mode 100644
index 0000000..107815a
--- /dev/null
+++ b/frontend/src/components/events/EventCard.tsx
@@ -0,0 +1,80 @@
+import { ApiImage } from "@/components/shared/ApiImage";
+
+ type Event = {
+   id: string;
+   title: string;
+   description?: string;
+   startDate: string;
+   endDate: string;
+   registrationDeadline?: string | null;
+   goLiveAt?: string;
+   price: number;
+   picture?: string;
+   isSoldOut?: boolean;
+};
+
+import { formatDateTimeRange } from "@/lib/date";
+
+export const EventCard = ({ event }: { event: Event }) => {
+    const dateRange = formatDateTimeRange(event.startDate, event.endDate);
+
+    return (
+        <div className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md transition">
+            <a href={`/events/${event.id}`} className="block">
+                <ApiImage src={event.picture} alt={event.title} className="h-48 w-full object-cover" />
+                <div className="p-4">
+                    <h3 className="text-lg font-semibold hover:underline">{event.title}</h3>
+                    <p className="text-sm text-gray-500">{dateRange}</p>
+                    <p className="text-sm text-gray-600 mt-2 line-clamp-2">{event.description}</p>
+                </div>
+            </a>
+            <div className="px-4 pb-4">
+                <div className="flex gap-2">
+                    <a
+                        href={`/events/${event.id}`}
+                        className="flex-1 text-center text-sm text-gray-700 border py-2 rounded hover:bg-gray-50"
+                    >
+                        View details
+                    </a>
+                    {(() => {
+                      const now = new Date();
+                      const end = new Date(event.endDate);
+                      const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+                      const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
+                      const notYetOpen = goLive ? now < goLive : false;
+                      const closed = (deadline ? now >= deadline : false) || now >= end;
+                      if (notYetOpen) {
+                        return (
+                          <button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 py-2 rounded cursor-not-allowed" title="Registration not yet open">
+                            Opens {goLive?.toLocaleString()}
+                          </button>
+                        );
+                      }
+                      if (closed) {
+                        return (
+                          <button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 py-2 rounded cursor-not-allowed" title="Registration closed">
+                            Registration closed
+                          </button>
+                        );
+                      }
+                      if (event.isSoldOut) {
+                        return (
+                          <button disabled className="flex-1 text-center text-sm text-red-700 bg-red-50 border border-red-200 py-2 rounded cursor-not-allowed">
+                            Sold Out
+                          </button>
+                        );
+                      }
+                      return (
+                        <a
+                          href={`/register/${event.id}`}
+                          className="flex-1 text-center text-sm text-white bg-blue-600 py-2 rounded hover:bg-blue-700"
+                        >
+                          Register{event.price > 0 ? ` - R${event.price.toFixed(2)}` : ""}
+                        </a>
+                      );
+                    })()}
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/frontend/src/components/events/EventForm.tsx b/frontend/src/components/events/EventForm.tsx
new file mode 100644
index 0000000..55d40b7
--- /dev/null
+++ b/frontend/src/components/events/EventForm.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch, resolveToApiOrigin } from "@/lib/api";
+import { Button } from "@/components/shared/Button";
+
+export function EventForm({ onCreated }: { onCreated?: () => void }) {
+  const { token } = useAuth();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [price, setPrice] = useState<number>(0);
+  const [picture, setPicture] = useState("");
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
+  const [requiresAuth, setRequiresAuth] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleImageFile(file: File) {
+    setUploadingImage(true);
+    setError(null);
+    try {
+      const fd = new FormData();
+      fd.append("image", file);
+      const data = await apiFetch<{ url: string }>("/api/uploads/event-image", {
+        method: "POST",
+        authToken: token,
+        body: fd,
+      });
+      setPicture(data.url);
+      setImagePreview(URL.createObjectURL(file));
+    } catch (e: any) {
+      setError(e?.message || "Image upload failed");
+    } finally {
+      setUploadingImage(false);
+    }
+  }
+
+  function clearImage() {
+    setImagePreview(null);
+    setPicture("");
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!token) { setError("Please login"); return; }
+    setLoading(true);
+    setError(null);
+    try {
+      await apiFetch("/api/events", {
+        method: "POST",
+        authToken: token,
+        body: { title, description, startDate, endDate, price, picture, isHidden, requiresAuth },
+      });
+      onCreated?.();
+      setTitle(""); setDescription(""); setStartDate(""); setEndDate(""); setPrice(0); setPicture(""); setImagePreview(null); setIsHidden(false); setRequiresAuth(true);
+    } catch (e: any) {
+      setError(e?.message || "Failed to create event");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const previewSrc = imagePreview || (picture ? resolveToApiOrigin(picture) : null);
+
+  return (
+    <form onSubmit={submit} className="space-y-3">
+      <div>
+        <label className="block text-sm font-medium">Title</label>
+        <input className="w-full border rounded px-3 py-2" value={title} onChange={(e) => setTitle(e.target.value)} required />
+      </div>
+      <div>
+        <label className="block text-sm font-medium">Description</label>
+        <textarea className="w-full border rounded px-3 py-2" value={description} onChange={(e) => setDescription(e.target.value)} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        <div>
+          <label className="block text-sm font-medium">Start</label>
+          <input type="datetime-local" className="w-full border rounded px-3 py-2" value={startDate} onChange={(e) => setStartDate(e.target.value)} required />
+        </div>
+        <div>
+          <label className="block text-sm font-medium">End</label>
+          <input type="datetime-local" className="w-full border rounded px-3 py-2" value={endDate} onChange={(e) => setEndDate(e.target.value)} required />
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium">Price (R)</label>
+        <input type="number" step="0.01" className="w-full border rounded px-3 py-2" value={price} onChange={(e) => setPrice(parseFloat(e.target.value))} />
+      </div>
+      <div>
+        <label className="block text-sm font-medium mb-1">Event image</label>
+        {previewSrc && (
+          <div className="relative inline-block mb-2">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={previewSrc} alt="Preview" className="h-32 object-cover rounded border" />
+            <button
+              type="button"
+              onClick={clearImage}
+              className="absolute top-1 right-1 bg-white text-red-500 hover:text-red-700 rounded px-1 text-xs shadow"
+            >✕</button>
+          </div>
+        )}
+        <div className="flex gap-2 items-center">
+          <label className={`cursor-pointer px-3 py-2 text-sm rounded border bg-gray-50 hover:bg-gray-100 ${uploadingImage ? "opacity-50 pointer-events-none" : ""}`}>
+            <input
+              type="file"
+              accept="image/*"
+              className="hidden"
+              disabled={uploadingImage}
+              onChange={e => {
+                const file = e.target.files?.[0];
+                if (file) handleImageFile(file);
+                e.target.value = "";
+              }}
+            />
+            {uploadingImage ? "Uploading…" : "Upload image"}
+          </label>
+          <span className="text-xs text-gray-400">or</span>
+          <input
+            className="flex-1 border rounded px-3 py-2 text-sm"
+            placeholder="https://…"
+            value={picture}
+            onChange={e => { setPicture(e.target.value); setImagePreview(null); }}
+          />
+        </div>
+      </div>
+      <div className="border rounded-lg p-3 bg-gray-50 space-y-2">
+        <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">Visibility &amp; Access</div>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={isHidden} onChange={e => setIsHidden(e.target.checked)} />
+          <span className="text-sm text-gray-700">
+            <span className="font-medium">Hidden event</span> — not shown in the public listing; accessible by direct link only
+          </span>
+        </label>
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input type="checkbox" checked={!requiresAuth} onChange={e => setRequiresAuth(!e.target.checked)} />
+          <span className="text-sm text-gray-700">
+            <span className="font-medium">Allow unauthenticated registration</span> — guests can register without creating an account
+          </span>
+        </label>
+      </div>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      <Button type="submit" loading={loading}>Create Event</Button>
+    </form>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/forms/FileUploader.tsx b/frontend/src/components/forms/FileUploader.tsx
new file mode 100644
index 0000000..5e28993
--- /dev/null
+++ b/frontend/src/components/forms/FileUploader.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+
+export function FileUploader({ onUploaded }: { onUploaded: (url: string) => void }) {
+  const { token } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  async function upload(file: File) {
+    if (!token) { setError("Please login"); return; }
+    setLoading(true);
+    setError(null);
+    try {
+      const fd = new FormData();
+      fd.append("image", file);
+      const data = await apiFetch<{ url: string }>(`/api/uploads/event-image`, {
+        method: "POST",
+        body: fd,
+        authToken: token,
+      });
+      onUploaded(data.url);
+    } catch (e: any) {
+      setError(e?.message || "Upload failed");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="block w-full text-sm"
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) upload(f);
+        }}
+      />
+      {loading && <p className="text-xs text-gray-600 mt-1">Uploading...</p>}
+      {error && <p className="text-xs text-red-600 mt-1">{error}</p>}
+    </div>
+  );
+}
diff --git a/frontend/src/components/forms/FormWrapper.tsx b/frontend/src/components/forms/FormWrapper.tsx
new file mode 100644
index 0000000..d71e3d0
--- /dev/null
+++ b/frontend/src/components/forms/FormWrapper.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export function FormWrapper({ title, children }: { title?: string; children: React.ReactNode }) {
+  return (
+    <div className="rounded border bg-white p-4 shadow-sm">
+      {title && <h2 className="mb-3 text-lg font-semibold">{title}</h2>}
+      <div className="space-y-3">{children}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/forms/TicketScanner.tsx b/frontend/src/components/forms/TicketScanner.tsx
new file mode 100644
index 0000000..4bce0a4
--- /dev/null
+++ b/frontend/src/components/forms/TicketScanner.tsx
@@ -0,0 +1,8 @@
+"use client";
+
+import React from "react";
+import { QRScanner } from "@/components/qr/QRScanner";
+
+export function TicketScanner({ onScanned }: { onScanned: (content: string) => void }) {
+  return <QRScanner onResult={onScanned} />;
+}
diff --git a/frontend/src/components/layout/BottomNav.tsx b/frontend/src/components/layout/BottomNav.tsx
new file mode 100644
index 0000000..507aae9
--- /dev/null
+++ b/frontend/src/components/layout/BottomNav.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+import { Home, Calendar, Phone, LogIn, UserPlus, LayoutDashboard, LogOut } from "lucide-react";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import { brandColor } from "@/lib/siteConfig";
+
+export const BottomNav = () => {
+    const { user, loading: authLoading, logout } = useAuth();
+    const pathname = usePathname();
+    const { settings } = useSiteSettings();
+    const accentColor = settings.accent_color || brandColor;
+
+    const handleLogout = () => {
+        logout();
+        window.location.href = "/";
+    };
+
+    const isActive = (href: string) => {
+        if (href.includes("#")) return false;
+        if (href === "/") return pathname === "/";
+        return pathname.startsWith(href);
+    };
+
+    type NavItem = { href: string; label: string; icon: React.ElementType; onClick?: () => void };
+
+    // Auth items are only known once the token has been validated — omitting
+    // them entirely while loading avoids a Login/Register -> Dashboard/Logout
+    // flash on every load (see Navbar for the same pattern).
+    const items: NavItem[] = [
+        { href: "/", label: "Home", icon: Home },
+        { href: "/events", label: "Events", icon: Calendar },
+        { href: "/#contact", label: "Contact", icon: Phone },
+        ...(authLoading
+            ? []
+            : user
+            ? [
+                { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+                { href: "#", label: "Logout", icon: LogOut, onClick: handleLogout },
+            ]
+            : [
+                { href: "/login", label: "Login", icon: LogIn },
+                { href: "/register", label: "Register", icon: UserPlus },
+            ]),
+    ];
+
+    return (
+        <nav
+            className="md:hidden fixed bottom-0 inset-x-0 z-50 bg-white border-t border-gray-200"
+            style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+        >
+            <div className="flex items-stretch h-16">
+                {items.map((item) => {
+                    const Icon = item.icon;
+                    const active = isActive(item.href);
+                    const color = active ? accentColor : "#9ca3af";
+
+                    if (item.onClick) {
+                        return (
+                            <button
+                                key={item.label}
+                                onClick={item.onClick}
+                                className="flex-1 flex flex-col items-center justify-center gap-0.5 text-[10px] font-medium"
+                                style={{ color }}
+                            >
+                                <Icon size={22} strokeWidth={1.8} />
+                                <span>{item.label}</span>
+                            </button>
+                        );
+                    }
+
+                    return (
+                        <Link
+                            key={item.href}
+                            href={item.href}
+                            className="flex-1 flex flex-col items-center justify-center gap-0.5 text-[10px] font-medium"
+                            style={{ color }}
+                        >
+                            <Icon size={22} strokeWidth={1.8} />
+                            <span>{item.label}</span>
+                        </Link>
+                    );
+                })}
+            </div>
+        </nav>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..70a27f7
--- /dev/null
+++ b/frontend/src/components/layout/Footer.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import Link from "next/link";
+import { appName } from "@/lib/siteConfig";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+
+export const Footer = () => {
+    const { settings } = useSiteSettings();
+    const displayName = settings.org_name || appName;
+
+    return (
+        <>
+            <footer className="bg-gray-900 text-white py-6 text-center text-sm">
+                <p>© {new Date().getFullYear()} {displayName}. All rights reserved.</p>
+                <div className="mt-2 space-x-4">
+                    <Link href="/legal/terms" className="hover:underline text-gray-300">
+                        Terms of Use
+                    </Link>
+                    <Link href="/legal/privacy" className="hover:underline text-gray-300">
+                        Privacy Policy
+                    </Link>
+                </div>
+            </footer>
+            {/* Spacer so content isn't hidden behind the fixed mobile bottom nav */}
+            <div className="h-16 md:hidden" aria-hidden="true" />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
new file mode 100644
index 0000000..10e64e2
--- /dev/null
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useAuth } from "@/hooks/useAuth";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import { BottomNav } from "./BottomNav";
+import churchLogo from "@/app/church_logo.jpg";
+import { appName, brandColor } from "@/lib/siteConfig";
+import { resolveToApiOrigin } from "@/lib/api";
+
+type NavLink = {
+    href: string;
+    label: string;
+    onClick?: () => void;
+};
+
+export const Navbar = () => {
+    const { user, loading: authLoading, logout } = useAuth();
+    const { settings, loading: settingsLoading } = useSiteSettings();
+    const displayName  = settings.org_name  || appName;
+    const displayColor = settings.accent_color || brandColor;
+    const logoSrc      = settings.logo_url ? resolveToApiOrigin(settings.logo_url) : null;
+
+    const handleLogout = () => {
+        logout();
+        window.location.href = "/";
+    };
+
+    const navLinks: NavLink[] = [
+        { href: "/", label: "Home" },
+        { href: "/events", label: "Events" },
+        { href: "/#contact", label: "Contact" },
+    ];
+
+    const authLinks: NavLink[] = user
+        ? [
+            { href: "/dashboard", label: "Dashboard" },
+            {
+                href: "#",
+                label: "Logout",
+                onClick: handleLogout,
+            },
+        ]
+        : [
+            { href: "/login", label: "Login" },
+            { href: "/register", label: "Register" },
+        ];
+
+    return (
+        <>
+            <header className="bg-white shadow-md sticky top-0 z-50">
+                <nav className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+                    <Link href="/" className="flex items-center gap-2">
+                        {settingsLoading ? (
+                            <div className="h-10 w-10 rounded-sm bg-gray-100 animate-pulse" />
+                        ) : logoSrc ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img src={logoSrc} alt="Logo" className="h-10 w-auto object-contain rounded-sm" />
+                        ) : (
+                            <Image
+                                src={churchLogo}
+                                alt="Church logo"
+                                width={50}
+                                height={50}
+                                className="rounded-sm object-contain"
+                                priority
+                            />
+                        )}
+                        {!settingsLoading && (
+                            <span className="text-xl font-bold" style={{ color: displayColor }}>{displayName}</span>
+                        )}
+                    </Link>
+
+                    {/* Desktop links */}
+                    <div className="hidden md:flex items-center space-x-6">
+                        {navLinks.map(link => (
+                            <Link
+                                key={link.href}
+                                href={link.href}
+                                className="text-sm text-gray-700 hover:text-blue-600"
+                            >
+                                {link.label}
+                            </Link>
+                        ))}
+
+                        {/* Auth links are only known once the token has been validated —
+                            rendering nothing here (instead of guessing "logged out") avoids
+                            a Login/Register -> Dashboard/Logout flash on every load. */}
+                        {!authLoading && authLinks.map(link =>
+                            link.onClick ? (
+                                <button
+                                    key={link.label}
+                                    onClick={link.onClick}
+                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                >
+                                    {link.label}
+                                </button>
+                            ) : (
+                                <Link
+                                    key={link.href}
+                                    href={link.href}
+                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                >
+                                    {link.label}
+                                </Link>
+                            )
+                        )}
+                    </div>
+                </nav>
+            </header>
+            <BottomNav />
+        </>
+    );
+};
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..237a766
--- /dev/null
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useAuth } from "@/hooks/useAuth";
+import { RoleBadge } from "@/components/shared/RoleBadge";
+import { useRouter, usePathname } from "next/navigation";
+
+const navLinks: { href: string; label: string; roles?: string[] }[] = [
+  { href: "/dashboard/user", label: "My Events", roles: ["user", "staff", "supervisor", "admin"] },
+  { href: "/dashboard/user/profile", label: "Profile & Security", roles: ["user", "staff", "supervisor", "admin"] },
+  { href: "/dashboard/staff", label: "Staff", roles: ["staff"] },
+  { href: "/dashboard/supervisor", label: "Supervisor", roles: ["supervisor"] },
+  { href: "/dashboard/admin", label: "Admin", roles: ["admin"] },
+  { href: "/dashboard/admin/settings", label: "Site Settings", roles: ["admin"] }
+];
+
+export function Sidebar() {
+  const { user } = useAuth();
+  const role = user?.role || "user";
+
+  return (
+    <aside className="w-60 shrink-0 border-r bg-white p-4">
+      <div className="mb-4">
+        <div className="font-semibold">Dashboard</div>
+        {user && (
+          <div className="mt-1 text-xs text-gray-600 flex items-center space-x-2">
+            <span>{user.name}</span>
+            <RoleBadge role={role as any} />
+          </div>
+        )}
+      </div>
+      <nav className="space-y-1">
+        {navLinks
+          .filter((l) => !l.roles || l.roles.includes(role))
+          .map((l) => (
+            <Link key={l.href} className="block rounded px-3 py-2 text-sm hover:bg-gray-50" href={l.href}>
+              {l.label}
+            </Link>
+          ))}
+      </nav>
+    </aside>
+  );
+}
+
+export function MobileSidebar() {
+  const { user } = useAuth();
+  const router = useRouter();
+  const role = user?.role || "user";
+  const pathname = usePathname();
+
+  const options = navLinks.filter((l) => !l.roles || l.roles.includes(role));
+
+  // Determine selected value based on current path or default by role
+  // Use longest matching href to handle nested paths (e.g. /dashboard/user/profile over /dashboard/user)
+  const selectedFromPath = options
+    .filter((o) => pathname?.startsWith(o.href))
+    .sort((a, b) => b.href.length - a.href.length)[0]?.href;
+  const roleDefault: Record<string, string> = {
+    admin: "/dashboard/admin",
+    supervisor: "/dashboard/supervisor",
+    staff: "/dashboard/staff",
+    user: "/dashboard/user",
+  };
+  const selectedValue = selectedFromPath || roleDefault[role] || options[0]?.href || "";
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    if (value && value !== selectedValue) router.push(value);
+  };
+
+  return (
+    <div className="md:hidden border-b bg-white px-4 py-3 shadow-sm">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="font-semibold">Dashboard</div>
+          {user && (
+            <div className="mt-0.5 text-xs text-gray-600 flex items-center space-x-2">
+              <span>{user.name}</span>
+              <RoleBadge role={role as any} />
+            </div>
+          )}
+        </div>
+      </div>
+      <label className="sr-only" htmlFor="mobile-dashboard-nav">Navigate dashboard</label>
+      <select
+        id="mobile-dashboard-nav"
+        className="mt-3 w-full rounded-md border-gray-300 text-sm py-2 px-3 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+        value={selectedValue}
+        onChange={handleChange}
+      >
+        {/* Keep placeholder hidden if a value is selected */}
+        {!selectedValue && (
+          <option value="" disabled>
+            Select section...
+          </option>
+        )}
+        {options.map((l) => (
+          <option key={l.href} value={l.href}>
+            {l.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
diff --git a/frontend/src/components/qr/QRScanner.tsx b/frontend/src/components/qr/QRScanner.tsx
new file mode 100644
index 0000000..1a364a5
--- /dev/null
+++ b/frontend/src/components/qr/QRScanner.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import Webcam from "react-webcam";
+import { useQRScanner } from "@/hooks/useQRScanner";
+
+export type QRScannerProps = {
+  onResult?: (text: string) => void;
+  onError?: (error: unknown) => void;
+  /** When true the camera stops; when it goes back to false the camera auto-resumes if it was on. */
+  paused?: boolean;
+};
+
+export type QRScannerHandle = {
+  /** Hard-stop the scanner (user must press "Scan Ticket" to restart). */
+  stop: () => void;
+};
+
+// Mobile-friendly QR scanner with start/stop control using the back camera via react-webcam
+export const QRScanner = React.forwardRef<QRScannerHandle, QRScannerProps>(
+  function QRScanner({ onResult, onError, paused = false }, ref) {
+    const webcamRef = useRef<Webcam | null>(null);
+
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [showCam, setShowCam] = useState<boolean>(false);
+
+    // Track the underlying HTMLVideoElement from react-webcam reliably
+    const [videoEl, setVideoEl] = useState<HTMLVideoElement | null>(null);
+    useEffect(() => {
+      let id: any;
+      if (showCam) {
+        id = setInterval(() => {
+          const anyCam = webcamRef.current as any;
+          const v: HTMLVideoElement | null = anyCam?.video ?? null;
+          if (v) { setVideoEl(v); clearInterval(id); }
+        }, 100);
+      } else {
+        setVideoEl(null);
+      }
+      return () => { if (id) clearInterval(id); };
+    }, [showCam]);
+
+    // Beep + cooldown state
+    const lastScanRef = useRef<number>(0);
+    const audioCtxRef = useRef<any>(null);
+    const playBeep = () => {
+      try {
+        const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
+        if (!AC) return;
+        if (!audioCtxRef.current) audioCtxRef.current = new AC();
+        const ctx = audioCtxRef.current as AudioContext;
+        const oscillator = ctx.createOscillator();
+        const gainNode = ctx.createGain();
+        oscillator.type = "sine";
+        oscillator.frequency.value = 880;
+        gainNode.gain.value = 0.05;
+        oscillator.connect(gainNode);
+        gainNode.connect(ctx.destination);
+        const now = ctx.currentTime;
+        oscillator.start(now);
+        oscillator.stop(now + 0.12);
+      } catch {}
+    };
+
+    const wrappedOnResult = (text: string) => {
+      const nowTs = Date.now();
+      if (nowTs - lastScanRef.current < 2000) return;
+      lastScanRef.current = nowTs;
+      playBeep();
+      onResult?.(text);
+    };
+
+    const { active, toggle, stop, permissionError } = useQRScanner(videoEl, {
+      onResult: wrappedOnResult,
+      onError,
+    });
+
+    const constraints = useMemo(() => ({
+      facingMode: { ideal: "environment" },
+      width: { ideal: 1280 },
+      height: { ideal: 720 },
+    }), []);
+
+    const isSecure = typeof window !== "undefined" && window.isSecureContext;
+    const isOn = showCam;
+
+    // Stable stop function so effects and the ref handle can depend on it safely
+    const stopScan = useCallback(() => {
+      try { stop(); } catch {}
+      setShowCam(false);
+    }, [stop]);
+
+    // Expose hard-stop to parent via ref (used when filters change)
+    useImperativeHandle(ref, () => ({ stop: stopScan }), [stopScan]);
+
+    // Pause / auto-resume when the paused prop changes (e.g. a modal opens/closes)
+    const wasActiveRef = useRef(false);
+    useEffect(() => {
+      if (paused) {
+        if (showCam) {
+          wasActiveRef.current = true;
+          stopScan();
+        }
+      } else {
+        if (wasActiveRef.current) {
+          wasActiveRef.current = false;
+          // Re-show the camera — active is still true so the decode loop restarts automatically
+          // once the video element is acquired again.
+          setShowCam(true);
+        }
+      }
+    // showCam intentionally included: re-evaluate after stopScan sets it to false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [paused, stopScan]);
+
+    async function startScan() {
+      const host = typeof window !== "undefined" ? window.location.hostname : "";
+      const isLocal = host === "localhost" || host === "127.0.0.1";
+      if (!(navigator as any)?.mediaDevices?.getUserMedia) {
+        setLocalError("Camera API is not available in this browser.");
+        return;
+      }
+      setLocalError(null);
+      try {
+        const warmup = await navigator.mediaDevices.getUserMedia({ video: constraints, audio: false } as any);
+        try { warmup.getTracks().forEach(t => t.stop()); } catch {}
+        setShowCam(true);
+        if (!active) toggle();
+      } catch (e: any) {
+        const name = e?.name || e?.message;
+        if (name === "NotAllowedError") {
+          setLocalError("Camera permission denied. Please enable camera access in your browser settings.");
+        } else if (name === "NotFoundError" || name === "OverconstrainedError") {
+          setLocalError("No suitable camera found. Try a device with a back camera.");
+        } else if (name === "NotReadableError") {
+          setLocalError("Camera is in use by another app. Close other apps and try again.");
+        } else if (!isSecure && !isLocal) {
+          setLocalError("Camera access requires HTTPS or running on http://localhost.");
+        } else {
+          setLocalError("Unable to access camera.");
+        }
+        if (active) stop();
+        setShowCam(false);
+      }
+    }
+
+    useEffect(() => {
+      return () => { stopScan(); };
+    }, [stopScan]);
+
+    return (
+      <div className="w-full max-w-md mx-auto">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-semibold">QR Scanner</h2>
+          <button
+            onClick={() => (isOn ? stopScan() : startScan())}
+            className={`px-4 py-2 rounded text-white ${isOn ? "bg-red-600" : "bg-blue-600"}`}
+          >
+            {isOn ? "Stop" : "Scan Ticket"}
+          </button>
+        </div>
+
+        <div className="relative rounded-lg overflow-hidden bg-black aspect-[3/4] sm:aspect-video">
+          {isOn ? (
+            <Webcam
+              ref={webcamRef}
+              audio={false}
+              videoConstraints={constraints}
+              mirrored={false}
+              forceScreenshotSourceSize
+              className="absolute inset-0 w-full h-full object-cover"
+              onUserMedia={() => setLocalError(null)}
+              onUserMediaError={(e) => {
+                const name = (e as any)?.name || (e as any)?.message;
+                const protocol = typeof window !== "undefined" ? window.location.protocol : "";
+                const host = typeof window !== "undefined" ? window.location.hostname : "";
+                const isLocal = host === "localhost" || host === "127.0.0.1";
+                if (protocol !== "https:" && !isLocal) {
+                  setLocalError("Camera access requires HTTPS or running on http://localhost.");
+                  return;
+                }
+                if (name === "NotAllowedError") {
+                  setLocalError("Camera permission denied. Please enable camera access in your browser settings.");
+                } else if (name === "NotFoundError") {
+                  setLocalError("No suitable camera found. Try a device with a back camera.");
+                } else {
+                  setLocalError("Unable to access camera.");
+                }
+              }}
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-white/80 text-sm p-4 text-center">
+              Camera is off. Tap "Scan Ticket" to start using the back camera.
+            </div>
+          )}
+        </div>
+
+        {(permissionError || localError) && (
+          <p className="text-red-600 text-sm mt-2">{permissionError || localError}</p>
+        )}
+      </div>
+    );
+  }
+);
\ No newline at end of file
diff --git a/frontend/src/components/reports/Reports.tsx b/frontend/src/components/reports/Reports.tsx
new file mode 100644
index 0000000..c2d6e33
--- /dev/null
+++ b/frontend/src/components/reports/Reports.tsx
@@ -0,0 +1,533 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch } from "@/lib/api";
+import { downloadCsv, mailtoReport, openPrintWindow } from "@/lib/export";
+
+// Common small UI controls
+function Section({ title, children, actions }: { title: string; children: React.ReactNode; actions?: React.ReactNode }) {
+  return (
+    <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+      <div className="flex items-center justify-between mb-3">
+        <div className="text-lg font-semibold">{title}</div>
+        <div className="flex gap-2">{actions}</div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+function MultiSelect({ options, value, onChange, className }: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void; className?: string }) {
+  const toggle = (v: string) => {
+    const set = new Set(value);
+    if (set.has(v)) set.delete(v); else set.add(v);
+    onChange(Array.from(set));
+  };
+  return (
+    <div className={"flex flex-wrap gap-2 " + (className || '')}>
+      {options.map(opt => (
+        <label key={opt.value} className={"px-2 py-1 text-xs rounded border cursor-pointer " + (value.includes(opt.value) ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-gray-800 border-gray-200") }>
+          <input type="checkbox" className="hidden" checked={value.includes(opt.value)} onChange={() => toggle(opt.value)} />
+          {opt.label}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export default function Reports() {
+  const { token, user } = useAuth();
+  const role = user?.role || 'user';
+  const canView = role === 'admin' || role === 'supervisor';
+
+  const [events, setEvents] = useState<any[]>([]);
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoadingEvents(true);
+        const evs = await apiFetch<any[]>("/api/events/all?includePast=true", { authToken: token || undefined });
+        setEvents(Array.isArray(evs) ? evs : []);
+      } catch (e: any) {
+        setError(e?.message || 'Failed to load events');
+      } finally {
+        setLoadingEvents(false);
+      }
+    })();
+  }, [token, role]);
+
+  // Filters state
+  const [dateFrom, setDateFrom] = useState<string>("");
+  const [dateTo, setDateTo] = useState<string>("");
+  const [selectedEvents, setSelectedEvents] = useState<string[]>([]);
+  const [attendeesEventId, setAttendeesEventId] = useState<string>("");
+  const [includeCancelled, setIncludeCancelled] = useState<boolean>(false);
+  const [includePastEvents, setIncludePastEvents] = useState<boolean>(false);
+
+  // DATA
+  const [paymentsByEvent, setPaymentsByEvent] = useState<Record<string, any[]>>({});
+  const [registrationsByEvent, setRegistrationsByEvent] = useState<Record<string, any[]>>({});
+  const [loading, setLoading] = useState(false);
+
+  // Load initial selected events
+  useEffect(() => {
+    if (events.length > 0 && selectedEvents.length === 0) {
+      const nowIso = new Date().toISOString();
+      const filtered = events.filter(ev => includePastEvents || !ev.endDate || new Date(ev.endDate).toISOString() >= nowIso);
+      const ids = filtered.map(ev => ev.id);
+      setSelectedEvents(ids.slice(0, Math.min(ids.length, 3))); // pick first few by default
+      if (!attendeesEventId && ids.length > 0) setAttendeesEventId(ids[0]);
+    }
+  }, [events, includePastEvents, attendeesEventId]);
+
+  // Fetch payments per selected event (works for staff via /event/:id, and for supervisor/admin we could also use this)
+  const loadPayments = async (eventIds: string[]) => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const byEv: Record<string, any[]> = {};
+      for (const id of eventIds) {
+        try {
+          const list = await apiFetch<any[]>(`/api/payments/event/${encodeURIComponent(id)}`, { authToken: token });
+          byEv[id] = Array.isArray(list) ? list : [];
+        } catch (e) {
+          byEv[id] = [];
+        }
+      }
+      setPaymentsByEvent(byEv);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Fetch registrations for selected/attendees events
+  const loadRegistrations = async (eventIds: string[]) => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const byEv: Record<string, any[]> = {};
+      for (const id of eventIds) {
+        try {
+          const list = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(id)}`, { authToken: token });
+          byEv[id] = Array.isArray(list) ? list : [];
+        } catch (e) {
+          byEv[id] = [];
+        }
+      }
+      setRegistrationsByEvent(byEv);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedEvents.length > 0) {
+      loadPayments(selectedEvents);
+      loadRegistrations(selectedEvents);
+    }
+  }, [token, selectedEvents]);
+
+  // Helpers
+  const paymentsRows = useMemo(() => {
+    // Flatten to rows applying date filter, grouped by event then user in presentation
+    const df = dateFrom ? new Date(dateFrom).getTime() : null;
+    const dt = dateTo ? new Date(dateTo).getTime() : null;
+    const rows: { eventId: string; eventTitle: string; userName: string; userEmail?: string; amount: number; method: string; isDonation?: boolean; createdAt: string; registrationId?: string }[] = [];
+    for (const evId of Object.keys(paymentsByEvent)) {
+      const ev = events.find(e => e.id === evId);
+      const evTitle = ev?.title || evId;
+      for (const p of paymentsByEvent[evId] || []) {
+        const t = new Date(p.createdAt).getTime();
+        if ((df && t < df) || (dt && t > dt)) continue;
+        // For reporting: if it's a donation, show the payer; otherwise show the user assigned to the registration
+        const user = p.isDonation ? (p.user || {}) : ((p.registration?.user || p.user) || {});
+        rows.push({
+          eventId: evId,
+          eventTitle: evTitle,
+          userName: user?.name || user?.email || p.userId || 'User',
+          userEmail: user?.email,
+          amount: p.amount,
+          method: p.method,
+          isDonation: p.isDonation,
+          createdAt: p.createdAt,
+          registrationId: p.registrationId || undefined,
+        });
+      }
+    }
+    // Sort by event, then user, then date
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '') || new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
+    return rows;
+  }, [paymentsByEvent, dateFrom, dateTo, events]);
+
+  const attendeesRows = useMemo(() => {
+    const evId = attendeesEventId;
+    const regs = registrationsByEvent[evId] || [];
+    const filtered = regs.filter((r: any) => includeCancelled ? true : (r.status !== 'cancelled'));
+    const rows = filtered.map((r: any) => ({
+      name: r.user?.name || r.userId,
+      email: r.user?.email,
+      status: r.status,
+      options: (r.registrationOptions || []).map((ro: any) => `${ro.eventOption?.name || 'Option'} x${ro.quantity}`).join('; '),
+      registeredAt: r.createdAt,
+    }));
+    rows.sort((a: any, b: any) => (a.name || '').localeCompare(b.name || ''));
+    return rows;
+  }, [registrationsByEvent, attendeesEventId, includeCancelled]);
+
+  const regTypeCounts = useMemo(() => {
+    // For selectedEvents gather counts of eventOption.name quantities
+    const counts: Record<string, Record<string, number>> = {}; // eventId -> optionName -> qty
+    for (const evId of selectedEvents) {
+      const regs = registrationsByEvent[evId] || [];
+      counts[evId] = counts[evId] || {};
+      for (const r of regs) {
+        if (r.status === 'cancelled') continue; // default exclude
+        for (const ro of (r.registrationOptions || [])) {
+          const name = ro.eventOption?.name || 'Option';
+          const qty = ro.quantity || 0;
+          counts[evId][name] = (counts[evId][name] || 0) + qty;
+        }
+      }
+    }
+    return counts;
+  }, [registrationsByEvent, selectedEvents]);
+
+  // Actions for each report
+  const exportPaymentsCsv = () => {
+    downloadCsv(`payments_${new Date().toISOString().slice(0,10)}`, paymentsRows.map(r => ({
+      Event: r.eventTitle,
+      User: r.userName,
+      Email: r.userEmail || '',
+      Amount: r.amount,
+      Method: r.method,
+      Donation: r.isDonation ? 'Yes' : 'No',
+      Date: new Date(r.createdAt).toLocaleString()
+    })));
+  };
+  const printPayments = () => {
+    const html = tableHtml(['Event','User','Email','Amount','Method','Donation','Date'], paymentsRows.map(r => [
+      r.eventTitle,
+      r.userName,
+      r.userEmail || '',
+      String(r.amount),
+      r.method,
+      r.isDonation ? 'Yes' : 'No',
+      new Date(r.createdAt).toLocaleString()
+    ]));
+    openPrintWindow('Payments Report', html);
+  };
+  const emailPayments = () => {
+    const summary = `Payments report generated on ${new Date().toLocaleString()}\nFilters: from ${dateFrom || '-'} to ${dateTo || '-'}; Events: ${selectedEvents.length}`;
+    mailtoReport('Payments Report', summary + '\n\nPlease find the CSV/PDF attached.');
+  };
+
+  const exportAttendeesCsv = () => {
+    downloadCsv(`attendees_${attendeesEventId}_${new Date().toISOString().slice(0,10)}`, attendeesRows.map(r => ({
+      Name: r.name,
+      Email: r.email || '',
+      Status: r.status,
+      Options: r.options,
+      RegisteredAt: new Date(r.registeredAt).toLocaleString()
+    })));
+  };
+  const printAttendees = () => {
+    const html = tableHtml(['Name','Email','Status','Options','Registered At'], attendeesRows.map(r => [r.name, r.email || '', r.status, r.options, new Date(r.registeredAt).toLocaleString()]));
+    openPrintWindow('Attendees Report', html);
+  };
+  const emailAttendees = () => {
+    const ev = events.find(e => e.id === attendeesEventId);
+    const summary = `Attendees for ${ev?.title || attendeesEventId} generated on ${new Date().toLocaleString()}\nInclude cancelled: ${includeCancelled ? 'Yes' : 'No'}`;
+    mailtoReport('Attendees Report', summary + '\n\nPlease find the CSV/PDF attached.');
+  };
+
+  const exportRegTypesCsv = () => {
+    const rows: any[] = [];
+    for (const evId of Object.keys(regTypeCounts)) {
+      const ev = events.find(e => e.id === evId);
+      const byType = regTypeCounts[evId];
+      for (const type of Object.keys(byType)) rows.push({ Event: ev?.title || evId, Type: type, Quantity: byType[type] });
+    }
+    downloadCsv(`registration_types_${new Date().toISOString().slice(0,10)}`, rows);
+  };
+  const printRegTypes = () => {
+    const rows: string[][] = [];
+    for (const evId of Object.keys(regTypeCounts)) {
+      const ev = events.find(e => e.id === evId);
+      const byType = regTypeCounts[evId];
+      for (const type of Object.keys(byType)) rows.push([ev?.title || evId, type, String(byType[type])]);
+    }
+    const html = tableHtml(['Event','Type','Quantity'], rows);
+    openPrintWindow('Registration Types Report', html);
+  };
+  const emailRegTypes = () => {
+    const summary = `Registration types report generated on ${new Date().toLocaleString()} for ${Object.keys(regTypeCounts).length} event(s).`;
+    mailtoReport('Registration Types Report', summary + '\n\nPlease find the CSV/PDF attached.');
+  };
+
+  // Extra useful report: Ticket usage summary per event (Used vs Unused, requires ticket scans info already available via tickets API on staff pages)
+  const [ticketUsage, setTicketUsage] = useState<Record<string, { used: number; unused: number }>>({});
+  const loadTicketUsage = async (eventIds: string[]) => {
+    if (!token) return;
+    const result: Record<string, { used: number; unused: number }> = {};
+    for (const id of eventIds) {
+      try {
+        const tickets = await apiFetch<any[]>(`/api/tickets/event/${encodeURIComponent(id)}`, { authToken: token });
+        const used = tickets.filter(t => t.isUsed).length;
+        const unused = tickets.filter(t => !t.isUsed).length;
+        result[id] = { used, unused };
+      } catch (e) {
+        result[id] = { used: 0, unused: 0 };
+      }
+    }
+    setTicketUsage(result);
+  };
+  useEffect(() => { if (selectedEvents.length) loadTicketUsage(selectedEvents); }, [token, selectedEvents]);
+
+  const exportUsageCsv = () => {
+    const rows: any[] = [];
+    for (const evId of Object.keys(ticketUsage)) {
+      const ev = events.find(e => e.id === evId);
+      rows.push({ Event: ev?.title || evId, Used: ticketUsage[evId].used, Unused: ticketUsage[evId].unused });
+    }
+    downloadCsv(`ticket_usage_${new Date().toISOString().slice(0,10)}`, rows);
+  };
+  const printUsage = () => {
+    const rows: string[][] = [];
+    for (const evId of Object.keys(ticketUsage)) {
+      const ev = events.find(e => e.id === evId);
+      const tu = ticketUsage[evId];
+      rows.push([ev?.title || evId, String(tu.used), String(tu.unused)]);
+    }
+    const html = tableHtml(['Event','Used','Unused'], rows);
+    openPrintWindow('Ticket Usage Report', html);
+  };
+  const emailUsage = () => {
+    const summary = `Ticket usage report generated on ${new Date().toLocaleString()} for ${Object.keys(ticketUsage).length} event(s).`;
+    mailtoReport('Ticket Usage Report', summary + '\n\nPlease find the CSV/PDF attached.');
+  };
+
+  // UI
+  return (
+    <div>
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">
+          You need supervisor or admin access to view reports.
+        </div>
+      )}
+
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+        <div className="text-sm font-medium mb-2">Global filters</div>
+        <div className="flex flex-wrap items-end gap-3">
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">From</label>
+            <input type="date" className="border rounded px-3 py-2 text-sm" value={dateFrom} onChange={e => setDateFrom(e.target.value)} />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">To</label>
+            <input type="date" className="border rounded px-3 py-2 text-sm" value={dateTo} onChange={e => setDateTo(e.target.value)} />
+          </div>
+          <div className="flex-1 min-w-64">
+            <label className="block text-xs text-gray-600 mb-1">Select events</label>
+            <MultiSelect
+              options={events.map(ev => ({ value: ev.id, label: ev.title }))}
+              value={selectedEvents}
+              onChange={setSelectedEvents}
+            />
+          </div>
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" checked={includePastEvents} onChange={e => setIncludePastEvents(e.target.checked)} /> Include past events in list
+          </label>
+          <button onClick={() => { loadPayments(selectedEvents); loadRegistrations(selectedEvents); }} className="px-3 py-2 text-sm rounded bg-gray-100 hover:bg-gray-200">Refresh data</button>
+        </div>
+      </div>
+
+      <Section
+        title="Payments between dates (grouped by event then user)"
+        actions={
+          <>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={exportPaymentsCsv}>Export CSV</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={printPayments}>Save as PDF</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={emailPayments}>Email</button>
+          </>
+        }
+      >
+        {loading && <div className="text-sm text-gray-500 mb-2">Loading…</div>}
+        <div className="overflow-auto">
+          <table className="min-w-[640px]">
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>User</th>
+                <th>Email</th>
+                <th>Amount</th>
+                <th>Method</th>
+                <th>Donation</th>
+                <th>Date</th>
+              </tr>
+            </thead>
+            <tbody>
+              {paymentsRows.length === 0 ? (
+                <tr><td colSpan={7} className="text-sm text-gray-500">No payments match the selected filters.</td></tr>
+              ) : paymentsRows.map((r, idx) => (
+                <tr key={idx}>
+                  <td>{r.eventTitle}</td>
+                  <td>{r.userName}</td>
+                  <td>{r.userEmail || ''}</td>
+                  <td>R {Number(r.amount).toFixed(2)}</td>
+                  <td>{r.method}</td>
+                  <td>{r.isDonation ? 'Yes' : 'No'}</td>
+                  <td>{new Date(r.createdAt).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      <Section
+        title="Attendees per event and registration status"
+        actions={
+          <>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={exportAttendeesCsv}>Export CSV</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={printAttendees}>Save as PDF</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={emailAttendees}>Email</button>
+          </>
+        }
+      >
+        <div className="flex flex-wrap items-center gap-3 mb-3">
+          <label className="text-sm">
+            <span className="text-gray-600 mr-2">Event</span>
+            <select className="border rounded px-3 py-2 text-sm" value={attendeesEventId} onChange={e => setAttendeesEventId(e.target.value)}>
+              {events.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+            </select>
+          </label>
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" checked={includeCancelled} onChange={e => setIncludeCancelled(e.target.checked)} /> Include cancelled registrations
+          </label>
+          <button className="px-3 py-1.5 text-sm rounded border" onClick={() => loadRegistrations([attendeesEventId])}>Refresh</button>
+        </div>
+        <div className="overflow-auto">
+          <table className="min-w-[640px]">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Email</th>
+                <th>Status</th>
+                <th>Options</th>
+                <th>Registered at</th>
+              </tr>
+            </thead>
+            <tbody>
+              {attendeesRows.length === 0 ? (
+                <tr><td colSpan={5} className="text-sm text-gray-500">No attendees for selected filters.</td></tr>
+              ) : attendeesRows.map((r, idx) => (
+                <tr key={idx}>
+                  <td>{r.name}</td>
+                  <td>{r.email || ''}</td>
+                  <td className="capitalize">{r.status}</td>
+                  <td>{r.options}</td>
+                  <td>{new Date(r.registeredAt).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      <Section
+        title="Registration type counts per event"
+        actions={
+          <>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={exportRegTypesCsv}>Export CSV</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={printRegTypes}>Save as PDF</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={emailRegTypes}>Email</button>
+          </>
+        }
+      >
+        <div className="overflow-auto">
+          <table className="min-w-[480px]">
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>Registration Type</th>
+                <th>Quantity</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.keys(regTypeCounts).length === 0 ? (
+                <tr><td colSpan={3} className="text-sm text-gray-500">No data available. Select events and refresh.</td></tr>
+              ) : (
+                Object.keys(regTypeCounts).flatMap(evId => {
+                  const ev = events.find(e => e.id === evId);
+                  const byType = regTypeCounts[evId] || {};
+                  const rows = Object.keys(byType);
+                  if (rows.length === 0) return [<tr key={evId}><td>{ev?.title || evId}</td><td colSpan={2} className="text-sm text-gray-500">No registrations</td></tr>];
+                  return rows.map(type => (
+                    <tr key={evId + type}>
+                      <td>{ev?.title || evId}</td>
+                      <td>{type}</td>
+                      <td>{byType[type]}</td>
+                    </tr>
+                  ));
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      <Section
+        title="Ticket usage summary (extra)"
+        actions={
+          <>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={exportUsageCsv}>Export CSV</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={printUsage}>Save as PDF</button>
+            <button className="px-3 py-1.5 text-sm rounded border" onClick={emailUsage}>Email</button>
+          </>
+        }
+      >
+        <div className="overflow-auto">
+          <table className="min-w-[420px]">
+            <thead>
+              <tr>
+                <th>Event</th>
+                <th>Used</th>
+                <th>Unused</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.keys(ticketUsage).length === 0 ? (
+                <tr><td colSpan={3} className="text-sm text-gray-500">No data available. Select events and refresh.</td></tr>
+              ) : Object.keys(ticketUsage).map(evId => {
+                const ev = events.find(e => e.id === evId);
+                const tu = ticketUsage[evId];
+                return (
+                  <tr key={evId}>
+                    <td>{ev?.title || evId}</td>
+                    <td>{tu.used}</td>
+                    <td>{tu.unused}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+function tableHtml(headers: string[], rows: (string | number)[][]) {
+  const thead = `<tr>${headers.map(h => `<th>${escapeHtml(h)}</th>`).join('')}</tr>`;
+  const tbody = rows.map(r => `<tr>${r.map(c => `<td>${escapeHtml(String(c ?? ''))}</td>`).join('')}</tr>`).join('');
+  return `<table><thead>${thead}</thead><tbody>${tbody}</tbody></table>`;
+}
+
+function escapeHtml(s: string) {
+  return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c] as string));
+}
diff --git a/frontend/src/components/reports/ReportsV2.tsx b/frontend/src/components/reports/ReportsV2.tsx
new file mode 100644
index 0000000..3973c04
--- /dev/null
+++ b/frontend/src/components/reports/ReportsV2.tsx
@@ -0,0 +1,2090 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch, API_BASE } from "@/lib/api";
+import { downloadCsv, emailReportPdf, downloadReportPdf } from "@/lib/export";
+
+// Types for report selection
+const REPORTS = [
+  { key: "payments", label: "Payments between dates" },
+  { key: "attendees", label: "Attendees per event (grouped by option)" },
+  { key: "regTypes", label: "Registration type counts" },
+  { key: "usage", label: "Ticket usage summary" },
+  { key: "revenue", label: "Revenue summary (by method)" },
+  { key: "revenueDetailed", label: "Revenue detailed" },
+  { key: "masterOrders", label: "Master orders breakdown" },
+  { key: "regStatus", label: "Registration status breakdown" },
+  { key: "donations", label: "Donations breakdown" },
+  { key: "cashup", label: "Cashup reconciliation" },
+  { key: "financeReport", label: "Finance report (revenue & costs)" },
+  { key: "profitReport", label: "Profit report" },
+  { key: "cashupAudit", label: "Cashup audit trail" },
+] as const;
+
+type ReportKey = typeof REPORTS[number]["key"];
+
+const METHOD_KEYS = ["cash", "card", "eft", "other"] as const;
+const METHOD_LABEL: Record<string, string> = { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
+function denomLabel(v: number): string {
+  return v >= 1 ? `R${v}` : `${Math.round(v * 100)}c`;
+}
+function money2(n: number | null | undefined): string {
+  return `R${Number(n || 0).toFixed(2)}`;
+}
+function actionLabel(action: string): string {
+  return action === "closed" ? "Closed (full cashup)" : action === "quick_closed" ? "Quick closed" : "Reopened";
+}
+// Annotates closed/quick_closed audit rows with the per-method delta versus the previous
+// close for the same event, so the audit trail shows differences between successive cashups.
+function computeAuditDeltas(rows: any[]): any[] {
+  const byEvent: Record<string, any[]> = {};
+  rows.forEach(r => { (byEvent[r.eventId] = byEvent[r.eventId] || []).push(r); });
+  Object.values(byEvent).forEach(list => {
+    list.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
+    let prevClose: any = null;
+    list.forEach(r => {
+      if (r.action === "closed" || r.action === "quick_closed") {
+        if (prevClose) {
+          const delta: Record<string, number | null> = {};
+          METHOD_KEYS.forEach(m => {
+            const curLine = (r.lines || []).find((l: any) => l.method === m);
+            const prevLine = (prevClose.lines || []).find((l: any) => l.method === m);
+            const curActual = curLine?.actualAmount;
+            const prevActual = prevLine?.actualAmount;
+            delta[m] = (curActual != null && prevActual != null) ? curActual - prevActual : null;
+          });
+          r._deltaVsPrevious = delta;
+          r._previousCloseAt = prevClose.createdAt;
+        }
+        prevClose = r;
+      }
+    });
+  });
+  return rows;
+}
+
+// Effective per-unit price for a registration option, honoring an already-locked
+// priceSnapshot first, then early-bird tier deadlines, then falling back to the
+// base (variant or option) price. Mirrors optionUnitPrice on the Payments page.
+function optionUnitPrice(ro: any, referenceTime: any, atTime: Date): number {
+  if (ro?.priceSnapshot !== null && ro?.priceSnapshot !== undefined) {
+    return Number(ro.priceSnapshot);
+  }
+  const eo = ro?.eventOption;
+  const variantId = ro?.variantId || null;
+  const base = (ro?.variant?.price !== null && ro?.variant?.price !== undefined)
+    ? Number(ro.variant.price) : Number(eo?.price || 0);
+  const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
+  const tiers = variantId ? allTiers.filter((t: any) => t.variantId === variantId) : allTiers.filter((t: any) => !t.variantId);
+  if (tiers.length === 0) return base;
+  const t = atTime ? new Date(atTime) : new Date();
+  const ref = referenceTime ? new Date(referenceTime) : t;
+  const applicable = tiers
+    .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
+    .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
+    .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order || 0) - (b.order || 0) || a.price - b.price);
+  if (applicable.length === 0) return base;
+  const price = Number(applicable[0].price);
+  return (price >= 0) ? price : base;
+}
+
+// Simple MultiSelect control used in filters
+function MultiSelect({ options, value, onChange }: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void }) {
+  const toggle = (v: string) => {
+    const set = new Set(value);
+    if (set.has(v)) set.delete(v); else set.add(v);
+    onChange(Array.from(set));
+  };
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map(opt => (
+        <label key={opt.value} className={"px-2 py-1 text-xs rounded border cursor-pointer " + (value.includes(opt.value) ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-gray-800 border-gray-200") }>
+          <input type="checkbox" className="hidden" checked={value.includes(opt.value)} onChange={() => toggle(opt.value)} />
+          {opt.label}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export default function ReportsV2() {
+  const { token, user } = useAuth();
+  const role = user?.role || "user";
+  const canView = role === "admin" || role === "supervisor";
+
+  // Events list
+  const [events, setEvents] = useState<any[]>([]);
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showPastEvents, setShowPastEvents] = useState(false);
+  const [showInactiveEvents, setShowInactiveEvents] = useState(false);
+  // Unlike past/inactive, closed (cashed-up) events are shown by default — they're normal
+  // historical data for most reports (Payments, Attendees, Revenue, etc.), and the
+  // Cashup/Finance/Profit reports specifically exist to review already-closed events, so
+  // hiding them by default would work against those reports' whole purpose. This toggle
+  // lets staff exclude them when they only want currently-open events.
+  const [showClosedEvents, setShowClosedEvents] = useState(true);
+  const isAdmin = role === "admin";
+
+  const filteredEvents = useMemo(() => {
+    const now = new Date();
+    return events.filter(ev => {
+      if (!showPastEvents && ev.endDate && new Date(ev.endDate) < now) return false;
+      if (!showInactiveEvents && ev.isActive === false) return false;
+      if (!showClosedEvents && ev.cashupStatus === "closed") return false;
+      return true;
+    });
+  }, [events, showPastEvents, showInactiveEvents, showClosedEvents]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoadingEvents(true);
+        const evs = await apiFetch<any[]>("/api/events/all?includePast=true&includeInactive=true", { authToken: token || undefined });
+        setEvents(Array.isArray(evs) ? evs : []);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      } finally {
+        setLoadingEvents(false);
+      }
+    })();
+  }, [token, role]);
+
+  // General state for UI flow
+  const [report, setReport] = useState<ReportKey>("payments");
+  const [ready, setReady] = useState(false); // toggled by View button
+  const [busy, setBusy] = useState(false);
+
+  // Filters per report
+  // Payments
+  const [payFrom, setPayFrom] = useState<string>("");
+  const [payTo, setPayTo] = useState<string>("");
+  const [payEvents, setPayEvents] = useState<string[]>([]);
+
+  // Attendees
+  const [attEventId, setAttEventId] = useState<string>("");
+  const [attIncludeCancelled, setAttIncludeCancelled] = useState(false);
+
+  // Registration type counts
+  const [regTypeEvents, setRegTypeEvents] = useState<string[]>([]);
+
+  // Ticket usage summary
+  const [usageEvents, setUsageEvents] = useState<string[]>([]);
+
+  // Revenue summary
+  const [revEvents, setRevEvents] = useState<string[]>([]);
+  // Revenue detailed
+  const [revDetEvents, setRevDetEvents] = useState<string[]>([]);
+
+  //Master Events
+  const [masterEvents, setMasterEvents] = useState<string[]>([]);
+
+  // Registration status breakdown
+  const [statusEvents, setStatusEvents] = useState<string[]>([]);
+  const [statusIncludeCancelled, setStatusIncludeCancelled] = useState<boolean>(true);
+
+  // Donations breakdown
+  const [donationEvents, setDonationEvents] = useState<string[]>([]);
+
+  // Cashup / Finance / Profit (all driven by the same per-event financials endpoint)
+  const [cashupEvents, setCashupEvents] = useState<string[]>([]);
+  const [financeEvents, setFinanceEvents] = useState<string[]>([]);
+  const [profitEvents, setProfitEvents] = useState<string[]>([]);
+
+  // Cashup audit trail
+  const [auditEvents, setAuditEvents] = useState<string[]>([]);
+  const [auditFrom, setAuditFrom] = useState<string>("");
+  const [auditTo, setAuditTo] = useState<string>("");
+
+  // Data stores
+  const [paymentsByEvent, setPaymentsByEvent] = useState<Record<string, any[]>>({});
+  const [registrationsByEvent, setRegistrationsByEvent] = useState<Record<string, any[]>>({});
+  const [ticketUsage, setTicketUsage] = useState<Record<string, { used: number; unused: number }>>({});
+  const [financialsByEvent, setFinancialsByEvent] = useState<Record<string, any>>({});
+  const [auditRows, setAuditRows] = useState<any[]>([]);
+
+  // Initialize default selections when events load
+  useEffect(() => {
+    if (filteredEvents.length === 0) return;
+    const first1 = filteredEvents.slice(0, 1).map((e: any) => e.id);
+    if (payEvents.length === 0) setPayEvents(first1);
+    if (regTypeEvents.length === 0) setRegTypeEvents(first1);
+    if (usageEvents.length === 0) setUsageEvents(first1);
+    if (revEvents.length === 0) setRevEvents(first1);
+    if (revDetEvents.length === 0) setRevDetEvents(first1);
+    if (statusEvents.length === 0) setStatusEvents(first1);
+    if (!attEventId) setAttEventId(filteredEvents[0].id);
+    if (masterEvents.length === 0) setMasterEvents(first1);
+    if (donationEvents.length === 0) setDonationEvents(first1);
+    if (cashupEvents.length === 0) setCashupEvents(first1);
+    if (financeEvents.length === 0) setFinanceEvents(first1);
+    if (profitEvents.length === 0) setProfitEvents(first1);
+  }, [filteredEvents]);
+
+  // Loaders
+  const loadPayments = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, any[]>;
+    const byEv: Record<string, any[]> = {};
+    for (const id of eventIds) {
+      try {
+        const list = await apiFetch<any[]>(`/api/payments/event/${encodeURIComponent(id)}`, { authToken: token });
+        byEv[id] = Array.isArray(list) ? list : [];
+      } catch (e) {
+        byEv[id] = [];
+      }
+    }
+    return byEv;
+  };
+
+  const loadRegistrations = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, any[]>;
+    const byEv: Record<string, any[]> = {};
+    for (const id of eventIds) {
+      try {
+        const list = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(id)}`, { authToken: token });
+        byEv[id] = Array.isArray(list) ? list : [];
+      } catch (e) {
+        byEv[id] = [];
+      }
+    }
+    return byEv;
+  };
+
+  const loadTicketUsage = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, { used: number; unused: number }>;
+    const result: Record<string, { used: number; unused: number }> = {};
+    for (const id of eventIds) {
+      try {
+        const tickets = await apiFetch<any[]>(`/api/tickets/event/${encodeURIComponent(id)}`, { authToken: token });
+        result[id] = { used: tickets.filter(t => t.isUsed).length, unused: tickets.filter(t => !t.isUsed).length };
+      } catch (e) {
+        result[id] = { used: 0, unused: 0 };
+      }
+    }
+    return result;
+  };
+
+  const loadFinancials = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, any>;
+    const byEv: Record<string, any> = {};
+    for (const id of eventIds) {
+      try {
+        byEv[id] = await apiFetch<any>(`/api/cashups/event/${encodeURIComponent(id)}`, { authToken: token });
+      } catch (e) {
+        byEv[id] = null;
+      }
+    }
+    return byEv;
+  };
+
+  const loadCashupAudit = async (eventIds: string[]) => {
+    if (!token) return [] as any[];
+    const query = new URLSearchParams();
+    if (auditFrom) query.set("from", auditFrom);
+    if (auditTo) query.set("to", auditTo);
+    if (eventIds.length === 1) query.set("eventId", eventIds[0]);
+    try {
+      const rows = await apiFetch<any[]>(`/api/cashups/audit?${query.toString()}`, { authToken: token });
+      const idSet = new Set(eventIds);
+      const filtered = eventIds.length > 1 ? (rows || []).filter(r => idSet.has(r.eventId)) : (rows || []);
+      return computeAuditDeltas(filtered).sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    } catch (e) {
+      return [];
+    }
+  };
+
+  // View handler according to selected report
+  const onView = async () => {
+    setBusy(true);
+    setReady(false);
+    try {
+      if (report === "payments") {
+        const byEv = await loadPayments(payEvents);
+        setPaymentsByEvent(byEv);
+      } else if (report === "attendees") {
+        const byEv = await loadRegistrations([attEventId]);
+        setRegistrationsByEvent(byEv);
+      } else if (report === "regTypes") {
+        const byEv = await loadRegistrations(regTypeEvents);
+        setRegistrationsByEvent(byEv);
+      } else if (report === "usage") {
+        const usage = await loadTicketUsage(usageEvents);
+        setTicketUsage(usage);
+      } else if (report === "revenue") {
+        const byEv = await loadPayments(revEvents);
+        setPaymentsByEvent(byEv);
+      } else if (report === "revenueDetailed") {
+        const [byEvP, byEvR] = await Promise.all([
+          loadPayments(revDetEvents),
+          loadRegistrations(revDetEvents)
+        ]);
+
+        setPaymentsByEvent(byEvP);
+        setRegistrationsByEvent(byEvR);
+      } else if (report === "regStatus") {
+        const byEv = await loadRegistrations(statusEvents);
+        setRegistrationsByEvent(byEv);
+      } else if (report === "masterOrders") {
+        const [byEvP, byEvR] = await Promise.all([
+          loadPayments(masterEvents),
+          loadRegistrations(masterEvents)
+        ]);
+        setPaymentsByEvent(byEvP);
+        setRegistrationsByEvent(byEvR);
+      } else if (report === "donations") {
+        const byEv = await loadPayments(donationEvents);
+        setPaymentsByEvent(byEv);
+      } else if (report === "cashup") {
+        const byEv = await loadFinancials(cashupEvents);
+        setFinancialsByEvent(byEv);
+      } else if (report === "financeReport") {
+        const byEv = await loadFinancials(financeEvents);
+        setFinancialsByEvent(byEv);
+      } else if (report === "profitReport") {
+        const byEv = await loadFinancials(profitEvents);
+        setFinancialsByEvent(byEv);
+      } else if (report === "cashupAudit") {
+        const rows = await loadCashupAudit(auditEvents);
+        setAuditRows(rows);
+      }
+      setReady(true);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Payment method label mapping
+  const getPaymentMethod = (p: any) => {
+    try {
+      if (p?.externalId) return "Yoco Portal";
+    } catch {}
+    return p?.method || "Unknown";
+  };
+
+  // Derived rows for payments (apply date filter)
+  const paymentRows = useMemo(() => {
+    if (report !== "payments") return [] as any[];
+    const df = payFrom ? new Date(payFrom).getTime() : null;
+    const dt = payTo ? new Date(payTo).getTime() : null;
+    const rows: { eventId: string; eventTitle: string; userName: string; userEmail?: string; amount: number; method: string; isDonation?: boolean; createdAt: string }[] = [];
+    for (const evId of Object.keys(paymentsByEvent)) {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const evTitle = ev?.title || evId;
+      for (const p of paymentsByEvent[evId] || []) {
+        const t = new Date(p.createdAt).getTime();
+        if ((df && t < df) || (dt && t > dt)) continue;
+        // Reporting rule: if donation, attribute to payer; otherwise attribute to the registration's assigned user
+        const u = p.isDonation ? (p.user || {}) : ((p.registration?.user || p.user) || {});
+        rows.push({
+          eventId: evId,
+          eventTitle: evTitle,
+          userName: u?.name || u?.email || p.userId || "User",
+          userEmail: u?.email,
+          amount: p.amount,
+          method: getPaymentMethod(p),
+          isDonation: p.isDonation,
+          createdAt: p.createdAt,
+        });
+      }
+    }
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '') || new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
+    return rows;
+  }, [report, paymentsByEvent, payFrom, payTo, filteredEvents]);
+
+  // Derived rows for revenue detailed (apply date filter)
+  // Outstanding by registration respecting early-bird tiers and last payment lock-in
+  const outstandingByReg = useMemo(() => {
+    const map = new Map<string, number>();
+    // Build quick index of payments per registration from all payments loaded per event
+    const paidByReg = new Map<string, number>();
+    const lastPaymentAtByReg = new Map<string, Date | null>();
+    Object.keys(paymentsByEvent).forEach(evId => {
+      (paymentsByEvent[evId] || []).forEach((p: any) => {
+        if (p.registrationId) {
+          const regId = p.registrationId;
+          paidByReg.set(regId, (paidByReg.get(regId) || 0) + (p.amount || 0));
+          const t = new Date(p.createdAt).getTime();
+          const prev = lastPaymentAtByReg.get(regId)?.getTime() || -Infinity;
+          if (t > prev) lastPaymentAtByReg.set(regId, new Date(t));
+        }
+      });
+    });
+
+    const now = new Date();
+    // For each registration in loaded events, compute due and outstanding with lock-in rule
+    Object.keys(registrationsByEvent).forEach(evId => {
+      (registrationsByEvent[evId] || []).forEach((r: any) => {
+        const lastAt = lastPaymentAtByReg.get(r.id) || null;
+        const dueNow = (r.registrationOptions || []).reduce((sum: number, ro: any) => sum + optionUnitPrice(ro, lastAt, now) * (ro.quantity || 0), 0);
+        const paid = paidByReg.get(r.id) || 0;
+        let outstanding = Math.max(dueNow - paid, 0);
+        if (lastAt) {
+          const dueAtLast = (r.registrationOptions || []).reduce((sum: number, ro: any) => sum + optionUnitPrice(ro, lastAt, lastAt) * (ro.quantity || 0), 0);
+          if (paid >= dueAtLast) outstanding = 0;
+        }
+        map.set(r.id, outstanding);
+      });
+    });
+    return map;
+  }, [paymentsByEvent, registrationsByEvent]);
+
+  const donationsByEvent = useMemo(() => {
+    const map = new Map<string, number>();
+
+    Object.keys(paymentsByEvent).forEach(evId => {
+      const total = (paymentsByEvent[evId] || [])
+          .filter((p: any) => p.isDonation)
+          .reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+
+      map.set(evId, total);
+    });
+
+    return map;
+  }, [paymentsByEvent]);
+
+  const donationsByUser = useMemo(() => {
+    const map = new Map<string, number>();
+
+    Object.values(paymentsByEvent).forEach((payments: any) => {
+      (payments || []).forEach((p: any) => {
+        if (!p.isDonation) return;
+
+        const userId = p.user?.id || p.userId;
+        if (!userId) return;
+
+        map.set(userId, (map.get(userId) || 0) + (p.amount || 0));
+      });
+    });
+
+    return map;
+  }, [paymentsByEvent]);
+
+  // Build payment totals per registration (all payments, no date filter)
+  const paidByReg = useMemo(() => {
+    const map = new Map<string, number>();
+    Object.keys(paymentsByEvent).forEach(evId => {
+      (paymentsByEvent[evId] || []).forEach((p: any) => {
+        if (p.registrationId) {
+          map.set(p.registrationId, (map.get(p.registrationId) || 0) + (p.amount || 0));
+        }
+      });
+    });
+    return map;
+  }, [paymentsByEvent]);
+
+  const revDetRows = useMemo(() => {
+    if (report !== "revenueDetailed") return [] as any[];
+    const df = payFrom ? new Date(payFrom).getTime() : null;
+    const dt = payTo ? new Date(payTo).getTime() : null;
+    type Row = { eventId: string; eventTitle: string; userName: string; userEmail?: string; totalPaid: number; status?: string; registrationId: string; outstanding: number };
+    const rows: Row[] = [];
+    // Iterate registrations to include those with zero payments and show each once
+    Object.keys(registrationsByEvent).forEach(evId => {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const evTitle = ev?.title || evId;
+      (registrationsByEvent[evId] || []).forEach((r: any) => {
+        const created = r.createdAt ? new Date(r.createdAt).getTime() : null;
+        if (df && created && created < df) return;
+        if (dt && created && created > dt) return;
+        const totalPaid = paidByReg.get(r.id) || 0;
+        const outstanding = outstandingByReg.get(r.id) || 0;
+        rows.push({
+          eventId: evId,
+          eventTitle: evTitle,
+          userName: r.user?.name || r.userId || "User",
+          userEmail: r.user?.email,
+          totalPaid,
+          status: r.status,
+          registrationId: r.id,
+          outstanding,
+        });
+      });
+    });
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '')));
+    return rows;
+  }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, outstandingByReg]);
+
+  // Derived for attendees (layered) for a single event
+  const attendeesLayer = useMemo(() => {
+    if (report !== "attendees") return { eventTitle: "", options: [] as any[] };
+    const regs = registrationsByEvent[attEventId] || [];
+    const ev = filteredEvents.find(e => e.id === attEventId);
+    // Option -> users
+    const byOption = new Map<string, { optionName: string; users: { name: string; email?: string; status: string; qty: number }[] }>();
+    for (const r of regs) {
+      if (!attIncludeCancelled && r.status === "cancelled") continue;
+
+      const baseUser = {
+        name: r.user?.name || r.userId,
+        email: r.user?.email,
+        status: r.status,
+      };
+
+      const options = (r.registrationOptions || []);
+
+      if (options.length === 0) {
+        const key = "(No option)";
+        if (!byOption.has(key)) byOption.set(key, { optionName: key, users: [] });
+
+        byOption.get(key)!.users.push({
+          ...baseUser,
+          qty: 0
+        });
+      }
+      else {
+        for (const ro of options) {
+          const key = ro.eventOption?.name || "Option";
+
+          if (!byOption.has(key)) {
+            byOption.set(key, { optionName: key, users: [] });
+          }
+
+          byOption.get(key)!.users.push({
+            ...baseUser,
+            qty: ro.quantity || 0
+          });
+        }
+      }
+    }
+    const options = Array.from(byOption.values()).sort((a,b) => a.optionName.localeCompare(b.optionName));
+    options.forEach(o => o.users.sort((a,b) => (a.name || '').localeCompare(b.name || '')));
+    return { eventTitle: ev?.title || attEventId, options };
+  }, [report, registrationsByEvent, attEventId, attIncludeCancelled, filteredEvents]);
+
+  // Derived for reg type counts
+  const regTypeRows = useMemo(() => {
+    if (report !== "regTypes") return [] as { eventTitle: string; type: string; qty: number }[];
+    const rows: { eventTitle: string; type: string; qty: number }[] = [];
+    for (const evId of Object.keys(registrationsByEvent)) {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const title = ev?.title || evId;
+      const regs = registrationsByEvent[evId] || [];
+      const counts: Record<string, number> = {};
+      for (const r of regs) {
+        if (r.status === "cancelled") continue;
+        for (const ro of (r.registrationOptions || [])) {
+          const name = ro.eventOption?.name || "Option";
+          counts[name] = (counts[name] || 0) + (ro.quantity || 0);
+        }
+      }
+      for (const type of Object.keys(counts)) rows.push({ eventTitle: title, type, qty: counts[type] });
+    }
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || a.type.localeCompare(b.type)));
+    return rows;
+  }, [report, registrationsByEvent, filteredEvents]);
+
+  //Master report options
+  const masterOptions = useMemo(() => {
+    if (report !== "masterOrders") return [];
+
+    const map = new Map<string, string>();
+
+    Object.values(registrationsByEvent).forEach((regs: any) => {
+      regs.forEach((r: any) => {
+        (r.registrationOptions || []).forEach((ro: any) => {
+          const id = ro.eventOption?.id;
+          const name = ro.eventOption?.name;
+
+          if (id && name) {
+            map.set(id, name);
+          }
+        });
+      });
+    });
+
+    return Array.from(map.entries())
+        .map(([id, name]) => ({ id, name }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+  }, [report, registrationsByEvent]);
+
+  //Master Report Data Rows
+  const masterRows = useMemo(() => {
+    if (report !== "masterOrders") return [];
+
+    const rows: any[] = [];
+
+    Object.keys(registrationsByEvent).forEach(evId => {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const eventTitle = ev?.title || evId;
+
+      (registrationsByEvent[evId] || []).forEach((r: any) => {
+        if (r.status === "cancelled") return;
+
+        const optionQtyMap = new Map<string, number>();
+
+        (r.registrationOptions || []).forEach((ro: any) => {
+          const id = ro.eventOption?.id;
+          const qty = ro.quantity || 0;
+
+          if (id) {
+            optionQtyMap.set(id, (optionQtyMap.get(id) || 0) + qty);
+          }
+        });
+
+        const baseRow: any = {
+          eventTitle,
+          name: r.user?.name || "User",
+          email: r.user?.email,
+          orderTotal: 0,
+          totalPaid: paidByReg.get(r.id) || 0,
+          outstanding: outstandingByReg.get(r.id) || 0,
+          donations: donationsByUser.get(r.user?.id || r.userId) || 0,
+          __prices: {} as Record<string, number> // 👈 hidden helper
+        };
+
+        // 👇 Dynamic columns
+        masterOptions.forEach(opt => {
+          const qty = optionQtyMap.get(opt.id) || 0;
+
+          baseRow[opt.name] = qty;
+
+          const ro = (r.registrationOptions || [])
+              .find((x: any) => x.eventOption?.id === opt.id);
+
+          const price = ro ? optionUnitPrice(ro, null, new Date()) : 0;
+
+          baseRow.__prices[opt.name] = price; // 👈 store price
+          baseRow.orderTotal += price * qty;
+        });
+
+        rows.push(baseRow);
+      });
+    });
+
+    rows.sort((a,b) =>
+        a.eventTitle.localeCompare(b.eventTitle) ||
+        a.name.localeCompare(b.name)
+    );
+
+    return rows;
+
+  }, [report, registrationsByEvent, filteredEvents, masterOptions, paidByReg, outstandingByReg]);
+
+  //Master Report Totals
+  const masterTotals = useMemo(() => {
+    if (report !== "masterOrders") return null;
+
+    const totals: any = {
+      orderTotal: 0,
+      totalPaid: 0,
+      outstanding: 0,
+      donations: 0,
+    };
+
+    // 👇 initialise dynamic option totals
+    masterOptions.forEach(opt => {
+      totals[opt.name] = 0;                 // qty total
+      totals[`${opt.name}_revenue`] = 0;     // revenue total
+    });
+
+    masterRows.forEach(row => {
+      totals.orderTotal += row.orderTotal;
+      totals.totalPaid += row.totalPaid;
+      totals.outstanding += row.outstanding;
+
+      masterOptions.forEach(opt => {
+        const qty = row[opt.name] || 0;
+        totals[opt.name] += qty;
+
+        // revenue per option
+        const price =
+            Number(
+                masterRows
+                    .find(r => r === row)?.__prices?.[opt.name] ?? 0
+            );
+
+        totals[`${opt.name}_revenue`] += qty * price;
+      });
+    });
+
+    totals.donations = Array.from(donationsByUser.values())
+        .reduce((s, v) => s + v, 0);
+
+    return totals;
+  }, [masterRows, masterOptions, report]);
+
+  // Export/print/email handlers per report
+  const doExportCsv = () => {
+    if (report === "payments") {
+      return downloadCsv(`payments_${new Date().toISOString().slice(0,10)}`, paymentRows.map(r => ({
+        Event: r.eventTitle,
+        User: r.userName,
+        Email: r.userEmail || "",
+        Amount: r.amount,
+        Method: r.method,
+        Donation: r.isDonation ? "Yes" : "No",
+        Date: new Date(r.createdAt).toLocaleString(),
+      })));
+    }
+    if (report === "attendees") {
+      const rows: any[] = [];
+      attendeesLayer.options.forEach(opt => {
+        opt.users.forEach((u: any) => rows.push({ Event: attendeesLayer.eventTitle, Option: opt.optionName, Name: u.name, Email: u.email || "", Status: u.status, Qty: u.Qty }));
+      });
+      return downloadCsv(`attendees_${attEventId}_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "regTypes") {
+      return downloadCsv(`registration_types_${new Date().toISOString().slice(0,10)}`, regTypeRows.map(r => ({ Event: r.eventTitle, Type: r.type, Quantity: r.qty })));
+    }
+    if (report === "usage") {
+      const rows: any[] = [];
+      Object.keys(ticketUsage).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        rows.push({ Event: ev?.title || evId, Used: ticketUsage[evId].used, Unused: ticketUsage[evId].unused });
+      });
+      return downloadCsv(`ticket_usage_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "revenue") {
+      const df = payFrom ? new Date(payFrom).getTime() : null;
+      const dt = payTo ? new Date(payTo).getTime() : null;
+      const rows: any[] = [];
+      Object.keys(paymentsByEvent).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+          const t = new Date(p.createdAt).getTime();
+          return !(df && t < df) && !(dt && t > dt);
+        });
+        const byMethod: Record<string, number> = {};
+        let total = 0;
+        list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+        if (list.length === 0) rows.push({ Event: ev?.title || evId, Method: '-', Amount: 0, Total: 0 });
+        Object.keys(byMethod).forEach(m => rows.push({ Event: ev?.title || evId, Method: m, Amount: byMethod[m], Total: total }));
+      });
+      return downloadCsv(`revenue_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "revenueDetailed") {
+      return downloadCsv(`revenue_detailed_${new Date().toISOString().slice(0,10)}`, revDetRows.map((r: any) => ({
+        Event: r.eventTitle,
+        Name: r.userName,
+        Email: r.userEmail || "",
+        Status: r.status || "",
+        TotalPaid: r.totalPaid,
+        Outstanding: r.outstanding,
+        RegistrationId: r.registrationId
+      })));
+    }
+    if (report === "regStatus") {
+      const rows: any[] = [];
+      Object.keys(registrationsByEvent).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        const regs = registrationsByEvent[evId] || [];
+        const counts: Record<string, number> = {};
+        const statuses = ["pending","partial_paid","paid","cancelled"];
+        statuses.forEach(s => counts[s] = 0);
+        regs.forEach((r: any) => {
+          if (!statusIncludeCancelled && r.status === 'cancelled') return;
+          counts[r.status] = (counts[r.status] || 0) + 1;
+        });
+        rows.push({ Event: ev?.title || evId, Pending: counts["pending"] || 0, Partial: counts["partial_paid"] || 0, Paid: counts["paid"] || 0, Cancelled: counts["cancelled"] || 0 });
+      });
+      return downloadCsv(`registration_status_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "donations") {
+      const rows: any[] = [];
+      Object.keys(paymentsByEvent).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        (paymentsByEvent[evId] || []).filter((p: any) => p.isDonation).forEach((p: any) => {
+          const u = p.user || {};
+          rows.push({ Event: ev?.title || evId, Donor: u.name || u.email || p.userId || '', Email: u.email || '', Amount: p.amount, Method: getPaymentMethod(p), Date: new Date(p.createdAt).toLocaleString() });
+        });
+      });
+      return downloadCsv(`donations_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "cashup") {
+      const cols = ["Event", "Section", "Detail", "Income", "CostsFromMethod", "ExpectedCash", "Actual", "Variance"];
+      const rows: any[] = [];
+      Object.keys(financialsByEvent).forEach(evId => {
+        const f = financialsByEvent[evId];
+        const ev = filteredEvents.find(e => e.id === evId);
+        if (!f) return;
+        const title = ev?.title || evId;
+        METHOD_KEYS.forEach(m => {
+          const r = f.reconciled?.byMethod?.[m];
+          rows.push({ Event: title, Section: "Method", Detail: METHOD_LABEL[m], Income: f.paymentsByMethod?.[m] || 0, CostsFromMethod: f.costsByMethod?.[m] || 0, ExpectedCash: f.expectedCashByMethod?.[m] || 0, Actual: r?.actual ?? "", Variance: r?.variance ?? "" });
+          if (m === "cash") {
+            (r?.denominations || []).forEach((d: any) => rows.push({ Event: title, Section: "Denomination", Detail: denomLabel(d.value) + " × " + d.count, Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: d.value * d.count, Variance: "" }));
+          }
+        });
+        if ((f.untaggedCostsTotal || 0) > 0) {
+          rows.push({ Event: title, Section: "Untagged costs", Detail: "Not tied to a specific method", Income: "", CostsFromMethod: f.untaggedCostsTotal, ExpectedCash: "", Actual: "", Variance: "" });
+        }
+        rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: f.unallocatedDonationsTotal || 0, Variance: "" });
+      });
+      return downloadCsv(`cashup_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+    }
+    if (report === "financeReport") {
+      const cols = ["Event", "Section", "Detail", "Amount"];
+      const rows: any[] = [];
+      Object.keys(financialsByEvent).forEach(evId => {
+        const f = financialsByEvent[evId];
+        const ev = filteredEvents.find(e => e.id === evId);
+        if (!f) return;
+        const title = ev?.title || evId;
+        (f.salesByOption || []).forEach((s: any) => rows.push({ Event: title, Section: "Sales", Detail: `${s.name} (${s.quantitySold} sold)`, Amount: s.revenue }));
+        rows.push({ Event: title, Section: "Sales", Detail: "Donations", Amount: f.totalDonations || 0 });
+        METHOD_KEYS.forEach(m => rows.push({ Event: title, Section: "Paid by", Detail: METHOD_LABEL[m], Amount: f.paymentsByMethod?.[m] || 0 }));
+        METHOD_KEYS.forEach(m => {
+          const r = f.reconciled?.byMethod?.[m];
+          rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — expected`, Amount: f.expectedCashByMethod?.[m] || 0 });
+          rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — actual`, Amount: r?.actual ?? "" });
+          rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — variance`, Amount: r?.variance ?? "" });
+        });
+        (f.costs || []).forEach((c: any) => rows.push({ Event: title, Section: "Costs", Detail: `${c.label}${c.paidFromMethod ? ` (paid via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Amount: -(c.total ?? c.amount) }));
+        rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Amount: f.unallocatedDonationsTotal || 0 });
+        rows.push({ Event: title, Section: "Net profit", Detail: "", Amount: f.netProfit || 0 });
+      });
+      return downloadCsv(`finance_report_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+    }
+    if (report === "profitReport") {
+      const rows = Object.keys(financialsByEvent).map(evId => {
+        const f = financialsByEvent[evId];
+        const ev = filteredEvents.find(e => e.id === evId);
+        return { Event: ev?.title || evId, Revenue: f?.effectiveTotalRevenue || 0, Costs: f?.totalCosts || 0, NetProfit: f?.netProfit || 0 };
+      });
+      return downloadCsv(`profit_report_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "cashupAudit") {
+      const cols = ["Event", "Action", "PerformedBy", "Date", "Method", "Expected", "Actual", "Variance", "DeltaVsPreviousClose", "DonationsCountedAsProfit", "Notes"];
+      const rows: any[] = [];
+      auditRows.forEach((r: any) => {
+        const base = { Event: r.event?.title || r.eventId, Action: actionLabel(r.action), PerformedBy: r.performedBy?.name || "", Date: new Date(r.createdAt).toLocaleString() };
+        if (r.action === "reopened") {
+          rows.push({ ...base, Method: "", Expected: "", Actual: "", Variance: "", DeltaVsPreviousClose: "", DonationsCountedAsProfit: "", Notes: r.notes || "" });
+        } else {
+          (r.lines || []).forEach((l: any) => rows.push({
+            ...base, Method: METHOD_LABEL[l.method] || l.method, Expected: l.expectedAmount, Actual: l.actualAmount ?? "", Variance: l.variance ?? "",
+            DeltaVsPreviousClose: r._deltaVsPrevious?.[l.method] ?? "", DonationsCountedAsProfit: r.unallocatedDonationsTotal || 0, Notes: l.notes || r.notes || ""
+          }));
+        }
+      });
+      return downloadCsv(`cashup_audit_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+    }
+    if (report === "masterOrders") {
+      const rows = masterRows.map(r => ({
+        Event: r.eventTitle,
+        Name: r.name,
+        Email: r.email || "",
+
+        ...masterOptions.reduce((acc, opt) => {
+          acc[opt.name] = r[opt.name] ?? 0;
+          return acc;
+        }, {} as any),
+
+        OrderTotal: r.orderTotal,
+        Paid: r.totalPaid,
+        Outstanding: r.outstanding,
+        Donations: r.donations
+      }));
+
+      // 👇 TOTAL ROW
+      rows.push({
+        Event: "TOTAL",
+        Name: "",
+        Email: "",
+
+        ...masterOptions.reduce((acc, opt) => {
+          acc[opt.name] = masterTotals?.[opt.name] ?? 0;
+          return acc;
+        }, {} as any),
+
+        OrderTotal: masterTotals?.orderTotal ?? 0,
+        Paid: masterTotals?.totalPaid ?? 0,
+        Outstanding: masterTotals?.outstanding ?? 0,
+        Donations: masterTotals?.donations ?? 0,
+      });
+
+      // 👇 REVENUE PER TICKET ROW 🔥
+      rows.push({
+        Event: "Revenue per Ticket",
+        Name: "",
+        Email: "",
+
+        ...masterOptions.reduce((acc, opt) => {
+          acc[opt.name] = masterTotals?.[`${opt.name}_revenue`] ?? 0;
+          return acc;
+        }, {} as any),
+
+        OrderTotal: "",
+        Paid: "",
+        Outstanding: "",
+        Donations: ""
+      });
+
+      return downloadCsv(
+          `master_orders_${new Date().toISOString().slice(0,10)}`,
+          rows
+      );
+    }
+  };
+
+  const doPrintPdf = async () => {
+    if (!token) { alert('Please login to export PDF'); return; }
+    try {
+      if (report === "payments") {
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Payments Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: {
+            columns: ["Event","User","Email","Amount","Method","Donation","Date"],
+            rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()])
+          }
+        });
+        return;
+      }
+      if (report === "attendees") {
+        // Build layered sections: each option -> list of strings (user line)
+        const sections = attendeesLayer.options.map(opt => ({
+          title: opt.optionName,
+          items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`)
+        }));
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Attendees Report',
+          kind: 'layered',
+          orientation: 'portrait',
+          layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }
+        });
+        return;
+      }
+      if (report === "regTypes") {
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Registration Types Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: {
+            columns: ["Event","Type","Quantity"],
+            rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)])
+          }
+        });
+        return;
+      }
+      if (report === "usage") {
+        const rows: (string|number)[][] = [];
+        Object.keys(ticketUsage).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const tu = ticketUsage[evId];
+          rows.push([ev?.title || evId, tu.used, tu.unused]);
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Ticket Usage Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: { columns: ["Event","Used","Unused"], rows }
+        });
+        return;
+      }
+      if (report === "revenue") {
+        const df = payFrom ? new Date(payFrom).getTime() : null;
+        const dt = payTo ? new Date(payTo).getTime() : null;
+        const rows: (string|number)[][] = [];
+        Object.keys(paymentsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+            const t = new Date(p.createdAt).getTime();
+            return !(df && t < df) && !(dt && t > dt);
+          });
+          const byMethod: Record<string, number> = {};
+          let total = 0;
+          list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+          if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
+          Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Revenue Summary',
+          kind: 'table',
+          orientation: 'portrait',
+          table: { columns: ["Event","Method","Amount","Event Total"], rows }
+        });
+        return;
+      }
+      if (report === "revenueDetailed") {
+        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [
+          r.eventTitle,
+          r.userName,
+          r.userEmail || "",
+          r.status || "",
+          Number((r.totalPaid || 0).toFixed(2)),
+          Number((r.outstanding || 0).toFixed(2)),
+          r.registrationId || "",
+        ]);
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Revenue Detailed',
+          kind: 'table',
+          orientation: 'landscape',
+          table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }
+        });
+        return;
+      }
+      if (report === "regStatus") {
+        const rows: (string|number)[][] = [];
+        Object.keys(registrationsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const regs = registrationsByEvent[evId] || [];
+          const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
+          regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; });
+          rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]);
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Registration Status Breakdown',
+          kind: 'table',
+          table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }
+        });
+        return;
+      }
+      if (report === "cashup") {
+        const rows: (string | number)[][] = [];
+        Object.keys(financialsByEvent).forEach(evId => {
+          const f = financialsByEvent[evId];
+          const ev = filteredEvents.find(e => e.id === evId);
+          if (!f) return;
+          const title = ev?.title || evId;
+          METHOD_KEYS.forEach(m => {
+            const r = f.reconciled?.byMethod?.[m];
+            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
+            if (m === "cash") {
+              (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
+            }
+          });
+          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
+          rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
+        });
+        await downloadReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows } });
+        return;
+      }
+      if (report === "financeReport") {
+        const rows: (string | number)[][] = [];
+        Object.keys(financialsByEvent).forEach(evId => {
+          const f = financialsByEvent[evId];
+          const ev = filteredEvents.find(e => e.id === evId);
+          if (!f) return;
+          const title = ev?.title || evId;
+          rows.push([title, "Sales", "What was sold", ""]);
+          (f.salesByOption || []).forEach((s: any) => rows.push([title, "", `${s.name} (${s.quantitySold} sold)`, Number(s.revenue.toFixed(2))]));
+          rows.push([title, "", "Donations", Number((f.totalDonations || 0).toFixed(2))]);
+          rows.push([title, "Paid by", "", ""]);
+          METHOD_KEYS.forEach(m => rows.push([title, "", METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2))]));
+          rows.push([title, "Cashup comparison", "", ""]);
+          METHOD_KEYS.forEach(m => {
+            const r = f.reconciled?.byMethod?.[m];
+            rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
+          });
+          rows.push([title, "Costs", "", ""]);
+          (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
+          rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
+          rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
+        });
+        await downloadReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows } });
+        return;
+      }
+      if (report === "profitReport") {
+        const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
+          const f = financialsByEvent[evId];
+          const ev = filteredEvents.find(e => e.id === evId);
+          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
+        });
+        await downloadReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows } });
+        return;
+      }
+      if (report === "cashupAudit") {
+        const rows: (string | number)[][] = [];
+        auditRows.forEach((r: any) => {
+          const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
+          if (r.action === "reopened") {
+            rows.push([...base, "", "", "", "", "", r.notes || ""]);
+          } else {
+            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
+            if (!r.lines || r.lines.length === 0) rows.push([...base, "", "", "", "", "", `Donations counted as profit: ${money2(r.unallocatedDonationsTotal)}`]);
+          }
+        });
+        await downloadReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows } });
+        return;
+      }
+      if (report === "masterOrders") {
+        const bodyRows: (string | number)[][] = masterRows.map(r => [
+          r.eventTitle,
+          r.name,
+          r.email || "",
+
+          ...masterOptions.map(opt => r[opt.name] ?? 0),
+
+          Number(r.orderTotal.toFixed(2)),
+          Number(r.totalPaid.toFixed(2)),
+          Number(r.outstanding.toFixed(2))
+        ]);
+
+        // 👇 TOTAL ROW
+        bodyRows.push([
+          "TOTAL",
+          "",
+          "",
+
+          ...masterOptions.map(opt => masterTotals?.[opt.name] ?? 0),
+
+          Number((masterTotals?.orderTotal ?? 0).toFixed(2)),
+          Number((masterTotals?.totalPaid ?? 0).toFixed(2)),
+          Number((masterTotals?.outstanding ?? 0).toFixed(2))
+        ]);
+
+        // 👇 REVENUE PER TICKET ROW 🔥
+        bodyRows.push([
+          "Revenue per Ticket",
+          "",
+          "",
+
+          ...masterOptions.map(opt =>
+              `R ${(masterTotals?.[`${opt.name}_revenue`] ?? 0).toFixed(2)}`
+          ),
+
+          "",
+          "",
+          ""
+        ]);
+
+        await downloadReportPdf(API_BASE, token, {
+          title: "Master Orders Breakdown",
+          kind: "table",
+          orientation: "landscape",
+          table: {
+            columns: [
+              "Event",
+              "Name",
+              "Email",
+
+              ...masterOptions.map(o => o.name),
+
+              "Order Total",
+              "Paid",
+              "Outstanding"
+            ],
+            rows: bodyRows
+          }
+        });
+
+        return;
+      }
+    } catch (e: any) {
+      alert(e?.message || 'Failed to generate PDF');
+    }
+  };
+
+  const doEmail = async () => {
+    if (!token) { alert('Please login to email PDF'); return; }
+    const subject = {
+      payments: "Payments Report",
+      attendees: "Attendees Report",
+      regTypes: "Registration Types Report",
+      usage: "Ticket Usage Report",
+      revenue: "Revenue Summary",
+      revenueDetailed: "Revenue Detailed Report",
+      regStatus: "Registration Status Breakdown",
+      masterOrders: "Master Orders Report",
+      donations: "Donations Breakdown",
+      cashup: "Cashup Report",
+      financeReport: "Finance Report",
+      profitReport: "Profit Report",
+      cashupAudit: "Cashup Audit Trail",
+    }[report];
+    const body = "Report generated on " + new Date().toLocaleString();
+    try {
+      if (report === 'payments') {
+        await emailReportPdf(API_BASE, token, {
+          title: 'Payments Report', kind: 'table', orientation: 'portrait',
+          table: { columns: ["Event","User","Email","Amount","Method","Donation","Date"], rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()]) },
+          subject, body
+        });
+      } else if (report === 'attendees') {
+        const sections = attendeesLayer.options.map(opt => ({ title: opt.optionName, items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`) }));
+        await emailReportPdf(API_BASE, token, { title: 'Attendees Report', kind: 'layered', orientation: 'portrait', layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }, subject, body });
+      } else if (report === 'regTypes') {
+        await emailReportPdf(API_BASE, token, { title: 'Registration Types Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Type","Quantity"], rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)]) }, subject, body });
+      } else if (report === 'usage') {
+        const rows: (string|number)[][] = [];
+        Object.keys(ticketUsage).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const tu = ticketUsage[evId]; rows.push([ev?.title || evId, tu.used, tu.unused]); });
+        await emailReportPdf(API_BASE, token, { title: 'Ticket Usage Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Used","Unused"], rows }, subject, body });
+      } else if (report === 'revenue') {
+        const df = payFrom ? new Date(payFrom).getTime() : null;
+        const dt = payTo ? new Date(payTo).getTime() : null;
+        const rows: (string|number)[][] = [];
+        Object.keys(paymentsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const list = (paymentsByEvent[evId] || []).filter((p: any) => { const t = new Date(p.createdAt).getTime(); return !(df && t < df) && !(dt && t > dt); });
+          const byMethod: Record<string, number> = {}; let total = 0;
+          list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+          if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
+          Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Revenue Summary', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Method","Amount","Event Total"], rows }, subject, body });
+      } else if (report === 'revenueDetailed') {
+        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [ r.eventTitle, r.userName, r.userEmail || "", r.status || "", Number((r.totalPaid || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "" ]);
+        await emailReportPdf(API_BASE, token, { title: 'Revenue Detailed', kind: 'table', orientation: 'landscape', table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }, subject, body });
+      } else if (report === 'regStatus') {
+        const rows: (string|number)[][] = [];
+        Object.keys(registrationsByEvent).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const regs = registrationsByEvent[evId] || []; const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 }; regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; }); rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]); });
+        await emailReportPdf(API_BASE, token, { title: 'Registration Status Breakdown', kind: 'table', table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }, subject, body });
+      } else if (report === 'cashup') {
+        const rows: (string | number)[][] = [];
+        Object.keys(financialsByEvent).forEach(evId => {
+          const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId); if (!f) return;
+          const title = ev?.title || evId;
+          METHOD_KEYS.forEach(m => {
+            const r = f.reconciled?.byMethod?.[m];
+            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
+            if (m === "cash") (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
+          });
+          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
+          rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows }, subject, body });
+      } else if (report === 'financeReport') {
+        const rows: (string | number)[][] = [];
+        Object.keys(financialsByEvent).forEach(evId => {
+          const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId); if (!f) return;
+          const title = ev?.title || evId;
+          rows.push([title, "Sales", "What was sold", ""]);
+          (f.salesByOption || []).forEach((s: any) => rows.push([title, "", `${s.name} (${s.quantitySold} sold)`, Number(s.revenue.toFixed(2))]));
+          rows.push([title, "", "Donations", Number((f.totalDonations || 0).toFixed(2))]);
+          rows.push([title, "Paid by", "", ""]);
+          METHOD_KEYS.forEach(m => rows.push([title, "", METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2))]));
+          rows.push([title, "Cashup comparison", "", ""]);
+          METHOD_KEYS.forEach(m => {
+            const r = f.reconciled?.byMethod?.[m];
+            rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
+          });
+          rows.push([title, "Costs", "", ""]);
+          (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
+          rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
+          rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows }, subject, body });
+      } else if (report === 'profitReport') {
+        const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
+          const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId);
+          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows }, subject, body });
+      } else if (report === 'cashupAudit') {
+        const rows: (string | number)[][] = [];
+        auditRows.forEach((r: any) => {
+          const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
+          if (r.action === "reopened") {
+            rows.push([...base, "", "", "", "", "", r.notes || ""]);
+          } else {
+            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
+          }
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows }, subject, body });
+      }
+      alert('Email sent with PDF attachment');
+    } catch (e: any) {
+      alert(e?.message || 'Failed to email PDF');
+    }
+  };
+
+  // Rendering helpers
+  function htmlTable(headers: string[], rows: (string | number)[][]) {
+    const thead = `<tr>${headers.map(h => `<th>${escapeHtml(h)}</th>`).join("")}</tr>`;
+    const tbody = rows.map(r => `<tr>${r.map(c => `<td>${escapeHtml(String(c ?? ""))}</td>`).join("")}</tr>`).join("");
+    return `<table><thead>${thead}</thead><tbody>${tbody}</tbody></table>`;
+  }
+  function htmlLayered(eventTitle: string, options: { optionName: string; users: { name: string; email?: string; status: string; qty?: number }[] }[]) {
+    const optHtml = options.map(opt => `
+      <div class="layer-option">
+        <div class="layer-option-title">${escapeHtml(opt.optionName)}</div>
+        <ul class="layer-users">
+          ${opt.users.map(u => `<li><span class="name">${escapeHtml(u.name || "")}</span>${u.email ? ` <span class="email">(${escapeHtml(u.email)})</span>` : ""} <span class="status">— ${escapeHtml(u.status)}</span>${typeof u.qty === 'number' ? ` <span class="status"> • Qty: ${u.qty}</span>` : ''}</li>`).join("")}
+        </ul>
+      </div>
+    `).join("");
+    return `
+      <style>
+        .layer-event{font-size:16px;font-weight:700;margin:4px 0 10px 0}
+        .layer-option{margin:8px 0 12px 16px;page-break-inside:avoid}
+        .layer-option-title{font-weight:600;margin-bottom:6px}
+        .layer-users{list-style:disc;margin-left:20px}
+        .layer-users li{margin:3px 0;font-size:12px}
+        .layer-users .name{font-weight:500}
+        .layer-users .email{color:#555}
+        .layer-users .status{color:#666}
+      </style>
+      <div class="layer-event">${escapeHtml(eventTitle)}</div>
+      ${optHtml}
+    `;
+  }
+  function escapeHtml(s: string) {
+    return s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[c] as string));
+  }
+
+  // UI
+  return (
+    <div>
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">You need supervisor or admin access to view reports.</div>
+      )}
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+      {/* Step 1: select report */}
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6 space-y-3">
+        <div className="text-sm font-medium">Select a report</div>
+        <div className="flex flex-wrap gap-2">
+          {REPORTS.map(r => (
+            <label key={r.key} className={`px-3 py-2 text-sm rounded border cursor-pointer ${report===r.key? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'}`}>
+              <input type="radio" className="hidden" name="report" value={r.key} checked={report===r.key} onChange={() => { setReport(r.key); setReady(false); }} />
+              {r.label}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Step 2: filters per report */}
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6 space-y-4">
+        <div className="text-sm font-medium">Filters</div>
+        <div className="flex flex-wrap gap-4 text-sm">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" checked={showPastEvents} onChange={e => setShowPastEvents(e.target.checked)} />
+            Include past events
+          </label>
+          {isAdmin && (
+            <label className="flex items-center gap-2 cursor-pointer">
+              <input type="checkbox" checked={showInactiveEvents} onChange={e => setShowInactiveEvents(e.target.checked)} />
+              Include inactive events
+            </label>
+          )}
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input type="checkbox" checked={showClosedEvents} onChange={e => setShowClosedEvents(e.target.checked)} />
+            Include closed (cashed-up) events
+          </label>
+        </div>
+        {report === "payments" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={payEvents} onChange={setPayEvents} />
+            </div>
+          </div>
+        )}
+        {report === "attendees" && (
+          <div className="flex flex-wrap items-center gap-3">
+            <label className="text-sm">
+              <span className="text-gray-600 mr-2">Event</span>
+              <select className="border rounded px-3 py-2 text-sm" value={attEventId} onChange={e => setAttEventId(e.target.value)}>
+                {filteredEvents.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+              </select>
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={attIncludeCancelled} onChange={e => setAttIncludeCancelled(e.target.checked)} /> Include cancelled registrations
+            </label>
+          </div>
+        )}
+        {report === "regTypes" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={regTypeEvents} onChange={setRegTypeEvents} />
+          </div>
+        )}
+        {report === "usage" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={usageEvents} onChange={setUsageEvents} />
+          </div>
+        )}
+        {report === "revenue" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={revEvents} onChange={setRevEvents} />
+            </div>
+          </div>
+        )}
+        {report === "revenueDetailed" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={revDetEvents} onChange={setRevDetEvents} />
+            </div>
+          </div>
+        )}
+        {report === "regStatus" && (
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={statusEvents} onChange={setStatusEvents} />
+            </div>
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={statusIncludeCancelled} onChange={e => setStatusIncludeCancelled(e.target.checked)} /> Include cancelled in counts
+            </label>
+          </div>
+        )}
+        {report === "masterOrders" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={masterEvents} onChange={setMasterEvents} />
+          </div>
+        )}
+        {report === "donations" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={donationEvents} onChange={setDonationEvents} />
+          </div>
+        )}
+        {report === "cashup" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={cashupEvents} onChange={setCashupEvents} />
+          </div>
+        )}
+        {report === "financeReport" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={financeEvents} onChange={setFinanceEvents} />
+          </div>
+        )}
+        {report === "profitReport" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={profitEvents} onChange={setProfitEvents} />
+          </div>
+        )}
+        {report === "cashupAudit" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={auditFrom} onChange={e => setAuditFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={auditTo} onChange={e => setAuditTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events (optional — leave empty for all)</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={auditEvents} onChange={setAuditEvents} />
+            </div>
+          </div>
+        )}
+        <div>
+          <button disabled={busy} onClick={onView} className="px-3 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50">{busy ? 'Loading…' : 'View report'}</button>
+        </div>
+      </div>
+
+      {/* Step 3: results + actions */}
+      {ready && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="text-lg font-semibold">Results</div>
+            <div className="flex gap-2">
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doExportCsv}>Export CSV</button>
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doPrintPdf}>Save as PDF</button>
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doEmail}>Email</button>
+            </div>
+          </div>
+
+          {report === "payments" && (
+            <div>
+              {paymentRows.length === 0 ? (
+                <div className="text-sm text-gray-500">No payments match the selected filters.</div>
+              ) : (
+                <div className="space-y-5">
+                  {Object.entries(paymentRows.reduce((acc: any, r: any) => {
+                    acc[r.eventTitle] = acc[r.eventTitle] || [];
+                    acc[r.eventTitle].push(r);
+                    return acc;
+                  }, {})).map(([eventTitle, rows]: any) => {
+                    // group by user
+                    const byUser: Record<string, any[]> = {};
+                    rows.forEach((r: any) => {
+                      const key = r.userName || 'User';
+                      byUser[key] = byUser[key] || [];
+                      byUser[key].push(r);
+                    });
+                    const eventTotal = rows.reduce((s: number, r: any) => s + (r.amount || 0), 0);
+                    return (
+                      <div key={eventTitle} className="border rounded-xl p-4 bg-gray-50">
+                        <div className="flex items-center justify-between mb-2">
+                          <div className="text-base font-semibold">{eventTitle}</div>
+                          <div className="text-sm font-medium">Total: R {eventTotal.toFixed(2)}</div>
+                        </div>
+                        <div className="space-y-3">
+                          {Object.keys(byUser).sort().map(userName => {
+                            const list = byUser[userName];
+                            const userTotal = list.reduce((s: number, r: any) => s + (r.amount || 0), 0);
+                            const email = list.find((r: any) => r.userEmail)?.userEmail || '';
+                            return (
+                              <div key={userName} className="border rounded-lg p-3 bg-white">
+                                <div className="flex items-center justify-between mb-2">
+                                  <div className="font-medium">{userName} {email ? <span className="text-gray-600 font-normal">({email})</span> : null}</div>
+                                  <div className="text-sm">Subtotal: R {userTotal.toFixed(2)}</div>
+                                </div>
+                                <ul className="text-sm text-gray-700 space-y-1">
+                                  {list.map((r: any, i: number) => (
+                                    <li key={i} className="flex items-center justify-between">
+                                      <span>{r.method}{r.isDonation ? ' • Donation' : ''}</span>
+                                      <span>R {Number(r.amount).toFixed(2)} • {new Date(r.createdAt).toLocaleString()}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {report === "attendees" && (
+            <div>
+              <div className="text-sm text-gray-700 mb-3">Event: <span className="font-medium">{attendeesLayer.eventTitle}</span></div>
+              {attendeesLayer.options.length === 0 ? (
+                <div className="text-sm text-gray-500">No attendees for selected filters.</div>
+              ) : (
+                <div className="space-y-4">
+                  {attendeesLayer.options.map(opt => (
+                    <div key={opt.optionName} className="border rounded-lg p-3">
+                      <div className="font-medium mb-2">{opt.optionName}</div>
+                      <ul className="list-disc ml-5 space-y-1">
+                        {opt.users.map((u: any, i: number) => (
+                          <li key={opt.optionName + i} className="text-sm">
+                            <span className="font-medium">{u.name}</span>
+                            {u.email && <span className="text-gray-600"> ({u.email})</span>}
+                            <span className="text-gray-600"> — {u.status}</span>
+                            <span className="text-gray-700"> • Qty {u.qty}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {report === "regTypes" && (
+            <div className="overflow-auto">
+              {regTypeRows.length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[520px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Registration Type</th>
+                      <th>Quantity</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {regTypeRows.map((r, idx) => (
+                      <tr key={idx}>
+                        <td>{r.eventTitle}</td>
+                        <td>{r.type}</td>
+                        <td>{r.qty}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {report === "usage" && (
+            <div className="overflow-auto">
+              {Object.keys(ticketUsage).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[420px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Used</th>
+                      <th>Unused</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(ticketUsage).map(evId => {
+                      const ev = events.find(e => e.id === evId);
+                      const tu = ticketUsage[evId];
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>{tu.used}</td>
+                          <td>{tu.unused}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {report === "revenue" && (
+            <div className="space-y-4">
+              {Object.keys(paymentsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(paymentsByEvent).map(evId => {
+                  const ev = events.find(e => e.id === evId);
+                  const df = payFrom ? new Date(payFrom).getTime() : null;
+                  const dt = payTo ? new Date(payTo).getTime() : null;
+                  const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+                    const t = new Date(p.createdAt).getTime();
+                    return !(df && t < df) && !(dt && t > dt);
+                  });
+                  const byMethod: Record<string, number> = {};
+                  let total = 0;
+                  list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+                  return (
+                    <div key={evId} className="border rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{ev?.title || evId}</div>
+                        <div className="text-sm">Total: R {total.toFixed(2)}</div>
+                      </div>
+                      {Object.keys(byMethod).length === 0 ? (
+                        <div className="text-sm text-gray-500">No payments in date range.</div>
+                      ) : (
+                        <ul className="text-sm text-gray-700 space-y-1">
+                          {Object.keys(byMethod).sort().map(m => (
+                            <li key={m} className="flex items-center justify-between"><span>{m}</span><span>R {byMethod[m].toFixed(2)}</span></li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {report === "revenueDetailed" && (
+            <div className="space-y-4">
+              {Object.keys(registrationsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(registrationsByEvent).map(evId => {
+                  const ev = events.find(e => e.id === evId);
+                  const rows = (revDetRows as any[]).filter(r => r.eventId === evId);
+                  const total = rows.reduce((s, r) => s + (r.totalPaid || 0), 0);
+                  const regIds = rows.map(r => r.registrationId);
+                  const outstandingTotal = regIds.reduce((s, id) => s + (outstandingByReg.get(id) || 0), 0);
+                  return (
+                    <div key={evId} className="border rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{ev?.title || evId}</div>
+                        <div className="text-sm">Total: R {total.toFixed(2)}{` • Outstanding: R ${outstandingTotal.toFixed(2)}`}</div>
+                      </div>
+                      {rows.length === 0 ? (
+                        <div className="text-sm text-gray-500">No registrations in date range.</div>
+                      ) : (
+                        <div className="overflow-auto">
+                          <table className="min-w-[760px] text-sm">
+                            <thead>
+                              <tr>
+                                <th className="text-left">Name</th>
+                                <th className="text-left">Email</th>
+                                <th className="text-left">Status</th>
+                                <th className="text-left">Total paid</th>
+                                <th className="text-left">Outstanding</th>
+                                <th className="text-left">Registration</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {rows.map((r, idx) => (
+                                <tr key={evId + idx}>
+                                  <td>{r.userName}</td>
+                                  <td>{r.userEmail || ''}</td>
+                                  <td className="capitalize">{r.status || ''}</td>
+                                  <td>R {Number(r.totalPaid || 0).toFixed(2)}</td>
+                                  <td>R {Number(r.outstanding || 0).toFixed(2)}</td>
+                                  <td className="font-mono text-xs">{r.registrationId || ''}</td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {report === "regStatus" && (
+            <div className="overflow-auto">
+              {Object.keys(registrationsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[560px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Pending</th>
+                      <th>Partial</th>
+                      <th>Paid</th>
+                      <th>Cancelled</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(registrationsByEvent).map(evId => {
+                      const ev = events.find(e => e.id === evId);
+                      const regs = registrationsByEvent[evId] || [];
+                      const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
+                      regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; });
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>{counts.pending || 0}</td>
+                          <td>{counts.partial_paid || 0}</td>
+                          <td>{counts.paid || 0}</td>
+                          <td>{counts.cancelled || 0}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+          {report === "donations" && (
+            <div className="overflow-auto">
+              {Object.keys(paymentsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data. Select events and view.</div>
+              ) : (
+                <table className="min-w-[520px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Donations (R)</th>
+                      <th>Count</th>
+                      <th>Avg (R)</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(paymentsByEvent).map(evId => {
+                      const ev = filteredEvents.find(e => e.id === evId);
+                      const dons = (paymentsByEvent[evId] || []).filter((p: any) => p.isDonation);
+                      const total = dons.reduce((s: number, p: any) => s + (p.amount || 0), 0);
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>R {total.toFixed(2)}</td>
+                          <td>{dons.length}</td>
+                          <td>{dons.length ? `R ${(total / dons.length).toFixed(2)}` : '-'}</td>
+                        </tr>
+                      );
+                    })}
+                    <tr style={{ fontWeight: 700 }}>
+                      <td>Total</td>
+                      <td>R {Object.values(paymentsByEvent).reduce((s, payments) => s + (payments as any[]).filter(p => p.isDonation).reduce((ss: number, p: any) => ss + (p.amount || 0), 0), 0).toFixed(2)}</td>
+                      <td>{Object.values(paymentsByEvent).reduce((s, payments) => s + (payments as any[]).filter(p => p.isDonation).length, 0)}</td>
+                      <td></td>
+                    </tr>
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+          {report === "masterOrders" && (
+              <div>
+                {masterRows.length === 0 ? (
+                    <div className="text-sm text-gray-500">
+                      No registrations found.
+                    </div>
+                ) : (
+                    <>
+                      <div className="mb-3 text-sm">
+                        <span className="font-medium">Totals:</span>
+                        <span className="ml-3">Order: R {masterTotals?.orderTotal.toFixed(2)}</span>
+                        <span className="ml-3">Paid: R {masterTotals?.totalPaid.toFixed(2)}</span>
+                        <span className="ml-3">Outstanding: R {masterTotals?.outstanding.toFixed(2)}</span>
+                      </div>
+
+                      <div className="overflow-auto">
+                        <table className="min-w-[1000px] text-sm">
+                          <thead>
+                          <tr>
+                            <th>Event</th>
+                            <th>Name</th>
+                            <th>Email</th>
+
+                            {masterOptions.map(opt => (
+                                <th key={opt.id}>{opt.name}</th>
+                            ))}
+
+                            <th>Order Total</th>
+                            <th>Paid</th>
+                            <th>Outstanding</th>
+                            <th>Donations</th>
+                          </tr>
+                          </thead>
+                          <tbody>
+                          {masterRows.map((r, idx) => (
+                              <tr key={idx}>
+                                <td>{r.eventTitle}</td>
+                                <td>{r.name}</td>
+                                <td>{r.email || ""}</td>
+
+                                {masterOptions.map(opt => (
+                                    <td key={opt.id}>
+                                      {r[opt.name] ?? 0}
+                                    </td>
+                                ))}
+
+                                <td>R {r.orderTotal.toFixed(2)}</td>
+                                <td>R {r.totalPaid.toFixed(2)}</td>
+                                <td>R {r.outstanding.toFixed(2)}</td>
+                                <td>R {r.donations.toFixed(2)}</td>
+                              </tr>
+                          ))}
+                          <tr className="font-semibold bg-gray-100">
+                            <td colSpan={3}>TOTAL</td>
+
+                            {masterOptions.map(opt => (
+                                <td key={opt.id}>
+                                  {masterTotals?.[opt.name] ?? 0}
+                                </td>
+                            ))}
+
+                            <td>R {masterTotals?.orderTotal.toFixed(2)}</td>
+                            <td>R {masterTotals?.totalPaid.toFixed(2)}</td>
+                            <td>R {masterTotals?.outstanding.toFixed(2)}</td>
+                            <td>R {masterTotals?.donations.toFixed(2)}</td>
+                          </tr>
+                          <tr className="text-xs bg-indigo-50">
+                            <td colSpan={3}>Revenue per Ticket</td>
+
+                            {masterOptions.map(opt => (
+                                <td key={opt.id}>
+                                  R {(masterTotals?.[`${opt.name}_revenue`] ?? 0).toFixed(2)}
+                                </td>
+                            ))}
+
+                            <td colSpan={4}></td>
+                          </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </>
+                )}
+              </div>
+          )}
+          {report === "cashup" && (
+            <div className="space-y-4">
+              {Object.keys(financialsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(financialsByEvent).map(evId => {
+                  const f = financialsByEvent[evId];
+                  const ev = filteredEvents.find(e => e.id === evId);
+                  if (!f) return null;
+                  return (
+                    <div key={evId} className="border rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{ev?.title || evId}</div>
+                        <span className={"text-xs px-2 py-0.5 rounded " + (f.event?.cashupStatus === "closed" ? "bg-rose-50 text-rose-700" : "bg-emerald-50 text-emerald-700")}>{f.event?.cashupStatus === "closed" ? "Closed" : "Open"}</span>
+                      </div>
+                      <div className="overflow-auto">
+                        <table className="min-w-[640px] text-sm">
+                          <thead><tr><th className="text-left">Method</th><th className="text-left">Income</th><th className="text-left">Costs from method</th><th className="text-left">Expected cash</th><th className="text-left">Actual</th><th className="text-left">Variance</th></tr></thead>
+                          <tbody>
+                            {METHOD_KEYS.map(m => {
+                              const r = f.reconciled?.byMethod?.[m];
+                              return (
+                                <React.Fragment key={m}>
+                                  <tr>
+                                    <td>{METHOD_LABEL[m]}</td>
+                                    <td>R {(f.paymentsByMethod?.[m] || 0).toFixed(2)}</td>
+                                    <td>R {(f.costsByMethod?.[m] || 0).toFixed(2)}</td>
+                                    <td>R {(f.expectedCashByMethod?.[m] || 0).toFixed(2)}</td>
+                                    <td>{r?.actual != null ? `R ${r.actual.toFixed(2)}` : <span className="text-gray-400">not reconciled</span>}</td>
+                                    <td className={r?.variance != null && r.variance !== 0 ? (r.variance < 0 ? "text-red-600" : "text-emerald-600") : ""}>{r?.variance != null ? `R ${r.variance.toFixed(2)}` : "—"}</td>
+                                  </tr>
+                                  {m === "cash" && (r?.denominations || []).length > 0 && (r?.denominations || []).map((d: any) => (
+                                    <tr key={d.id} className="text-xs text-gray-500">
+                                      <td className="pl-4">{denomLabel(d.value)} × {d.count}</td>
+                                      <td colSpan={4}></td>
+                                      <td>R {(d.value * d.count).toFixed(2)}</td>
+                                    </tr>
+                                  ))}
+                                </React.Fragment>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                      {(f.untaggedCostsTotal || 0) > 0 && (
+                        <div className="text-sm text-gray-600 flex items-center justify-between mt-2"><span>Untagged costs (not tied to a method)</span><span>R {f.untaggedCostsTotal.toFixed(2)}</span></div>
+                      )}
+                      <div className="text-sm font-medium flex items-center justify-between mt-2 border-t pt-1"><span>Donations counted as profit</span><span>R {(f.unallocatedDonationsTotal || 0).toFixed(2)}</span></div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+          {report === "financeReport" && (
+            <div className="space-y-4">
+              {Object.keys(financialsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(financialsByEvent).map(evId => {
+                  const f = financialsByEvent[evId];
+                  const ev = filteredEvents.find(e => e.id === evId);
+                  if (!f) return null;
+                  return (
+                    <div key={evId} className="border rounded-lg p-3 space-y-3">
+                      <div className="font-medium">{ev?.title || evId}</div>
+
+                      <div>
+                        <div className="text-xs font-medium text-gray-500 mb-1">What was sold</div>
+                        <ul className="text-sm text-gray-700">
+                          {(f.salesByOption || []).map((s: any) => (
+                            <li key={s.eventOptionId} className="flex items-center justify-between"><span>{s.name} ({s.quantitySold} sold)</span><span>R {s.revenue.toFixed(2)}</span></li>
+                          ))}
+                          <li className="flex items-center justify-between"><span>Donations</span><span>R {(f.totalDonations || 0).toFixed(2)}</span></li>
+                        </ul>
+                      </div>
+
+                      <div>
+                        <div className="text-xs font-medium text-gray-500 mb-1">Paid by</div>
+                        <ul className="text-sm text-gray-700">
+                          {METHOD_KEYS.map(m => (
+                            <li key={m} className="flex items-center justify-between"><span>{METHOD_LABEL[m]}</span><span>R {(f.paymentsByMethod?.[m] || 0).toFixed(2)}</span></li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      <div className="overflow-auto">
+                        <div className="text-xs font-medium text-gray-500 mb-1">Comparison to cashup</div>
+                        <table className="min-w-[480px] text-sm">
+                          <thead><tr><th className="text-left">Method</th><th className="text-left">Expected</th><th className="text-left">Actual</th><th className="text-left">Variance</th></tr></thead>
+                          <tbody>
+                            {METHOD_KEYS.map(m => {
+                              const r = f.reconciled?.byMethod?.[m];
+                              return (
+                                <tr key={m}>
+                                  <td>{METHOD_LABEL[m]}</td>
+                                  <td>R {(f.expectedCashByMethod?.[m] || 0).toFixed(2)}</td>
+                                  <td>{r?.actual != null ? `R ${r.actual.toFixed(2)}` : <span className="text-gray-400">not reconciled</span>}</td>
+                                  <td>{r?.variance != null ? `R ${r.variance.toFixed(2)}` : "—"}</td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+
+                      <div>
+                        <div className="text-xs font-medium text-gray-500 mb-1">Costs</div>
+                        <ul className="text-sm text-gray-700">
+                          {(f.costs || []).map((c: any) => (
+                            <li key={c.id} className="flex items-center justify-between"><span>{c.label}{c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}</span><span>-R {(c.total ?? c.amount).toFixed(2)}</span></li>
+                          ))}
+                        </ul>
+                      </div>
+
+                      <div className="text-sm flex items-center justify-between border-t pt-1"><span>Donations counted as profit</span><span>R {(f.unallocatedDonationsTotal || 0).toFixed(2)}</span></div>
+                      <div className="text-sm font-semibold flex items-center justify-between"><span>Net profit</span><span>R {(f.netProfit || 0).toFixed(2)}</span></div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+          {report === "profitReport" && (
+            <div className="overflow-auto">
+              {Object.keys(financialsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[600px] text-sm">
+                  <thead><tr><th className="text-left">Event</th><th className="text-left">Revenue</th><th className="text-left">Costs</th><th className="text-left">Net profit</th></tr></thead>
+                  <tbody>
+                    {Object.keys(financialsByEvent).map(evId => {
+                      const f = financialsByEvent[evId];
+                      const ev = filteredEvents.find(e => e.id === evId);
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>R {(f?.effectiveTotalRevenue || 0).toFixed(2)}</td>
+                          <td>R {(f?.totalCosts || 0).toFixed(2)}</td>
+                          <td className="font-medium">R {(f?.netProfit || 0).toFixed(2)}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+          {report === "cashupAudit" && (
+            <div className="space-y-3">
+              {auditRows.length === 0 ? (
+                <div className="text-sm text-gray-500">No close/reopen actions match the selected filters.</div>
+              ) : (
+                auditRows.map((r: any) => (
+                  <div key={r.id} className="border rounded-lg p-3">
+                    <div className="flex items-center justify-between flex-wrap gap-2">
+                      <div className="text-sm">
+                        <span className="font-medium">{r.event?.title || r.eventId}</span>
+                        <span className="text-gray-500"> — {actionLabel(r.action)} — {r.performedBy?.name || "Unknown"} — {new Date(r.createdAt).toLocaleString()}</span>
+                      </div>
+                      {(r.action === "closed" || r.action === "quick_closed") && (
+                        <span className="text-xs text-gray-500">Donations counted as profit: R {(r.unallocatedDonationsTotal || 0).toFixed(2)}</span>
+                      )}
+                    </div>
+                    {r.notes && <div className="text-xs text-gray-500 mt-1">Notes: {r.notes}</div>}
+                    {(r.action === "closed" || r.action === "quick_closed") && (
+                      <div className="overflow-auto mt-2">
+                        <table className="min-w-[560px] text-sm">
+                          <thead><tr><th className="text-left">Method</th><th className="text-left">Expected</th><th className="text-left">Actual</th><th className="text-left">Variance</th><th className="text-left">Δ vs previous close</th></tr></thead>
+                          <tbody>
+                            {(r.lines && r.lines.length > 0 ? r.lines : METHOD_KEYS.map(m => ({ method: m, expectedAmount: null, actualAmount: null, variance: null }))).map((l: any) => (
+                              <tr key={l.method}>
+                                <td>{METHOD_LABEL[l.method] || l.method}</td>
+                                <td>{l.expectedAmount != null ? `R ${l.expectedAmount.toFixed(2)}` : "—"}</td>
+                                <td>{l.actualAmount != null ? `R ${l.actualAmount.toFixed(2)}` : <span className="text-gray-400">not reconciled</span>}</td>
+                                <td>{l.variance != null ? `R ${l.variance.toFixed(2)}` : "—"}</td>
+                                <td>{r._deltaVsPrevious?.[l.method] != null ? `R ${r._deltaVsPrevious[l.method].toFixed(2)}` : <span className="text-gray-400">{r._previousCloseAt ? "n/a" : "no previous close"}</span>}</td>
+                              </tr>
+                            ))}
+                          </tbody>
+                        </table>
+                      </div>
+                    )}
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/reports/ReportsV2_backup.tsx b/frontend/src/components/reports/ReportsV2_backup.tsx
new file mode 100644
index 0000000..9cca147
--- /dev/null
+++ b/frontend/src/components/reports/ReportsV2_backup.tsx
@@ -0,0 +1,1118 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { apiFetch, API_BASE } from "@/lib/api";
+import { downloadCsv, emailReportPdf, downloadReportPdf } from "@/lib/export";
+
+// Types for report selection
+const REPORTS = [
+  { key: "payments", label: "Payments between dates" },
+  { key: "attendees", label: "Attendees per event (grouped by option)" },
+  { key: "regTypes", label: "Registration type counts" },
+  { key: "usage", label: "Ticket usage summary" },
+  { key: "revenue", label: "Revenue summary (by method)" },
+  { key: "revenueDetailed", label: "Revenue detailed" },
+  { key: "regStatus", label: "Registration status breakdown" }
+] as const;
+
+type ReportKey = typeof REPORTS[number]["key"];
+
+// Simple MultiSelect control used in filters
+function MultiSelect({ options, value, onChange }: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void }) {
+  const toggle = (v: string) => {
+    const set = new Set(value);
+    if (set.has(v)) set.delete(v); else set.add(v);
+    onChange(Array.from(set));
+  };
+  return (
+    <div className="flex flex-wrap gap-2">
+      {options.map(opt => (
+        <label key={opt.value} className={"px-2 py-1 text-xs rounded border cursor-pointer " + (value.includes(opt.value) ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-gray-800 border-gray-200") }>
+          <input type="checkbox" className="hidden" checked={value.includes(opt.value)} onChange={() => toggle(opt.value)} />
+          {opt.label}
+        </label>
+      ))}
+    </div>
+  );
+}
+
+export default function ReportsV2() {
+  const { token, user } = useAuth();
+  const role = user?.role || "user";
+  const canView = role === "admin" || role === "supervisor";
+
+  // Events list
+  const [events, setEvents] = useState<any[]>([]);
+  const [loadingEvents, setLoadingEvents] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showPastEvents, setShowPastEvents] = useState(false);
+  const [showCancelledEvents, setShowCancelledEvents] = useState(false);
+
+  const filteredEvents = useMemo(() => {
+    const now = new Date();
+
+    return events.filter(ev => {
+      const isPast = ev.endDate && new Date(ev.endDate) < now;
+      const isCancelled = ev.status === "cancelled";
+
+      if (!showPastEvents && isPast) return false;
+      if (!showCancelledEvents && isCancelled) return false;
+
+      return true;
+    });
+  }, [events, showPastEvents, showCancelledEvents]);
+
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoadingEvents(true);
+        const isAdmin = role === "admin";
+        const isSupervisor = role === "supervisor";
+        const evPath = (isAdmin ? "/api/events/admin/all" : "/api/events");
+        const evs = await apiFetch<any[]>(evPath, (isAdmin || isSupervisor) ? { authToken: token || undefined } : undefined);
+        setEvents(Array.isArray(evs) ? evs : []);
+      } catch (e: any) {
+        setError(e?.message || "Failed to load events");
+      } finally {
+        setLoadingEvents(false);
+      }
+    })();
+  }, [token, role]);
+
+  // General state for UI flow
+  const [report, setReport] = useState<ReportKey>("payments");
+  const [ready, setReady] = useState(false); // toggled by View button
+  const [busy, setBusy] = useState(false);
+
+  // Filters per report
+  // Payments
+  const [payFrom, setPayFrom] = useState<string>("");
+  const [payTo, setPayTo] = useState<string>("");
+  const [payEvents, setPayEvents] = useState<string[]>([]);
+
+  // Attendees
+  const [attEventId, setAttEventId] = useState<string>("");
+  const [attIncludeCancelled, setAttIncludeCancelled] = useState(false);
+
+  // Registration type counts
+  const [regTypeEvents, setRegTypeEvents] = useState<string[]>([]);
+
+  // Ticket usage summary
+  const [usageEvents, setUsageEvents] = useState<string[]>([]);
+
+  // Revenue summary
+  const [revEvents, setRevEvents] = useState<string[]>([]);
+  // Revenue detailed
+  const [revDetEvents, setRevDetEvents] = useState<string[]>([]);
+
+  // Registration status breakdown
+  const [statusEvents, setStatusEvents] = useState<string[]>([]);
+  const [statusIncludeCancelled, setStatusIncludeCancelled] = useState<boolean>(true);
+
+  // Data stores
+  const [paymentsByEvent, setPaymentsByEvent] = useState<Record<string, any[]>>({});
+  const [registrationsByEvent, setRegistrationsByEvent] = useState<Record<string, any[]>>({});
+  const [ticketUsage, setTicketUsage] = useState<Record<string, { used: number; unused: number }>>({});
+
+  // Initialize default selections when events load
+  useEffect(() => {
+    if (filteredEvents.length === 0) return;
+    const first1 = events.slice(0, 1).map((e: any) => e.id);
+    if (payEvents.length === 0) setPayEvents(first1);
+    if (regTypeEvents.length === 0) setRegTypeEvents(first1);
+    if (usageEvents.length === 0) setUsageEvents(first1);
+    if (revEvents.length === 0) setRevEvents(first1);
+    if (revDetEvents.length === 0) setRevDetEvents(first1);
+    if (statusEvents.length === 0) setStatusEvents(first1);
+    if (!attEventId) setAttEventId(events[0].id);
+  }, [filteredEvents]);
+
+  // Loaders
+  const loadPayments = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, any[]>;
+    const byEv: Record<string, any[]> = {};
+    for (const id of eventIds) {
+      try {
+        const list = await apiFetch<any[]>(`/api/payments/event/${encodeURIComponent(id)}`, { authToken: token });
+        byEv[id] = Array.isArray(list) ? list : [];
+      } catch (e) {
+        byEv[id] = [];
+      }
+    }
+    return byEv;
+  };
+
+  const loadRegistrations = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, any[]>;
+    const byEv: Record<string, any[]> = {};
+    for (const id of eventIds) {
+      try {
+        const list = await apiFetch<any[]>(`/api/registrations/event/${encodeURIComponent(id)}`, { authToken: token });
+        byEv[id] = Array.isArray(list) ? list : [];
+      } catch (e) {
+        byEv[id] = [];
+      }
+    }
+    return byEv;
+  };
+
+  const loadTicketUsage = async (eventIds: string[]) => {
+    if (!token || !eventIds.length) return {} as Record<string, { used: number; unused: number }>;
+    const result: Record<string, { used: number; unused: number }> = {};
+    for (const id of eventIds) {
+      try {
+        const tickets = await apiFetch<any[]>(`/api/tickets/event/${encodeURIComponent(id)}`, { authToken: token });
+        result[id] = { used: tickets.filter(t => t.isUsed).length, unused: tickets.filter(t => !t.isUsed).length };
+      } catch (e) {
+        result[id] = { used: 0, unused: 0 };
+      }
+    }
+    return result;
+  };
+
+  // View handler according to selected report
+  const onView = async () => {
+    setBusy(true);
+    setReady(false);
+    try {
+      if (report === "payments") {
+        const byEv = await loadPayments(payEvents);
+        setPaymentsByEvent(byEv);
+      } else if (report === "attendees") {
+        const byEv = await loadRegistrations([attEventId]);
+        setRegistrationsByEvent(byEv);
+      } else if (report === "regTypes") {
+        const byEv = await loadRegistrations(regTypeEvents);
+        setRegistrationsByEvent(byEv);
+      } else if (report === "usage") {
+        const usage = await loadTicketUsage(usageEvents);
+        setTicketUsage(usage);
+      } else if (report === "revenue") {
+        const byEv = await loadPayments(revEvents);
+        setPaymentsByEvent(byEv);
+      } else if (report === "revenueDetailed") {
+        const [byEvP, byEvR] = await Promise.all([
+          loadPayments(revDetEvents),
+          loadRegistrations(revDetEvents)
+        ]);
+        setPaymentsByEvent(byEvP);
+        setRegistrationsByEvent(byEvR);
+      } else if (report === "regStatus") {
+        const byEv = await loadRegistrations(statusEvents);
+        setRegistrationsByEvent(byEv);
+      }
+      setReady(true);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Payment method label mapping
+  const getPaymentMethod = (p: any) => {
+    try {
+      if (p?.externalId) return "Yoco Portal";
+    } catch {}
+    return p?.method || "Unknown";
+  };
+
+  // Derived rows for payments (apply date filter)
+  const paymentRows = useMemo(() => {
+    if (report !== "payments") return [] as any[];
+    const df = payFrom ? new Date(payFrom).getTime() : null;
+    const dt = payTo ? new Date(payTo).getTime() : null;
+    const rows: { eventId: string; eventTitle: string; userName: string; userEmail?: string; amount: number; method: string; isDonation?: boolean; createdAt: string }[] = [];
+    for (const evId of Object.keys(paymentsByEvent)) {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const evTitle = ev?.title || evId;
+      for (const p of paymentsByEvent[evId] || []) {
+        const t = new Date(p.createdAt).getTime();
+        if ((df && t < df) || (dt && t > dt)) continue;
+        // Reporting rule: if donation, attribute to payer; otherwise attribute to the registration's assigned user
+        const u = p.isDonation ? (p.user || {}) : ((p.registration?.user || p.user) || {});
+        rows.push({
+          eventId: evId,
+          eventTitle: evTitle,
+          userName: u?.name || u?.email || p.userId || "User",
+          userEmail: u?.email,
+          amount: p.amount,
+          method: getPaymentMethod(p),
+          isDonation: p.isDonation,
+          createdAt: p.createdAt,
+        });
+      }
+    }
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '') || new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()));
+    return rows;
+  }, [report, paymentsByEvent, payFrom, payTo, filteredEvents]);
+
+  // Derived rows for revenue detailed (apply date filter)
+  // Outstanding by registration respecting early-bird tiers and last payment lock-in
+  const outstandingByReg = useMemo(() => {
+    const map = new Map<string, number>();
+    // Build quick index of payments per registration from all payments loaded per event
+    const paidByReg = new Map<string, number>();
+    const lastPaymentAtByReg = new Map<string, Date | null>();
+    Object.keys(paymentsByEvent).forEach(evId => {
+      (paymentsByEvent[evId] || []).forEach((p: any) => {
+        if (p.registrationId) {
+          const regId = p.registrationId;
+          paidByReg.set(regId, (paidByReg.get(regId) || 0) + (p.amount || 0));
+          const t = new Date(p.createdAt).getTime();
+          const prev = lastPaymentAtByReg.get(regId)?.getTime() || -Infinity;
+          if (t > prev) lastPaymentAtByReg.set(regId, new Date(t));
+        }
+      });
+    });
+    // Early-bird helper (reference = lastPaymentAt if any; else now)
+    const effectiveUnit = (eo: any, referenceTime: any, atTime: Date) => {
+      const base = Number(eo?.price || 0);
+      const tiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
+      if (tiers.length === 0) return base;
+      const t = atTime ? new Date(atTime) : new Date();
+      const ref = referenceTime ? new Date(referenceTime) : t;
+      const applicable = tiers
+        .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
+        .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
+        .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
+      if (applicable.length === 0) return base;
+      const price = Number(applicable[0].price);
+      return (price >= 0) ? price : base;
+    };
+    const now = new Date();
+    // For each registration in loaded events, compute due and outstanding with lock-in rule
+    Object.keys(registrationsByEvent).forEach(evId => {
+      (registrationsByEvent[evId] || []).forEach((r: any) => {
+        const lastAt = lastPaymentAtByReg.get(r.id) || null;
+        const dueNow = (r.registrationOptions || []).reduce((sum: number, ro: any) => sum + effectiveUnit(ro.eventOption, lastAt, now) * (ro.quantity || 0), 0);
+        const paid = paidByReg.get(r.id) || 0;
+        let outstanding = Math.max(dueNow - paid, 0);
+        if (lastAt) {
+          const dueAtLast = (r.registrationOptions || []).reduce((sum: number, ro: any) => sum + effectiveUnit(ro.eventOption, lastAt, lastAt) * (ro.quantity || 0), 0);
+          if (paid >= dueAtLast) outstanding = 0;
+        }
+        map.set(r.id, outstanding);
+      });
+    });
+    return map;
+  }, [paymentsByEvent, registrationsByEvent]);
+
+  // Build payment totals per registration (all payments, no date filter)
+  const paidByReg = useMemo(() => {
+    const map = new Map<string, number>();
+    Object.keys(paymentsByEvent).forEach(evId => {
+      (paymentsByEvent[evId] || []).forEach((p: any) => {
+        if (p.registrationId) {
+          map.set(p.registrationId, (map.get(p.registrationId) || 0) + (p.amount || 0));
+        }
+      });
+    });
+    return map;
+  }, [paymentsByEvent]);
+
+  const revDetRows = useMemo(() => {
+    if (report !== "revenueDetailed") return [] as any[];
+    const df = payFrom ? new Date(payFrom).getTime() : null;
+    const dt = payTo ? new Date(payTo).getTime() : null;
+    type Row = { eventId: string; eventTitle: string; userName: string; userEmail?: string; totalPaid: number; status?: string; registrationId: string; outstanding: number };
+    const rows: Row[] = [];
+    // Iterate registrations to include those with zero payments and show each once
+    Object.keys(registrationsByEvent).forEach(evId => {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const evTitle = ev?.title || evId;
+      (registrationsByEvent[evId] || []).forEach((r: any) => {
+        const created = r.createdAt ? new Date(r.createdAt).getTime() : null;
+        if (df && created && created < df) return;
+        if (dt && created && created > dt) return;
+        const totalPaid = paidByReg.get(r.id) || 0;
+        const outstanding = outstandingByReg.get(r.id) || 0;
+        rows.push({
+          eventId: evId,
+          eventTitle: evTitle,
+          userName: r.user?.name || r.userId || "User",
+          userEmail: r.user?.email,
+          totalPaid,
+          status: r.status,
+          registrationId: r.id,
+          outstanding,
+        });
+      });
+    });
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '')));
+    return rows;
+  }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, outstandingByReg]);
+
+  // Derived for attendees (layered) for a single event
+  const attendeesLayer = useMemo(() => {
+    if (report !== "attendees") return { eventTitle: "", options: [] as any[] };
+    const regs = registrationsByEvent[attEventId] || [];
+    const ev = filteredEvents.find(e => e.id === attEventId);
+    // Option -> users
+    const byOption = new Map<string, { optionName: string; users: { name: string; email?: string; status: string; qty: number }[] }>();
+    for (const r of regs) {
+      if (!attIncludeCancelled && r.status === "cancelled") continue;
+
+      const baseUser = {
+        name: r.user?.name || r.userId,
+        email: r.user?.email,
+        status: r.status,
+      };
+
+      const options = (r.registrationOptions || []);
+
+      if (options.length === 0) {
+        const key = "(No option)";
+        if (!byOption.has(key)) byOption.set(key, { optionName: key, users: [] });
+
+        byOption.get(key)!.users.push({
+          ...baseUser,
+          qty: 0
+        });
+      }
+      else {
+        for (const ro of options) {
+          const key = ro.eventOption?.name || "Option";
+
+          if (!byOption.has(key)) {
+            byOption.set(key, { optionName: key, users: [] });
+          }
+
+          byOption.get(key)!.users.push({
+            ...baseUser,
+            qty: ro.quantity || 0
+          });
+        }
+      }
+    }
+    const options = Array.from(byOption.values()).sort((a,b) => a.optionName.localeCompare(b.optionName));
+    options.forEach(o => o.users.sort((a,b) => (a.name || '').localeCompare(b.name || '')));
+    return { eventTitle: ev?.title || attEventId, options };
+  }, [report, registrationsByEvent, attEventId, attIncludeCancelled, filteredEvents]);
+
+  // Derived for reg type counts
+  const regTypeRows = useMemo(() => {
+    if (report !== "regTypes") return [] as { eventTitle: string; type: string; qty: number }[];
+    const rows: { eventTitle: string; type: string; qty: number }[] = [];
+    for (const evId of Object.keys(registrationsByEvent)) {
+      const ev = filteredEvents.find(e => e.id === evId);
+      const title = ev?.title || evId;
+      const regs = registrationsByEvent[evId] || [];
+      const counts: Record<string, number> = {};
+      for (const r of regs) {
+        if (r.status === "cancelled") continue;
+        for (const ro of (r.registrationOptions || [])) {
+          const name = ro.eventOption?.name || "Option";
+          counts[name] = (counts[name] || 0) + (ro.quantity || 0);
+        }
+      }
+      for (const type of Object.keys(counts)) rows.push({ eventTitle: title, type, qty: counts[type] });
+    }
+    rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || a.type.localeCompare(b.type)));
+    return rows;
+  }, [report, registrationsByEvent, filteredEvents]);
+
+  // Export/print/email handlers per report
+  const doExportCsv = () => {
+    if (report === "payments") {
+      return downloadCsv(`payments_${new Date().toISOString().slice(0,10)}`, paymentRows.map(r => ({
+        Event: r.eventTitle,
+        User: r.userName,
+        Email: r.userEmail || "",
+        Amount: r.amount,
+        Method: r.method,
+        Donation: r.isDonation ? "Yes" : "No",
+        Date: new Date(r.createdAt).toLocaleString(),
+      })));
+    }
+    if (report === "attendees") {
+      const rows: any[] = [];
+      attendeesLayer.options.forEach(opt => {
+        opt.users.forEach((u: any) => rows.push({ Event: attendeesLayer.eventTitle, Option: opt.optionName, Name: u.name, Email: u.email || "", Status: u.status, Qty: u.Qty }));
+      });
+      return downloadCsv(`attendees_${attEventId}_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "regTypes") {
+      return downloadCsv(`registration_types_${new Date().toISOString().slice(0,10)}`, regTypeRows.map(r => ({ Event: r.eventTitle, Type: r.type, Quantity: r.qty })));
+    }
+    if (report === "usage") {
+      const rows: any[] = [];
+      Object.keys(ticketUsage).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        rows.push({ Event: ev?.title || evId, Used: ticketUsage[evId].used, Unused: ticketUsage[evId].unused });
+      });
+      return downloadCsv(`ticket_usage_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "revenue") {
+      const df = payFrom ? new Date(payFrom).getTime() : null;
+      const dt = payTo ? new Date(payTo).getTime() : null;
+      const rows: any[] = [];
+      Object.keys(paymentsByEvent).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+          const t = new Date(p.createdAt).getTime();
+          return !(df && t < df) && !(dt && t > dt);
+        });
+        const byMethod: Record<string, number> = {};
+        let total = 0;
+        list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+        if (list.length === 0) rows.push({ Event: ev?.title || evId, Method: '-', Amount: 0, Total: 0 });
+        Object.keys(byMethod).forEach(m => rows.push({ Event: ev?.title || evId, Method: m, Amount: byMethod[m], Total: total }));
+      });
+      return downloadCsv(`revenue_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+    if (report === "revenueDetailed") {
+      return downloadCsv(`revenue_detailed_${new Date().toISOString().slice(0,10)}`, revDetRows.map((r: any) => ({
+        Event: r.eventTitle,
+        Name: r.userName,
+        Email: r.userEmail || "",
+        Status: r.status || "",
+        TotalPaid: r.totalPaid,
+        Outstanding: r.outstanding,
+        RegistrationId: r.registrationId
+      })));
+    }
+    if (report === "regStatus") {
+      const rows: any[] = [];
+      Object.keys(registrationsByEvent).forEach(evId => {
+        const ev = filteredEvents.find(e => e.id === evId);
+        const regs = registrationsByEvent[evId] || [];
+        const counts: Record<string, number> = {};
+        const statuses = ["pending","partial_paid","paid","cancelled"];
+        statuses.forEach(s => counts[s] = 0);
+        regs.forEach((r: any) => {
+          if (!statusIncludeCancelled && r.status === 'cancelled') return;
+          counts[r.status] = (counts[r.status] || 0) + 1;
+        });
+        rows.push({ Event: ev?.title || evId, Pending: counts["pending"] || 0, Partial: counts["partial_paid"] || 0, Paid: counts["paid"] || 0, Cancelled: counts["cancelled"] || 0 });
+      });
+      return downloadCsv(`registration_status_${new Date().toISOString().slice(0,10)}`, rows);
+    }
+  };
+
+  const doPrintPdf = async () => {
+    if (!token) { alert('Please login to export PDF'); return; }
+    try {
+      if (report === "payments") {
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Payments Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: {
+            columns: ["Event","User","Email","Amount","Method","Donation","Date"],
+            rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()])
+          }
+        });
+        return;
+      }
+      if (report === "attendees") {
+        // Build layered sections: each option -> list of strings (user line)
+        const sections = attendeesLayer.options.map(opt => ({
+          title: opt.optionName,
+          items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`)
+        }));
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Attendees Report',
+          kind: 'layered',
+          orientation: 'portrait',
+          layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }
+        });
+        return;
+      }
+      if (report === "regTypes") {
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Registration Types Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: {
+            columns: ["Event","Type","Quantity"],
+            rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)])
+          }
+        });
+        return;
+      }
+      if (report === "usage") {
+        const rows: (string|number)[][] = [];
+        Object.keys(ticketUsage).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const tu = ticketUsage[evId];
+          rows.push([ev?.title || evId, tu.used, tu.unused]);
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Ticket Usage Report',
+          kind: 'table',
+          orientation: 'portrait',
+          table: { columns: ["Event","Used","Unused"], rows }
+        });
+        return;
+      }
+      if (report === "revenue") {
+        const df = payFrom ? new Date(payFrom).getTime() : null;
+        const dt = payTo ? new Date(payTo).getTime() : null;
+        const rows: (string|number)[][] = [];
+        Object.keys(paymentsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+            const t = new Date(p.createdAt).getTime();
+            return !(df && t < df) && !(dt && t > dt);
+          });
+          const byMethod: Record<string, number> = {};
+          let total = 0;
+          list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+          if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
+          Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Revenue Summary',
+          kind: 'table',
+          orientation: 'portrait',
+          table: { columns: ["Event","Method","Amount","Event Total"], rows }
+        });
+        return;
+      }
+      if (report === "revenueDetailed") {
+        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [
+          r.eventTitle,
+          r.userName,
+          r.userEmail || "",
+          r.status || "",
+          Number((r.totalPaid || 0).toFixed(2)),
+          Number((r.outstanding || 0).toFixed(2)),
+          r.registrationId || "",
+        ]);
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Revenue Detailed',
+          kind: 'table',
+          orientation: 'landscape',
+          table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }
+        });
+        return;
+      }
+      if (report === "regStatus") {
+        const rows: (string|number)[][] = [];
+        Object.keys(registrationsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const regs = registrationsByEvent[evId] || [];
+          const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
+          regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; });
+          rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]);
+        });
+        await downloadReportPdf(API_BASE, token, {
+          title: 'Registration Status Breakdown',
+          kind: 'table',
+          table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }
+        });
+        return;
+      }
+    } catch (e: any) {
+      alert(e?.message || 'Failed to generate PDF');
+    }
+  };
+
+  const doEmail = async () => {
+    if (!token) { alert('Please login to email PDF'); return; }
+    const subject = {
+      payments: "Payments Report",
+      attendees: "Attendees Report",
+      regTypes: "Registration Types Report",
+      usage: "Ticket Usage Report",
+      revenue: "Revenue Summary",
+      revenueDetailed: "Revenue Detailed Report",
+      regStatus: "Registration Status Breakdown",
+    }[report];
+    const body = "Report generated on " + new Date().toLocaleString();
+    try {
+      if (report === 'payments') {
+        await emailReportPdf(API_BASE, token, {
+          title: 'Payments Report', kind: 'table', orientation: 'portrait',
+          table: { columns: ["Event","User","Email","Amount","Method","Donation","Date"], rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()]) },
+          subject, body
+        });
+      } else if (report === 'attendees') {
+        const sections = attendeesLayer.options.map(opt => ({ title: opt.optionName, items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`) }));
+        await emailReportPdf(API_BASE, token, { title: 'Attendees Report', kind: 'layered', orientation: 'portrait', layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }, subject, body });
+      } else if (report === 'regTypes') {
+        await emailReportPdf(API_BASE, token, { title: 'Registration Types Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Type","Quantity"], rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)]) }, subject, body });
+      } else if (report === 'usage') {
+        const rows: (string|number)[][] = [];
+        Object.keys(ticketUsage).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const tu = ticketUsage[evId]; rows.push([ev?.title || evId, tu.used, tu.unused]); });
+        await emailReportPdf(API_BASE, token, { title: 'Ticket Usage Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Used","Unused"], rows }, subject, body });
+      } else if (report === 'revenue') {
+        const df = payFrom ? new Date(payFrom).getTime() : null;
+        const dt = payTo ? new Date(payTo).getTime() : null;
+        const rows: (string|number)[][] = [];
+        Object.keys(paymentsByEvent).forEach(evId => {
+          const ev = filteredEvents.find(e => e.id === evId);
+          const list = (paymentsByEvent[evId] || []).filter((p: any) => { const t = new Date(p.createdAt).getTime(); return !(df && t < df) && !(dt && t > dt); });
+          const byMethod: Record<string, number> = {}; let total = 0;
+          list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+          if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
+          Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
+        });
+        await emailReportPdf(API_BASE, token, { title: 'Revenue Summary', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Method","Amount","Event Total"], rows }, subject, body });
+      } else if (report === 'revenueDetailed') {
+        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [ r.eventTitle, r.userName, r.userEmail || "", r.status || "", Number((r.totalPaid || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "" ]);
+        await emailReportPdf(API_BASE, token, { title: 'Revenue Detailed', kind: 'table', orientation: 'landscape', table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }, subject, body });
+      } else if (report === 'regStatus') {
+        const rows: (string|number)[][] = [];
+        Object.keys(registrationsByEvent).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const regs = registrationsByEvent[evId] || []; const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 }; regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; }); rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]); });
+        await emailReportPdf(API_BASE, token, { title: 'Registration Status Breakdown', kind: 'table', table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }, subject, body });
+      }
+      alert('Email sent with PDF attachment');
+    } catch (e: any) {
+      alert(e?.message || 'Failed to email PDF');
+    }
+  };
+
+  // Rendering helpers
+  function htmlTable(headers: string[], rows: (string | number)[][]) {
+    const thead = `<tr>${headers.map(h => `<th>${escapeHtml(h)}</th>`).join("")}</tr>`;
+    const tbody = rows.map(r => `<tr>${r.map(c => `<td>${escapeHtml(String(c ?? ""))}</td>`).join("")}</tr>`).join("");
+    return `<table><thead>${thead}</thead><tbody>${tbody}</tbody></table>`;
+  }
+  function htmlLayered(eventTitle: string, options: { optionName: string; users: { name: string; email?: string; status: string; qty?: number }[] }[]) {
+    const optHtml = options.map(opt => `
+      <div class="layer-option">
+        <div class="layer-option-title">${escapeHtml(opt.optionName)}</div>
+        <ul class="layer-users">
+          ${opt.users.map(u => `<li><span class="name">${escapeHtml(u.name || "")}</span>${u.email ? ` <span class="email">(${escapeHtml(u.email)})</span>` : ""} <span class="status">— ${escapeHtml(u.status)}</span>${typeof u.qty === 'number' ? ` <span class="status"> • Qty: ${u.qty}</span>` : ''}</li>`).join("")}
+        </ul>
+      </div>
+    `).join("");
+    return `
+      <style>
+        .layer-event{font-size:16px;font-weight:700;margin:4px 0 10px 0}
+        .layer-option{margin:8px 0 12px 16px;page-break-inside:avoid}
+        .layer-option-title{font-weight:600;margin-bottom:6px}
+        .layer-users{list-style:disc;margin-left:20px}
+        .layer-users li{margin:3px 0;font-size:12px}
+        .layer-users .name{font-weight:500}
+        .layer-users .email{color:#555}
+        .layer-users .status{color:#666}
+      </style>
+      <div class="layer-event">${escapeHtml(eventTitle)}</div>
+      ${optHtml}
+    `;
+  }
+  function escapeHtml(s: string) {
+    return s.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'}[c] as string));
+  }
+
+  // UI
+  return (
+    <div>
+      {!canView && (
+        <div className="p-3 border rounded bg-yellow-50 text-yellow-800 text-sm mb-4">You need supervisor or admin access to view reports.</div>
+      )}
+      {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
+
+      {/* Step 1: select report */}
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6 space-y-3">
+        <div className="text-sm font-medium">Select a report</div>
+        <div className="flex flex-wrap gap-2">
+          {REPORTS.map(r => (
+            <label key={r.key} className={`px-3 py-2 text-sm rounded border cursor-pointer ${report===r.key? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'}`}>
+              <input type="radio" className="hidden" name="report" value={r.key} checked={report===r.key} onChange={() => { setReport(r.key); setReady(false); }} />
+              {r.label}
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {/* Step 2: filters per report */}
+      <div className="border rounded-xl p-4 bg-white shadow-sm mb-6 space-y-4">
+        <div className="text-sm font-medium">Filters</div>
+        <div className="flex gap-4 text-sm">
+          <label className="flex items-center gap-2">
+            <input
+                type="checkbox"
+                checked={showPastEvents}
+                onChange={e => setShowPastEvents(e.target.checked)}
+            />
+            Show past events
+          </label>
+
+          <label className="flex items-center gap-2">
+            <input
+                type="checkbox"
+                checked={showCancelledEvents}
+                onChange={e => setShowCancelledEvents(e.target.checked)}
+            />
+            Show cancelled events
+          </label>
+        </div>
+        {report === "payments" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={payEvents} onChange={setPayEvents} />
+            </div>
+          </div>
+        )}
+        {report === "attendees" && (
+          <div className="flex flex-wrap items-center gap-3">
+            <label className="text-sm">
+              <span className="text-gray-600 mr-2">Event</span>
+              <select className="border rounded px-3 py-2 text-sm" value={attEventId} onChange={e => setAttEventId(e.target.value)}>
+                {filteredEvents.map(ev => (<option key={ev.id} value={ev.id}>{ev.title}</option>))}
+              </select>
+            </label>
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={attIncludeCancelled} onChange={e => setAttIncludeCancelled(e.target.checked)} /> Include cancelled registrations
+            </label>
+          </div>
+        )}
+        {report === "regTypes" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={regTypeEvents} onChange={setRegTypeEvents} />
+          </div>
+        )}
+        {report === "usage" && (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Events</label>
+            <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={usageEvents} onChange={setUsageEvents} />
+          </div>
+        )}
+        {report === "revenue" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={revEvents} onChange={setRevEvents} />
+            </div>
+          </div>
+        )}
+        {report === "revenueDetailed" && (
+          <div className="flex flex-wrap items-end gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">From</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payFrom} onChange={e => setPayFrom(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">To</label>
+              <input type="date" className="border rounded px-3 py-2 text-sm" value={payTo} onChange={e => setPayTo(e.target.value)} />
+            </div>
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={revDetEvents} onChange={setRevDetEvents} />
+            </div>
+          </div>
+        )}
+        {report === "regStatus" && (
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="min-w-64 flex-1">
+              <label className="block text-xs text-gray-600 mb-1">Events</label>
+              <MultiSelect options={filteredEvents.map(ev => ({ value: ev.id, label: ev.title }))} value={statusEvents} onChange={setStatusEvents} />
+            </div>
+            <label className="flex items-center gap-2 text-sm">
+              <input type="checkbox" checked={statusIncludeCancelled} onChange={e => setStatusIncludeCancelled(e.target.checked)} /> Include cancelled in counts
+            </label>
+          </div>
+        )}
+        <div>
+          <button disabled={busy} onClick={onView} className="px-3 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50">{busy ? 'Loading…' : 'View report'}</button>
+        </div>
+      </div>
+
+      {/* Step 3: results + actions */}
+      {ready && (
+        <div className="border rounded-xl p-4 bg-white shadow-sm mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <div className="text-lg font-semibold">Results</div>
+            <div className="flex gap-2">
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doExportCsv}>Export CSV</button>
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doPrintPdf}>Save as PDF</button>
+              <button className="px-3 py-1.5 text-sm rounded border" onClick={doEmail}>Email</button>
+            </div>
+          </div>
+
+          {report === "payments" && (
+            <div>
+              {paymentRows.length === 0 ? (
+                <div className="text-sm text-gray-500">No payments match the selected filters.</div>
+              ) : (
+                <div className="space-y-5">
+                  {Object.entries(paymentRows.reduce((acc: any, r: any) => {
+                    acc[r.eventTitle] = acc[r.eventTitle] || [];
+                    acc[r.eventTitle].push(r);
+                    return acc;
+                  }, {})).map(([eventTitle, rows]: any) => {
+                    // group by user
+                    const byUser: Record<string, any[]> = {};
+                    rows.forEach((r: any) => {
+                      const key = r.userName || 'User';
+                      byUser[key] = byUser[key] || [];
+                      byUser[key].push(r);
+                    });
+                    const eventTotal = rows.reduce((s: number, r: any) => s + (r.amount || 0), 0);
+                    return (
+                      <div key={eventTitle} className="border rounded-xl p-4 bg-gray-50">
+                        <div className="flex items-center justify-between mb-2">
+                          <div className="text-base font-semibold">{eventTitle}</div>
+                          <div className="text-sm font-medium">Total: R {eventTotal.toFixed(2)}</div>
+                        </div>
+                        <div className="space-y-3">
+                          {Object.keys(byUser).sort().map(userName => {
+                            const list = byUser[userName];
+                            const userTotal = list.reduce((s: number, r: any) => s + (r.amount || 0), 0);
+                            const email = list.find((r: any) => r.userEmail)?.userEmail || '';
+                            return (
+                              <div key={userName} className="border rounded-lg p-3 bg-white">
+                                <div className="flex items-center justify-between mb-2">
+                                  <div className="font-medium">{userName} {email ? <span className="text-gray-600 font-normal">({email})</span> : null}</div>
+                                  <div className="text-sm">Subtotal: R {userTotal.toFixed(2)}</div>
+                                </div>
+                                <ul className="text-sm text-gray-700 space-y-1">
+                                  {list.map((r: any, i: number) => (
+                                    <li key={i} className="flex items-center justify-between">
+                                      <span>{r.method}{r.isDonation ? ' • Donation' : ''}</span>
+                                      <span>R {Number(r.amount).toFixed(2)} • {new Date(r.createdAt).toLocaleString()}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          )}
+
+          {report === "attendees" && (
+            <div>
+              <div className="text-sm text-gray-700 mb-3">Event: <span className="font-medium">{attendeesLayer.eventTitle}</span></div>
+              {attendeesLayer.options.length === 0 ? (
+                <div className="text-sm text-gray-500">No attendees for selected filters.</div>
+              ) : (
+                <div className="space-y-4">
+                  {attendeesLayer.options.map(opt => (
+                    <div key={opt.optionName} className="border rounded-lg p-3">
+                      <div className="font-medium mb-2">{opt.optionName}</div>
+                      <ul className="list-disc ml-5 space-y-1">
+                        {opt.users.map((u: any, i: number) => (
+                          <li key={opt.optionName + i} className="text-sm">
+                            <span className="font-medium">{u.name}</span>
+                            {u.email && <span className="text-gray-600"> ({u.email})</span>}
+                            <span className="text-gray-600"> — {u.status}</span>
+                            <span className="text-gray-700"> • Qty {u.qty}</span>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {report === "regTypes" && (
+            <div className="overflow-auto">
+              {regTypeRows.length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[520px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Registration Type</th>
+                      <th>Quantity</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {regTypeRows.map((r, idx) => (
+                      <tr key={idx}>
+                        <td>{r.eventTitle}</td>
+                        <td>{r.type}</td>
+                        <td>{r.qty}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {report === "usage" && (
+            <div className="overflow-auto">
+              {Object.keys(ticketUsage).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[420px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Used</th>
+                      <th>Unused</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(ticketUsage).map(evId => {
+                      const ev = events.find(e => e.id === evId);
+                      const tu = ticketUsage[evId];
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>{tu.used}</td>
+                          <td>{tu.unused}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+
+          {report === "revenue" && (
+            <div className="space-y-4">
+              {Object.keys(paymentsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(paymentsByEvent).map(evId => {
+                  const ev = events.find(e => e.id === evId);
+                  const df = payFrom ? new Date(payFrom).getTime() : null;
+                  const dt = payTo ? new Date(payTo).getTime() : null;
+                  const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+                    const t = new Date(p.createdAt).getTime();
+                    return !(df && t < df) && !(dt && t > dt);
+                  });
+                  const byMethod: Record<string, number> = {};
+                  let total = 0;
+                  list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+                  return (
+                    <div key={evId} className="border rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{ev?.title || evId}</div>
+                        <div className="text-sm">Total: R {total.toFixed(2)}</div>
+                      </div>
+                      {Object.keys(byMethod).length === 0 ? (
+                        <div className="text-sm text-gray-500">No payments in date range.</div>
+                      ) : (
+                        <ul className="text-sm text-gray-700 space-y-1">
+                          {Object.keys(byMethod).sort().map(m => (
+                            <li key={m} className="flex items-center justify-between"><span>{m}</span><span>R {byMethod[m].toFixed(2)}</span></li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {report === "revenueDetailed" && (
+            <div className="space-y-4">
+              {Object.keys(registrationsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                Object.keys(registrationsByEvent).map(evId => {
+                  const ev = events.find(e => e.id === evId);
+                  const rows = (revDetRows as any[]).filter(r => r.eventId === evId);
+                  const total = rows.reduce((s, r) => s + (r.totalPaid || 0), 0);
+                  const regIds = rows.map(r => r.registrationId);
+                  const outstandingTotal = regIds.reduce((s, id) => s + (outstandingByReg.get(id) || 0), 0);
+                  return (
+                    <div key={evId} className="border rounded-lg p-3">
+                      <div className="flex items-center justify-between mb-2">
+                        <div className="font-medium">{ev?.title || evId}</div>
+                        <div className="text-sm">Total: R {total.toFixed(2)}{` • Outstanding: R ${outstandingTotal.toFixed(2)}`}</div>
+                      </div>
+                      {rows.length === 0 ? (
+                        <div className="text-sm text-gray-500">No registrations in date range.</div>
+                      ) : (
+                        <div className="overflow-auto">
+                          <table className="min-w-[760px] text-sm">
+                            <thead>
+                              <tr>
+                                <th className="text-left">Name</th>
+                                <th className="text-left">Email</th>
+                                <th className="text-left">Status</th>
+                                <th className="text-left">Total paid</th>
+                                <th className="text-left">Outstanding</th>
+                                <th className="text-left">Registration</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              {rows.map((r, idx) => (
+                                <tr key={evId + idx}>
+                                  <td>{r.userName}</td>
+                                  <td>{r.userEmail || ''}</td>
+                                  <td className="capitalize">{r.status || ''}</td>
+                                  <td>R {Number(r.totalPaid || 0).toFixed(2)}</td>
+                                  <td>R {Number(r.outstanding || 0).toFixed(2)}</td>
+                                  <td className="font-mono text-xs">{r.registrationId || ''}</td>
+                                </tr>
+                              ))}
+                            </tbody>
+                          </table>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          )}
+
+          {report === "regStatus" && (
+            <div className="overflow-auto">
+              {Object.keys(registrationsByEvent).length === 0 ? (
+                <div className="text-sm text-gray-500">No data available. Select events and view.</div>
+              ) : (
+                <table className="min-w-[560px]">
+                  <thead>
+                    <tr>
+                      <th>Event</th>
+                      <th>Pending</th>
+                      <th>Partial</th>
+                      <th>Paid</th>
+                      <th>Cancelled</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Object.keys(registrationsByEvent).map(evId => {
+                      const ev = events.find(e => e.id === evId);
+                      const regs = registrationsByEvent[evId] || [];
+                      const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
+                      regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; });
+                      return (
+                        <tr key={evId}>
+                          <td>{ev?.title || evId}</td>
+                          <td>{counts.pending || 0}</td>
+                          <td>{counts.partial_paid || 0}</td>
+                          <td>{counts.paid || 0}</td>
+                          <td>{counts.cancelled || 0}</td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/shared/ApiImage.tsx b/frontend/src/components/shared/ApiImage.tsx
new file mode 100644
index 0000000..0c95579
--- /dev/null
+++ b/frontend/src/components/shared/ApiImage.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import React from "react";
+import { resolveToApiOrigin } from "@/lib/api";
+
+type Props = {
+  src?: string | null;
+  alt?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export function ApiImage({ src, alt = "", className, style }: Props) {
+  const hasSrc = !!(src || "").trim();
+  const [resolved, setResolved] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const raw = (src || "").trim();
+    if (!raw) { setResolved(null); return; }
+    // Compute in the browser so that localhost origins are swapped to the actual device hostname.
+    // This has to stay in an effect (not computed during render) because the server-rendered pass
+    // has no `window`, so resolving synchronously would make the client's first render disagree
+    // with the server-rendered HTML (a hydration mismatch) — the round trip here is a browser-vs-
+    // server naming difference, not a network fetch.
+    const url = resolveToApiOrigin(raw);
+    setResolved(url);
+  }, [src]);
+
+  // No image was ever provided for this item — render nothing, same as before.
+  if (!hasSrc) return null;
+
+  // A src was provided but the browser-resolved URL isn't ready yet — reserve the same box the
+  // real <img> will occupy so the surrounding layout (e.g. a card) doesn't collapse to zero height
+  // and then jump once resolved — same class of flash as an unauthenticated nav link showing too early.
+  if (!resolved) return <div className={`${className || ""} bg-gray-100 animate-pulse`} style={style} aria-hidden="true" />;
+
+  return <img src={resolved} alt={alt} className={className} style={style} />;
+}
diff --git a/frontend/src/components/shared/BannerBar.tsx b/frontend/src/components/shared/BannerBar.tsx
new file mode 100644
index 0000000..a73199f
--- /dev/null
+++ b/frontend/src/components/shared/BannerBar.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { apiFetch } from "@/lib/api";
+
+type BannerType = "info" | "warning" | "success" | "danger";
+
+interface Banner {
+  message: string;
+  type: BannerType;
+  liveFrom: string | null;
+  liveTill: string | null;
+}
+
+const STYLES: Record<BannerType, string> = {
+  info:    "bg-blue-600 text-white",
+  warning: "bg-amber-400 text-amber-950",
+  success: "bg-emerald-600 text-white",
+  danger:  "bg-red-600 text-white",
+};
+
+function dismissKey(banner: Banner) {
+  return `banner_dismissed_${banner.message}_${banner.liveFrom}_${banner.liveTill}`;
+}
+
+export function BannerBar() {
+  const [banner, setBanner] = useState<Banner | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    apiFetch<Banner>("/api/banner")
+      .then(b => {
+        if (!b?.message) return;
+        setBanner(b);
+        const key = dismissKey(b);
+        if (typeof window !== "undefined" && localStorage.getItem(key) === "1") {
+          setDismissed(true);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  if (!banner || !banner.message || dismissed) return null;
+
+  const now = Date.now();
+  const from = banner.liveFrom ? new Date(banner.liveFrom).getTime() : null;
+  const till = banner.liveTill ? new Date(banner.liveTill).getTime() : null;
+
+  if (from !== null && now < from) return null;
+  if (till !== null && now > till) return null;
+
+  const dismiss = () => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(dismissKey(banner), "1");
+    }
+    setDismissed(true);
+  };
+
+  return (
+    <div className={`w-full px-4 py-2.5 flex items-center justify-center gap-3 text-sm font-medium ${STYLES[banner.type ?? "info"]}`}>
+      <span className="flex-1 text-center">{banner.message}</span>
+      <button
+        onClick={dismiss}
+        aria-label="Dismiss banner"
+        className="shrink-0 opacity-70 hover:opacity-100 transition-opacity text-lg leading-none"
+      >
+        ×
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/shared/Button.tsx b/frontend/src/components/shared/Button.tsx
new file mode 100644
index 0000000..31c1c87
--- /dev/null
+++ b/frontend/src/components/shared/Button.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary" | "outline" | "danger";
+  loading?: boolean;
+};
+
+export function Button({
+  variant = "primary",
+  loading = false,
+  className = "",
+  children,
+  disabled,
+  ...rest
+}: ButtonProps) {
+  const base = "inline-flex items-center justify-center rounded px-4 py-2 text-sm transition-colors";
+  const variants: Record<string, string> = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700",
+    secondary: "bg-gray-800 text-white hover:bg-black/90",
+    outline: "border border-gray-300 text-gray-800 hover:bg-gray-50",
+    danger: "bg-red-600 text-white hover:bg-red-700",
+  };
+  const cls = [base, variants[variant], disabled || loading ? "opacity-60 cursor-not-allowed" : "", className]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <button className={cls} disabled={disabled || loading} {...rest}>
+      {loading && (
+        <svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}
diff --git a/frontend/src/components/shared/ContactSection.tsx b/frontend/src/components/shared/ContactSection.tsx
new file mode 100644
index 0000000..5aead87
--- /dev/null
+++ b/frontend/src/components/shared/ContactSection.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import { SectionHeader } from "@/components/shared/SectionHeader";
+
+export function ContactSection() {
+    const { settings } = useSiteSettings();
+
+    const email   = settings.org_email   || "";
+    const phone   = settings.org_phone   || "";
+    const address = settings.org_address || "";
+
+    if (!email && !phone && !address) return null;
+
+    return (
+        <section id="contact" className="bg-gray-100 py-12 px-4 text-center">
+            <SectionHeader title="Contact Us" />
+            {email && (
+                <p className="text-gray-700 mb-2">
+                    📧{" "}
+                    <a href={`mailto:${email}`} className="hover:underline">
+                        {email}
+                    </a>
+                </p>
+            )}
+            {phone && (
+                <p className="text-gray-700 mb-2">
+                    📞{" "}
+                    <a href={`tel:${phone}`} className="hover:underline">
+                        {phone}
+                    </a>
+                </p>
+            )}
+            {address && (
+                <p className="text-gray-700">
+                    📍 {address}
+                </p>
+            )}
+        </section>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/shared/Loader.tsx b/frontend/src/components/shared/Loader.tsx
new file mode 100644
index 0000000..6a32435
--- /dev/null
+++ b/frontend/src/components/shared/Loader.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function Loader({ label = "Loading...", className = "" }: { label?: string; className?: string }) {
+  return (
+    <div className={["flex items-center space-x-2 text-gray-600", className].filter(Boolean).join(" ")}>
+      <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+      </svg>
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+}
diff --git a/frontend/src/components/shared/QrImage.tsx b/frontend/src/components/shared/QrImage.tsx
new file mode 100644
index 0000000..7837de8
--- /dev/null
+++ b/frontend/src/components/shared/QrImage.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import React from "react";
+import QRCode from "qrcode";
+
+type Props = {
+  value: string;
+  size?: number;
+  alt?: string;
+  className?: string;
+};
+
+/**
+ * On-screen QR preview generated locally (via the `qrcode` package) instead of hitting
+ * api.qrserver.com — removes a third-party network dependency from ticket views that are
+ * viewed frequently (dashboard, event-tickets, at-the-door).
+ */
+export function QrImage({ value, size = 120, alt = "QR", className }: Props) {
+  const [dataUrl, setDataUrl] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    QRCode.toDataURL(value, { width: size, margin: 1 })
+      .then((url) => { if (!cancelled) setDataUrl(url); })
+      .catch(() => { if (!cancelled) setDataUrl(null); });
+    return () => { cancelled = true; };
+  }, [value, size]);
+
+  if (!dataUrl) return <div className={`${className || ""} bg-gray-100 animate-pulse`} aria-hidden="true" />;
+  return <img src={dataUrl} alt={alt} className={className} />;
+}
diff --git a/frontend/src/components/shared/RoleBadge.tsx b/frontend/src/components/shared/RoleBadge.tsx
new file mode 100644
index 0000000..d532a43
--- /dev/null
+++ b/frontend/src/components/shared/RoleBadge.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export type Role = "user" | "staff" | "supervisor" | "admin";
+
+export function RoleBadge({ role, className = "" }: { role: Role; className?: string }) {
+  const colors: Record<Role, string> = {
+    user: "bg-gray-100 text-gray-800",
+    staff: "bg-indigo-100 text-indigo-800",
+    supervisor: "bg-emerald-100 text-emerald-800",
+    admin: "bg-red-100 text-red-800",
+  };
+  return (
+    <span className={["inline-flex items-center rounded px-2 py-0.5 text-xs font-medium", colors[role], className]
+      .filter(Boolean)
+      .join(" ")}
+    >
+      {role}
+    </span>
+  );
+}
diff --git a/frontend/src/components/shared/SectionHeader.tsx b/frontend/src/components/shared/SectionHeader.tsx
new file mode 100644
index 0000000..077c752
--- /dev/null
+++ b/frontend/src/components/shared/SectionHeader.tsx
@@ -0,0 +1,3 @@
+export const SectionHeader = ({ title }: { title: string }) => (
+    <h2 className="text-2xl font-semibold mb-6 text-center">{title}</h2>
+);
diff --git a/frontend/src/components/shared/SetupGuard.tsx b/frontend/src/components/shared/SetupGuard.tsx
new file mode 100644
index 0000000..11472dc
--- /dev/null
+++ b/frontend/src/components/shared/SetupGuard.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+
+// Checks once per browser session whether first-time setup is needed.
+// If the backend says yes and we're not already on /setup, redirect there.
+export function SetupGuard() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const checked = useRef(false);
+
+  useEffect(() => {
+    if (checked.current) return;
+    if (pathname?.startsWith("/setup")) return;
+    checked.current = true;
+
+    apiFetch<{ needsSetup: boolean }>("/api/settings/needs-setup")
+      .then((data) => {
+        if (data?.needsSetup) {
+          router.replace("/setup");
+        }
+      })
+      .catch(() => {/* API down — don't block */});
+  }, [pathname]);
+
+  return null;
+}
\ No newline at end of file
diff --git a/frontend/src/components/shared/ToastProvider.tsx b/frontend/src/components/shared/ToastProvider.tsx
new file mode 100644
index 0000000..8adb4eb
--- /dev/null
+++ b/frontend/src/components/shared/ToastProvider.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+export type Toast = { id: string; message: string; type?: "info" | "success" | "error" };
+
+type ToastContextValue = {
+  show: (message: string, type?: Toast["type"]) => void;
+};
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const show = useCallback((message: string, type: Toast["type"] = "info") => {
+    const id = Math.random().toString(36).slice(2);
+    setToasts((t) => [...t, { id, message, type }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
+  }, []);
+
+  const value = useMemo(() => ({ show }), [show]);
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <div className="fixed inset-x-0 top-2 z-[100] flex flex-col items-center space-y-2">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={[
+              "rounded px-3 py-2 text-sm shadow",
+              t.type === "success" && "bg-green-600 text-white",
+              t.type === "error" && "bg-red-600 text-white",
+              (!t.type || t.type === "info") && "bg-gray-800 text-white",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}
diff --git a/frontend/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..24c788c
--- /dev/null
+++ b/frontend/src/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..25e7b47
--- /dev/null
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..41fa7e0
--- /dev/null
+++ b/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/frontend/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..36496a2
--- /dev/null
+++ b/frontend/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..a623682
--- /dev/null
+++ b/frontend/src/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..f62edea
--- /dev/null
+++ b/frontend/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..f38593b
--- /dev/null
+++ b/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..f753477
--- /dev/null
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
new file mode 100644
index 0000000..4f02ae6
--- /dev/null
+++ b/frontend/src/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..68551b9
--- /dev/null
+++ b/frontend/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/frontend/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/frontend/src/components/ui/navigation-menu.tsx b/frontend/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..411f519
--- /dev/null
+++ b/frontend/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/frontend/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e9bde17
--- /dev/null
+++ b/frontend/src/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..a45647c
--- /dev/null
+++ b/frontend/src/components/ui/select.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/frontend/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..a37f17b
--- /dev/null
+++ b/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..01b8b6d
--- /dev/null
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/frontend/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx
new file mode 100644
index 0000000..c31c2b3
--- /dev/null
+++ b/frontend/src/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
new file mode 100644
index 0000000..bc69cf2
--- /dev/null
+++ b/frontend/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..7f3502f
--- /dev/null
+++ b/frontend/src/components/ui/table.tsx
@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..26eb109
--- /dev/null
+++ b/frontend/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..4d858bb
--- /dev/null
+++ b/frontend/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/frontend/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
new file mode 100644
index 0000000..521b94b
--- /dev/null
+++ b/frontend/src/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/frontend/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..171beb4
--- /dev/null
+++ b/frontend/src/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..e1ae87b
--- /dev/null
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..80c8bf6
--- /dev/null
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { apiFetch, ApiError } from "@/lib/api";
+import { AuthResponse, AuthUser, clearToken, getToken, saveToken } from "@/lib/auth";
+
+export type AuthContextValue = {
+  user: AuthUser | null;
+  token: string | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<AuthUser>;
+  register: (data: { name: string; email: string; password: string; phoneNumber?: string; notificationPreference?: "email" | "whatsapp" | "both" }) => Promise<void>;
+  logout: () => void;
+  updateToken: (token: string) => void;
+};
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [token, setToken] = useState<string | null>(null);
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const t = getToken();
+        if (t) {
+          // Validate the stored token by fetching the user profile.
+          // Only update React state after a successful response so we never
+          // hold a half-initialised (token set, user null) state.
+          const me = await apiFetch<AuthUser>("/api/users/profile", { authToken: t });
+          setToken(t);
+          setUser(me);
+        }
+      } catch (e) {
+        // Only wipe the stored token when the server explicitly rejects it (401).
+        // Transient failures (network down, 5xx) should NOT log the user out — the
+        // token stays in localStorage so the next page load can retry.
+        if (e instanceof ApiError && e.status === 401) {
+          clearToken();
+          setToken(null);
+          setUser(null);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+    init();
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const res = await apiFetch<AuthResponse>("/api/users/login", {
+      method: "POST",
+      body: { email, password },
+    });
+    const { token, ...loggedInUser } = res;
+    saveToken(token);
+    setToken(token);
+    setUser(loggedInUser);
+    return loggedInUser;
+  }, []);
+
+  const register = useCallback(async (data: { name: string; email: string; password: string; phoneNumber?: string; notificationPreference?: "email" | "whatsapp" | "both" }) => {
+    const res = await apiFetch<AuthResponse>("/api/users", {
+      method: "POST",
+      body: data,
+    });
+    const { token, ...registeredUser } = res;
+    saveToken(token);
+    setToken(token);
+    setUser(registeredUser);
+  }, []);
+
+  const logout = useCallback(() => {
+    clearToken();
+    setToken(null);
+    setUser(null);
+  }, []);
+
+  // Some endpoints (profile update, password change, session revocation) issue a
+  // fresh token mid-session. Persist it AND update in-memory state so the app
+  // keeps using a valid token without requiring a page refresh.
+  const updateToken = useCallback((t: string) => {
+    saveToken(t);
+    setToken(t);
+  }, []);
+
+  const value = useMemo(
+    () => ({ user, token, loading, login, register, logout, updateToken }),
+    [loading, login, logout, register, token, updateToken, user]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuthContext() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuthContext must be used within AuthProvider");
+  return ctx;
+}
diff --git a/frontend/src/contexts/SiteSettingsContext.tsx b/frontend/src/contexts/SiteSettingsContext.tsx
new file mode 100644
index 0000000..05b1a91
--- /dev/null
+++ b/frontend/src/contexts/SiteSettingsContext.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { apiFetch } from "@/lib/api";
+
+export type SiteSettings = {
+  org_name?: string;
+  org_tagline?: string;
+  org_email?: string;
+  org_phone?: string;
+  org_address?: string;
+  accent_color?: string;
+  logo_url?: string;
+  setup_complete?: string;
+  // Legal pages
+  legal_operator_name?: string;
+  legal_io_name?: string;
+  legal_io_email?: string;
+  legal_website_url?: string;
+  legal_effective_date?: string;
+};
+
+type SiteSettingsContextValue = {
+  settings: SiteSettings;
+  loading: boolean;
+  reload: () => void;
+};
+
+const SiteSettingsContext = createContext<SiteSettingsContextValue>({
+  settings: {},
+  loading: true,
+  reload: () => {},
+});
+
+export function SiteSettingsProvider({ children }: { children: React.ReactNode }) {
+  const [settings, setSettings] = useState<SiteSettings>({});
+  const [loading, setLoading] = useState(true);
+
+  const load = async () => {
+    try {
+      const data = await apiFetch<SiteSettings>("/api/settings");
+      setSettings(data || {});
+    } catch {
+      // Non-fatal — use defaults
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(); }, []);
+
+  return (
+    <SiteSettingsContext.Provider value={{ settings, loading, reload: load }}>
+      {children}
+    </SiteSettingsContext.Provider>
+  );
+}
+
+export function useSiteSettings() {
+  return useContext(SiteSettingsContext);
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/use-toast.ts b/frontend/src/hooks/use-toast.ts
new file mode 100644
index 0000000..f771b2a
--- /dev/null
+++ b/frontend/src/hooks/use-toast.ts
@@ -0,0 +1,110 @@
+import * as React from "react"
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+// Based on shadcn/ui toast hook implementation
+export type Toast = Omit<ToastProps, "id"> & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const TOAST_LIMIT = 5
+const TOAST_REMOVE_DELAY = 1000
+
+type State = {
+  toasts: Toast[]
+}
+
+type ToastInput = Omit<Toast, "id">
+
+type Listener = (state: State) => void
+
+let count = 0
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const state: State = { toasts: [] }
+const listeners: Listener[] = []
+
+function setState(newState: Partial<State>) {
+  Object.assign(state, newState)
+  listeners.forEach((l) => l(state))
+}
+
+function addToast(toast: ToastInput) {
+  const id = genId()
+
+  const newToast: Toast = {
+    ...toast,
+    id,
+    open: true as any,
+  }
+
+  // Ensure limit
+  const nextToasts = [newToast, ...state.toasts].slice(0, TOAST_LIMIT)
+
+  setState({ toasts: nextToasts })
+
+  return id
+}
+
+function updateToast(id: string, update: Partial<Toast>) {
+  setState({
+    toasts: state.toasts.map((t) => (t.id === id ? { ...t, ...update } : t)),
+  })
+}
+
+function dismissToast(id?: string) {
+  if (id) {
+    queueRemoval(id)
+    updateToast(id, { open: false } as any)
+  } else {
+    state.toasts.forEach((t) => {
+      queueRemoval(t.id)
+      updateToast(t.id, { open: false } as any)
+    })
+  }
+}
+
+function removeToast(id?: string) {
+  if (id) {
+    setState({ toasts: state.toasts.filter((t) => t.id !== id) })
+  } else {
+    setState({ toasts: [] })
+  }
+}
+
+function queueRemoval(id: string) {
+  if (toastTimeouts.has(id)) return
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(id)
+    removeToast(id)
+  }, TOAST_REMOVE_DELAY)
+  toastTimeouts.set(id, timeout)
+}
+
+export function useToast() {
+  const [localState, setLocalState] = React.useState<State>(state)
+
+  React.useEffect(() => {
+    listeners.push(setLocalState)
+    return () => {
+      const index = listeners.indexOf(setLocalState)
+      if (index > -1) listeners.splice(index, 1)
+    }
+  }, [])
+
+  return {
+    ...localState,
+    toast: ({ ...props }: ToastInput) => addToast(props),
+    dismiss: (id?: string) => dismissToast(id),
+    remove: (id?: string) => removeToast(id),
+  }
+}
+
+export type { ToastActionElement, ToastProps }
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
new file mode 100644
index 0000000..16e72d4
--- /dev/null
+++ b/frontend/src/hooks/useAuth.ts
@@ -0,0 +1,3 @@
+"use client";
+import { useAuthContext } from "@/contexts/AuthContext";
+export const useAuth = useAuthContext;
diff --git a/frontend/src/hooks/useQRScanner.ts b/frontend/src/hooks/useQRScanner.ts
new file mode 100644
index 0000000..bb16263
--- /dev/null
+++ b/frontend/src/hooks/useQRScanner.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BrowserQRCodeReader } from "@zxing/browser";
+
+export type UseQRScannerOptions = {
+  onResult?: (text: string) => void;
+  onError?: (error: unknown) => void;
+};
+
+// Hook to decode QR codes from a HTMLVideoElement using @zxing/browser
+export function useQRScanner(videoEl: HTMLVideoElement | null, opts: UseQRScannerOptions = {}) {
+  const { onResult, onError } = opts;
+  const [active, setActive] = useState(false);
+  const [permissionError, setPermissionError] = useState<string | null>(null);
+  const readerRef = useRef<BrowserQRCodeReader | null>(null);
+  const cancelRef = useRef<(() => void) | undefined>(undefined);
+
+  const stop = useCallback(() => {
+    cancelRef.current?.();
+    cancelRef.current = undefined;
+  }, []);
+
+  const toggle = useCallback(() => setActive((p) => !p), []);
+
+  useEffect(() => {
+    readerRef.current = new BrowserQRCodeReader();
+    return () => {
+      stop();
+      readerRef.current = null;
+    };
+  }, [stop]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      setPermissionError(null);
+      try {
+        // Start decode loop
+        const reader = readerRef.current!;
+        const scan = async () => {
+          if (cancelled) return;
+          try {
+            if (!videoEl) return;
+            const result = await reader.decodeOnceFromVideoElement(videoEl);
+            const text = (result as any)?.getText ? (result as any).getText() : (result as any)?.text ?? String(result ?? "");
+            if (text) onResult?.(text);
+          } catch (err) {
+            // Ignore transient decode errors and retry
+          } finally {
+            if (!cancelled && active) setTimeout(scan, 200);
+          }
+        };
+        scan();
+
+        cancelRef.current = () => {
+          cancelled = true;
+        };
+      } catch (err: any) {
+        if (err?.name === "NotAllowedError") {
+          setPermissionError("Camera permission denied. Please enable camera access.");
+        } else if (err?.name === "NotFoundError") {
+          setPermissionError("No suitable camera found. Try a device with a back camera.");
+        } else {
+          setPermissionError("Unable to access camera.");
+        }
+        onError?.(err);
+        setActive(false);
+      }
+    }
+
+    if (active && videoEl) run();
+    else stop();
+  }, [active, onError, onResult, stop, videoEl]);
+
+  return { active, toggle, stop, permissionError };
+}
diff --git a/frontend/src/hooks/useRequireAuth.ts b/frontend/src/hooks/useRequireAuth.ts
new file mode 100644
index 0000000..d641855
--- /dev/null
+++ b/frontend/src/hooks/useRequireAuth.ts
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+
+/**
+ * Use inside any client component that requires authentication.
+ * Returns `ready: true` only once auth has resolved and the user is confirmed.
+ * While loading or unauthenticated, `ready` is false — render null to prevent flash.
+ *
+ * @example
+ * const { ready, user, token } = useRequireAuth();
+ * if (!ready) return null;
+ */
+export function useRequireAuth(redirectTo = "/login") {
+  const { user, token, loading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace(redirectTo);
+  }, [user, loading, router, redirectTo]);
+
+  const ready = !loading && !!user;
+  return { ready, user, token, loading };
+}
\ No newline at end of file
diff --git a/frontend/src/hooks/useScrollSpy.ts b/frontend/src/hooks/useScrollSpy.ts
new file mode 100644
index 0000000..f961f7f
--- /dev/null
+++ b/frontend/src/hooks/useScrollSpy.ts
@@ -0,0 +1,31 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useScrollSpy(sectionIds: string[], offset: number = 120) {
+    const [activeId, setActiveId] = useState<string>("");
+
+    useEffect(() => {
+        const handleScroll = () => {
+            const scrollPosition = window.scrollY + offset;
+
+            let currentId = "";
+            for (const id of sectionIds) {
+                const element = document.getElementById(id);
+                if (element && element.offsetTop <= scrollPosition) {
+                    currentId = id;
+                }
+            }
+            setActiveId(currentId);
+        };
+
+        window.addEventListener("scroll", handleScroll);
+        handleScroll();
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [sectionIds, offset]);
+
+    return activeId;
+}
diff --git a/frontend/src/hooks/useStableState.ts b/frontend/src/hooks/useStableState.ts
new file mode 100644
index 0000000..84a8c5c
--- /dev/null
+++ b/frontend/src/hooks/useStableState.ts
@@ -0,0 +1,21 @@
+import { useCallback, useRef, useState } from "react";
+import { jsonEqual } from "@/lib/deepEqual";
+
+/**
+ * Like useState, but the setter is a no-op (no re-render) when the new value is
+ * structurally identical to the current one. Meant for state that's refreshed by
+ * polling — background polls that return unchanged data shouldn't cause a flicker.
+ */
+export function useStableState<T>(initial: T) {
+  const [state, setState] = useState<T>(initial);
+  const ref = useRef<T>(initial);
+
+  const setIfChanged = useCallback((next: T) => {
+    if (!jsonEqual(ref.current, next)) {
+      ref.current = next;
+      setState(next);
+    }
+  }, []);
+
+  return [state, setIfChanged] as const;
+}
diff --git a/frontend/src/hooks/useVisiblePolling.ts b/frontend/src/hooks/useVisiblePolling.ts
new file mode 100644
index 0000000..2d89c9b
--- /dev/null
+++ b/frontend/src/hooks/useVisiblePolling.ts
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Runs `callback` every `intervalMs` while the tab is visible. Skips ticks while the
+ * tab is backgrounded (document.hidden) to avoid polling for no one, and fires an
+ * immediate refetch the moment the tab becomes visible again so data isn't stale on
+ * return. Does NOT call `callback` on mount — callers should do their own initial load.
+ */
+export function useVisiblePolling(callback: () => void, intervalMs: number, enabled: boolean = true) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const id = setInterval(() => {
+      if (document.hidden) return;
+      callbackRef.current();
+    }, intervalMs);
+
+    const onVisibilityChange = () => {
+      if (!document.hidden) callbackRef.current();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+
+    return () => {
+      clearInterval(id);
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [intervalMs, enabled]);
+}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..23a7c58
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,157 @@
+export type ApiOptions = {
+  method?: string;
+  headers?: Record<string, string>;
+  body?: any;
+  authToken?: string | null;
+  nextOptions?: RequestInit;
+};
+
+// Compute a robust API base that works locally, across devices, and in prod.
+// Priority: NEXT_PUBLIC_API_URL -> API_URL -> (browser) smart dev fallbacks -> (browser) window.origin -> ""
+function computeApiBase(): string {
+  const envBase = process.env.NEXT_PUBLIC_API_URL || process.env.API_URL || "";
+
+  // If running in the browser, try to adapt localhost to current hostname for LAN/mobile testing
+  if (typeof window !== "undefined") {
+    try {
+      if (envBase) {
+        const u = new URL(envBase);
+        const isLocalHost = ["localhost", "127.0.0.1", "::1"].includes(u.hostname);
+        if (isLocalHost) {
+          // Replace localhost with the actual device hostname so other devices can reach the dev machine
+          const protocol = u.protocol || window.location.protocol;
+          const hostname = window.location.hostname; // e.g., 192.168.x.x or your.dev.domain
+          const port = u.port ? `:${u.port}` : "";
+          return `${protocol}//${hostname}${port}`;
+        }
+        return u.origin;
+      }
+
+      // No env base provided — provide a sensible dev fallback
+      // If Next dev server is on 3000, assume backend on the same host port 5000
+      if (window.location.port === "3000") {
+        const protocol = window.location.protocol;
+        const hostname = window.location.hostname;
+        return `${protocol}//${hostname}:5000`;
+      }
+
+      // Otherwise, assume same origin will proxy /api (works if reverse proxy is configured)
+      return window.location.origin;
+    } catch {
+      // Fallbacks below
+    }
+  }
+
+  // On the server (or if window not available), use envBase if present; otherwise empty string.
+  return envBase || "";
+}
+
+export const API_BASE = computeApiBase();
+
+// Resolve a URL or path to use the API origin. If it's a relative path, prefix with API_BASE.
+// If it's an absolute URL but points to localhost/127.0.0.1/::1, rewrite its origin to API_BASE.
+export function resolveToApiOrigin(urlOrPath: string | null | undefined): string | null {
+  const raw = (urlOrPath || "").trim();
+  if (!raw) return null;
+  try {
+    if (raw.startsWith("http")) {
+      const u = new URL(raw);
+      const isLocal = ["localhost", "127.0.0.1", "::1"].includes(u.hostname);
+      if (isLocal && API_BASE) {
+        const api = new URL(API_BASE);
+        u.protocol = api.protocol;
+        u.hostname = api.hostname;
+        u.port = api.port;
+        return u.toString();
+      }
+      return raw; // already absolute and not localhost
+    }
+  } catch {
+    // fall through to relative handling
+  }
+  return API_BASE ? `${API_BASE}${raw}` : raw;
+}
+
+export class ApiError extends Error {
+  constructor(public readonly status: number, message: string, public readonly data?: any) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+export async function apiFetch<T = any>(path: string, options: ApiOptions = {}): Promise<T> {
+  const { method = "GET", headers = {}, body, authToken, nextOptions } = options;
+
+  const url = path.startsWith("http") ? path : `${API_BASE}${path}`;
+
+  const mergedHeaders: Record<string, string> = { ...headers };
+  if (!(body instanceof FormData)) {
+    mergedHeaders["Content-Type"] = "application/json";
+  }
+
+  if (authToken) {
+    mergedHeaders["Authorization"] = `Bearer ${authToken}`;
+  }
+
+  const res = await fetch(url, {
+    method,
+    headers: mergedHeaders as HeadersInit,
+    body: body instanceof FormData ? body : body != null ? JSON.stringify(body) : undefined,
+    ...nextOptions,
+  } as RequestInit);
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    let message = text || `Request failed with status ${res.status}`;
+    let data: any;
+    // Backend returns { message: "..." } — extract it so callers get a plain string
+    try {
+      const json = JSON.parse(text);
+      if (json?.message && typeof json.message === "string") message = json.message;
+      data = json;
+    } catch { /* not JSON — use raw text */ }
+    throw new ApiError(res.status, message, data);
+  }
+  const contentType = res.headers.get("content-type") || "";
+  if (contentType.includes("application/json")) {
+    return res.json();
+  }
+  // @ts-ignore
+  return res.text();
+}
+
+// Several list endpoints (/api/users, /api/payments) are paginated and cap
+// `limit` at 200 server-side, so a single request can silently miss records
+// beyond the first page. This walks every page and returns the full list.
+async function fetchAllPages(path: string, token: string, params: Record<string, string> = {}): Promise<any[]> {
+  const query = new URLSearchParams({ ...params, limit: "200", page: "1" });
+  const first = await apiFetch<any>(`${path}?${query.toString()}`, { authToken: token });
+  const items: any[] = Array.isArray(first?.data) ? first.data : [];
+  const pages = first?.pages || 1;
+
+  if (pages > 1) {
+    // Page 1 told us the total page count — fetch the rest concurrently instead of
+    // awaiting them one at a time. This function is called on every dashboard poll
+    // (see useVisiblePolling usages), so a serial loop here directly slows those polls.
+    const remaining = await Promise.all(
+      Array.from({ length: pages - 1 }, (_, i) => {
+        const page = i + 2;
+        const pageQuery = new URLSearchParams({ ...params, limit: "200", page: String(page) });
+        return apiFetch<any>(`${path}?${pageQuery.toString()}`, { authToken: token });
+      })
+    );
+    for (const res of remaining) {
+      if (Array.isArray(res?.data)) items.push(...res.data);
+    }
+  }
+
+  return items;
+}
+
+export function fetchAllUsers(token: string, params: Record<string, string> = {}): Promise<any[]> {
+  return fetchAllPages("/api/users", token, params);
+}
+
+export function fetchAllPayments(token: string, params: Record<string, string> = {}): Promise<any[]> {
+  return fetchAllPages("/api/payments", token, params);
+}
diff --git a/frontend/src/lib/auth.ts b/frontend/src/lib/auth.ts
new file mode 100644
index 0000000..416f2cb
--- /dev/null
+++ b/frontend/src/lib/auth.ts
@@ -0,0 +1,25 @@
+export type AuthUser = {
+  id: string;
+  name: string;
+  email: string;
+  role?: "admin" | "supervisor" | "staff" | "user";
+  phoneNumber?: string | null;
+  notificationPreference?: "email" | "whatsapp" | "both";
+};
+
+export type AuthResponse = AuthUser & {
+  token: string;
+};
+
+const TOKEN_KEY = "hope_events_token";
+
+export function saveToken(token: string) {
+  if (typeof window !== "undefined") localStorage.setItem(TOKEN_KEY, token);
+}
+export function getToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(TOKEN_KEY);
+}
+export function clearToken() {
+  if (typeof window !== "undefined") localStorage.removeItem(TOKEN_KEY);
+}
diff --git a/frontend/src/lib/date.ts b/frontend/src/lib/date.ts
new file mode 100644
index 0000000..6da52c8
--- /dev/null
+++ b/frontend/src/lib/date.ts
@@ -0,0 +1,37 @@
+export function formatDate(input: string | number | Date | null | undefined): string {
+  if (input == null) return "";
+  const d = new Date(input);
+  if (isNaN(d.getTime())) return "";
+  // Use en-GB to ensure day-month-year with full month name, e.g., 20 March 2025
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+  }).format(d);
+}
+
+export function formatDateTime(input: string | number | Date | null | undefined): string {
+  if (input == null) return "";
+  const d = new Date(input);
+  if (isNaN(d.getTime())) return "";
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(d);
+}
+
+export function formatDateTimeRange(
+  start: string | number | Date | null | undefined,
+  end: string | number | Date | null | undefined
+): string {
+  const startStr = formatDateTime(start);
+  const endStr = formatDateTime(end);
+  if (startStr && endStr) return `${startStr} — ${endStr}`;
+  if (startStr) return startStr;
+  if (endStr) return endStr;
+  return "";
+}
diff --git a/frontend/src/lib/deepEqual.ts b/frontend/src/lib/deepEqual.ts
new file mode 100644
index 0000000..0d848ef
--- /dev/null
+++ b/frontend/src/lib/deepEqual.ts
@@ -0,0 +1,9 @@
+// Cheap structural equality for small JSON-shaped payloads (dashboard stats, not large lists).
+export function jsonEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
diff --git a/frontend/src/lib/export.ts b/frontend/src/lib/export.ts
new file mode 100644
index 0000000..c6c3dea
--- /dev/null
+++ b/frontend/src/lib/export.ts
@@ -0,0 +1,113 @@
+export type TableRow = Record<string, any>;
+
+export function downloadCsv(filename: string, rows: TableRow[], columns?: { key: string; label?: string }[]) {
+  const cols = columns && columns.length > 0 ? columns : Object.keys(rows[0] || {}).map(k => ({ key: k, label: k }));
+  const header = cols.map(c => escapeCsv(c.label || c.key)).join(',');
+  const lines = rows.map(r => cols.map(c => escapeCsv(valueToString(r[c.key]))).join(','));
+  const csv = [header, ...lines].join('\r\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = ensureCsvExt(filename);
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 2000);
+}
+
+function ensureCsvExt(name: string) {
+  return name.toLowerCase().endsWith('.csv') ? name : name + '.csv';
+}
+
+function escapeCsv(v: string) {
+  if (v == null) return '';
+  if (/[",\n]/.test(v)) return '"' + v.replace(/"/g, '""') + '"';
+  return v;
+}
+
+function valueToString(v: any): string {
+  if (v == null) return '';
+  if (v instanceof Date) return v.toISOString();
+  if (typeof v === 'object') return JSON.stringify(v);
+  return String(v);
+}
+
+// New: server-side PDF generation and email helpers
+export type ReportPdfPayload = {
+  title: string;
+  kind: 'table' | 'layered';
+  orientation?: 'portrait' | 'landscape';
+  table?: { columns: string[]; rows: (string | number)[][] };
+  layered?: { header?: string; sections: { title: string; items: string[] }[] };
+};
+
+export async function downloadReportPdf(apiBase: string, authToken: string, payload: ReportPdfPayload) {
+  const url = `${apiBase}/api/reports/pdf`;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${authToken}`
+    },
+    body: JSON.stringify(payload)
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(text || `Failed to generate PDF (${res.status})`);
+  }
+  const blob = await res.blob();
+  const dl = document.createElement('a');
+  const objUrl = URL.createObjectURL(blob);
+  dl.href = objUrl;
+  const safe = (payload.title || 'report').replace(/[^a-z0-9]/gi, '_').toLowerCase();
+  dl.download = `${safe}.pdf`;
+  dl.click();
+  setTimeout(() => URL.revokeObjectURL(objUrl), 2000);
+}
+
+export async function emailReportPdf(apiBase: string, authToken: string, payload: ReportPdfPayload & { subject?: string; body?: string }) {
+  const url = `${apiBase}/api/reports/email`;
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${authToken}`
+    },
+    body: JSON.stringify(payload)
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(text || `Failed to email PDF (${res.status})`);
+  }
+  return res.json();
+}
+
+// Legacy (used elsewhere). Kept in case other code paths still rely on print flow.
+export function openPrintWindow(title: string, htmlContent: string) {
+  const w = window.open('', '_blank');
+  if (!w) return;
+  w.document.write(`<!doctype html><html><head><title>${title}</title>
+    <style>
+      @page { size: A4; margin: 12mm; }
+      html, body { height: auto; }
+      body{font-family: Arial, Helvetica, sans-serif; padding:16px}
+      table{border-collapse: collapse; width: 100%;}
+      th, td{border:1px solid #e5e7eb; padding:6px 8px; font-size:12px;}
+      th{background:#f3f4f6; text-align:left}
+      h2{margin:0 0 12px 0}
+      .note{color:#6b7280; font-size:12px; margin-bottom:8px}
+      *{ box-sizing: border-box; }
+      .section{ page-break-inside: avoid; margin-bottom: 10px; }
+      @media print{ .no-print{ display:none !important } }
+    </style>
+  </head><body>
+    <h2>${title}</h2>
+    ${htmlContent}
+  </body></html>`);
+  w.document.close();
+  w.focus();
+}
+
+export function mailtoReport(subject: string, body: string) {
+  const url = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  window.location.href = url;
+}
diff --git a/frontend/src/lib/fuzzyMatch.ts b/frontend/src/lib/fuzzyMatch.ts
new file mode 100644
index 0000000..4dcb211
--- /dev/null
+++ b/frontend/src/lib/fuzzyMatch.ts
@@ -0,0 +1,51 @@
+/** Levenshtein edit distance between two strings */
+export function editDistance(a: string, b: string): number {
+  const m = a.length, n = b.length;
+  const dp: number[] = Array(n + 1).fill(0).map((_, j) => j);
+  for (let i = 1; i <= m; i++) {
+    let prev = dp[0];
+    dp[0] = i;
+    for (let j = 1; j <= n; j++) {
+      const temp = dp[j];
+      dp[j] = a[i - 1] === b[j - 1] ? prev : 1 + Math.min(prev, dp[j], dp[j - 1]);
+      prev = temp;
+    }
+  }
+  return dp[n];
+}
+
+/** Return a score 0–1 for how well a user matches a search query */
+export function scoreUser(u: any, raw: string): number {
+  const q = raw.toLowerCase().trim();
+  if (!q || q.length < 2) return 0;
+
+  const name  = (u.name  || "").toLowerCase();
+  const email = (u.email || "").toLowerCase();
+  const phone = (u.phoneNumber || "").replace(/\D/g, "");
+  const qPhone = q.replace(/\D/g, "");
+
+  let best = 0;
+
+  // Exact substring matches — highest priority
+  if (name.includes(q))  best = Math.max(best, 1.0);
+  if (email.includes(q)) best = Math.max(best, 0.95);
+  if (qPhone.length >= 3 && phone.includes(qPhone)) best = Math.max(best, 0.95);
+
+  // Word-level starts-with (handles partial first/last name)
+  const words = name.split(/\s+/);
+  if (words.some((w: string) => w.startsWith(q))) best = Math.max(best, 0.85);
+
+  // Fuzzy edit-distance against each name word
+  const maxDist = q.length <= 4 ? 1 : q.length <= 7 ? 2 : 3;
+  for (const w of words) {
+    const slice = w.slice(0, q.length + 2); // compare against similar-length slice
+    const d = editDistance(q, slice);
+    if (d <= maxDist) best = Math.max(best, 0.75 - d * 0.15);
+  }
+  // Also fuzzy against the full name (catches "jhn smth" → "john smith")
+  const nameSlice = name.slice(0, q.length + 4);
+  const fullDist = editDistance(q, nameSlice);
+  if (fullDist <= maxDist + 1) best = Math.max(best, 0.6 - fullDist * 0.12);
+
+  return best;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/phone.ts b/frontend/src/lib/phone.ts
new file mode 100644
index 0000000..2148820
--- /dev/null
+++ b/frontend/src/lib/phone.ts
@@ -0,0 +1,22 @@
+/**
+ * South African phone number utilities (mirrors backend/src/utils/whatsapp.js logic).
+ */
+
+/**
+ * Normalise a raw phone input to the international SA format (27XXXXXXXXX).
+ * Returns null if the input is not a valid SA mobile number.
+ */
+export function normalizeZAPhone(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  let digits = raw.replace(/\D/g, '');
+  if (digits.startsWith('0') && digits.length === 10) digits = '27' + digits.slice(1);
+  if (/^27\d{9}$/.test(digits)) return digits;
+  return null;
+}
+
+/**
+ * Returns true when the value is a valid SA mobile number (any common format).
+ */
+export function isValidZAPhone(raw: string | null | undefined): boolean {
+  return normalizeZAPhone(raw) !== null;
+}
diff --git a/frontend/src/lib/siteConfig.ts b/frontend/src/lib/siteConfig.ts
new file mode 100644
index 0000000..7788a33
--- /dev/null
+++ b/frontend/src/lib/siteConfig.ts
@@ -0,0 +1,9 @@
+/**
+ * Site-wide configuration sourced from environment variables.
+ * Set these in your .env file (NEXT_PUBLIC_ prefix required for browser access).
+ */
+export const appName      = process.env.NEXT_PUBLIC_APP_NAME      || 'Hope Events';
+export const orgName      = process.env.NEXT_PUBLIC_ORG_NAME      || 'Hope Family Church';
+export const contactEmail = process.env.NEXT_PUBLIC_CONTACT_EMAIL || 'admin@hopehenley.co.za';
+export const appUrl       = process.env.NEXT_PUBLIC_APP_URL       || 'https://events.hopehenley.co.za';
+export const brandColor   = process.env.NEXT_PUBLIC_BRAND_COLOR   || '#2563eb';
\ No newline at end of file
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..b2f4c37
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,27 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+import { format, isValid } from "date-fns"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(date: Date): string {
+  if (!isValid(date)) {
+    return "Invalid date"
+  }
+  return format(date, "MMMM d, yyyy")
+}
+
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat("en-ZA", {
+    style: "currency",
+    currency: "ZAR",
+    minimumFractionDigits: 2,
+  }).format(amount)
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text
+  return `${text.slice(0, maxLength)}...`
+}
diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts
new file mode 100644
index 0000000..d6612a6
--- /dev/null
+++ b/frontend/src/middleware.ts
@@ -0,0 +1,6 @@
+import { NextResponse, NextRequest } from "next/server";
+
+// Minimal pass-through middleware to satisfy Next.js requirements
+export function middleware(_req: NextRequest) {
+  return NextResponse.next();
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..d0252f9
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1,187 @@
+export type Role = "user" | "staff" | "supervisor" | "admin";
+
+export type AuthUser = {
+  id: string;
+  name: string;
+  email: string;
+  role: Role;
+  phoneNumber?: string;
+  isActive?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type AuthResponse = {
+  token: string;
+  user: AuthUser;
+};
+
+export type EventOption = {
+  id: string;
+  name: string;
+  price: number;
+  isMainTicket?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type Event = {
+  id: string;
+  title: string;
+  description?: string;
+  startDate: string;
+  endDate: string;
+  registrationDeadline?: string | null;
+  goLiveAt?: string;
+  price: number;
+  picture?: string;
+  isActive?: boolean;
+  options?: EventOption[];
+  createdAt?: string;
+  updatedAt?: string;
+  cashupStatus?: "open" | "closed";
+  closedAt?: string | null;
+  closedById?: string | null;
+  reopenedAt?: string | null;
+  reopenedById?: string | null;
+};
+
+export type EventCostType = "once_off" | "per_item";
+export type CashupMethod = "cash" | "card" | "eft" | "other";
+
+export type EventCost = {
+  id: string;
+  eventId: string;
+  eventOptionId?: string | null;
+  eventOption?: Pick<EventOption, "id" | "name"> | null;
+  label: string;
+  costType: EventCostType;
+  amount: number;
+  paidFromMethod?: CashupMethod | null;
+  total?: number;
+  notes?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
+};
+
+export type EventCashupDenomination = {
+  id: string;
+  lineId: string;
+  value: number;
+  count: number;
+};
+
+export type EventCashupLine = {
+  id: string;
+  cashupId: string;
+  method: CashupMethod;
+  expectedAmount: number;
+  actualAmount?: number | null;
+  variance?: number | null;
+  notes?: string | null;
+  denominations?: EventCashupDenomination[];
+};
+
+export type CashupAction = "closed" | "quick_closed" | "reopened";
+
+export type EventCashup = {
+  id: string;
+  eventId: string;
+  action: CashupAction;
+  unallocatedDonationsTotal: number;
+  totalCosts: number;
+  totalExpectedRevenue: number;
+  totalActualRevenue?: number | null;
+  notes?: string | null;
+  performedById?: string | null;
+  performedBy?: { id: string; name: string; email: string } | null;
+  createdAt: string;
+  lines?: EventCashupLine[];
+  event?: Pick<Event, "id" | "title">;
+};
+
+export type ReconciledByMethod = {
+  expected: number;
+  actual: number | null;
+  variance: number | null;
+  notes?: string | null;
+  denominations: EventCashupDenomination[];
+};
+
+export type ReconciledSnapshot = {
+  id: string;
+  action: CashupAction;
+  createdAt: string;
+  performedBy?: { id: string; name: string; email: string } | null;
+  notes?: string | null;
+  byMethod: Record<CashupMethod, ReconciledByMethod>;
+};
+
+export type SalesByOption = {
+  eventOptionId: string;
+  name: string;
+  quantitySold: number;
+  revenue: number;
+};
+
+export type EventFinancials = {
+  event: Pick<Event, "id" | "title" | "cashupStatus" | "closedAt" | "closedById" | "reopenedAt" | "reopenedById"> & { cashupDraft?: any };
+  paymentsByMethod: Record<CashupMethod, number>;
+  totalRevenue: number;
+  costs: EventCost[];
+  costsByMethod: Record<CashupMethod, number>;
+  untaggedCostsTotal: number;
+  totalCosts: number;
+  expectedCashByMethod: Record<CashupMethod, number>;
+  reconciled: ReconciledSnapshot | null;
+  effectiveGrossIncomeByMethod: Record<CashupMethod, number>;
+  effectiveTotalRevenue: number;
+  netProfit: number;
+  unallocatedDonations: Payment[];
+  unallocatedDonationsTotal: number;
+  totalDonations: number;
+  salesByOption: SalesByOption[];
+  history: EventCashup[];
+};
+
+export type RegistrationItem = {
+  id?: string;
+  eventOptionId: string;
+  quantity: number;
+};
+
+export type Registration = {
+  id: string;
+  userId: string;
+  eventId: string;
+  status: "pending" | "paid" | string;
+  createdAt?: string;
+  updatedAt?: string;
+  event?: Pick<Event, "id" | "title" | "price">;
+  options?: RegistrationItem[];
+};
+
+export type Ticket = {
+  id: string;
+  qrCode: string;
+  registrationOptionId?: string;
+  userId: string;
+  eventId: string;
+  isUsed: boolean;
+  emailSent: boolean;
+  createdAt: string;
+  updatedAt: string;
+  event?: Pick<Event, "id" | "title">;
+};
+
+export type Payment = {
+  id: string;
+  amount: number;
+  method: string;
+  userId: string;
+  registrationId?: string;
+  eventId?: string;
+  isDonation?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..562ffc3
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+	content: [
+		"./src/**/*.{js,ts,jsx,tsx}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..c133409
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/info.md b/info.md
new file mode 100644
index 0000000..0c763e5
--- /dev/null
+++ b/info.md
@@ -0,0 +1,81 @@
+# Hope Events — Event Management Platform for Churches
+
+## What is it?
+
+Hope Events is a complete event management platform built specifically for churches and faith-based organisations. It handles everything from advertising upcoming events and taking online registrations to collecting payments, generating QR-coded tickets, and checking people in at the door.
+
+---
+
+## What does it do?
+
+### For your congregation
+
+- **Browse events** — a clean, mobile-friendly listing of upcoming events with photos, descriptions, and dates. Events that are fully booked display a "Sold Out" badge so attendees know at a glance.
+- **Register online** — simple registration flow with support for multiple ticket types (e.g. adult, child, family) at different prices, including early-bird pricing and low-stock warnings.
+- **Pay online** — secure card payments via Yoco. Outstanding balances can be settled any time.
+- **Receive tickets** — QR-coded tickets are emailed automatically after payment. Attendees can also retrieve their tickets via a self-service portal using just their email address.
+- **Registration forms** — events can include custom forms (dietary requirements, T-shirt sizes, emergency contacts, etc.) completed at registration time.
+- **Downloads** — events can include downloadable attachments (maps, schedules, waiver forms, etc.) visible on the event detail page.
+
+### For staff on the day
+
+- **QR code scanner** — check people in by scanning their ticket QR code. Works in any mobile browser — no app to install.
+- **At-the-door panel** — search by name, phone, or ticket ID; mark people in; print or resend individual tickets on the spot.
+
+### For event organisers (supervisors)
+
+- **Event management** — create and manage events with photos, pricing, early-bird tiers, and registration deadlines.
+- **Ticket types** — flexible options (e.g. Adult, Child, VIP, Dinner) each with their own price.
+- **Payments** — view all payments, record cash or EFT manually, and issue adjustments.
+- **Bulk messaging** — send emails or WhatsApp messages to event attendees. Schedule reminders, thank-you messages, or general broadcasts.
+- **Forms** — view, filter, and print attendee form responses.
+- **Reports** — download attendance and payment reports.
+
+### For administrators
+
+- **User management** — manage accounts and roles (user, staff, supervisor, admin).
+- **Registrations** — a complete overview of all registrations across all events.
+- **Site settings** — update the organisation name, logo, brand colour, and notification preferences directly from the admin panel — no technical knowledge required.
+
+---
+
+## Pricing
+
+Hope Events is offered as a **hosted service**. You don't need to worry about servers, databases, or software updates — we handle everything.
+
+| Plan | Details |
+|------|---------|
+| Monthly subscription | Fixed monthly fee, billed in advance |
+| Annual subscription | Annual fee, billed in advance (discounted vs monthly) |
+
+Pricing is quoted per organisation based on expected usage. Contact us for a quote.
+
+> Online payment processing fees (charged by Yoco directly to your merchant account) are separate and not included in the subscription.
+
+---
+
+## Getting started
+
+1. **Get a quote** — contact us and we'll provide pricing for your organisation.
+2. **We set it up** — once you're onboarded, we deploy and configure the platform for you. You'll receive a link to your site.
+3. **First login** — a setup wizard walks you through entering your organisation details and creating your admin account. No technical steps required.
+4. **You're live** — start creating events and inviting attendees.
+
+---
+
+## Support and changes
+
+- **Hosting and maintenance** are included in your subscription. We keep the platform running, up to date, and backed up.
+- **Basic support** — we'll assist with your site link and answer general questions at no additional charge.
+- **Development requests** — custom features or changes can be requested at any time. These are quoted upfront and billed before development begins.
+- **Suggestions** — feature suggestions are always welcome and considered for inclusion in future updates, subject to our approval.
+
+---
+
+## Payment processing
+
+The platform integrates with **Yoco** — a South African payment gateway that supports all major credit and debit cards. You will need your own Yoco merchant account to accept payments. Yoco's standard transaction fee applies (currently 2.95% per transaction); this goes directly to Yoco and is not part of our subscription.
+
+---
+
+*Built for Hope Family Church, Henley-on-Klip. Available to other churches and faith-based organisations.*
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3ae06f2
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1236 @@
+{
+  "name": "hope-events",
+  "version": "1.2",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hope-events",
+      "version": "1.2",
+      "license": "ISC",
+      "dependencies": {
+        "express-rate-limit": "^8.3.1"
+      },
+      "devDependencies": {
+        "concurrently": "^9.2.1"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.2.1.tgz",
+      "integrity": "sha512-fsfrO0MxV64Znoy8/l1vVIjjHa29SZyyqPgQBwhiDcaW8wJc2W3XWVOGx4M3oJBnv/zdUZIIp1gDeS98GzP8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "4.1.2",
+        "rxjs": "7.8.2",
+        "shell-quote": "1.8.3",
+        "supports-color": "8.1.1",
+        "tree-kill": "1.2.2",
+        "yargs": "17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.3.1.tgz",
+      "integrity": "sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==",
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.1.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "peer": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..127c841
--- /dev/null
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "hope-events",
+  "version": "1.0",
+  "main": "index.js",
+  "scripts": {
+    "dev:backend": "cd backend && npm run dev",
+    "dev:frontend": "cd frontend && npm run dev",
+    "start:backend": "cd backend && npm run start",
+    "start:frontend": "cd frontend && npm run start",
+    "start": "concurrently \"npm run start:backend\" \"npm run start:frontend\"",
+    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "concurrently": "^9.2.1"
+  },
+  "dependencies": {
+    "express-rate-limit": "^8.3.1"
+  }
+}